亲宝软件园·资讯

展开

JavaScript中几种常用的设计模式

枫叶y 人气:0
*设计模式*:代码书写经验,为了应对各种场景,经过前人不断的总结,压缩,形成的一套又一套的代码的书写规范,形成了设计模式。 ## 1.单例模式 *单例模式*是一种常用的设计模式,如果需要多次创建同一个对象,完成同一件事情,就会多次new出来很多个对象,而单例模式确保只有一个实例,并提供全局访问。 ``` var f = (function(){ var instance; return function(){ if(!instance){ // 如果没有则赋值,初始化 instance = new Person(); } // 有的话直接返回 return instance; } })(); var p1 = f(); var p2 = f(); console.log(p1); console.log(p2); // 单例模式(唯一的),每次获取的都是一个东西,所以他 两相等 console.log(p1 === p2); ``` ## 2.组合模式 *组合模式*,将对象组合成树形结构以表示“部分-整体”的层次结构。将多个对象的功能,组成起来,实现批量执行。使用这种模式可以用一条命令在多个对象上激发复杂的递归的行为。 ``` // 先准备一些需要批量执行的功能 class GoHome{ init(){ console.log("到家了,开门"); } } class OpenComputer{ init(){ console.log("开电脑"); } } class OpenXiaoAi{ init(){ console.log("开音乐"); } } // 组合器,用来组合功能 class Comb{ constructor(){ // 准备容器,用来防止将来组合起来的功能 this.skills = []; } // 用来组合的功能,接收要组合的对象 add(task){ // 向容器中填入,将来准备批量使用的对象 this.skills.push(task); } // 用来批量执行的功能 action(){ // 拿到容器中所有的对象,才能批量执行 this.skills.forEach( val => { val.init(); } ); } } // 创建一个组合器 var c = new Comb(); // 提前将,将来要批量操作的对象,组合起来 c.add( new GoHome() ); c.add( new OpenComputer() ); c.add( new OpenXiaoAi() ); // 等待合适的时机,执行组合器的启动功能 c.action(); // 在内部,会自动执行所有已经组合起来的对象的功能 ``` ## 3.观察者模式 也称*发布-订阅模式*,定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,就会通知所有的观察者对象。发布者:发布信息,会随时更新自身的信息或状态。 订阅者:接收信息,接收到发布者发布的信息,从而做出对应的改变或执行,订阅者可以随时加入或离开。 ``` // 需要一个观察者,创建一个事件容器,并准备on等方法 function Observer(){ this.msg = {}; } // 向事件容器中添加事件,消息 Observer.prototype.on = function(type, cb){ // 判断事件容器中,有没有当前传进来的这个类型 // 如何没有,走else if(this.msg[type]){ // 如果有,直接给第一次设置的这个数组,添加个新数据 this.msg[type].push(cb); }else{ // 给他设置一个对应的属性,同时,属性值需要提前写成数组 this.msg[type] = [cb]; } } Observer.prototype.emit = function(type){ // 首先判断事件容器中是不是已经记录 if(this.msg[type]){ var event = { type:type } // 如果已经记录了信息,那么就去执行这个消息对应的所有的处理函数 this.msg[type].forEach(val=>{ val.call(this,event); }) } } Observer.prototype.off = function(type, cb){ // 首先判断事件容器中是不是已经记录 if(this.msg[type]){ // 准备保存符合传参的处理函数的索引 var i = 0; // 遍历,判断,当前类型对应的每一个处理函数,依次作比较 var onoff = this.msg[type].some((val, idx)=>{ i = idx; return val === cb; }) // 判断是否获取到重复的函数 if(onoff){ // 如果有,那么就在当前的消息处理函数的队列中,删除这个函数 this.msg[type].splice(i, 1); } } } // 首先创建一个观察者对象 var ob = new Observer(); // 准备两个处理函数 function a(){ console.log("没收"); } function b(){ console.log("叫家长"); } // 随便绑定一个消息,给了两个处理函数 ob.on("玩手机",a); ob.on("玩手机",b); // 模拟事件的执行 ob.emit("玩手机"); // 删除一个处理函数 ob.off("玩手机", b); // 模拟事件的执行 ob.emit("玩手机"); ``` ## 4.MVC模式 *MVC模式*是一种架构模式,它将应用抽象为3个部分:M:model数据(模型);V:view视图;C:控制器 ``` // 创建模型,管理多个数据 class Model{ model1(){ return "hello"; } model2(){ return "world"; } model3(){ return "你好"; } } // 创建视图,管理多种渲染方式 class View{ view1(data){ console.log(data); } view2(data){ document.write(data); } view3(data){ alert(data); } } // 创建控制器,设定对应的指令 class Ctrl{ constructor(){ // 初始化模型和视图 this.m = new Model(); this.v = new View(); } // 在指令中,可以读取对应的数据,放在对应的视图中 ctrl1(){ var data = this.m.model1(); this.v.view1(data); } ctrl2(){ var data = this.m.model2(); this.v.view3(data); } } var c = new Ctrl(); c.ctrl1(); c.ctrl2(); ```

加载全部内容

相关教程
猜你喜欢
用户评论