是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2019-05-25 克服JS奇怪的部分系列

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

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

前言

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

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

Buy Me A Coffee | Portaly

Terminal

相關文章

[JS奇怪的世界]No.? 閉包番外篇

2019-05-27

[JS奇怪的世界]No.68 JavaScript奇怪的部分

2019-05-25

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

2019-05-25

[JS奇怪的世界]No.65 我們的物件與其原型

2019-05-24

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme