- 引言
- 设计模式分类
常见设计模式
- 单例模式
- 观察者模式
- 工厂模式
- 策略模式
- 代理模式
引言
JavaScript 设计模式，一个模式就是一个可重用的计划。当代码是建设在卓有成效的模式上时,咱们能够花更少的工夫去关怀咱们的代码构造,从而能花更多的工夫关注咱们的解决方案的整体品质。
设计模式分类
三大类
「创立型模式」 5种
- 单例模式
- 工厂办法模式
- 形象工厂模式
- 建造者模式
- 原型模式
「结构型模式」 7种
- 代理模式
- 适配器模式
- 装璜器模式
- 外观模式
- 桥接模式
- 组合模式
- 享元模式
「行为型模式」 11种
- 观察者模式
- 策略模式
- 模板办法模式
- 迭代子模式
- 责任链模式
- 命令模式
- 备忘录模式
- 状态模式
- 访问者模式
- 中介者模式
- 解释器模式
常见设计模式
1. 单例模式 Singleton Pattern:
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); // true1-4 场景
用于: 一个全局应用的类频繁地创立与销毁
- 要求生产惟一序列号
- WEB 中的计数器，不必每次刷新都在数据库里加一次，用单例先缓存起来
- 创立的一个对象须要耗费的资源过多，比方 I/O 与数据库的连贯等
2. 公布订阅(观察者模式)
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. 工厂模式
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. 策略模式
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. 代理模式
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 场景
- 爱护过滤
- 缓存代理 - 一些开销比拟大的运算后果提供临时的存储
- 虚构代理(一些开销很大的对象，提早到真正须要它的时候才去创立) - 图片上传
最初， 心愿大家早日实现：成为前端高手的平凡幻想！！！
欢送交换~