前言
接下來要準備設定 Greeter 的物件,這樣子才能夠盡可能設定成類似 jQuery 的樣子,但是這需要一點訣竅。
我們的物件與其原型’
讓我們開啟上一章節的範例。
1 2 3
| (function(global, $) {
}(window, jQuery));
|
我們希望在使用這個自己寫的框架時只需要打 G$
就好,然後傳入姓名語言,大概就像這樣。
1
| var a = G$(firstname, lastname, language);
|
那該如何撰寫像 jQuery 那樣呢?首先先設定函數吧。
1 2 3 4 5
| (function(global, $) { var Greetr = function(firstname, lastname, language) {
} }(window, jQuery));
|
因為我們並不想要一直寫 new,而是希望它直接回傳結果,所以就要這樣寫。
1 2 3 4 5
| (function(global, $) { var Greetr = function(firstname, lastname, language) { return new Greetr.init(firstname, lastname, language); } }(window, jQuery));
|
那這樣寫之後我們就不用再一直 new…new,所以沒問題就繼續往下寫。
1 2 3 4 5 6 7 8 9 10 11
| (function(global, $) { var Greetr = function(firstname, lastname, language) { return new Greetr.init(firstname, lastname, language); } Greetr.init = function (firstname, lastname, language) { var vm = this; vm.firstname = firstname || 'Defalut'; vm.lastname = lastname || 'Defalut'; vm.language = language || 'en'; } }(window, jQuery));
|
那原型部分呢?
1 2 3 4 5 6 7 8 9 10 11 12 13
| (function(global, $) { var Greetr = function(firstname, lastname, language) { return new Greetr.init(firstname, lastname, language); } Greetr.prototype = {}; Greetr.init = function (firstname, lastname, language) { var vm = this; vm.firstname = firstname || 'Defalut'; vm.lastname = lastname || 'Defalut'; vm.language = language || 'en'; } Greetr.init.prototype = Greetr.prototype; }(window, jQuery));
|
Greetr.init.prototype = Greetr.prototype;
意旨都會指向 Greetr.prototype
作為原型鏈,那這樣就可以把屬性跟方法都放在 Greetr.prototype = {}
。
那接下來就要將函數連接上至全域環境,當然我們也不是透過打 Greetr
來呼叫,而是使用 G$()
來呼叫。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| (function(global, $) { var Greetr = function(firstname, lastname, language) { return new Greetr.init(firstname, lastname, language); } Greetr.prototype = {}; Greetr.init = function (firstname, lastname, language) { var vm = this; vm.firstname = firstname || 'Defalut'; vm.lastname = lastname || 'Defalut'; vm.language = language || 'en'; } Greetr.init.prototype = Greetr.prototype;
global.Greetr = global.G$ = Greetr; }(window, jQuery));
|
那接下來就可以試著去 all.js 中試著撰寫程式碼。
1 2
| var g = G$('John', 'Doc', 'en'); console.log(g);
|

圖源
JavaScript 全攻略:克服 JS 奇怪的部分