[JS奇怪的世界]No.66 屬性與可鏈結方法

前言

接下來將替 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; // 避免 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; // 避免 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; // 避免 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; // 避免 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; // 避免 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; // 避免 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; // 避免 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 奇怪的部分

0%