STF创业团队面试准备

最新推荐文章于 2025-09-07 17:00:17 发布

转载最新推荐文章于 2025-09-07 17:00:17 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/sheila/blog/403176

文章标签：

#面试 #javascript #测试 #ViewUI

为什么80%的码农都做不了架构师？>>>

然后今天接到一个创业团队的电面。

要求：了解angularJS，熟悉MVC，以及常用的网络前端技术

打算复习：

1、angular√

2、WEBSOCKET编程√

1、angular的一些核心概念√

2、angular的优缺点，以及与其他框架的比较？为什么用angular？√

##Angular核心概念

##显示

ng-bind和双花括号插值语法作用相同，为什么我们要用ng-bind来替换双花括号？因为浏览器需要首先加载HTML页面，渲染它，然后angular才有机会把它解释成你期望看到的内容。

好消息是，在大多数模板中你依然可以使用{{ }}。但是，对于index.html页面中的数据绑定操作，建议使用ng-bind。这样一来，在数据加载完成之前你的用户就不会看到任何内容。

##MVC

控制器和模型的分离非常重要，因为：

控制器是由Javascript写的。Javascript是命令式的，命令式的语言适合用来编写应用的行为。控制器不应该包含任何关于渲染代码（DOM引用或者片段）。
视图模板是用HTML写的。HTML是声明是的，声明式的语言适合用来编写UI。视图不应该包含任何行为。
因为控制器和视图没有直接的调用关系，所以可以使多个视图对应同一个控制器。这对“换肤(re-skinning)”、适配不同设备（比如移动设备和台式机）、测试，都非常重要。

##视图

所谓视图，就是指用户所看见的。视图的生命周期由作为一个模板开始，它将和模型合并并最终渲染到浏览器的DOM中。与其他模板系统不同的是，AngularJS使用一种独特的形式来渲染视图。

其他模板 - 大部分模板系统工作原理，都是一开始获取一个带有特殊标记的HTML形式字符串。通常情况下模板的特殊标记破换了HTML的语法，以至于模板是不能用HTML编辑器编辑的。然后这个字符串会被送到模板引擎那里解析，并和数据合并。合并的结果是一个可以被浏览器解析的HTML字符串。这个字符串会被.innerHTML方法写到DOM中。使用innerHTML会造成浏览器的重新渲染。当模型改变时，这整个流程又要重复一遍。模板的生存周期就是DOM的更新周期。这里我想强调是，这些模板系统模板的基础是字符串。
AngularJS - AngularJS和其它模板系统不同。它使用的是DOM而不是字符串。模板仍然是用HTML字符串写的，并且它仍然是HTML。浏览器将它解析成DOM，

然后这个DOM会作为输入传递给模板引擎，也就是我们的编译器。编译器查看其中的指令，找到的指令后，会开始监视指令内容中相应的模型。这样做，就使得视图能“连续地”更新，不需要模板和数据的重新合并。你的模型也就成了你视图变化的唯一动因。

##指令一个指令就是一种“由某个属性、元素名称、css类名出现而导致的行为，或者说是DOM的变化”。指令能让你以一种声明式的方法来扩展HTML表示能力。

##模块和注入器

每个AngularJS应用都有一个唯一的注入器。注入器提供一个通过名字查找对象实例的方法。它将所有对象缓存在内部，所以如果重复调用同一名称的对象，每次调用都会得到同一个实例。如果调用的对象不存在，那么注入器就会让实例工厂(instance factory)创建一个新的实例。

一个模块就是一种配置注入器实例工厂的方式，我们也称为“提供者(provider)”。

##关于angular常问面试题

AngularJS的特性？

angularJS的特性是MVC、依赖注入、自动双向数据绑定、模块化、语义化标签等等。

MVC

应该把管理数据的代码model、应用逻辑代码controller，以及向用户展示数据的代码view清晰地分离开。

数据绑定

具体用法 ng-model ng-bind ng-controller

依赖注入

我们的类知识简单地获取它们所需要的东西，而不需要去创建它们所依赖的东西。遵守迪米特法则（最少知识原则）。

指令

因为angular引入了一款强大的DOM转换引擎，可以用它来扩展HTML的语法。
模块化


var myAppModule = angular.module('myApp',[]);
myAppModule.controller('TextController',function($scope){});

为什么用Angular？它的优缺点？

与backbone、canjs、ember相比

1、它的功能全

2、灵活性稍差，不像backbone上手容易并且整合其他的库（backbone主张和约定最少）

3、上手相比较之下略难。乍一看让人觉得很简单。可是，进了门之后，你会发现后面的路还很长。应该说这个框架比较复杂，而且有不少标新立异之处。想看着它的文档上手并不现实，因为Angular制造的概念很多，而文档中的例子又很少。

4、开发效率很高

5、社区支持好

6、性能，脏检查拖了后腿

7、没有内存泄露隐患。因为Angular封装了DOM操作

为什么用它？用它的双向绑定、路由、模块化的功能特性。而且它完全封装了DOM操作，没有内存泄露隐患，性能方便也比较好。所以用它来构建单页面应用。

###自动双向绑定的实现原理？

AngularJS通过使用自己的事件处理循环，改变了传统的Javascript工作流。这使得Javascript的执行被分成原始部分和拥有AngularJS执行上下文的部分。只有在AngularJS执行上下文中运行的操作，才能享受到AngularJS提供的数据绑定，异常处理，资源管理等功能和服务。

##angularJS数据双向绑定实现原理

下面解释了"hello world"的例子是怎么样实现“将用户输入绑定到视图上”的效果。

在编译阶段：
input上的ng-model指令给<input>输入框绑定了keydown事件； 2**.{{name}}这个变量替换表达式建立了一个 $watch 来接受 name 变量改变的通知。**
在执行期阶段：
按下任何一个键(以X键为例)，都会触发一个 input 输入框的keydown事件；
input 上的指令捕捉到 input 里值的改变，然后调用 $apply("name = 'X';")来更新处于AngularJS执行上下文中的模型； 3.AngularJS将 name='X'应用到模型上；
$digest 循环开始； 5.$watch 列表检测到了name值的变化，然后通知 {{name}}变量替换的表达式，这个表达式负责将DOM进行更新； 6.AngularJS退出执行上下文，然后退出Javascript上下文中的keydown事件；
浏览器以更新的文本重渲染视图。

###websocket与socket.io的区别？ socket.io封装了websocket，同时包含了其它的连接方式，比如Ajax。原因在于不是所有的浏览器都支持websocket，通过socket.io的封装，你不用关心里面用了什么连接方式。你在任何浏览器里都可以使用socket.io来建立异步的连接。socket.io包含了服务端和客户端的库，如果在浏览器中使用了socket.io的js，服务端也必须同样适用。如果你很清楚你需要的就是websocket，那可以直接使用websocket。

socket.io一个是基于Nodejs架构体系的，支持websocket的协议用于时时通信的一个软件包。socket.io 给跨浏览器构建实时应用提供了完整的封装，socket.io完全由javascript实现。

参考： 1.angularJS开发指南04：核心概念 http://www.angularjs.cn/A00q 2.动物书《用AngularJS开发下一代Web应用》 3.《JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember》：http://www.ituring.com.cn/article/38394

转载于:https://my.oschina.net/sheila/blog/403176