前端框架

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');
	});

});