javascript中常见的三种开发模式
程序员文章站
2022-07-05 17:30:06
一、单例模式: 所谓单例模式,即保证一个类只有一个实例,并提供一个访问它的全局访问点。 单例模式实现弹出层: 二、观察者模式: 所谓观察者模式,即(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。 观察者模式常见面试题: 三、组合模式: ......
一、单例模式:
所谓单例模式,即保证一个类只有一个实例,并提供一个访问它的全局访问点。
<script type="text/javascript"> //一个类有某个实例,就用这个实例,没有的话,就新生成一个实例 var singleton = (function(){ var _instance = null; function foo(){ this.a = "**"; this.b = "**"; } foo.prototype.fn = function(){ } return { getinstance:function(){ if(!_instance){ _instance = new foo(); } return _instance; } } })(); console.log(singleton.getinstance()==singleton.getinstance()); </script>
单例模式实现弹出层:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ height: 100px; width: 100px; background: red; } </style> </head> <body> <input type="button" id="btn" value="弹出层" /> <script type="text/javascript"> (function(){ var obtn = document.getelementbyid("btn"); var _instance = null; //创建弹窗类 function popbox(){ this.node = document.createelement("div"); document.body.appendchild(this.node); } obtn.onclick = function(){ if(!_instance){ _instance = new popbox; } } })(); </script> </body> </html>
二、观察者模式:
所谓观察者模式,即(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。
<script type="text/javascript"> var observer = { regist:function(eventname,callback){ if(!this.obj){ this.obj = {}; } if(!this.obj[eventname]){ this.obj[eventname] = [callback]; }else{ this.obj[eventname].push(callback); } }, emit:function(eventname){ if(this.obj[eventname]){ for(var i = 0; i < this.obj[eventname].length; i++){ this.obj[eventname][i](); } } }, remove:function(eventname,callback){ if(this.obj[eventname]){ for(var i = 0; i < this.obj[eventname].length;i++){ if(this.obj[eventname][i]==callback){ this.obj[eventname].splice(i,1); } } } } }; //购物车模块注册的事件 observer.regist("loginsucess",function(){ console.log("购物车模块发生改变"); }); //个人信息模块注册的事件 observer.regist("loginsucess",function(){ console.log("个人信息模块发生改变"); }); observer.emit("loginsucess");// </script>
观察者模式常见面试题:
<script type="text/javascript"> var event = { // 通过on接口监听事件eventname // 如果事件eventname被触发,则执行callback回调函数 on: function(eventname, callback) { //你的代码 注册事件 if(!this.obj){ object.defineproperty(this,"obj",{ value:{}, enumerabel:false }) } if(!this.obj[eventname]){ this.obj[eventname] = [callback]; }else{ this.obj[eventname].push(callback); } }, // 触发事件 eventname emit: function(eventname) { //你的代码 发布事件 if(this.obj[eventname]){ for(var i = 0; i < this.obj[eventname].length; i++){ this.obj[eventname][i](arguments[1]); } } } }; // 测试1 event.on('test', function(result) { console.log(result); }); event.on('test', function() { console.log('test'); }); event.emit('test', 'hello world'); // 输出 'hello world' 和 'test' // 测试2 var person1 = {}; var person2 = {}; object.assign(person1, event); object.assign(person2, event); person1.on('call1', function() { console.log('person1'); }); person2.on('call2', function() { console.log('person2'); }); person1.emit('call1'); // 输出 'person1' person1.emit('call2'); // 没有输出 person2.emit('call1'); // 没有输出 person2.emit('call2'); // 输出 'person2' </script>
三、组合模式:
组合模式又称部分-整体模式,将对象组合成树形结构以表示“部分整体”的层次结构。
<script type="text/javascript"> //订单系统 票务系统 酒店系统 function ticket(){ } ticket.prototype.create = function(){ console.log("创建了机票订单"); } function hotel(){ } hotel.prototype.create = function(){ console.log("创建了酒店订单"); } function order(){ this.orders = []; } order.prototype.addorder = function(order){ this.orders.push(order); return this; } order.prototype.create = function(){ for(var i = 0; i < this.orders.length; i++){ this.orders[i].create(); } } var order = new order(); order.addorder(new ticket()).addorder(new ticket()) .addorder(new hotel()); order.create(); </script>
上一篇: 算法与数据结构(二)三元组矩阵行列式的计算(用递归)
下一篇: html5 冒号分隔符对齐的实现
推荐阅读
-
举例讲解设计模式中的原型模式在iOS应用开发中的作用
-
iOS App设计模式开发中对interpreter解释器模式的运用
-
详解iOS App设计模式开发中对于享元模式的运用
-
iOS App设计模式开发中对建造者模式的运用实例
-
浅谈.net core 注入中的三种模式:Singleton、Scoped 和 Transient
-
iOS App设计模式开发中对迭代器模式的使用示例
-
详解iOS应用的设计模式开发中Mediator中介者模式的使用
-
解析iOS应用开发中对设计模式中的抽象工厂模式的实现
-
iOS App的设计模式开发中对State状态模式的运用
-
iOS应用开发中运用设计模式中的组合模式的实例解析