设计模式
2017-04-11 本文已影响7人
饥人谷_阿靖
-
** 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。**
-
单例模式
var People = (function(){ var instance; function init(name){ //定义私有变量和方法 return { //定义共有变量和方法(可以访问私有变量和方法) sayName:function(){ console.log(name); } }; } return { getInstance:function(name){ if(!instance){ instance = init(name); } return instance; } } }()); var p1 = People.getInstance("jack"); var p2 = People.getInstance("keanu"); p1 == p2; //true //console.log(p1 == p2);
-
构造函数模式
function Person(name) { this.name = name; } Person.prototype = { say: function () { console.log(this.name) } } var p2 = new Person('Rick');
-
混合模式 -继承
var Person = function (name,age) { this.name = name; this.age = age; } Person.prototype = { sayName: function () { console.log(this.name) } } var Student = function (name,age,score) { Person.call(this,name,age); this.score = score; } //Student.prototype = Object.create(Person.prototype) Student.prototype = create(Person.prototype) function create(fn) { function F(){}; F.prototype = fn; return new F() } Student.prototype.constructor = Student; Student.prototype.sayScore = function(){ console.log(this.score); } var student = new Student('Nick',23,90)
-
模块模式
var Person = (function(){ function changeName(name) { this.name = name; } function sayName() { console.log(this.name) } return{ change: changeName, say: sayName } })()
-
工厂模式
var People=function(name,age){ return { name:name, age:age, sayName:function(){ console.log('my name is '+this.name); }, setAge:function(age){ this.age=age; }, getAge:function(){ console.log(this.age); } } } var p3=People('jack',24); p3.sayName(); p3.getAge(); p3.setAge(27); p3.getAge();
-
发布订阅模式
<script type="text/javascript"> var EventCenter = (function(){ var events = {}; function on(evt, handler){ events[evt] = events[evt] || []; events[evt].push({ handler: handler }); } function fire(evt, args){ if(!events[evt]){ return; } for(var i=0; i<events[evt].length; i++){ events[evt][i].handler(args); } } return { on: on, fire: fire } })(); EventCenter.on('my_event', function(data){ console.log('my_event ...'); }); EventCenter.fire('my_event'); </script>
-
** 使用发布订阅模式写一个事件管理器,可以实现如下方式调用**
var Event=(function(){ var events={}; function on(evt,handler){ events[evt]=events[evt] || []; events[evt].push({ handler:handler }) } function fire(evt,arg){ if(!events[evt]){ return } for(var i=0;i<events[evt].length;i++){ events[evt][i].handler(arg) } } function off(evt){ delete events[evt]; } return { on:on, fire:fire, off:off } }()); Event.on('change', function(val){ console.log('change... now val is ' + val); }); Event.fire('change', '饥人谷'); //change... now val is 饥人谷 Event.off('change');