#一、面向对象：（以上内容抄录自[面向对象](https://www.cnblogs.com/shenjp/p/6517743.html "面向对象")）
1.
面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！
但JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：无序属性的集合，其属性可以包含基本值、对象或者函数。可以简单理解为JS
的对象是一组无序的值，其中的属性或方法都有一个名字，根据这个名字可以访问相映射的值（值可以是基本值/对象/方法）
2.
原型模式如类模式一样，都是是一种编程泛型，即编程的方法论。另外最近大红大紫的函数编程也是一种编程泛型。JavaScript之父Brendan Eich在设计
JavaScript时，从一开始就没打算为其加入类的概念，而是借鉴了另外两门基于原型的的语言：Self和Smalltalk。既然同为面向对象语言，那就得有创建对象
的方法。在类语言中，对象基于模板来创建，首先定义一个类作为对现实世界的抽象，然后由类来实例化对象；而在原型语言中，对象以克隆另一个对象的方式创
建，被克隆的母体称为原型对象。
3. 对象有两种：一种是基于Object的
var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){
return this.name;
}
4. 另一种是对象字面量形式（比较清楚的查找对象包含的属性及方法）
var person = {
name : 'My name',
age : 18,
getName : function(){
return this.name;
}
}
可以用“.”操作符进行 动态的扩展及删除
person.newAtt=’new Attr’;//添加属性
alert(person.newAtt);//new Attr
delete person.age;
alert(person.age);//undefined(删除属性后值为undefined);
5. 对象属性类型（分为两类）
a) 数据属性
- 数据属性指包含一个数据值的位置，可在该位置读取或写入值，该属性有4个供述其行为的特性：
- [[configurable]]:表示能否使用delete操作符删除从而重新定义，或能否修改为访问器属性。默认为true;
- [[Enumberable]]:表示是否可通过for-in循环返回属性。默认true;
- [[Writable]]:表示是否可修改属性的值。默认true;
- [[Value]]:包含该属性的数据值。读取/写入都是该值。默认为undefined;如上面实例对象person中定义了name属性，其值为’My name’,
对该值的修改都反正在这个位置
6、要修改对象属性的默认特征（默认都为true)，可调用Object.defineProperty()方法，它接收三个参数：
属性所在对象，属性名和一个描述符对象（必须是：configurable、enumberable、writable和value，可设置一个或多个值）。
如下：（浏览器支持：IE9+、Firefox 4+、Chrome、Safari5+）
var person = {};
Object.defineProperty(person, 'name', {
configurable: false,
writable: false,
value: 'Jack'
});
alert(person.name);//Jack
delete person.name;
person.name = 'lily';
alert(person.name);//Jack
7、可以看出，delete及重置person.name的值都没有生效，这就是因为调用defineProperty函数修改了对象属性的特征；值得注意的是一旦将configurable
设置为false，则无法再使用defineProperty将其修改为true（执行会报错：can't redefine non-configurable property）;
**对于数据属性，可以取得：configurable,enumberable,writable和value；**
b) 访问器属性
- 它主要包括一对getter和setter函数，在读取访问器属性时，会调用getter返回有效值；写入访问器属性时，调用setter，写入新值；该属性有以下4个特征：
- [[Configurable]]:是否可通过delete操作符删除重新定义属性；
- [[Numberable]]:是否可通过for-in循环查找该属性；
- [[Get]]:读取属性时调用，默认：undefined;
- [[Set]]:写入属性时调用，默认：undefined;
- 访问器属性不能直接定义，必须使用defineProperty()来定义，如下：
var person = {
_age: 18
};
Object.defineProperty(person, 'isAdult', {
get: function () {
if (this._age >= 18) {
return true;
} else {
return false;
}
}
});
alert(person.isAdult?'成年':'未成年');//成年
- 从上面可知，定义访问器属性时getter与setter函数不是必须的,并且，在定义getter与setter时不能指定属性的configurable及writable特性；
- 此外，ECMA-262（5）还提供了一个Object.defineProperties()方法，可以用来一次性定义多个属性的特性：
var person = {};
Object.defineProperties(person,{
_age:{
value:19
},
isAdult:{
get: function () {
if (this._age >= 18) {
return true;
} else {
return false;
}
}
}
});
**对于访问器属性，可以取得：configurable,enumberable,get和set**
6. 创建对象（使用Object构造函数或对象字面量都可以创建对象，但缺点是创建多个对象时，
会产生大量的重复代码，因此下面介绍可解决这个问题的创建对象的方法）
a) 工厂模式
function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.getName = function () {
return this.name;
}
return o;//使用return返回生成的对象实例
}
var person = createPerson('Jack', 19, 'SoftWare Engineer');
**创建对象交给一个工厂方法来实现，可以传递参数，但主要缺点是无法识别对象类型，因为创建对象都是使用Object的原生构造函数来完成的。**
b) 构造函数模式
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = function () {
return this.name;
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engineer');
var person2 = new Person('Liye', 23, 'Mechanical Engineer');
使用自定义的构造函数（与普通函数一样，只是用它来创建对象），定义对象类型（如：Person）的属性和方法。它与工厂方法区别在于：
没有显式地创建对象
直接将属性和方法赋值给this对象；
没有return语句；
此外，要创建Person的实例，必须使用new关键字，以Person函数为构造函数，传递参数完成对象创建；实际创建经过以下4个过程：
创建一个对象
将函数的作用域赋给新对象（因此this指向这个新对象，如：person1）
执行构造函数的代码
返回该对象
上述由Person构造函数生成的两个对象person1与person2都是Person的实例，因此可以使用instanceof判断，并且因为所有对象
都继承Object，因此person1 instanceof Object也返回真：
alert(person1 instanceof Person);//true;
alert(person2 instanceof Person);//true;
alert(person1 instanceof Object);//true;
alert(person1.constructor === person2.constructor);//ture;
虽然构造函数方式比较不错，但也存在缺点，那就是在创建对象时，特别针对对象的属性指向函数时，会重复的创建函数实例，以上述代码为基础，可以改写为：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = new Function () {
//改写后效果与原代码相同，不过是为了方便理解
return this.name;
}
}
上述代码，创建多个实例时，会重复调用new Function();创建多个函数实例，这些函数实例还不是一个作用域中，当然这一般不会有错，但这会造成内存浪费。
当然，可以在函数中定义一个getName = getName的引用，而getName函数在Person外定义，这样可以解决重复创建函数实例问题，但在效果上并没有起到
封装的效果，如下所示：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = getName;
}
function getName() {//到处是代码，看着乱！！
return this.name;
}
c) 原型模式（JS每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，它是所有通过new操作符使用函数创建的实例的原型对象。
原型对象最大特点是，所有对象实例共享它所包含的属性和方法，也就是说，所有在原型对象中创建的属性或方法都直接被所有对象实例共享。）
function Person(){}
Person.prototype.name = 'Jack';//使用原型来添加属性
Person.prototype.age = 29;
Person.prototype.getName = function(){
return this.name;
}
var person1 = new Person();
alert(person1.getName());//Jack
var person2 = new Person();
alert(person1.getName === person2.getName);//true;共享一个原型对象的方法
原型是指向原型对象的，这个原型对象与构造函数没有太大关系，唯一的关系是函数的prototype是指向这个原型对象！而基于构造函数创建的对象实例也包含一个
内部指针为：[[prototype]]指向原型对象。
实例属性或方法的访问过程是一次搜索过程：
- 首先从对象实例本身开始，如果找到属性就直接返回该属性值；
- 如果实例本身不存在要查找属性，就继续搜索指针指向的原型对象，在其中查找给定名字的属性，如果有就返回；
- 基于以上分析，原型模式创建的对象实例，其属性是共享原型对象的；但也可以自己实例中再进行定义，在查找时，就不从原型对象获取，而是根据搜索原则，
得到本实例的返回；简单来说，就是实例中属性会屏蔽原型对象中的属性；
原型与in操作符
一句话：无论原型中属性，还是对象实例的属性，都可以使用in操作符访问到；要想判断是否是实例本身的属性可以使用object.hasOwnProperty(‘attr’)来判断；
原生对象中原型
原生对象中原型与普通对象的原型一样，可以添加/修改属性或方法，如以下代码为所有字符串对象添加去左右空白原型方法：
String.prototype.trim = function(){
return this.replace(/^\s+/,'').replace(/\s+$/,'');
}
var str = ' word space ';
alert('!'+str.trim()+'!');//!word space!
原型模式的缺点，它省略了为构造函数传递初始化参数，这在一定程序带来不便；另外，最主要是当对象的属性是引用类型时，它的值是不变的，总是引用
同一个外部对象，所有实例对该对象的操作都会其它实例：
function Person() {}
Person.prototype.name = 'Jack';
Person.prototype.lessons = ['Math','Physics'];
var person1 = new Person();
person1.lessons.push('Biology');
var person2 = new Person();
alert(person2.lessons);//Math,Physics,Biology，person1修改影响了person2
d) 组合构造函数及原型模式（目前最为常用的定义类型方式，是组合构造函数模式与原型模式。构造函数模式用于定义实例的属性，而原型模式用于定义方法和共享的
属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方方法的引用，最大限度的节约内存。此外，组合模式还支持向构造函数传递参数，可谓是集两家之
所长。
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.lessons = ['Math', 'Physics'];
}
Person.prototype = {
constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
getName: function () {
return this.name;
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法
在所接触的JS库中，jQuery类型的封装就是使用组合模式来实例的！！！
e) 动态原型模式（组合模式中实例属性与共享方法（由原型定义）是分离的，这与纯面向对象语言不太一致；动态原型模式将所有构造信息都封装在构造函数中，
又保持了组合的优点。其原理就是通过判断构造函数的原型中是否已经定义了共享的方法或属性，如果没有则定义，否则不再执行定义过程。）
该方式只原型上方法或属性只定义一次，且将所有构造过程都封装在构造函数中，对原型所做的修改能立即体现所有实例中：
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.lessons = ['Math', 'Physics'];
}
if (typeof this.getName != 'function') {//通过判断实例封装
Person.prototype = {
constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
getName: function () {
return this.name;
}
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法
#二、原型
function Person(name){
this.name=name;
this.showMe=function(){
alert(this.name);
}
}
var one = new Preson('javaScript');
alert(one.showMe());
function定义的这个Person就是一个Object(对象),而且还是一个很特殊的对象，这个使用function定义的对象与使用new操作符生成的对象之间有一个
重要的区别。这个区别就是function定义的对象有一个prototype属性，使用new生成的对象就没有这个prototype属性，我们一般称为普通对象！
我们需要理解记忆以下的逻辑顺序：
Person是一个对象，它有一个prototype的原型属性（因为所有的对象都一prototype原型！）prototype属性有自己的prototype对象，而pototype对象肯定也有自己的
constuct 属性，construct 属性有自己的 constructor 对象，神奇的事情要发生了，这最后一个 constructor 对象就是我们构造出来的function函数本身！
function Person(name){
this.name=name;
this.showMe=function(){
alert(this.name);
}
}
var one = new Preson('js');
alert(one.prototype);//undefined 证明new出来的对象是没有原型的
alert(typeOf person.prototype)//object 证明我们构造出来的Function的原型的类型就是一个对象！
alert(Person.prototype.constructor)//返回函数本身，证明了原型的理论，
实际用途：它给我们最实际的用处就是我们可以用原型来创建对象的属性和方法！我们不用它不也是可以创建属性和方法！这里是有区别的，既然不一样就有存在的价值！我们可以通过给原型添加属性和方法来给给对象添加属性或方法！
Hero.prototype.name;
Hero.prototype.sayMe = function(){"添加对象的方法其实就是添加函数"}
让我们再深一步：当我们给对象添加了同名的属性或方法时会发生什么？
function Hero(){
this.name="zhangsan"
this.sayMe = function(){
alert("this is zhangsan.")
}
}
//通过原型增加的属性和方法
Hero.prototype.name1 = "wangwu";
Hero.prototype.sayMe1 = function(){
alert("this is wangwu.")
};
var hero = new Hero();
alert(hero.name)
alert(hero.name1)
hero.sayMe();
// delete hero.name
alert(hero.name)//
我们验证了这个例子得到得到了一些结论：
当函数对象本身的属性或方法与原型的属性或方法同名的时候：
1、默认调用的是函数对象本身的属性或方法.
2、通过原型增加的属性或方法的确是存在的.
3、函数对象本身的属性或方法的优先级要高于原型的属性或方法.
----------
#三、作用域、原型链 及二者区别
**作用域是针对变量的，比如我们创建了一个函数，函数里面又包含了一个函数，那么现在就有三个作用域**
全局作用域==>函数1作用域==>函数2作用域
作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。
如：
var a = 1;
function b(){
var a = 2;
function c(){
var a = 3;
console.log(a);
}
c();
}
b();
最后打印出来的是3，因为执行函数c（）的时候它在自己的范围内找到了变量a所以就不会越上继续查找，如果在函数c()中没有找到则会继续向上找，一直会找到全局变量a，这个查找的过程就叫作用域链。
不知道你有没有疑问，函数c为什么可以在函数b中查找变量a，因为函数c是在函数b中创建的，也就是说函数c的作用域包括了函数b的作用域，当然也包括了全局作用域，但是函数b不能向函数c中查找变量，因为作用域只会向上查找。
----------
原型链是针对构造函数的，比如我先创建了一个函数，然后通过一个变量new了这个函数，那么这个被new出来的函数就会继承创建出来的那个函数的属性，然后如果我访问new出来的这个函数的某个属性，但是我并没有在这个new出来的函数中定义这个变量，那么它就会往上（向创建出它的函数中）查找，这个查找的过程就叫做原型链。
Object ==> 构造函数1 ==> 构造函数2
就和css中的继承一样，如果自身没有定义就会继承父元素的样式。
function a(){};
a.prototype.name = "abc";
var b = new a();
console.log(b.name); //abc
----------
#四、闭包
**一、变量的作用域**
要理解闭包，首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种：全局变量和局部变量。
Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。
var n=999;
function f1(){
alert(n);
}
f1(); // 999
另一方面，在函数外部自然无法读取函数内的局部变量。
function f1(){
n=999;
}
f1();
alert(n); // 999
**二、如何从外部读取局部变量？**
出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。
那就是在函数的内部，再定义一个函数。
function f1(){
var n=999;
function f2(){
alert(n); // 999
}
}
在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
***既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！***
function f1(){
var n=999;
function f2(){
alert(n);
}return f2;}
var result=f1();
result(); // 999
**三、闭包的概念**
上一节代码中的f2函数，就是闭包。
各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是， **闭包就是能够读取其他函数内部变量的函数**。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
**四、闭包的用途**
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢？请看下面的代码。
function f1(){
var n=999;
nAdd=function(){
n+=1
};
function f2(){
alert(n);
}return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
**五、使用闭包的注意点**
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
**六、思考题**
如果你能理解下面两段代码的运行结果，应该就算理解闭包的运行机制了。
代码片段一。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());
代码片段二。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());
----------
#五、红皮书 里面 写的 方法 和 平时 开发 有哪些 优点和 缺点
#六、你怎么进行 模块化开发 的
**JAVASCRIPT模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。**
**一、原始写法**
模块就是实现特定功能的一组方法。
只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。
function m1(){
.....
}
function m2(){
.....
}
上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。
这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。
**二、对象写法**
为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。
var module1 = new Object({
_count : 0,
m1 : function (){
//...
},
m2 : function (){
//...
}
});
上面的函数m1()和m2(），都封装在module1对象里。使用的时候，就是调用这个对象的属性
module1.m1();
但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。
module1._count = 5;
**三、立即执行函数写法**
使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
使用上面的写法，外部代码无法读取内部的_count变量。
console.info(module1._count); //undefined
module1就是Javascript模块的基本写法。下面，再对这种写法进行加工。
**四、放大模式**
如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。
var module1 = (function (mod){
mod.m3 = function () {
//...
};
return mod;
})(module1);
上面的代码为module1模块添加了一个新方法m3()，然后返回新的module1模块。
**五、宽放大模式（Loose augmentation）**
在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。
var module1 = ( function (mod){
//...
return mod;
})(window.module1 || {});
与"放大模式"相比，＂宽放大模式＂就是"立即执行函数"的参数可以是空对象。
[详情走你！！！](http://www.ruanyifeng.com/blog/2012/10/javascript_module.html "哈哈")
#七、MVC、MVVM 有啥 区别
**mvc**
著名MVC框架 Rails MVC 视图层和模型层没有直接的耦合，而是通过控制器作为中间人对信息进行传递：
! [](https://raw.githubusercontent.com/Draveness/analyze/master/contents/architecture/images/mvx/MVC-with-Rails.jpg)
Model-View-Controller
View ==> Controller ==> Model ==> View
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020105.png)
视图将指令传达给控制器、控制器运行业务代码、反馈给模型改变状态、模型将数据传递给视图进行展示。
当存在用户操作时有两种方式：
1、通过 View 接受指令，传递给 Controller。
用户 ==> View ==> Controller ==> Model ==> View
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020106.png)
2、直接通过controller接受指令。
用户 ==> Controller ==> Model ==> View
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020107.png)
实际开发中会更加灵活的运用例如:
1、用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
2、 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
3、 Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器）
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020108.png)
**MVP**
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
View ==> Presenter ==> Model
Model ==> Presenter ==> View
1、 各部分之间的通信，都是双向的。
2、View 与 Model 不发生联系，都通过 Presenter 传递。
3、View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020109.png)
**MVVM**
MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。
唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020110.png)
#八、artTemplate模板引擎的使用
**原理：** 动态执行JavaScript字符串！
**优点：**
1. 预编译：渲染需要动态编译JavaScript字符串完成变量赋值。而artTemplate的编译赋值过程却是在渲染之前完成的
2. 更快的字符串相加方式： IE6-8的浏览器下，数组push方法拼接字符串会比“+=”快，而在v8引擎中，使用“+=”方式比数组拼接快4.7倍；所以 artTemplate 根据JavaScript引擎特性采用了两种不同的字符串拼接方式。
3. 支持运行时调试，可精确定位异常模板所在语句：（动态解析，所以调试器无法定位到错误）渲染的时候遇到错误会进入调试模式重新编译模板，而不会影响正常的模板执行效率。模板编译器根据模板换行符记录行号，当执行过程遇到错误，立马抛出异常模板对应的行号，模板调试器再根据行号反查模板对应的语句并打印到控制台。源码L282
4. 对Node端支持良好，便于以后统一扩展！ #一、面向对象：（以上内容抄录自[面向对象](https://www.cnblogs.com/shenjp/p/6517743.html "面向对象")） 1.
面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！
但JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：无序属性的集合，其属性可以包含基本值、对象或者函数。可以简单理解为JS
的对象是一组无序的值，其中的属性或方法都有一个名字，根据这个名字可以访问相映射的值（值可以是基本值/对象/方法）
2.
原型模式如类模式一样，都是是一种编程泛型，即编程的方法论。另外最近大红大紫的函数编程也是一种编程泛型。JavaScript之父Brendan Eich在设计
JavaScript时，从一开始就没打算为其加入类的概念，而是借鉴了另外两门基于原型的的语言：Self和Smalltalk。既然同为面向对象语言，那就得有创建对象
的方法。在类语言中，对象基于模板来创建，首先定义一个类作为对现实世界的抽象，然后由类来实例化对象；而在原型语言中，对象以克隆另一个对象的方式创
建，被克隆的母体称为原型对象。
3. 对象有两种：一种是基于Object的
var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){
return this.name;
}
4. 另一种是对象字面量形式（比较清楚的查找对象包含的属性及方法）
var person = {
name : 'My name',
age : 18,
getName : function(){
return this.name;
}
}
可以用“.”操作符进行 动态的扩展及删除
person.newAtt=’new Attr’;//添加属性
alert(person.newAtt);//new Attr
delete person.age;
alert(person.age);//undefined(删除属性后值为undefined);
5. 对象属性类型（分为两类）
a) 数据属性
- 数据属性指包含一个数据值的位置，可在该位置读取或写入值，该属性有4个供述其行为的特性：
- [[configurable]]:表示能否使用delete操作符删除从而重新定义，或能否修改为访问器属性。默认为true;
- [[Enumberable]]:表示是否可通过for-in循环返回属性。默认true;
- [[Writable]]:表示是否可修改属性的值。默认true;
- [[Value]]:包含该属性的数据值。读取/写入都是该值。默认为undefined;如上面实例对象person中定义了name属性，其值为’My name’,
对该值的修改都反正在这个位置
6、要修改对象属性的默认特征（默认都为true)，可调用Object.defineProperty()方法，它接收三个参数：
属性所在对象，属性名和一个描述符对象（必须是：configurable、enumberable、writable和value，可设置一个或多个值）。
如下：（浏览器支持：IE9+、Firefox 4+、Chrome、Safari5+）
var person = {};
Object.defineProperty(person, 'name', {
configurable: false,
writable: false,
value: 'Jack'
});
alert(person.name);//Jack
delete person.name;
person.name = 'lily';
alert(person.name);//Jack
7、可以看出，delete及重置person.name的值都没有生效，这就是因为调用defineProperty函数修改了对象属性的特征；值得注意的是一旦将configurable
设置为false，则无法再使用defineProperty将其修改为true（执行会报错：can't redefine non-configurable property）;
**对于数据属性，可以取得：configurable,enumberable,writable和value；**
b) 访问器属性
- 它主要包括一对getter和setter函数，在读取访问器属性时，会调用getter返回有效值；写入访问器属性时，调用setter，写入新值；该属性有以下4个特征：
- [[Configurable]]:是否可通过delete操作符删除重新定义属性；
- [[Numberable]]:是否可通过for-in循环查找该属性；
- [[Get]]:读取属性时调用，默认：undefined;
- [[Set]]:写入属性时调用，默认：undefined;
- 访问器属性不能直接定义，必须使用defineProperty()来定义，如下：
var person = {
_age: 18
};
Object.defineProperty(person, 'isAdult', {
get: function () {
if (this._age >= 18) {
return true;
} else {
return false;
}
}
});
alert(person.isAdult?'成年':'未成年');//成年
- 从上面可知，定义访问器属性时getter与setter函数不是必须的,并且，在定义getter与setter时不能指定属性的configurable及writable特性；
- 此外，ECMA-262（5）还提供了一个Object.defineProperties()方法，可以用来一次性定义多个属性的特性：
var person = {};
Object.defineProperties(person,{
_age:{
value:19
},
isAdult:{
get: function () {
if (this._age >= 18) {
return true;
} else {
return false;
}
}
}
});
**对于访问器属性，可以取得：configurable,enumberable,get和set**
6. 创建对象（使用Object构造函数或对象字面量都可以创建对象，但缺点是创建多个对象时，
会产生大量的重复代码，因此下面介绍可解决这个问题的创建对象的方法）
a) 工厂模式
function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.getName = function () {
return this.name;
}
return o;//使用return返回生成的对象实例
}
var person = createPerson('Jack', 19, 'SoftWare Engineer');
**创建对象交给一个工厂方法来实现，可以传递参数，但主要缺点是无法识别对象类型，因为创建对象都是使用Object的原生构造函数来完成的。**
b) 构造函数模式
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = function () {
return this.name;
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engineer');
var person2 = new Person('Liye', 23, 'Mechanical Engineer');
使用自定义的构造函数（与普通函数一样，只是用它来创建对象），定义对象类型（如：Person）的属性和方法。它与工厂方法区别在于：
没有显式地创建对象
直接将属性和方法赋值给this对象；
没有return语句；
此外，要创建Person的实例，必须使用new关键字，以Person函数为构造函数，传递参数完成对象创建；实际创建经过以下4个过程：
创建一个对象
将函数的作用域赋给新对象（因此this指向这个新对象，如：person1）
执行构造函数的代码
返回该对象
上述由Person构造函数生成的两个对象person1与person2都是Person的实例，因此可以使用instanceof判断，并且因为所有对象
都继承Object，因此person1 instanceof Object也返回真：
alert(person1 instanceof Person);//true;
alert(person2 instanceof Person);//true;
alert(person1 instanceof Object);//true;
alert(person1.constructor === person2.constructor);//ture;
虽然构造函数方式比较不错，但也存在缺点，那就是在创建对象时，特别针对对象的属性指向函数时，会重复的创建函数实例，以上述代码为基础，可以改写为：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = new Function () {
//改写后效果与原代码相同，不过是为了方便理解
return this.name;
}
}
上述代码，创建多个实例时，会重复调用new Function();创建多个函数实例，这些函数实例还不是一个作用域中，当然这一般不会有错，但这会造成内存浪费。
当然，可以在函数中定义一个getName = getName的引用，而getName函数在Person外定义，这样可以解决重复创建函数实例问题，但在效果上并没有起到
封装的效果，如下所示：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = getName;
}
function getName() {//到处是代码，看着乱！！
return this.name;
}
c) 原型模式（JS每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，它是所有通过new操作符使用函数创建的实例的原型对象。
原型对象最大特点是，所有对象实例共享它所包含的属性和方法，也就是说，所有在原型对象中创建的属性或方法都直接被所有对象实例共享。）
function Person(){}
Person.prototype.name = 'Jack';//使用原型来添加属性
Person.prototype.age = 29;
Person.prototype.getName = function(){
return this.name;
}
var person1 = new Person();
alert(person1.getName());//Jack
var person2 = new Person();
alert(person1.getName === person2.getName);//true;共享一个原型对象的方法
原型是指向原型对象的，这个原型对象与构造函数没有太大关系，唯一的关系是函数的prototype是指向这个原型对象！而基于构造函数创建的对象实例也包含一个
内部指针为：[[prototype]]指向原型对象。
实例属性或方法的访问过程是一次搜索过程：
- 首先从对象实例本身开始，如果找到属性就直接返回该属性值；
- 如果实例本身不存在要查找属性，就继续搜索指针指向的原型对象，在其中查找给定名字的属性，如果有就返回；
- 基于以上分析，原型模式创建的对象实例，其属性是共享原型对象的；但也可以自己实例中再进行定义，在查找时，就不从原型对象获取，而是根据搜索原则，
得到本实例的返回；简单来说，就是实例中属性会屏蔽原型对象中的属性；
原型与in操作符
一句话：无论原型中属性，还是对象实例的属性，都可以使用in操作符访问到；要想判断是否是实例本身的属性可以使用object.hasOwnProperty(‘attr’)来判断；
原生对象中原型
原生对象中原型与普通对象的原型一样，可以添加/修改属性或方法，如以下代码为所有字符串对象添加去左右空白原型方法：
String.prototype.trim = function(){
return this.replace(/^\s+/,'').replace(/\s+$/,'');
}
var str = ' word space ';
alert('!'+str.trim()+'!');//!word space!
原型模式的缺点，它省略了为构造函数传递初始化参数，这在一定程序带来不便；另外，最主要是当对象的属性是引用类型时，它的值是不变的，总是引用
同一个外部对象，所有实例对该对象的操作都会其它实例：
function Person() {}
Person.prototype.name = 'Jack';
Person.prototype.lessons = ['Math','Physics'];
var person1 = new Person();
person1.lessons.push('Biology');
var person2 = new Person();
alert(person2.lessons);//Math,Physics,Biology，person1修改影响了person2
d) 组合构造函数及原型模式（目前最为常用的定义类型方式，是组合构造函数模式与原型模式。构造函数模式用于定义实例的属性，而原型模式用于定义方法和共享的
属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方方法的引用，最大限度的节约内存。此外，组合模式还支持向构造函数传递参数，可谓是集两家之
所长。
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.lessons = ['Math', 'Physics'];
}
Person.prototype = {
constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
getName: function () {
return this.name;
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法
在所接触的JS库中，jQuery类型的封装就是使用组合模式来实例的！！！
e) 动态原型模式（组合模式中实例属性与共享方法（由原型定义）是分离的，这与纯面向对象语言不太一致；动态原型模式将所有构造信息都封装在构造函数中，
又保持了组合的优点。其原理就是通过判断构造函数的原型中是否已经定义了共享的方法或属性，如果没有则定义，否则不再执行定义过程。）
该方式只原型上方法或属性只定义一次，且将所有构造过程都封装在构造函数中，对原型所做的修改能立即体现所有实例中：
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.lessons = ['Math', 'Physics'];
}
if (typeof this.getName != 'function') {//通过判断实例封装
Person.prototype = {
constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
getName: function () {
return this.name;
}
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法
#二、原型
function Person(name){
this.name=name;
this.showMe=function(){
alert(this.name);
}
}
var one = new Preson('javaScript');
alert(one.showMe());
function定义的这个Person就是一个Object(对象),而且还是一个很特殊的对象，这个使用function定义的对象与使用new操作符生成的对象之间有一个
重要的区别。这个区别就是function定义的对象有一个prototype属性，使用new生成的对象就没有这个prototype属性，我们一般称为普通对象！
我们需要理解记忆以下的逻辑顺序：
Person是一个对象，它有一个prototype的原型属性（因为所有的对象都一prototype原型！）prototype属性有自己的prototype对象，而pototype对象肯定也有自己的
constuct 属性，construct 属性有自己的 constructor 对象，神奇的事情要发生了，这最后一个 constructor 对象就是我们构造出来的function函数本身！
function Person(name){
this.name=name;
this.showMe=function(){
alert(this.name);
}
}
var one = new Preson('js');
alert(one.prototype);//undefined 证明new出来的对象是没有原型的
alert(typeOf person.prototype)//object 证明我们构造出来的Function的原型的类型就是一个对象！
alert(Person.prototype.constructor)//返回函数本身，证明了原型的理论，
实际用途：它给我们最实际的用处就是我们可以用原型来创建对象的属性和方法！我们不用它不也是可以创建属性和方法！这里是有区别的，既然不一样就有存在的价值！我们可以通过给原型添加属性和方法来给给对象添加属性或方法！
Hero.prototype.name;
Hero.prototype.sayMe = function(){"添加对象的方法其实就是添加函数"}
让我们再深一步：当我们给对象添加了同名的属性或方法时会发生什么？
function Hero(){
this.name="zhangsan"
this.sayMe = function(){
alert("this is zhangsan.")
}
}
//通过原型增加的属性和方法
Hero.prototype.name1 = "wangwu";
Hero.prototype.sayMe1 = function(){
alert("this is wangwu.")
};
var hero = new Hero();
alert(hero.name)
alert(hero.name1)
hero.sayMe();
// delete hero.name
alert(hero.name)//
我们验证了这个例子得到得到了一些结论：
当函数对象本身的属性或方法与原型的属性或方法同名的时候：
1、默认调用的是函数对象本身的属性或方法.
2、通过原型增加的属性或方法的确是存在的.
3、函数对象本身的属性或方法的优先级要高于原型的属性或方法.
----------
#三、作用域、原型链 及二者区别
**作用域是针对变量的，比如我们创建了一个函数，函数里面又包含了一个函数，那么现在就有三个作用域**
全局作用域==>函数1作用域==>函数2作用域
作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。
如：
var a = 1;
function b(){
var a = 2;
function c(){
var a = 3;
console.log(a);
}
c();
}
b();
最后打印出来的是3，因为执行函数c（）的时候它在自己的范围内找到了变量a所以就不会越上继续查找，如果在函数c()中没有找到则会继续向上找，一直会找到全局变量a，这个查找的过程就叫作用域链。
不知道你有没有疑问，函数c为什么可以在函数b中查找变量a，因为函数c是在函数b中创建的，也就是说函数c的作用域包括了函数b的作用域，当然也包括了全局作用域，但是函数b不能向函数c中查找变量，因为作用域只会向上查找。
----------
原型链是针对构造函数的，比如我先创建了一个函数，然后通过一个变量new了这个函数，那么这个被new出来的函数就会继承创建出来的那个函数的属性，然后如果我访问new出来的这个函数的某个属性，但是我并没有在这个new出来的函数中定义这个变量，那么它就会往上（向创建出它的函数中）查找，这个查找的过程就叫做原型链。
Object ==> 构造函数1 ==> 构造函数2
就和css中的继承一样，如果自身没有定义就会继承父元素的样式。
function a(){};
a.prototype.name = "abc";
var b = new a();
console.log(b.name); //abc
----------
#四、闭包
**一、变量的作用域**
要理解闭包，首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种：全局变量和局部变量。
Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。
var n=999;
function f1(){
alert(n);
}
f1(); // 999
另一方面，在函数外部自然无法读取函数内的局部变量。
function f1(){
n=999;
}
f1();
alert(n); // 999
**二、如何从外部读取局部变量？**
出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。
那就是在函数的内部，再定义一个函数。
function f1(){
var n=999;
function f2(){
alert(n); // 999
}
}
在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
***既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！***
function f1(){
var n=999;
function f2(){
alert(n);
}return f2;}
var result=f1();
result(); // 999
**三、闭包的概念**
上一节代码中的f2函数，就是闭包。
各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是， **闭包就是能够读取其他函数内部变量的函数**。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
**四、闭包的用途**
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢？请看下面的代码。
function f1(){
var n=999;
nAdd=function(){
n+=1
};
function f2(){
alert(n);
}return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
**五、使用闭包的注意点**
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
**六、思考题**
如果你能理解下面两段代码的运行结果，应该就算理解闭包的运行机制了。
代码片段一。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());
代码片段二。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());
----------
#五、红皮书 里面 写的 方法 和 平时 开发 有哪些 优点和 缺点
#六、你怎么进行 模块化开发 的
**JAVASCRIPT模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。**
**一、原始写法**
模块就是实现特定功能的一组方法。
只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。
function m1(){
.....
}
function m2(){
.....
}
上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。
这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。
**二、对象写法**
为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。
var module1 = new Object({
_count : 0,
m1 : function (){
//...
},
m2 : function (){
//...
}
});
上面的函数m1()和m2(），都封装在module1对象里。使用的时候，就是调用这个对象的属性
module1.m1();
但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。
module1._count = 5;
**三、立即执行函数写法**
使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
使用上面的写法，外部代码无法读取内部的_count变量。
console.info(module1._count); //undefined
module1就是Javascript模块的基本写法。下面，再对这种写法进行加工。
**四、放大模式**
如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。
var module1 = (function (mod){
mod.m3 = function () {
//...
};
return mod;
})(module1);
上面的代码为module1模块添加了一个新方法m3()，然后返回新的module1模块。
**五、宽放大模式（Loose augmentation）**
在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。
var module1 = ( function (mod){
//...
return mod;
})(window.module1 || {});
与"放大模式"相比，＂宽放大模式＂就是"立即执行函数"的参数可以是空对象。
[详情走你！！！](http://www.ruanyifeng.com/blog/2012/10/javascript_module.html "哈哈")
#七、MVC、MVVM 有啥 区别
**mvc**
著名MVC框架 Rails MVC 视图层和模型层没有直接的耦合，而是通过控制器作为中间人对信息进行传递：
! [](https://raw.githubusercontent.com/Draveness/analyze/master/contents/architecture/images/mvx/MVC-with-Rails.jpg)
Model-View-Controller
View ==> Controller ==> Model ==> View
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020105.png)
视图将指令传达给控制器、控制器运行业务代码、反馈给模型改变状态、模型将数据传递给视图进行展示。
当存在用户操作时有两种方式：
1、通过 View 接受指令，传递给 Controller。
用户 ==> View ==> Controller ==> Model ==> View
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020106.png)
2、直接通过controller接受指令。
用户 ==> Controller ==> Model ==> View
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020107.png)
实际开发中会更加灵活的运用例如:
1、用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
2、 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
3、 Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器）
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020108.png)
**MVP**
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
View ==> Presenter ==> Model
Model ==> Presenter ==> View
1、 各部分之间的通信，都是双向的。
2、View 与 Model 不发生联系，都通过 Presenter 传递。
3、View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020109.png)
**MVVM**
MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。
唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020110.png)
#八、artTemplate模板引擎的使用
**原理：** 动态执行JavaScript字符串！
**优点：**
1. 预编译：渲染需要动态编译JavaScript字符串完成变量赋值。而artTemplate的编译赋值过程却是在渲染之前完成的
2. 更快的字符串相加方式： IE6-8的浏览器下，数组push方法拼接字符串会比“+=”快，而在v8引擎中，使用“+=”方式比数组拼接快4.7倍；所以 artTemplate 根据JavaScript引擎特性采用了两种不同的字符串拼接方式。
3. 支持运行时调试，可精确定位异常模板所在语句：（动态解析，所以调试器无法定位到错误）渲染的时候遇到错误会进入调试模式重新编译模板，而不会影响正常的模板执行效率。模板编译器根据模板换行符记录行号，当执行过程遇到错误，立马抛出异常模板对应的行号，模板调试器再根据行号反查模板对应的语句并打印到控制台。源码L282
4. 对Node端支持良好，便于以后统一扩展！
1.
面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！
但JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：无序属性的集合，其属性可以包含基本值、对象或者函数。可以简单理解为JS
的对象是一组无序的值，其中的属性或方法都有一个名字，根据这个名字可以访问相映射的值（值可以是基本值/对象/方法）
2.
原型模式如类模式一样，都是是一种编程泛型，即编程的方法论。另外最近大红大紫的函数编程也是一种编程泛型。JavaScript之父Brendan Eich在设计
JavaScript时，从一开始就没打算为其加入类的概念，而是借鉴了另外两门基于原型的的语言：Self和Smalltalk。既然同为面向对象语言，那就得有创建对象
的方法。在类语言中，对象基于模板来创建，首先定义一个类作为对现实世界的抽象，然后由类来实例化对象；而在原型语言中，对象以克隆另一个对象的方式创
建，被克隆的母体称为原型对象。
3. 对象有两种：一种是基于Object的
var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){
return this.name;
}
4. 另一种是对象字面量形式（比较清楚的查找对象包含的属性及方法）
var person = {
name : 'My name',
age : 18,
getName : function(){
return this.name;
}
}
可以用“.”操作符进行 动态的扩展及删除
person.newAtt=’new Attr’;//添加属性
alert(person.newAtt);//new Attr
delete person.age;
alert(person.age);//undefined(删除属性后值为undefined);
5. 对象属性类型（分为两类）
a) 数据属性
- 数据属性指包含一个数据值的位置，可在该位置读取或写入值，该属性有4个供述其行为的特性：
- [[configurable]]:表示能否使用delete操作符删除从而重新定义，或能否修改为访问器属性。默认为true;
- [[Enumberable]]:表示是否可通过for-in循环返回属性。默认true;
- [[Writable]]:表示是否可修改属性的值。默认true;
- [[Value]]:包含该属性的数据值。读取/写入都是该值。默认为undefined;如上面实例对象person中定义了name属性，其值为’My name’,
对该值的修改都反正在这个位置
6、要修改对象属性的默认特征（默认都为true)，可调用Object.defineProperty()方法，它接收三个参数：
属性所在对象，属性名和一个描述符对象（必须是：configurable、enumberable、writable和value，可设置一个或多个值）。
如下：（浏览器支持：IE9+、Firefox 4+、Chrome、Safari5+）
var person = {};
Object.defineProperty(person, 'name', {
configurable: false,
writable: false,
value: 'Jack'
});
alert(person.name);//Jack
delete person.name;
person.name = 'lily';
alert(person.name);//Jack
7、可以看出，delete及重置person.name的值都没有生效，这就是因为调用defineProperty函数修改了对象属性的特征；值得注意的是一旦将configurable
设置为false，则无法再使用defineProperty将其修改为true（执行会报错：can't redefine non-configurable property）;
**对于数据属性，可以取得：configurable,enumberable,writable和value；**
b) 访问器属性
- 它主要包括一对getter和setter函数，在读取访问器属性时，会调用getter返回有效值；写入访问器属性时，调用setter，写入新值；该属性有以下4个特征：
- [[Configurable]]:是否可通过delete操作符删除重新定义属性；
- [[Numberable]]:是否可通过for-in循环查找该属性；
- [[Get]]:读取属性时调用，默认：undefined;
- [[Set]]:写入属性时调用，默认：undefined;
- 访问器属性不能直接定义，必须使用defineProperty()来定义，如下：
var person = {
_age: 18
};
Object.defineProperty(person, 'isAdult', {
get: function () {
if (this._age >= 18) {
return true;
} else {
return false;
}
}
});
alert(person.isAdult?'成年':'未成年');//成年
- 从上面可知，定义访问器属性时getter与setter函数不是必须的,并且，在定义getter与setter时不能指定属性的configurable及writable特性；
- 此外，ECMA-262（5）还提供了一个Object.defineProperties()方法，可以用来一次性定义多个属性的特性：
var person = {};
Object.defineProperties(person,{
_age:{
value:19
},
isAdult:{
get: function () {
if (this._age >= 18) {
return true;
} else {
return false;
}
}
}
});
**对于访问器属性，可以取得：configurable,enumberable,get和set**
6. 创建对象（使用Object构造函数或对象字面量都可以创建对象，但缺点是创建多个对象时，
会产生大量的重复代码，因此下面介绍可解决这个问题的创建对象的方法）
a) 工厂模式
function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.getName = function () {
return this.name;
}
return o;//使用return返回生成的对象实例
}
var person = createPerson('Jack', 19, 'SoftWare Engineer');
**创建对象交给一个工厂方法来实现，可以传递参数，但主要缺点是无法识别对象类型，因为创建对象都是使用Object的原生构造函数来完成的。**
b) 构造函数模式
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = function () {
return this.name;
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engineer');
var person2 = new Person('Liye', 23, 'Mechanical Engineer');
使用自定义的构造函数（与普通函数一样，只是用它来创建对象），定义对象类型（如：Person）的属性和方法。它与工厂方法区别在于：
没有显式地创建对象
直接将属性和方法赋值给this对象；
没有return语句；
此外，要创建Person的实例，必须使用new关键字，以Person函数为构造函数，传递参数完成对象创建；实际创建经过以下4个过程：
创建一个对象
将函数的作用域赋给新对象（因此this指向这个新对象，如：person1）
执行构造函数的代码
返回该对象
上述由Person构造函数生成的两个对象person1与person2都是Person的实例，因此可以使用instanceof判断，并且因为所有对象
都继承Object，因此person1 instanceof Object也返回真：
alert(person1 instanceof Person);//true;
alert(person2 instanceof Person);//true;
alert(person1 instanceof Object);//true;
alert(person1.constructor === person2.constructor);//ture;
虽然构造函数方式比较不错，但也存在缺点，那就是在创建对象时，特别针对对象的属性指向函数时，会重复的创建函数实例，以上述代码为基础，可以改写为：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = new Function () {
//改写后效果与原代码相同，不过是为了方便理解
return this.name;
}
}
上述代码，创建多个实例时，会重复调用new Function();创建多个函数实例，这些函数实例还不是一个作用域中，当然这一般不会有错，但这会造成内存浪费。
当然，可以在函数中定义一个getName = getName的引用，而getName函数在Person外定义，这样可以解决重复创建函数实例问题，但在效果上并没有起到
封装的效果，如下所示：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = getName;
}
function getName() {//到处是代码，看着乱！！
return this.name;
}
c) 原型模式（JS每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，它是所有通过new操作符使用函数创建的实例的原型对象。
原型对象最大特点是，所有对象实例共享它所包含的属性和方法，也就是说，所有在原型对象中创建的属性或方法都直接被所有对象实例共享。）
function Person(){}
Person.prototype.name = 'Jack';//使用原型来添加属性
Person.prototype.age = 29;
Person.prototype.getName = function(){
return this.name;
}
var person1 = new Person();
alert(person1.getName());//Jack
var person2 = new Person();
alert(person1.getName === person2.getName);//true;共享一个原型对象的方法
原型是指向原型对象的，这个原型对象与构造函数没有太大关系，唯一的关系是函数的prototype是指向这个原型对象！而基于构造函数创建的对象实例也包含一个
内部指针为：[[prototype]]指向原型对象。
实例属性或方法的访问过程是一次搜索过程：
- 首先从对象实例本身开始，如果找到属性就直接返回该属性值；
- 如果实例本身不存在要查找属性，就继续搜索指针指向的原型对象，在其中查找给定名字的属性，如果有就返回；
- 基于以上分析，原型模式创建的对象实例，其属性是共享原型对象的；但也可以自己实例中再进行定义，在查找时，就不从原型对象获取，而是根据搜索原则，
得到本实例的返回；简单来说，就是实例中属性会屏蔽原型对象中的属性；
原型与in操作符
一句话：无论原型中属性，还是对象实例的属性，都可以使用in操作符访问到；要想判断是否是实例本身的属性可以使用object.hasOwnProperty(‘attr’)来判断；
原生对象中原型
原生对象中原型与普通对象的原型一样，可以添加/修改属性或方法，如以下代码为所有字符串对象添加去左右空白原型方法：
String.prototype.trim = function(){
return this.replace(/^\s+/,'').replace(/\s+$/,'');
}
var str = ' word space ';
alert('!'+str.trim()+'!');//!word space!
原型模式的缺点，它省略了为构造函数传递初始化参数，这在一定程序带来不便；另外，最主要是当对象的属性是引用类型时，它的值是不变的，总是引用
同一个外部对象，所有实例对该对象的操作都会其它实例：
function Person() {}
Person.prototype.name = 'Jack';
Person.prototype.lessons = ['Math','Physics'];
var person1 = new Person();
person1.lessons.push('Biology');
var person2 = new Person();
alert(person2.lessons);//Math,Physics,Biology，person1修改影响了person2
d) 组合构造函数及原型模式（目前最为常用的定义类型方式，是组合构造函数模式与原型模式。构造函数模式用于定义实例的属性，而原型模式用于定义方法和共享的
属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方方法的引用，最大限度的节约内存。此外，组合模式还支持向构造函数传递参数，可谓是集两家之
所长。
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.lessons = ['Math', 'Physics'];
}
Person.prototype = {
constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
getName: function () {
return this.name;
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法
在所接触的JS库中，jQuery类型的封装就是使用组合模式来实例的！！！
e) 动态原型模式（组合模式中实例属性与共享方法（由原型定义）是分离的，这与纯面向对象语言不太一致；动态原型模式将所有构造信息都封装在构造函数中，
又保持了组合的优点。其原理就是通过判断构造函数的原型中是否已经定义了共享的方法或属性，如果没有则定义，否则不再执行定义过程。）
该方式只原型上方法或属性只定义一次，且将所有构造过程都封装在构造函数中，对原型所做的修改能立即体现所有实例中：
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.lessons = ['Math', 'Physics'];
}
if (typeof this.getName != 'function') {//通过判断实例封装
Person.prototype = {
constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
getName: function () {
return this.name;
}
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法
#二、原型
function Person(name){
this.name=name;
this.showMe=function(){
alert(this.name);
}
}
var one = new Preson('javaScript');
alert(one.showMe());
function定义的这个Person就是一个Object(对象),而且还是一个很特殊的对象，这个使用function定义的对象与使用new操作符生成的对象之间有一个
重要的区别。这个区别就是function定义的对象有一个prototype属性，使用new生成的对象就没有这个prototype属性，我们一般称为普通对象！
我们需要理解记忆以下的逻辑顺序：
Person是一个对象，它有一个prototype的原型属性（因为所有的对象都一prototype原型！）prototype属性有自己的prototype对象，而pototype对象肯定也有自己的
constuct 属性，construct 属性有自己的 constructor 对象，神奇的事情要发生了，这最后一个 constructor 对象就是我们构造出来的function函数本身！
function Person(name){
this.name=name;
this.showMe=function(){
alert(this.name);
}
}
var one = new Preson('js');
alert(one.prototype);//undefined 证明new出来的对象是没有原型的
alert(typeOf person.prototype)//object 证明我们构造出来的Function的原型的类型就是一个对象！
alert(Person.prototype.constructor)//返回函数本身，证明了原型的理论，
实际用途：它给我们最实际的用处就是我们可以用原型来创建对象的属性和方法！我们不用它不也是可以创建属性和方法！这里是有区别的，既然不一样就有存在的价值！我们可以通过给原型添加属性和方法来给给对象添加属性或方法！
Hero.prototype.name;
Hero.prototype.sayMe = function(){"添加对象的方法其实就是添加函数"}
让我们再深一步：当我们给对象添加了同名的属性或方法时会发生什么？
function Hero(){
this.name="zhangsan"
this.sayMe = function(){
alert("this is zhangsan.")
}
}
//通过原型增加的属性和方法
Hero.prototype.name1 = "wangwu";
Hero.prototype.sayMe1 = function(){
alert("this is wangwu.")
};
var hero = new Hero();
alert(hero.name)
alert(hero.name1)
hero.sayMe();
// delete hero.name
alert(hero.name)//
我们验证了这个例子得到得到了一些结论：
当函数对象本身的属性或方法与原型的属性或方法同名的时候：
1、默认调用的是函数对象本身的属性或方法.
2、通过原型增加的属性或方法的确是存在的.
3、函数对象本身的属性或方法的优先级要高于原型的属性或方法.
----------
#三、作用域、原型链 及二者区别
**作用域是针对变量的，比如我们创建了一个函数，函数里面又包含了一个函数，那么现在就有三个作用域**
全局作用域==>函数1作用域==>函数2作用域
作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。
如：
var a = 1;
function b(){
var a = 2;
function c(){
var a = 3;
console.log(a);
}
c();
}
b();
最后打印出来的是3，因为执行函数c（）的时候它在自己的范围内找到了变量a所以就不会越上继续查找，如果在函数c()中没有找到则会继续向上找，一直会找到全局变量a，这个查找的过程就叫作用域链。
不知道你有没有疑问，函数c为什么可以在函数b中查找变量a，因为函数c是在函数b中创建的，也就是说函数c的作用域包括了函数b的作用域，当然也包括了全局作用域，但是函数b不能向函数c中查找变量，因为作用域只会向上查找。
----------
原型链是针对构造函数的，比如我先创建了一个函数，然后通过一个变量new了这个函数，那么这个被new出来的函数就会继承创建出来的那个函数的属性，然后如果我访问new出来的这个函数的某个属性，但是我并没有在这个new出来的函数中定义这个变量，那么它就会往上（向创建出它的函数中）查找，这个查找的过程就叫做原型链。
Object ==> 构造函数1 ==> 构造函数2
就和css中的继承一样，如果自身没有定义就会继承父元素的样式。
function a(){};
a.prototype.name = "abc";
var b = new a();
console.log(b.name); //abc
----------
#四、闭包
**一、变量的作用域**
要理解闭包，首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种：全局变量和局部变量。
Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。
var n=999;
function f1(){
alert(n);
}
f1(); // 999
另一方面，在函数外部自然无法读取函数内的局部变量。
function f1(){
n=999;
}
f1();
alert(n); // 999
**二、如何从外部读取局部变量？**
出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。
那就是在函数的内部，再定义一个函数。
function f1(){
var n=999;
function f2(){
alert(n); // 999
}
}
在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
***既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！***
function f1(){
var n=999;
function f2(){
alert(n);
}return f2;}
var result=f1();
result(); // 999
**三、闭包的概念**
上一节代码中的f2函数，就是闭包。
各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是， **闭包就是能够读取其他函数内部变量的函数**。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
**四、闭包的用途**
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢？请看下面的代码。
function f1(){
var n=999;
nAdd=function(){
n+=1
};
function f2(){
alert(n);
}return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
**五、使用闭包的注意点**
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
**六、思考题**
如果你能理解下面两段代码的运行结果，应该就算理解闭包的运行机制了。
代码片段一。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());
代码片段二。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());
----------
#五、红皮书 里面 写的 方法 和 平时 开发 有哪些 优点和 缺点
#六、你怎么进行 模块化开发 的
**JAVASCRIPT模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。**
**一、原始写法**
模块就是实现特定功能的一组方法。
只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。
function m1(){
.....
}
function m2(){
.....
}
上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。
这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。
**二、对象写法**
为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。
var module1 = new Object({
_count : 0,
m1 : function (){
//...
},
m2 : function (){
//...
}
});
上面的函数m1()和m2(），都封装在module1对象里。使用的时候，就是调用这个对象的属性
module1.m1();
但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。
module1._count = 5;
**三、立即执行函数写法**
使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
使用上面的写法，外部代码无法读取内部的_count变量。
console.info(module1._count); //undefined
module1就是Javascript模块的基本写法。下面，再对这种写法进行加工。
**四、放大模式**
如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。
var module1 = (function (mod){
mod.m3 = function () {
//...
};
return mod;
})(module1);
上面的代码为module1模块添加了一个新方法m3()，然后返回新的module1模块。
**五、宽放大模式（Loose augmentation）**
在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。
var module1 = ( function (mod){
//...
return mod;
})(window.module1 || {});
与"放大模式"相比，＂宽放大模式＂就是"立即执行函数"的参数可以是空对象。
[详情走你！！！](http://www.ruanyifeng.com/blog/2012/10/javascript_module.html "哈哈")
#七、MVC、MVVM 有啥 区别
**mvc**
著名MVC框架 Rails MVC 视图层和模型层没有直接的耦合，而是通过控制器作为中间人对信息进行传递：
! [](https://raw.githubusercontent.com/Draveness/analyze/master/contents/architecture/images/mvx/MVC-with-Rails.jpg)
Model-View-Controller
View ==> Controller ==> Model ==> View
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020105.png)
视图将指令传达给控制器、控制器运行业务代码、反馈给模型改变状态、模型将数据传递给视图进行展示。
当存在用户操作时有两种方式：
1、通过 View 接受指令，传递给 Controller。
用户 ==> View ==> Controller ==> Model ==> View
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020106.png)
2、直接通过controller接受指令。
用户 ==> Controller ==> Model ==> View
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020107.png)
实际开发中会更加灵活的运用例如:
1、用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
2、 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
3、 Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器）
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020108.png)
**MVP**
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
View ==> Presenter ==> Model
Model ==> Presenter ==> View
1、 各部分之间的通信，都是双向的。
2、View 与 Model 不发生联系，都通过 Presenter 传递。
3、View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020109.png)
**MVVM**
MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。
唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020110.png)
#八、artTemplate模板引擎的使用
**原理：** 动态执行JavaScript字符串！
**优点：**
1. 预编译：渲染需要动态编译JavaScript字符串完成变量赋值。而artTemplate的编译赋值过程却是在渲染之前完成的
2. 更快的字符串相加方式： IE6-8的浏览器下，数组push方法拼接字符串会比“+=”快，而在v8引擎中，使用“+=”方式比数组拼接快4.7倍；所以 artTemplate 根据JavaScript引擎特性采用了两种不同的字符串拼接方式。
3. 支持运行时调试，可精确定位异常模板所在语句：（动态解析，所以调试器无法定位到错误）渲染的时候遇到错误会进入调试模式重新编译模板，而不会影响正常的模板执行效率。模板编译器根据模板换行符记录行号，当执行过程遇到错误，立马抛出异常模板对应的行号，模板调试器再根据行号反查模板对应的语句并打印到控制台。源码L282
4. 对Node端支持良好，便于以后统一扩展！ #一、面向对象：（以上内容抄录自[面向对象](https://www.cnblogs.com/shenjp/p/6517743.html "面向对象")） 1.
面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！
但JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：无序属性的集合，其属性可以包含基本值、对象或者函数。可以简单理解为JS
的对象是一组无序的值，其中的属性或方法都有一个名字，根据这个名字可以访问相映射的值（值可以是基本值/对象/方法）
2.
原型模式如类模式一样，都是是一种编程泛型，即编程的方法论。另外最近大红大紫的函数编程也是一种编程泛型。JavaScript之父Brendan Eich在设计
JavaScript时，从一开始就没打算为其加入类的概念，而是借鉴了另外两门基于原型的的语言：Self和Smalltalk。既然同为面向对象语言，那就得有创建对象
的方法。在类语言中，对象基于模板来创建，首先定义一个类作为对现实世界的抽象，然后由类来实例化对象；而在原型语言中，对象以克隆另一个对象的方式创
建，被克隆的母体称为原型对象。
3. 对象有两种：一种是基于Object的
var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){
return this.name;
}
4. 另一种是对象字面量形式（比较清楚的查找对象包含的属性及方法）
var person = {
name : 'My name',
age : 18,
getName : function(){
return this.name;
}
}
可以用“.”操作符进行 动态的扩展及删除
person.newAtt=’new Attr’;//添加属性
alert(person.newAtt);//new Attr
delete person.age;
alert(person.age);//undefined(删除属性后值为undefined);
5. 对象属性类型（分为两类）
a) 数据属性
- 数据属性指包含一个数据值的位置，可在该位置读取或写入值，该属性有4个供述其行为的特性：
- [[configurable]]:表示能否使用delete操作符删除从而重新定义，或能否修改为访问器属性。默认为true;
- [[Enumberable]]:表示是否可通过for-in循环返回属性。默认true;
- [[Writable]]:表示是否可修改属性的值。默认true;
- [[Value]]:包含该属性的数据值。读取/写入都是该值。默认为undefined;如上面实例对象person中定义了name属性，其值为’My name’,
对该值的修改都反正在这个位置
6、要修改对象属性的默认特征（默认都为true)，可调用Object.defineProperty()方法，它接收三个参数：
属性所在对象，属性名和一个描述符对象（必须是：configurable、enumberable、writable和value，可设置一个或多个值）。
如下：（浏览器支持：IE9+、Firefox 4+、Chrome、Safari5+）
var person = {};
Object.defineProperty(person, 'name', {
configurable: false,
writable: false,
value: 'Jack'
});
alert(person.name);//Jack
delete person.name;
person.name = 'lily';
alert(person.name);//Jack
7、可以看出，delete及重置person.name的值都没有生效，这就是因为调用defineProperty函数修改了对象属性的特征；值得注意的是一旦将configurable
设置为false，则无法再使用defineProperty将其修改为true（执行会报错：can't redefine non-configurable property）;
**对于数据属性，可以取得：configurable,enumberable,writable和value；**
b) 访问器属性
- 它主要包括一对getter和setter函数，在读取访问器属性时，会调用getter返回有效值；写入访问器属性时，调用setter，写入新值；该属性有以下4个特征：
- [[Configurable]]:是否可通过delete操作符删除重新定义属性；
- [[Numberable]]:是否可通过for-in循环查找该属性；
- [[Get]]:读取属性时调用，默认：undefined;
- [[Set]]:写入属性时调用，默认：undefined;
- 访问器属性不能直接定义，必须使用defineProperty()来定义，如下：
var person = {
_age: 18
};
Object.defineProperty(person, 'isAdult', {
get: function () {
if (this._age >= 18) {
return true;
} else {
return false;
}
}
});
alert(person.isAdult?'成年':'未成年');//成年
- 从上面可知，定义访问器属性时getter与setter函数不是必须的,并且，在定义getter与setter时不能指定属性的configurable及writable特性；
- 此外，ECMA-262（5）还提供了一个Object.defineProperties()方法，可以用来一次性定义多个属性的特性：
var person = {};
Object.defineProperties(person,{
_age:{
value:19
},
isAdult:{
get: function () {
if (this._age >= 18) {
return true;
} else {
return false;
}
}
}
});
**对于访问器属性，可以取得：configurable,enumberable,get和set**
6. 创建对象（使用Object构造函数或对象字面量都可以创建对象，但缺点是创建多个对象时，
会产生大量的重复代码，因此下面介绍可解决这个问题的创建对象的方法）
a) 工厂模式
function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.getName = function () {
return this.name;
}
return o;//使用return返回生成的对象实例
}
var person = createPerson('Jack', 19, 'SoftWare Engineer');
**创建对象交给一个工厂方法来实现，可以传递参数，但主要缺点是无法识别对象类型，因为创建对象都是使用Object的原生构造函数来完成的。**
b) 构造函数模式
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = function () {
return this.name;
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engineer');
var person2 = new Person('Liye', 23, 'Mechanical Engineer');
使用自定义的构造函数（与普通函数一样，只是用它来创建对象），定义对象类型（如：Person）的属性和方法。它与工厂方法区别在于：
没有显式地创建对象
直接将属性和方法赋值给this对象；
没有return语句；
此外，要创建Person的实例，必须使用new关键字，以Person函数为构造函数，传递参数完成对象创建；实际创建经过以下4个过程：
创建一个对象
将函数的作用域赋给新对象（因此this指向这个新对象，如：person1）
执行构造函数的代码
返回该对象
上述由Person构造函数生成的两个对象person1与person2都是Person的实例，因此可以使用instanceof判断，并且因为所有对象
都继承Object，因此person1 instanceof Object也返回真：
alert(person1 instanceof Person);//true;
alert(person2 instanceof Person);//true;
alert(person1 instanceof Object);//true;
alert(person1.constructor === person2.constructor);//ture;
虽然构造函数方式比较不错，但也存在缺点，那就是在创建对象时，特别针对对象的属性指向函数时，会重复的创建函数实例，以上述代码为基础，可以改写为：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = new Function () {
//改写后效果与原代码相同，不过是为了方便理解
return this.name;
}
}
上述代码，创建多个实例时，会重复调用new Function();创建多个函数实例，这些函数实例还不是一个作用域中，当然这一般不会有错，但这会造成内存浪费。
当然，可以在函数中定义一个getName = getName的引用，而getName函数在Person外定义，这样可以解决重复创建函数实例问题，但在效果上并没有起到
封装的效果，如下所示：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = getName;
}
function getName() {//到处是代码，看着乱！！
return this.name;
}
c) 原型模式（JS每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，它是所有通过new操作符使用函数创建的实例的原型对象。
原型对象最大特点是，所有对象实例共享它所包含的属性和方法，也就是说，所有在原型对象中创建的属性或方法都直接被所有对象实例共享。）
function Person(){}
Person.prototype.name = 'Jack';//使用原型来添加属性
Person.prototype.age = 29;
Person.prototype.getName = function(){
return this.name;
}
var person1 = new Person();
alert(person1.getName());//Jack
var person2 = new Person();
alert(person1.getName === person2.getName);//true;共享一个原型对象的方法
原型是指向原型对象的，这个原型对象与构造函数没有太大关系，唯一的关系是函数的prototype是指向这个原型对象！而基于构造函数创建的对象实例也包含一个
内部指针为：[[prototype]]指向原型对象。
实例属性或方法的访问过程是一次搜索过程：
- 首先从对象实例本身开始，如果找到属性就直接返回该属性值；
- 如果实例本身不存在要查找属性，就继续搜索指针指向的原型对象，在其中查找给定名字的属性，如果有就返回；
- 基于以上分析，原型模式创建的对象实例，其属性是共享原型对象的；但也可以自己实例中再进行定义，在查找时，就不从原型对象获取，而是根据搜索原则，
得到本实例的返回；简单来说，就是实例中属性会屏蔽原型对象中的属性；
原型与in操作符
一句话：无论原型中属性，还是对象实例的属性，都可以使用in操作符访问到；要想判断是否是实例本身的属性可以使用object.hasOwnProperty(‘attr’)来判断；
原生对象中原型
原生对象中原型与普通对象的原型一样，可以添加/修改属性或方法，如以下代码为所有字符串对象添加去左右空白原型方法：
String.prototype.trim = function(){
return this.replace(/^\s+/,'').replace(/\s+$/,'');
}
var str = ' word space ';
alert('!'+str.trim()+'!');//!word space!
原型模式的缺点，它省略了为构造函数传递初始化参数，这在一定程序带来不便；另外，最主要是当对象的属性是引用类型时，它的值是不变的，总是引用
同一个外部对象，所有实例对该对象的操作都会其它实例：
function Person() {}
Person.prototype.name = 'Jack';
Person.prototype.lessons = ['Math','Physics'];
var person1 = new Person();
person1.lessons.push('Biology');
var person2 = new Person();
alert(person2.lessons);//Math,Physics,Biology，person1修改影响了person2
d) 组合构造函数及原型模式（目前最为常用的定义类型方式，是组合构造函数模式与原型模式。构造函数模式用于定义实例的属性，而原型模式用于定义方法和共享的
属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方方法的引用，最大限度的节约内存。此外，组合模式还支持向构造函数传递参数，可谓是集两家之
所长。
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.lessons = ['Math', 'Physics'];
}
Person.prototype = {
constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
getName: function () {
return this.name;
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法
在所接触的JS库中，jQuery类型的封装就是使用组合模式来实例的！！！
e) 动态原型模式（组合模式中实例属性与共享方法（由原型定义）是分离的，这与纯面向对象语言不太一致；动态原型模式将所有构造信息都封装在构造函数中，
又保持了组合的优点。其原理就是通过判断构造函数的原型中是否已经定义了共享的方法或属性，如果没有则定义，否则不再执行定义过程。）
该方式只原型上方法或属性只定义一次，且将所有构造过程都封装在构造函数中，对原型所做的修改能立即体现所有实例中：
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.lessons = ['Math', 'Physics'];
}
if (typeof this.getName != 'function') {//通过判断实例封装
Person.prototype = {
constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
getName: function () {
return this.name;
}
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法
#二、原型
function Person(name){
this.name=name;
this.showMe=function(){
alert(this.name);
}
}
var one = new Preson('javaScript');
alert(one.showMe());
function定义的这个Person就是一个Object(对象),而且还是一个很特殊的对象，这个使用function定义的对象与使用new操作符生成的对象之间有一个
重要的区别。这个区别就是function定义的对象有一个prototype属性，使用new生成的对象就没有这个prototype属性，我们一般称为普通对象！
我们需要理解记忆以下的逻辑顺序：
Person是一个对象，它有一个prototype的原型属性（因为所有的对象都一prototype原型！）prototype属性有自己的prototype对象，而pototype对象肯定也有自己的
constuct 属性，construct 属性有自己的 constructor 对象，神奇的事情要发生了，这最后一个 constructor 对象就是我们构造出来的function函数本身！
function Person(name){
this.name=name;
this.showMe=function(){
alert(this.name);
}
}
var one = new Preson('js');
alert(one.prototype);//undefined 证明new出来的对象是没有原型的
alert(typeOf person.prototype)//object 证明我们构造出来的Function的原型的类型就是一个对象！
alert(Person.prototype.constructor)//返回函数本身，证明了原型的理论，
实际用途：它给我们最实际的用处就是我们可以用原型来创建对象的属性和方法！我们不用它不也是可以创建属性和方法！这里是有区别的，既然不一样就有存在的价值！我们可以通过给原型添加属性和方法来给给对象添加属性或方法！
Hero.prototype.name;
Hero.prototype.sayMe = function(){"添加对象的方法其实就是添加函数"}
让我们再深一步：当我们给对象添加了同名的属性或方法时会发生什么？
function Hero(){
this.name="zhangsan"
this.sayMe = function(){
alert("this is zhangsan.")
}
}
//通过原型增加的属性和方法
Hero.prototype.name1 = "wangwu";
Hero.prototype.sayMe1 = function(){
alert("this is wangwu.")
};
var hero = new Hero();
alert(hero.name)
alert(hero.name1)
hero.sayMe();
// delete hero.name
alert(hero.name)//
我们验证了这个例子得到得到了一些结论：
当函数对象本身的属性或方法与原型的属性或方法同名的时候：
1、默认调用的是函数对象本身的属性或方法.
2、通过原型增加的属性或方法的确是存在的.
3、函数对象本身的属性或方法的优先级要高于原型的属性或方法.
----------
#三、作用域、原型链 及二者区别
**作用域是针对变量的，比如我们创建了一个函数，函数里面又包含了一个函数，那么现在就有三个作用域**
全局作用域==>函数1作用域==>函数2作用域
作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。
如：
var a = 1;
function b(){
var a = 2;
function c(){
var a = 3;
console.log(a);
}
c();
}
b();
最后打印出来的是3，因为执行函数c（）的时候它在自己的范围内找到了变量a所以就不会越上继续查找，如果在函数c()中没有找到则会继续向上找，一直会找到全局变量a，这个查找的过程就叫作用域链。
不知道你有没有疑问，函数c为什么可以在函数b中查找变量a，因为函数c是在函数b中创建的，也就是说函数c的作用域包括了函数b的作用域，当然也包括了全局作用域，但是函数b不能向函数c中查找变量，因为作用域只会向上查找。
----------
原型链是针对构造函数的，比如我先创建了一个函数，然后通过一个变量new了这个函数，那么这个被new出来的函数就会继承创建出来的那个函数的属性，然后如果我访问new出来的这个函数的某个属性，但是我并没有在这个new出来的函数中定义这个变量，那么它就会往上（向创建出它的函数中）查找，这个查找的过程就叫做原型链。
Object ==> 构造函数1 ==> 构造函数2
就和css中的继承一样，如果自身没有定义就会继承父元素的样式。
function a(){};
a.prototype.name = "abc";
var b = new a();
console.log(b.name); //abc
----------
#四、闭包
**一、变量的作用域**
要理解闭包，首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种：全局变量和局部变量。
Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。
var n=999;
function f1(){
alert(n);
}
f1(); // 999
另一方面，在函数外部自然无法读取函数内的局部变量。
function f1(){
n=999;
}
f1();
alert(n); // 999
**二、如何从外部读取局部变量？**
出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。
那就是在函数的内部，再定义一个函数。
function f1(){
var n=999;
function f2(){
alert(n); // 999
}
}
在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
***既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！***
function f1(){
var n=999;
function f2(){
alert(n);
}return f2;}
var result=f1();
result(); // 999
**三、闭包的概念**
上一节代码中的f2函数，就是闭包。
各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是， **闭包就是能够读取其他函数内部变量的函数**。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
**四、闭包的用途**
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢？请看下面的代码。
function f1(){
var n=999;
nAdd=function(){
n+=1
};
function f2(){
alert(n);
}return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
**五、使用闭包的注意点**
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
**六、思考题**
如果你能理解下面两段代码的运行结果，应该就算理解闭包的运行机制了。
代码片段一。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());
代码片段二。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());
----------
#五、红皮书 里面 写的 方法 和 平时 开发 有哪些 优点和 缺点
#六、你怎么进行 模块化开发 的
**JAVASCRIPT模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。**
**一、原始写法**
模块就是实现特定功能的一组方法。
只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。
function m1(){
.....
}
function m2(){
.....
}
上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。
这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。
**二、对象写法**
为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。
var module1 = new Object({
_count : 0,
m1 : function (){
//...
},
m2 : function (){
//...
}
});
上面的函数m1()和m2(），都封装在module1对象里。使用的时候，就是调用这个对象的属性
module1.m1();
但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。
module1._count = 5;
**三、立即执行函数写法**
使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
使用上面的写法，外部代码无法读取内部的_count变量。
console.info(module1._count); //undefined
module1就是Javascript模块的基本写法。下面，再对这种写法进行加工。
**四、放大模式**
如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。
var module1 = (function (mod){
mod.m3 = function () {
//...
};
return mod;
})(module1);
上面的代码为module1模块添加了一个新方法m3()，然后返回新的module1模块。
**五、宽放大模式（Loose augmentation）**
在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。
var module1 = ( function (mod){
//...
return mod;
})(window.module1 || {});
与"放大模式"相比，＂宽放大模式＂就是"立即执行函数"的参数可以是空对象。
[详情走你！！！](http://www.ruanyifeng.com/blog/2012/10/javascript_module.html "哈哈")
#七、MVC、MVVM 有啥 区别
**mvc**
著名MVC框架 Rails MVC 视图层和模型层没有直接的耦合，而是通过控制器作为中间人对信息进行传递：
! [](https://raw.githubusercontent.com/Draveness/analyze/master/contents/architecture/images/mvx/MVC-with-Rails.jpg)
Model-View-Controller
View ==> Controller ==> Model ==> View
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020105.png)
视图将指令传达给控制器、控制器运行业务代码、反馈给模型改变状态、模型将数据传递给视图进行展示。
当存在用户操作时有两种方式：
1、通过 View 接受指令，传递给 Controller。
用户 ==> View ==> Controller ==> Model ==> View
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020106.png)
2、直接通过controller接受指令。
用户 ==> Controller ==> Model ==> View
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020107.png)
实际开发中会更加灵活的运用例如:
1、用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
2、 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
3、 Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器）
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020108.png)
**MVP**
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
View ==> Presenter ==> Model
Model ==> Presenter ==> View
1、 各部分之间的通信，都是双向的。
2、View 与 Model 不发生联系，都通过 Presenter 传递。
3、View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020109.png)
**MVVM**
MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。
唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。
! [](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015020110.png)
#八、artTemplate模板引擎的使用
**原理：** 动态执行JavaScript字符串！
**优点：**
1. 预编译：渲染需要动态编译JavaScript字符串完成变量赋值。而artTemplate的编译赋值过程却是在渲染之前完成的
2. 更快的字符串相加方式： IE6-8的浏览器下，数组push方法拼接字符串会比“+=”快，而在v8引擎中，使用“+=”方式比数组拼接快4.7倍；所以 artTemplate 根据JavaScript引擎特性采用了两种不同的字符串拼接方式。
3. 支持运行时调试，可精确定位异常模板所在语句：（动态解析，所以调试器无法定位到错误）渲染的时候遇到错误会进入调试模式重新编译模板，而不会影响正常的模板执行效率。模板编译器根据模板换行符记录行号，当执行过程遇到错误，立马抛出异常模板对应的行号，模板调试器再根据行号反查模板对应的语句并打印到控制台。源码L282
4. 对Node端支持良好，便于以后统一扩展！
扫一扫
3092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
