前端框架

MV*

view(呈现，模板，意图(事件，函数)，更新(构造器))
model(构造器来创建对象,包含service)

模板技术

• 字符串模板(%f，mustashe.js，handlebars.js)
• dom模板(angularjs, 性能问题)
• virtual dom(reactjs,内存中更新dom,然后比较,只修改变化的文件)

库(dom的封装)

• VUE.js(angular.js的简化版)
• React.js
• jQuery

框架(基于需求面向问题)

• angularjs
• backbonejs

包管理

• CMD //后端js模块定义标准 commandjs nodejs
• AMD //异步包,前端包定义标准 requirejs sea.js bower(前端包管理工具)

js可以构建DSL

JS

• function

typeof object is function
typeof都返回function
根(proto)都指向object

函数的3种声明方式(1.直接声明 2.var fun=function(){} 3.new Function)
函数的4种调用(1.直接调用 2.对象调用 3.call apply调用 4.new的时候构造器调用)

tips:

(function(window){
var a=window.a //直接访问全局变量，不用先查找local变量，提升效率
})(window);

• object

//职责（函数），协作(函数之间的调用),角色(面向对象添加的概念)包含职责
//类，包，模块 都是代码的组织方式

//封装：变化降到最低
tips:

return {//返回对象，用于封装
hide:function(){}
}

(function(){
var a=1;//隔绝作用域
})();

this //指向调用者，而不是定义者

var proxy=function(){//保证this指向正确的调用者
Carestream.show.call(Carestream);
}

__proto__

//所以的对象都有__proto__(查找链,继承链,不推荐直接操作，new的时候由prototype生成),function也是对象
var o1={
method1:function(){}
}
var o2={
method2:function(){}
}
o2.proto=o1;//私有字段
console.log(typeof o2.method1);//function
console.log(typeof o2.method2);//function

prototype

//所以函数(构造器)都有prototype，是给new出来的对象用的，用于构建__proto__
function Person(name){
this.name=name;//私有的信息
this.sayHello2=sayHello2;
this.sayHello3=sayHello3;
function sayHello2(){};
}

function sayHello3(){};

Person.prototype.sayHello=function(){
console.log(this.name);//可继承的公共的
};

var o=new Person('jobs');

//new Person('jobs')时的处理过程
/var o=new Object();
o.proto=Person.prototype;
Person.call(o,'jobs');//new Person()时this指向o/
o.sayHello();

function sayHello1(){};
var o1=new Person();
var o2=new Person();
console.log(o1.sayHello=o2.sayHello); //true
console.log(o1.sayHello2=o2.sayHello2); //false，函数内部隔离新的作用域
console.log(o1.sayHello3===o2.sayHello3); //true

constructor

//prototype都有constructor
console.log(Person.prototype.constructor===Person); //true
Person.prototype={
constructor:Person,//给prototype指定新对象时可以自己设定constructor
sayHello:function(){}
}

• 流行框架比较

构造器调用(重用，字面量调用不需要重用) angular:字面量调用 backbone:构造器调用(new的时候调用)
angular核心
bindJQuery() //如果没有JQuery则创建JQLite
publishExternalAPI() //setupModelLoader() 创建命名空间 var aa=window.aa || {};
angular.module('demo',[])
$scope=new scope

//vue.js的实现
function Class(obj){//类构造器，返回function
var fun=function(){};
for(var i in obj)
{
fun.prototype[i]=obj[i];
}
return fun;
}
var Person=new Class({
sayHello:function(){}
});//创建一个类
var jobs=new Person();
jobs.sayHello();

//jquery写插件
；（function(jQuery){
var extend=function(prop,options) {
for(var action in opotions){
prop[action]=optinos[action];
}
};
//fn即prototype
extend(jQuery.fn,{
myMethod: function(attribute){

},
});
}）（$）；

• 实现自己的框架

扩展基本类型

//Number扩展
Number.prototype.after_sec=function(f){
f();
};
var i=5;
i.after_sec(function(){
console.log('close.');
});
//Function扩展
Function.prototype.method=function(name,fun){
this.prototype[name]=fun;
return this;//级联
};
function Person(name){
this.name=name;
}
Person.method('sayHello',function(){
return 'hello,'+this.name;
}).method('show',function(){});
var jobs=new Person('jobs');
console.log('hello,jobs'==jobs.sayHello());

实现类构造器

//基于mocha测试框架
//framwwork.js
function Class(obj){//类构造器，返回function
var fun=function(){
if(typeof this.initialize==='function') //new的时候会执行,判断this(var o=new xxx()中的o)中有没有initialize
this.initialize.apply(this,arguments); //
//this.initialize(arguments[0]);//同上
};

for(var i in obj)
{
fun.prototype[i]=obj[i];
}

//holy grail
fun.extend=function(op){
var ff=function(){};
//ff.prototype=this.prototype;//污染父类方法

//ff.prototype=new fun(); //会调用initialize

var F=function(){
this.constructor=ff;//给ff.prototype设置constructor
};
F.prototype=this.prototype;//extend方法只有fun来调用,this指向fun
ff.prototype=new F();//不会调用initialize
for(var i in op)
{
ff.prototype[i]=op[i];
}
ff.prototype.super=this.prototype;//任然可以调用父类的同名方法

return ff;
};

return fun;
}

module.exports={
createClass:Class
};

//test.js
var assert=require('assert');
var should=require('should');
var Carestream=require('./framework');//加载当前目录下的framework.js
//回归测试
describe('this is a test',function(){
it('main class',function() {
var Person=new Carestream.createClass({
sayHello:function(){}
});//创建一个类
var jobs=new Person();
jobs.should.have.property('sayHello');
});

it('constructor',function() {
var Person=new Carestream.createClass({
initialize:function(name) {
this.name=name;
}
});//创建一个类
var jobs=new Person("jobs");
jobs.name.should.eql('jobs');
});
//
it('prototype',function() {
var Person=new Carestream.createClass({
sayHello:function(){}
});

var Customer=Person.extend({
myMethod:function(){}
});

var jobs=new Customer();

jobs.should.have.properties('sayHello','myMethod');
});

});