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

發表於 分類於

Google AD

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

Liker 讚賞

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

Buy Me A Coffee ｜ Buy Me A Coffee
接下來就是要在我們所寫的框架中使用 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 (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ