JAVASCRIPT網頁應用程式設計

64

|

第四章

this.view = $("#view");

this.view.mouseover(this.proxy(this.toggleClass), true);

this.view.mouseout(this.proxy(this.toggleClass), false);

});

})(jQuery, Controller);

這段程式會在載入網頁時，建立一組

view

變數，並為它設定兩組事件監聽器。它們會

分別在滑鼠游標滑進、滑出網頁元件時呼叫

toggleClass()

函式，切換網頁元件的 class

屬性值。完整的範例程式碼，可參考本書的範例程式檔：

assets/ch04/modules.html

。

雖然使用執行環境的觀念，需要撰寫的程式碼可能會比直接使用區域變數還多（因為會

不斷用到

this

）。不過這種做法，讓幫助我們開發出架構更嚴謹、更易於重複使用的程

式碼，而且還能方便我們運用混入（mixins）機制。舉例來說，只要在

Controller

物件

實體的

prototype

裡新增函式，就等於是幫所有的

Controller

物件實體新增函式：

Controller.fn.unload = function(func){

jQuery(window).bind("unload", this.proxy(func));

};

或者，我們也可以把某個物件傳入先前定義好的

include()

函式，藉此擴充控制器的

功能：

var mod = new Controller;

mod.include(StateMachine); ...