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

發表於 更新於 分類於

Google AD

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

Liker 讚賞

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

接下來將替 Greeter 新增一些功能增加一點屬性等等，所以也會設定一些基本設定進去 Greeter。

前言

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

Liker 讚賞

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

Google AD

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