前端基础面试题大全-极乐科技（三）-argularJS+其他前端

最新推荐文章于 2024-05-13 01:14:38 发布

APPx应用魔方

最新推荐文章于 2024-05-13 01:14:38 发布

阅读量921

点赞数

分类专栏：技术文章标签： argularJS jquery

本文为APPx应用魔方(APPx.dreawer.com)整理发布，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_38530880/article/details/77045324

版权

技术专栏收录该内容

27 篇文章 0 订阅

订阅专栏

argularJS

1.jquery和 angularjs 的区别？

jQuery在DOM上做得很好，可以根据用户交互，添加修改DOM元素。AngularJS更关注数据展示本身，更新时会尽可能减少对DOM的破坏和重构。AngularJS中很多特点的设计都是出于提高开发者效率的目的。当一个项目的重点是数据展示和执行，而不是分析，此时可能AngularJS就会更胜一筹。

2.ng的三种服务?哪个服务可以在config中进行调用？

Provider factory service
Provider

3.angular一些优化手段

DOM树要小，DOM的访问要尽可能的少。尽量避免使用过滤器。当使用ng-repeat时要尽量避免对全局列表的刷新。尽量减少绑定。把变量作用范围限制地越紧密越好，这样垃圾回收器就可以更快地回收空间

4.ng中如何进行项目结构的

将相同的数据功能单独的创建一个文件进行管理维护，方便调用。进行分层开发，分为controller控制层，filter过滤层，service服务层

5.ng指令中 resctrict 是什么意思？EACM

生效指令
E:元素 A：属性 C：class M：注释

6.ng指令中 scope ? true|false|{} ?分别代表什么意思?

不设置scope情况下，link中scope与容器controller公用一块scope
Scope设置为true的情况下，继承容器的作用域，创建自己的作用域
Scope设置为false，link中scope与容器controller公用一块scope
Scope设置为{}，继承controller容器scope作用域，但是会生成一块独立的作用域空间，不会自动调用父scope的变量或方法

7.ng指令中 transclude 意义?

是否对指令内部包含的内容进行保存配合ng-transclude使用

8.MVC?MVVM?

MVC :M是指数据模型，V是指用户界面，C则是控制器。使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新。
MVVM(Model View ViewModel) :是一种基于MVC和MVP的架构模式，它试图将用户界面（UI）从业务逻辑和行为中更加清晰地分离出来。为了这个目的，很多例子使用声明变量绑定来把View层的工作从其他层分离出来。

9.angular版本?怎么去兼容 ie8？ng中数据一般放在哪里?

目前我们使用的是angularJS 1.5版本，如何去兼容IE8？
ng中数据一般放在控制层。

10.ng的三种服务?区别?

Provider:执行 $get方法，可以在ng的config配置方法中定义变量和参数； Factory：对$ get进行封装，执行一个函数，返回一个对象；
Service：返回一个构造函数，在注入时进行实例化；

11.ng编程时，你们的项目结构是什么样的 ?分别有什么特点 ?

分为控制层、过滤层、服务层
控制层：主要处理数据传输，页面渲染，数据绑定
过滤层：对数据进行过滤
服务层：ajax

12.ng-if 跟 ng-show/hide 的区别有哪些？

(1) ng-if 在后面表达式为 true 的时候才创建这个 dom 节点，ng-show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。
(2) ng-if 会（隐式地）产生新作用域，ng-switch 、 ng-include 等会动态创建一块界面的也是如此。
这样会导致，在 ng-if 中用基本变量绑定 ng-model，并在外层 div 中把此 model 绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。

<p>{{name}}</p> 
<div ng-if="true"> 
        <input type="text" ng-model="name"> 
</div>

ng-show 不存在此问题，因为它不自带一级作用域。
避免这类问题出现的办法是，始终将页面中的元素绑定到对象的属性（data.x）而不是直接绑定到基本变量（x）上。

13.ng-repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？

会提示 Duplicates in a repeater are not allowed.
加 track by $index 可解决。当然，也可以 trace by 任何一个普通的值，只要能唯一性标识数组中的每一项即可（建立 dom 和数据之间的关联）。

14.ng-click 中写的表达式，能使用 JS 原生对象上的方法吗？

不止是 ng-click 中的表达式，只要是在页面中，都不能直接调用原生的 JS 方法，因为这些并不存在于与页面对应的 Controller 的 $scope 中。

15.factory、service 和 provider 是什么关系？

共同点：都属于单例模式
Factory:把 service 的方法和数据放在一个对象里，并返回这个对象
Service:通过构造函数方式创建 service，返回一个实例化对象
Provider:创建一个可通过 config 配置的 service， $get 中返回的，就是用 factory 创建 service 的内容从底层实现上来看，service 调用了 factory，返回其实例；factory 调用了 provider，返回其$ get 中定义的内容。factory 和 service 功能类似，只不过 factory 是普通 function，可以返回任何东西（return 的都可以被访问，所以那些私有变量怎么写，你懂的）；service 是构造器，可以不返回（绑定到 this 的都可以被访问）；provider 是加强版 factory，返回一个可配置的 factory。

16.angular 的数据绑定采用什么机制？详述原理

脏检查机制。
双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这需要一个监控。
原理就是，Angular 在 scope 模型上设置了一个监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条$ watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时， $digest 循环就会触发，遍历所有的$ watch，最后更新 dom。

17.如何在平级界面模块间进行通信

有两种方法，一种是共用服务，一种是基于事件。
共用服务:
在 Angular 中，通过 factory 可以生成一个单例对象，在需要通信的模块 a 和 b 中注入这个对象即可。
基于事件:
这个又分两种方式
第一种是借助父 controller。在子 controller 中向父 controller 触发（ $emit）一个事件，然后在父 controller 中监听（$ on）事件，再广播（ $broadcast）给子 controller ，这样通过事件携带的参数，实现了数据经过父 controller，在同级 controller 之间传播。第二种是借助$ rootScope。每个 Angular 应用默认有一个根作用域 $rootScope，根作用域位于最顶层，从它往下挂着各级作用域。所以，如果子控制器直接使用$ rootScope 广播和接收事件，那么就可实现同级之间的通信。

18.一个 angular 应用应当如何良好地分层？

(1) 目录结构的划分
对于小型项目，可以按照文件类型组织
但是对于规模较大的项目，最好按业务模块划分
(2)逻辑代码的拆分
作为一个 MVVM 框架，Angular 应用本身就应该按照模型，视图模型（控制器），视图来划分。
这里逻辑代码的拆分，主要是指尽量让 controller 这一层很薄。提取共用的逻辑到 service 中（比如后台数据的请求，数据的共享和缓存，基于事件的模块间通信等），提取共用的界面操作到 directive 中（比如将日期选择、分页等封装成组件等），提取共用的格式化操作到 filter 中等等。
在复杂的应用中，也可以为实体建立对应的构造函数，比如硬盘（Disk）模块，可能有列表、新建、详情这样几个视图，并分别对应的有 controller，那么可以建一个 Disk 构造函数，里面完成数据的增删改查和验证操作，有跟 Disk 相关的 controller，就注入 Disk 构造器并生成一个实例，这个实例就具备了增删改查和验证方法。这样既层次分明，又实现了复用（让 controller 层更薄了）。

19.angular 应用常用哪些路由库，各自的区别是什么？

Angular1.x 中常用 ngRoute 和 ui.router，还有一种为 Angular2 设计的 new router（面向组件）。
无论是 ngRoute 还是 ui.router，作为框架额外的附加功能，都必须以模块依赖的形式被引入。
区别:
ngRoute 模块是 Angular 自带的路由模块，而 ui.router 模块是基于 ngRoute模块开发的第三方模块。
ui.router 是基于 state （状态）的， ngRoute 是基于 url 的，ui.router模块具有更强大的功能，主要体现在视图的嵌套方面。
使用 ui.router 能够定义有明确父子关系的路由，并通过 ui-view 指令将子路由模版插入到父路由模板的

中去，从而实现视图嵌套。而在 ngRoute 中不能这样定义，如果同时在父子视图中使用了

会陷入死循环。

20.如果通过angular的directive规划一套全组件化体系，可能遇到哪些挑战？

组件如何与外界进行数据的交互，以及如何通过简单的配置就能使用

21.分属不同团队进行开发的 angular 应用，如果要做整合，可能会遇到哪些问题，如何解决？

可能会遇到不同模块之间的冲突。
比如一个团队所有的开发在 moduleA 下进行，另一团队开发的代码在 moduleB 下，会导致两个 module 下面的 serviceA 发生了覆盖。
在 Angular1.x 中并没有很好的解决办法，所以最好在前期进行统一规划，做好约定，严格按照约定开发，每个开发人员只写特定区块代码。

22.angular 的缺点有哪些？

（1）强约束
导致学习成本较高，对前端不友好。但遵守 AngularJS 的约定时，生产力会很高，对 Java 程序员友好。
（2）不利于 SEO
因为所有内容都是动态获取并渲染生成的，搜索引擎没法爬取。
一种解决办法是，对于正常用户的访问，服务器响应 AngularJS 应用的内容；对于搜索引擎的访问，则响应专门针对 SEO 的HTML页面。
（3）性能问题
作为 MVVM 框架，因为实现了数据的双向绑定，对于大数组、复杂对象会存在性能问题。

23.优化 Angular 应用的性能的办法？

（1）减少监控项，即减少watcher数量（比如对不会变化的数据采用单向绑定）
（2）主动设置索引（指定 track by，简单类型默认用自身当索引，对象默认使用 $$hashKey，比如改为 track by item.id）
（3）降低渲染数据量（比如分页，或者每次取一小部分数据，根据需要再取）
（4）数据扁平化（比如对于树状结构，使用扁平化结构，构建一个 map 和树状数据，对树操作时，由于跟扁平数据同一引用，树状数据变更会同步到原始的扁平数据）

24.如何看待 angular 1.2 中引入的 controller as 语法？

最根本的好处
在 angular 1.2 以前，在 view 上的任何绑定都是直接绑定在 $scope 上的，使用 controllerAs，不需要再注入$ scope，controller 变成了一个很简单的 javascript 对象（POJO），一个更纯粹的 ViewModel。

25.详述 angular 的 “依赖注入”

依赖注入是一种软件设计模式，目的是处理代码之间的依赖关系，减少组件间的耦合。
原理：
AngularJS 是通过构造函数的参数名字来推断依赖服务名称的，通过 toString() 来找到这个定义的 function 对应的字符串，然后用正则解析出其中的参数（依赖项），再去依赖映射中取到对应的依赖，实例化之后传入。
通常会使用下面两种方式注入依赖（对依赖添加的顺序有要求）。
（1）数组注释法
（2）显式 $inject

26.如何看待angular2？

（1）相比 Angular1.x，Angular2的改动很大，几乎算是一个全新的框架。
（2）基于 TypeScript（可以使用 TypeScript 进行开发），在大型项目团队协作时，强语言类型更有利。
（3）组件化，提升开发和维护的效率。
（4）还有 module 支持动态加载，new router，promise的原生支持等等。
（5）迎合未来标准，吸纳其他框架的优点，值得期待，不过同时要学习的东西也更多了（ES next、TS、Rx等）。

27.表达式 {{yourModel}}是如何工作的？

它依赖于 $interpolation服务，在初始化页面html后，它会找到这些表达式，并且进行标记，于是每遇见一个{{}}，则会设置一个$ watch。而 $interpolation会返回一个带有上下文参数的函数，最后该函数执行，则算是表达式$ parse到那个作用域上。

28.Angular中的digest周期是什么？

每个digest周期中，angular总会对比scope上model的值，一般digest周期都是自动触发的，我们也可以使用$apply进行手动触发。

29.如何取消 $timeout, 以及停止一个$ watch()?

（1）停止 $timeout我们可以用cancel：

var customTimeout = $timeout(function () { 
// your code
}, 1000); 
$timeout.cancel(customTimeout);
停掉一个$watch：
// .$watch() 会返回一个停止注册的函数
var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty', function (newVal) { 
if (newVal) {
  // we invoke that deregistration function, to disable the watch
  deregisterWatchFn();
  ...
}
});

30.列出至少三种实现不同模块之间通信方式？

1、Service
2、events,指定绑定的事件
3、使用 $rootScope 4、controller之间直接使用$ parent, $$childHead等
5、directive 指定属性进行数据绑定

31.解释下什么是 $rootScrope以及和$ scope的区别？

通俗的说 $rootScrope 是页面所有$ scope的父亲。
step1:Angular解析ng-app然后在内存中创建 $rootScope。 step2:angular回继续解析，找到{{}}表达式，并解析成变量。 step3:接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$ scope对象实例。

其它

1.restful规范

认为一切接口都是资源，每个资源和每个资源都可以通过一定的关系进行连接或管理。
rest 对接口进行简单的规范定义，即post，delete,put/patch,get

2、react？

提供虚拟dom节点

3、webpack，gulp？

Gulp，文件的压缩打包合并，是一个纯粹的工具，并不能将你的css等非js资源模块化，但是webpack可以做到这些。
webpack模块化加载器兼打包工具，可以把各种资源都作为模块来使用和处理，具有前端构建的功能，只不过通过插件实现了构建工具的一些功能。
webpack的优点如下：
1. webpack 遵循commonJS 的形式，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2. 能被模块化的不仅仅是 JS ，所有的静态资源，例如css，图片等都能模块化，即以require的方式引入。
3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。

4、函数的两个内置对象？

This,arguments

5、布局方式？

rem,百分比，Flex,meta标签实现响应式

6、js中创建对象的几种方式？

构造函数方式；工厂方式；混合模式；代理模式；动态原型方式（推荐使用这种模式）

7、确保浏览器不走缓存路线？

1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,”0”)
2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,”no-cache”)
3、在URL后面加上一个随机数： “fresh=” + Math.random();
4、在URL后面加上时间搓：”nowtime=” + new Date().getTime();
5、如果是使用jQuery，直接这样就可以了$.ajaxSetup({cache:false})，这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

8、移动端开发，会发现input在iscroll中不能输入

使用了iscroll之后，你会发现点击输入框时不灵敏，经常无法聚焦；页面文字也无法选择和复制。这是由于iscroll要监听鼠标事件和触摸事件来进行滚动，所以禁止了浏览器的默认行为，导致上述问题。所以我们需要稍作修改：

onBeforeScrollStart: function (e) { 
     var target = e.target; 
     while (target.nodeType != 1) 
          target = target.parentNode; 
     if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’) 
        e.preventDefault(); 
}

9、angularjs中的自定义指令的scope有几个值，分别代表什么？

1.scope设置为true的情况下，继承容器的作用域，创建自己的作用域
2.设置scope为false时，link中scope与容器controller公用一块scope
3.如果scope设置为{}对象, 继承controller容器scope作用域,但是会生成一块独立的作用域空间，不会自动调用父scope的变量或方法
当scope设置为{}时：可以声明给scope传递变量和值
3种方式传递 = & @
@通过在标签上定义属性,在scope使用@属性名传递变量
&通过在标签上定义属性，在scope中使用&传递进来一个’函数’,且只能是函数
=通过在标签上定义属性，在父scope上寻找到匹配的变量和函数为当前的函数属性进行复制。

10、Node.js的适用场景？

高并发、聊天、实时消息推送

APPx应用魔方

关注

0
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
前端基础面试题大全-极乐科技（三）-argularJS+其他前端

argularJS1.jquery和 angularjs 的区别？jQuery在DOM上做得很好，可以根据用户交互，添加修改DOM元素。AngularJS更关注数据展示本身，更新时会尽可能减少对DOM的破坏和重构。AngularJS中很多特点的设计都是出于提高开发者效率的目的。当一个项目的重点是数据展示和执行，而不是分析，此时可能AngularJS就会更胜一筹。2.ng的三种服务?哪个服务可以在c
复制链接

扫一扫