关于javascript:聊一聊JavaScript设计模式一

引言
设计模式分类
常见设计模式
- 单例模式
- 观察者模式
- 工厂模式
- 策略模式
- 代理模式

JavaScript 设计模式，一个模式就是一个可重用的计划。当代码是建设在卓有成效的模式上时, 咱们能够花更少的工夫去关怀咱们的代码构造, 从而能花更多的工夫关注咱们的解决方案的整体品质。

三大类

「创立型模式」 5 种

单例模式
工厂办法模式
形象工厂模式
建造者模式
原型模式

「结构型模式」 7 种

代理模式
适配器模式
装璜器模式
外观模式
桥接模式
组合模式
享元模式

「行为型模式」 11 种

观察者模式
策略模式
模板办法模式
迭代子模式
责任链模式
命令模式
备忘录模式
状态模式
访问者模式
中介者模式
解释器模式

1-1 原理

顾名思义就是保障每个类都只有一个实例对象（调用一个类，任何时候返回的都是同一个实例）

1-2 实现办法

应用一个变量来标记以后是否曾经为某个类创立过对象，如果创立了，则在下一次获取该类的实例时，间接返回之前创立的对象，否则就创立一个对象

1-3 coding

var Universe;

(function () {
    var instance;
    Universe = function Universe() {if (instance) {return instance;}
        instance = this;

        // 其它内容
        this.start_time = 0;
        this.bang = "Big";
    };
} ());

// 测试代码
var a = new Universe();
var b = new Universe();
alert(a === b); // true

1-4 场景

用于: 一个全局应用的类频繁地创立与销毁

要求生产惟一序列号
WEB 中的计数器，不必每次刷新都在数据库里加一次，用单例先缓存起来
创立的一个对象须要耗费的资源过多，比方 I/O 与数据库的连贯等

2-1 原理

当对象间存在一对多关系时，则应用观察者模式. 比方，当一个对象被批改时，则会主动告诉它的依赖对象

2-2 实现办法

订阅，就是把几个函数推入数组中待用；公布，就是把缓存在数组中的那一坨函数列队执行

2-3 coding

var event = {eventList:{},
  listen:function(key,fn){if(!this.eventList[key]){this.eventList[key] = [];}
    this.eventList[key].push(fn);
  },
  remove:function(key,fn){var fns = this.eventList[key];
    if(!fns){return false;}
    if(!fn){
      // 如果没有回调，示意勾销此 key 下所有办法
      fns && (fns.length=0); // 这是一种疾速清空数组的办法哦！}else{for(var i=0;i<fns.length;i++){
        // 遍历办法列表, 剔除须要勾销的办法
        // 要留神 fns 是援用型变量，理论是去除了 this.eventList[key]下的办法。if(fns[i] === fn){fns.splice(i,1);
        }
      }
    }
  },
  //trigger('loginSuccess', 参数 1, 参数 2)
  trigger:function(){
    // 出列第一个数据：'loginSuccess'
    var key = Array.prototype.shift.call(arguments);
    var fns = this.eventList[key];// 拿到一组函数
    if(!fns || fns.length === 0){
      // 没有要执行的函数，就返回
      return false;
    }
    for(var i=0;i<fns.length;i++){
      //arguments 曾经入列了一个数据，目前全是参数列表了
      fns[i].apply(this,arguments);
    }
  }
};

var installEvent = function(obj){for(var i in event){obj[i] = event[i];
  }
}

var login = {};
installEvent(login);

// 显示头像
function showAvatar(){console.log('显示用户头像');
}
// 显示音讯列表
function showMessage(){console.log('显示音讯列表');
}

// 订阅
login.listen('loginSuccess',showAvatar);
login.listen('loginSuccess',showMessage);

// 公布
login.trigger('loginSuccess');

// 勾销订阅
login.remove('loginSuccess',showAvatar);

// 再次公布
login.trigger('loginSuccess');

2-4 场景

按钮上绑定 click 事件
ajax 解耦

3-1 实现原理

工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化提早到了子类。而子类能够重写接口办法以便创立的时候指定本人的对象类型

3-2 分类

简略工厂模式
工厂办法模式
形象工厂模式

别离是在各自根底上有肯定的改良: 简略工厂模式解决了入口不对立的问题; 工厂模式解决了批改地点不对立的问题; 形象工厂模式解决了子类实现不标准的问题

3-3 coding

function Animal(opts){var obj = new Object();
    obj.name = opts.name;
    obj.color = opts.color;
    obj.getInfo = function(){return '名称：'+obj.name +'，色彩：'+ obj.color;}
    return obj;
}
var cat = Animal({name: '波斯猫', color: '红色'});
cat.getInfo();

3-4 场景

简略说：如果咱们想在网页面里插入一些元素，而这些元素类型不固定，可能是图片、链接、文本，依据工厂模式的定义，在工厂模式下，工厂函数只需承受咱们要创立的元素的类型，其余的工厂函数帮咱们解决

4-1 原理

俗话说，条条大路 (策略) 通罗马 (result)。在现实生活中，咱们能够采纳很多办法实现同一个指标。比方咱们先定个小指标，先挣它一个亿。咱们能够依据具体的理论状况(依照对应的策略) 来实现这个指标

4-2 coding

// 某公司年终奖计算形式
var Strategies = {"A":function(salary){return salary * 5;},
 "B":function(salary){return salary * 4;},
 "C":function(salary){return salary * 3;}
};
var caculateBonus = function(level,salary){return Strategies[level](salary);
};
console.log(caculateBonus("A",2000));

4-3 场景

antd 中的 message 组件有 info、success、error
表单校验

5-1 原理

为其余对象提供一种代理以管制对这个对象的拜访

5-2 分类

爱护代理模式
虚构代理模式
缓存代理模式

5-3 coding

var Flower = function(){this.price = 150}
var xiaoming = {sendflower: function(target){var flower = new Flower()
        target.receiveFlower(flower)
    }
}
var B = {receiveFlower: function(flower){if(flower.price < 100){console.log("太便宜了，女神示意一脸厌弃")
          return false
        }else{A.receiveFlower(flower)
        }
    },
}
var A = {receiveFlower: function(){console.log("承受了鲜花")
    }
}

xiaoming.sendFlower(B);

5-4 场景

爱护过滤
缓存代理 – 一些开销比拟大的运算后果提供临时的存储
虚构代理(一些开销很大的对象，提早到真正须要它的时候才去创立) – 图片上传

最初，心愿大家早日实现：成为前端高手的平凡幻想！！！

欢送交换~