*工厂模式factory
DEMO 使用场景:创建一个简单的对象
function Person(name) {
var temp={
temp.name=name;
temp.sayName=function () {
console.log(this.name);
}
};
return temp;
}
createPerson("Lucy"); 生成实例 = 创建一个新的引用方式
createPerson("Eall"); 开辟新的内存空间
与构造函数同为 引用类型 ; 但无法知道实例是由哪个构造函数创建的
*构造函数模式constructor
DEMO 使用场景:创建一个复杂的对象,可以添加方法
function People(name,age){
this.name = name; 写一个函数
this.age = age; 绑定this
}
People.prototype.sayName = function(){ 将方法挂在函数原型上
console.log(this.name)
}
var singer = new People('Jay','33'); 使用new生成实例 开辟内存空间
singer.sayName();
*单例模式single
DEMO 使用场景:只需出现一次,独一无二的组件
var Person=(function () { 一个立即执行函数
var temp;
function init(name,age) {
return {
name:name,
age:age,
sayName:function () {
console.log(this.name); return出来的值是 闭包里的变量
}
}
}
return {
createPerson:function (name,age) {
if(!temp){ // 如果没有temp就初始化
temp=init(name,age);
} // 所以第一次调用就初始化,之后不再执行这段代码
return temp;
} 单例就是只开辟了一个内存空间
} 第一次传入的值被储存下来
}()); 之后生成的实例全都指向同样的地方
Person.createPerson("lucy",23); // lucy
Person.createPerson("lily",24);// lucy
*混合模式mixin
DEMO 使用场景:可继承的公用方法
function Person(name,age) { 构造函数 1
this.name=name;
this.age=age;
}
Person.prototype.sayName=function () {
console.log(this.name);
}
function Student(name,age,score) { 构造函数 2
Person.call(this,name,age);
this.score=score;
}
Student.prototype.sayScore=function () {
console.log(this.score);
}
inherit 1:
function inherit(parent,sun) {
sun.prototype=Object.create(parent.prototype); 差异化继承
sun.prototype.constructor=sun;
}
inherit(Person,Student); 2就继承了 1
inherit 2:
student.prototype=create(parent.prototype);
function creat(parentObj){
function F(){}//新建一个空对象
F.prototype=parentObj;//原型指向参数
return new F;//实例化一个原型指向参数的空对象
}
var student1=new Student("lucy",24,100);
student1.sayScore();
student1.sayName();
*模块模式moudle
DEMO 使用场景:需要封装的组件
var person=(function () {
var name="lucy", 一个模块 = 一个私有作用域 = 一个匿名函数
age=23;
function sayName() {
console.log(name);
}// 词法作用域:一个函数可以访问到的上下文环境由它所定义的位置决定。
return{
name:name, 留出接口
age:age,
sayName:sayName
}
})();
person.sayName();
*发布订阅模式subscribe publish
DEMO
var EventCenter=(function () { // 新建订阅中心
var events={}; // 新建缓存列表,存储订阅者的回调函数
function on(evt,handler) { // 添加消息:绑定事件
events[evt]=events[evt]||[];// 检查事件列表events{}里是否有这个key
*如果有,那就是这个事件了;
*如果没有,就初始化这个数组,加入事件
events[evt].push({ // 在[]里增加一个函数
handler:handler // 即 events={evt:[handler:handler]}
}) events={事件:[订阅者1:function(args){...};
} 订阅者2:function(args){...};
] }
function off(evt) { // 解除订阅:移除事件
delete events[evt];
}
function fire(evt,args) { // 发布订阅:触发事件
if(!events[evt]){ // 如果evt不存在,就返回
return;
} // 如果存在,遍历列表events,依次执行处理程序
for(var i=0;i<events[evt].length;i++){
events[evt][i].handler(args);
}
}
return {
on:on, // 导出接口
off:off,
fire:fire
}
})();
EventCenter.on('change', function(val){
console.log('change... now val is ' + val);
});
EventCenter.fire('change', '饥人谷'); //change... now val is 饥人谷
EventCenter.off('change');
优点:代码解耦;异步使用;实现自定义组件