前端面试题总结（五）插件篇
前端面试题总结（五）插件篇
一、什么是MVC？
- MVC即model（数据层）、view（视图层）、controller（控制层）。
二、列举常用的js框架以及分别适用的领域
- jquery：简化了js的一些操作，并且提供了一些非常好用的API
- jquery ui、jquery-easyui：在jqeury的基础上提供了一些常用的组件 日期，下拉框，表格这些组件
- require.js、sea.js（阿里的玉帛）+》模块化开发使用的
- zepto：精简版的jquery，常用于手机web前端开发 提供了一些手机页面实用功能,touch
- ext.js：跟jquery差不多，但是不开源，也没有jquery轻量
- angular、knockoutjs、avalon(去哪儿前端总监)：MV*框架，适合用于单页应用开发(SPA)
三、Angular和jQuery之间的区别？
- 从概念上来说，NG是一款前端框架，我们写的功能(代码)被NG调用；JQ是一个库，封装了很多功能，我们调用JQ里的API去实现一些功能
- 从应用上来看，NG需要考虑整个应用的架构，作为单页面的富客户端应用程序，JQ只是提供对DOM的包装和页面的渲染。
- 从使用上来看，NG几乎不存在DOM操作，不过NG中内置了一个JQlite，类似JQ，但也不推荐使用；JQ大量包装DOM，提高开发效率。
四、node.js适用场景？
- 高并发、聊天、实时消息推送。
五、node的优缺点？
- 优点：
- node是基于事件驱动的和无阻塞的，所以非常适合处理并发请求。
- 构建在node上的代理服务器相比其他技术实现（如ruby）的服务器表现要好的多。
- 与node代理服务器交互的客户端代码是由JavaScript语言编写的，所以客户端和服务器端都用同一种语言编写。
- 缺点：
- node是一个相对新的开源项目，所以不太稳定，总是一直在变。
- 缺少足够多的第三方库支持。
六、模块化开发怎么做？
- 立即执行函数，不暴露私有成员。
七、jQuery和jQuery UI有啥区别？
- jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等。
- jQuery UI是在jQuery的基础上，利用jQuery的扩展性，设计的插件，提供了一些常用的界面元素，如对话框、拖动行为、改变大小等。
八、jQuery中如何将数组转化为json字符串，然后再转化回来？
- jQuery没有提供这个功能。可以先编写两个jQuery的扩展：
$.fn.stringifyArray = function(array){ return JSON.stringify(array) };
$.fn.parseArray = function(array){ return JSON.parse(array) };
//调用：
$("").stringify(array);
（$.parseJSON("{'name':'john'}");JSON.stringify）。
九、针对jQuery的优化方法？
- 优先使用ID选择器。
- jQuery获取到的DOM元素如果需要多次使用，建议用一个变量保存起来，因为操作DOM的过程是非常耗性能的。
- 在class前使用tag(标签名)。
- 给选择器一个上下文。
- 尽量不要使用.live()方法。
- 使用data()方法存储临时变量。
十、如何判断当前脚本运行在浏览器还是node环境当中？
- this === window ? "browser" : "node";
- 通过判断global对象是否为window，如果不为window，当前脚本没有运行在浏览器当中。
十一、jQuery和zepto的区别？各自的使用场景？
- zepto最初是为移动端开发的库，是jQuery的轻量级替代品，因为其api和jQuery类似，而且文件更小。
- 大多数在jQuery中常用的api和方法zepto都有，zepto还有一些jQuery中没有的。
- 针对移动端程序，zepto有一些基本的触摸事件可以用来做触摸屏交互（tab事件、swipe事件），zepto是不支持IE浏览器的。
- zepto和jQuery不完全兼容。
十二、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
- this执行init构造函数自身，其实就是jQuery实力对象，返回this是为了实现jQuery的链式操作。
十三、使用过angular吗？angular中的过滤器是干什么用的？
- 在表达式中转换数据<p>姓名为{{lastName | uppercase}}</p>
- currency，是什么过滤器？
- 格式化数字为货币格式，单位是$符。
十四、ng-if和ng-show/hide的区别？
- ng-if在后面表达式为true的时候才创建这个dom节点，ng-show是初始时就创建了，用display控制显示和隐藏。
- ng-if会隐式的产生新作用域，ng-switch、ng-include等会动态创建一块界面的也是如此。
十五、ng-repeat迭代数组时，如果数组中有相同的值，会有什么问题，怎么解决？
- 会提示Duplicates in a repeater are not allowed.加track by $index可解决。
- 当然，也可以trace by任何一个普通的值，只要唯一性表示数组中的每一项即可（建立dom和数据之间的关联）。
十六、ng-click中写的表达式，能用js原生对象上的方法吗？
- 不止是ng-click中的表达式，只要在页面中，都不能直接调用原生JS方法，因为这些并不存在于与页面对应的Controller的$scope中。
- 如：{{parseInt(55.66)}}会什么也不显示，但是可以在$scope中添加$scope.parseInt = function(x){return parseInt(x)};
十七、{{now|'yyyy-MM-dd'}}这种表达式里，竖线和后面的参数通过什么方式可以自定义？
- filter，格式化数据，接收一个输入，按某规则处理，返回处理结果。
- 内置filter？
- 内置filter有9种：data(日期)、currency(货币)、limitTo(限制数组或字符长度)、orderBy(排序)、lowercase(小写)、uppercase(大写)、number(格式化数字，加上千位分隔符，并接收参数限定小数点位数)、filter(处理一个数组，过滤出含有某个字符串的元素)、json(格式化json对象)。
- filter的使用方法？
- filter有两种使用方法：
- HTML中：{{obj | date : 'yyyy-MM-dd'}};
- js中：$filter('date')(obj,'yyyy-MM-dd hh:mm:ss');
- $filter('过滤器名称')(需要过滤的对象, 参数1, 参数2,...)
十八、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。
十九、angular的数据绑定采用什么机制？
- 脏检查机制。(通过$apply方法触发eval方法，当eval解析成功后，会触发$digest方法，然后由$digest方法触发$watch方法。)
- 双向数据绑定时angularjs的核心机制之一。当view中有任何数据变化时，会跟新到model，当model中数据有变化时，view也会同步更新，而这个过程需要一个监控，原理就是，angular在scope模型上设置一个监听队列，用来监听数据变化更新view。每次绑定一个东西到view上时angular就会往$watch队列里插入一条$watch，用来检测它监视的model里是否有变化的东西。当浏览器接收到可以被angular context处理的事情，$digest循环就会触发，遍历所有的$watch，最后更新dom。
- 每个双向绑定的元素都有一个watcher。
- 在某些事件发生时，调用digest脏数据检测。(事件:表单元素内容变化、ajax请求响应、点击按钮执行的函数等)。
- 脏数据检测会检测下所有被watcher的元素。
二十、如何在平级界面模板间进行通信？
- 1、共用服务：在angular中，通过factory可以生成一个单例对象，在需要通信的模块中注入这个对象。
- 2、基于事件：有两种方式：
- 借助父controller。在子controller中向父controller触发($emit)一个事件，然后在父controller中监听($on)事件，在广播($broadcast)给子controller，这样通过事件携带的参数，实现了数据经过父controller，在统计controller之间的传播。
- 借助$rootScope。每个angular应用默认有一个根作用域$rootScope，根作用域位于最顶层，从它往下挂着各级作用域。所以，如果子控制器直接使用$rootScope广播和接收事件，那么就可实现同级之间的通信。
二十一、一个angular应用应当如何良好的分层？
- 目录结构的划分：
- 对于小型项目，可以按照文件类型组织。
- 对于规模比较大的项目，最好按照业务模块来划分。
- modules下最好再有一个common目录方公共的东西。
- 逻辑代码的拆分：
- 作为一个MVVM框架，angular应用本身就应该按照模型，视图模型(控制器)，视图来划分。
- 主要指尽量让controller这一层很薄。
- 提取共用的逻辑到service中(如后台数据的请求，数据的共享和缓存，基于事件的模块间通信等)。
- 提取共用的界面操作到directive中(如将日期选择，分页等封装成组件等)。
- 提取共用的格式化操作到filter中等等。
二十二、angular应用常用哪些路由库，各自的区别是什么？
- angular 1.x中常用ngRoute和ui.route，还有一种为angular2设计的new route(面向组件)。
- 无论是ngRoute还是ui.route，作为框架额外的附加功能，都必须以模块依赖的形式被引入。
- 区别：
- ngRoute模块是angular子代的路由模块，而ui.route模块是基于ngRoute模块开发的第三方模块。
- ui.route是基于state(状态)的，ngRoute是基于url的，ui.route模块具有更强大的功能，主要体现在视图的嵌套方面。
- 使用ui.route能定义有明确父子关系的路由，并通过ui-view指令将子路由模板插入到父路由模板的ui-view中区，从而实现视图嵌套。而在ngRoute中不能这样定义，如果同时在父子视图中使用了ng-view会陷入死循环。
二十三、分属不同团队进行开发的 angular 应用，如果要做整合，可能会遇到哪些问题，如何解决？
- 可能会遇到不同模块之间的冲突。
- 在angular 1.x中并没有很好的解决方法，所以最好在提前进行统一规划，做好约定，严格按照约定开发，每个开发人员只写特定区块代码。
二十四、angular的缺点有哪些？
- 强约束(导致学习成本高，对前端不友好。但遵守angularjs的约定时，生产力会很高，对Java程序员友好)。
- 不利于SEO(所有内容都是动态获取并渲染生成的，搜索引擎没法爬取。一种解决办法是，对于正常用户的访问，服务器响应 AngularJS 应用的内容；对于搜索引擎的访问，则响应专门针对 SEO 的HTML页面。)。
- 性能问题(作为 MVVM 框架，因为实现了数据的双向绑定，对于大数组、复杂对象会存在性能问题)。
二十五、angular的优化方法有哪些？
- 减少监控项(对不会变化的数据采取单向绑定)。
- 主动设置索引(指定track by，简单类型默认用自身索引，对象默认用$$hashKey，比如改为track by item.id)。
- 降低渲染数据量(如分页，或者每次取一小部分数据，根据需要再取)。
- 数据扁平化(比如对于树状结构，使用扁平化结构，构建一个map和树状数据，对树操作时，由于扁平数据统一引用，树状数据变更会同步到原始的扁平数据)。
二十六、如何看待angular 1.2中引入的controller as语法？
- 在angular1.2以前，在view上的任何绑定都是直接绑定在$scope上的，使用controllerAs，不需要再注入$scope,controller变成了一个很简单的JavaScript对象(POJO),一个更纯粹的ViewModel。
二十七、讲解一下angular的“依赖注入”？
- 依赖注入是一种软件设计模式，目的是处理代码之间的依赖关系，减少组件间的耦合。
- angularjs是通过构造函数的参数名字来推断依赖服务名称的，通过toString()来找到这个定义的function对应的字符串，然后用正则解析出其中的参数(依赖项)，再去依赖映射中取到对应的依赖，实例化后传入。（angular的依赖注入只是简单的获取它所需要的东西，而不需要创建哪些他们所依赖的东西。系统自动把a帮你注入到b里面去。）
二十八、简单介绍一下angular？
- angularjs是一个前端的框架，跟后台的spring、Struts框架类似，可以帮助我们快速的搭建和开发前端项目。与jQuery等前端框架不同，angularjs不仅仅是一个工具，而是一个可以指导我们开发的框架。angular通过数据视图双向绑定、模块化、依赖注入等方式来帮助我们开发、管理前端项目。
- angularjs是协助搭建单页面工程的开源前端框架。它通过MVC模式使得开发与测试变得更容易。
- angularjs试图成为web应用中的一种端对端的解决方案。他将指导开发整个应用。
- AngularJS于2009年发布第一个版本，由Google进行维护，压缩版94k。
- Angular 最大程度的减少了页面上的 DOM 操作， 解放了传统 JavaScript 中频繁的 DOM 操作；
- 让 JavaScript 中专注业务逻辑的代码；
- 通过简单的指令结合页面结构与逻辑数据；
- 通过自定义指令实现组件化编程；
- 代码结构更合理，维护成本更低；
二十九、AngularJs的核心原理是什么？
- Angular通过双向绑定将视图与业务逻辑解耦。在AngularJS中通过数据视图双向绑定实现。提高了代码的可测试性。
- 遵循MVC模式开发，鼓励视图、数据、逻辑组件间松耦合。
三十、什么是AngularJS中的指令概念？
- 指令是AngularJS用来扩展浏览器能力的技术之一。在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行。这使得指令可以为DOM指定行为，或者改变DOM的结构。
- 指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。
三十一、angular的特点？
- 双向数据绑定。
- MVVM模型，把视图和逻辑分开。
- 依赖注入。
- 减轻ajax请求。
- 模块化开发。
三十二、controller之间怎么通讯？
- event：
- $scope.$emit，然后通过监听$rootScope的事件获取参数。
- $rootScope.$broadcast：通过监听$scope的事件获取参数。
- service：创建一个专用的事件Service，也可以按照业务逻辑切分，将数据存储在相应的Service中。
- $rootScope：把数据存在$rootScope中，这样各个子#scope都可以调用。
- 直接使用$scope.$$nextSibling及类似的属性(官方不推荐任何$$开头的属性，既增加了耦合，又需要处理异步的问题，而且scope的顺序也不是固定的)。
三十三、angular中的$http？
- $http是angular中的一个核心服务，用于读取远程服务器的数据。
- 我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。
- 链式调用：$http服务是只能接受一个参数的函数，这个参数是一个对象，包含用来生成http请求的配置内容。返回一个promise对象，具有success和error两个方法。
- 返回一个promise对象。
- 快捷的get请求。
- 响应对象。
三十四、单页应用有哪些优缺点？
- 单页web应用，就是只有一张web页面的应用。
- 单页应用程序(SPA)是加载单个HTML页面并在用户与程序交互时动态更新该页面的web应用程序。浏览器一开始会加载必须的HTML、css和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。
- 速度：更好的用户体验，让用户在web app感受native app的速度和流畅，
- MVC：经典MVC开发模式，前后端各负其责。
- ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。
- 路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。
- 优点：
- 分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起；
- 减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
- 同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；
- 缺点：
- SEO问题，现在可以通过Prerender等技术解决一部分；
- 前进、后退、地址栏等，需要程序进行管理；
- 书签，需要程序来提供支持；
三十五、angularjs 是 mvc 还是 mvvm 框架?
- 随着代码规模越来越大，切分职责是大势所趋，还有为了后期维护方便，修改一块功能不影响其他功能。还有为了复用，因为很多逻辑是一样的。而MVC只是手段，终极目标是模块化和复用。
- mvvm的优点:
- 低耦合：View可以独立于Model变化和修改，同一个ViewModel可以被多个View复用；并且可以做到View和Model的变化互不影响
- 可重用性：可以把一些视图的逻辑放在ViewModel，让多个View复用
- 独立开发：开发人员可以专注与业务逻辑和数据的开发（ViewModemvvmdi计人员可以专注于UI(View)的设计
- 可测试性：清晰的View分层，使得针对表现层业务逻辑的测试更容易，更简单
- 在angular中MVVM模式主要分为四部分：
- View：它专注于界面的显示和渲染，在angular中则是包含一堆声明式Directive的视图模板。
- ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在angular中$scope对象充当了这个ViewModel的角色；
- Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象；而angular中的service则是封装和处理这些与Model相关的业务逻辑的场所，这类的业务服务是可以被多个Controller或者其他service复用的领域服务。
- Controller：这并不是MVVM模式的核心元素，但它负责ViewModel对象的初始化，它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上，使得应用界面在启动加载的时候达到一种可用的状态。
- mvc的界面和逻辑关联紧密，数据直接从数据库读取。mvvm的界面与viewmode是松耦合，界面数据从viewmodel中获取。所以angularjs更倾向于mvvm。
本文章出自小小菜鸟学web，转载请注明
