文档章节

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

极乐小程序
 极乐小程序
发布于 2017/08/10 11:44
字数 4501
阅读 12
收藏 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 指令将子路由模版插入到父路由模板的 <div ui-view></div> 中去,从而实现视图嵌套。而在 ngRoute 中不能这样定义,如果同时在父子视图中 使用了 <div ng-view></div> 会陷入死循环。 ###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的适用场景? 高并发、聊天、实时消息推送

© 著作权归作者所有

极乐小程序
粉丝 18
博文 327
码字总数 428455
作品 0
武汉
私信 提问
史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp
2017/01/13
0
0
前端开发-从入门到Offer

解决你的前端面试 有时候前端的技术性面试还是很麻烦的,毕竟知识点那么多,框架迭代那么快。你不仅仅要对计算机科学基础有一个坚实的底子,还需要理解啥 Web 性能、构建系统以及 CSS 引擎等...

掘金官方
2017/12/28
0
0
2018 前端面试准备

前端面试常见问题按知识点分类整理 前端面试常考问题整理,按模块知识点分类,持续完善中... Front-end-Developer-Questions by Modules and knowledge 前端面试经典问题:CSS 中居中的几种方...

掘金官方
2017/12/14
0
0
前端相关整理

整理一下最近在网上收集的前端面试相关资料,包括预备知识、书籍、面试考点、面经等。前端方面资料其实太多太多,就光从知乎、前端乱炖、w3cplus 等网站就能找到很多,所以针对细节不发散,仅...

Seas0n_
2016/03/01
106
0
想跳槽?还是先看看这些Github上的面试项目吧

对于很多人来说,找到一份工作不是问题,但找到一个合适而满意的工作,却不那么简单。 本文我们将盘点几个面试的开源项目,希望对你们有所帮助。 1coding-interview-university https://git...

程序员之家_
2018/09/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0
增加 PostgreSQL 服务进程的最大打开文件数

https://serverfault.com/questions/628610/increasing-nproc-for-processes-launched-by-systemd-on-centos-7 要在systemd的配置里加才行...

helloclia
今天
2
0
组合模式在商品分类列表中的应用

在所有的树形结构中最适合的设计模式就是组合模式,我们看看常用商品分类中如何使用。 先定义一个树形结构的商品接口 public interface TreeProduct { List<TreeProduct> allProducts(...

算法之名
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部