前言
接下來將替 Greeter 新增一些功能增加一點屬性等等,所以也會設定一些基本設定進去 Greeter。
屬性與可鏈結方法
所以這邊一樣挪用上一章節的程式碼來用。
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));
|
那因為每個物件都有不同屬性,但是我們不希望被外面的環境給取用,並且為了節省記憶體空間,那該將屬性和方法放在那邊才能夠所有物件共享?這邊要使用閉包的特性來建立。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| (function(global, $) { var Greetr = function(firstname, lastname, language) { return new Greetr.init(firstname, lastname, language); } var supportedLangs= ['en', 'es'];
var greetings = { en: 'Hello', es: 'Hola', };
var formalGreetings = { en: 'Greetings', es: 'Saludos', };
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));
|
那身為一個好的開發者,當這個 Greeter
被使用的時候要輸出 log。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| (function(global, $) { var Greetr = function(firstname, lastname, language) { return new Greetr.init(firstname, lastname, language); } var supportedLangs= ['en', 'es'];
var greetings = { en: 'Hello', es: 'Hola', };
var formalGreetings = { en: 'Greetings', es: 'Saludos', };
var logMessages = { en: 'Logged in', es: 'Iniciar sesión', }; 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));
|
然後接下來要在原型裡面增加一些東西可以被外部的人使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| (function(global, $) { var Greetr = function(firstname, lastname, language) { return new Greetr.init(firstname, lastname, language); } var supportedLangs= ['en', 'es'];
var greetings = { en: 'Hello', es: 'Hola', };
var formalGreetings = { en: 'Greetings', es: 'Saludos', };
var logMessages = { en: 'Logged in', es: 'Iniciar sesión', }; Greetr.prototype = { fullname: function() { return this.firstname + ' ' + this.lastname; }, validate: function() { if (supportedLangs.indexOf(this.language) === -1) { throw 'Invalid language'; }; }, greeting: function() { return greetings[this.language] + ' ' + this.firstname +'!'; }, formalGreeting: function() { return formalGreetings[this.language] + ',' + this.fullname(); }, }; 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));
|
再來我們也可以模仿 jQuery 的鏈式寫法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
| (function(global, $) { var Greetr = function(firstname, lastname, language) { return new Greetr.init(firstname, lastname, language); } var supportedLangs= ['en', 'es'];
var greetings = { en: 'Hello', es: 'Hola', };
var formalGreetings = { en: 'Greetings', es: 'Saludos', };
var logMessages = { en: 'Logged in', es: 'Iniciar sesión', }; Greetr.prototype = { fullname: function() { return this.firstname + ' ' + this.lastname; }, validate: function() { if (supportedLangs.indexOf(this.language) === -1) { throw 'Invalid language'; }; }, greeting: function() { return greetings[this.language] + ' ' + this.firstname +'!'; }, formalGreeting: function() { return formalGreetings[this.language] + ',' + this.fullname(); }, greet: function (formal) { var msg; if (formal) { msg = this.formalGreeting(); } else { msg = this.greeting(); } if (console) { console.log(msg); } return this; } }; 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));
|
接下來如果當我們需要手動 console
自己確認某些東西的時候就這樣寫。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
| (function(global, $) { var Greetr = function(firstname, lastname, language) { return new Greetr.init(firstname, lastname, language); } var supportedLangs= ['en', 'es'];
var greetings = { en: 'Hello', es: 'Hola', };
var formalGreetings = { en: 'Greetings', es: 'Saludos', };
var logMessages = { en: 'Logged in', es: 'Iniciar sesión', }; Greetr.prototype = { fullname: function() { return this.firstname + ' ' + this.lastname; }, validate: function() { if (supportedLangs.indexOf(this.language) === -1) { throw 'Invalid language'; }; }, greeting: function() { return greetings[this.language] + ' ' + this.firstname +'!'; }, formalGreeting: function() { return formalGreetings[this.language] + ',' + this.fullname(); }, greet: function (formal) { var msg; if (formal) { msg = this.formalGreeting(); } else { msg = this.greeting(); } if (console) { console.log(msg); } return this; }, log: function() { if (console) { console.log(logMessages[this.language]) + ': ' + this.fullname(); } return this; } }; 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));
|
那如果是我們要立刻改變語言 (language
) 呢?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
| (function(global, $) { var Greetr = function(firstname, lastname, language) { return new Greetr.init(firstname, lastname, language); } var supportedLangs= ['en', 'es'];
var greetings = { en: 'Hello', es: 'Hola', };
var formalGreetings = { en: 'Greetings', es: 'Saludos', };
var logMessages = { en: 'Logged in', es: 'Iniciar sesión', }; Greetr.prototype = { fullname: function() { return this.firstname + ' ' + this.lastname; }, validate: function() { if (supportedLangs.indexOf(this.language) === -1) { throw 'Invalid language'; }; }, greeting: function() { return greetings[this.language] + ' ' + this.firstname +'!'; }, formalGreeting: function() { return formalGreetings[this.language] + ',' + this.fullname(); }, greet: function (formal) { var msg; if (formal) { msg = this.formalGreeting(); } else { msg = this.greeting(); } if (console) { console.log(msg); } return this; }, log: function() { if (console) { console.log(logMessages[this.language]) + ': ' + this.fullname(); } return this; }, setLang: function(lang) { this.language = lang; this.validate(); return this; } }; 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
終究可以用點的方式了。

那也可以像 jQuery 一樣一直點。

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