[JS奇怪的世界]No.67 增加jQuery的支援

前言

接下來就是要在我們所寫的框架中使用 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
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));

首先我們要替 Greetr 裡面增加對於 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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
(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;
},
HTMLGreeting: function (selector, formal) {
if (!$) {
throw 'jQuery not loaded';
}

if (!selector) {
throw 'Missing jQuery selector';
}

var msg;
if (formal) {
msg = this.formalGreeting();
} else {
msg = this.greeting();
}
$(selector).html(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));

基本上就這樣完成,來看一下線上 codepen。

圖源

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

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ