模塊模式:
- 在立即執行函數表達式中定義的變量和方法在外界是訪問不到的,只能通過其向外部提供的接口,"有限制"地訪問.通過函數作用域解決了屬性和方法的封裝問題.
var Person = (function(){ var name = "xin"; var age = 22; function getName(){ return name; } function getAge(){ return age; } return { getName: getName, getAge: getAge } })(); console.log(age); // 報錯:age未定義 console.log(name); // 報錯:name未定義 console.log(Person.age); // undefined console.log(Person.name); // undefined 只能通過Person提供的接口訪問相應的變量 console.log(Person.getName()); // xin console.log(Person.getAge()); // 22 構造函數模式
function Person(name,age){ this.name = name; this.age = age; } Person.prototype = { constructor: Person; printName: function(){ console.log(this.name); }, printAge: function(){ console.log(this.age); } } var person = new Person('xin', 22); person.printName(); // xin person.printAge(); // 22 混合模式
function Person(name,age){ this.name = name; this.age = age; }; Person.prototype.printName = function(){ console.log(this.name); } function Student(name,age){ 繼承 Person 的屬性 Person.call(this,name,age); } function create(prototype){ function F(){}; F.prototype = prototype; return new F(); } 讓Student的原型指向一個對象,該對象的原型指向了Person.prototype,通過這種方式繼承 Person 的方法 Student.prototype = create(Person.prototype); Student.prototype.printAge = function(){ console.log(this.age); } var student = new Student('xin',22); student.printName(); // "xin" 工廠模式
function Person(name, age){ var person = new Object(); person.name = name; person.age = age; person.printName = function(){ console.log(this.name); }; person.printAge = function(){ console.log(this.age); } return person; } var person = Person('xin',22); 單例模式
var Singleton = (function (){ var instance; function init(){ return { }; } return { getInstance: function(){ if(!instance){ instace = init(); } return instance; } }; })(); 發布-訂閱模式:
發布-訂閱模式又叫做觀察者模式,定義了對象之間一對多的依賴關系,當一個對象的狀態發生改變時,所有依賴與它的對象都將得到通知.
- 發布-訂閱模式廣泛應用於異步編程之中,是一種替代回調函數的方案.多個事件處理函數可以訂閱同一個事件,當該事件發生后,與其相對應的多個事件處理函數都會運行
- 取代對象之間硬編碼的通知機制,一個對象不用再顯示的調用另外一個對象的某個接口,降低模塊之間的耦合程度,雖然不清楚彼此的細節,但是不影響他們之間相互通信
應用
DOM事件
DOM事件是一種典型的發布-訂閱模式,對一個dom節點的一個事件進行監聽,當操作dom節點時,觸發相應的事件,響應函數執行.事件函數對dom節點完全未知,不用去理會是什么事件,如何觸發,執行就好.
自定義事件
- 指定發布者
- "發布-訂閱"這種關系用一個對象表示,鍵表示事件名,值是一個由事件處理程序組成的數組,相當於訂閱者的花名冊
- 發布消息后,遍歷緩存列表,依次執行訂閱者的回調函數
var EventCenter = (function(){ 將所有的"發布-訂閱"關系放到events中 var events = {}; 給事件綁定事件處理程序 evt:事件名 handler:事件處理程序 function on(evt, handler){ events[evt] = events[evt]||[]; events[evt].push({ handler:hander }); } 發布消息(觸發事件),並執行相應的事件處理程序 evt:事件名 args:給事件處理程序傳遞的參數 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 } })(); 實際應用
var Event = (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); } } 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.on('click', function(val){ console.log('click.... now val is '+ val); }) Event.fire('change', 'xin'); Event.fire('click', 'xin'); Event.off('change');