[筆記]Javascript Patterns 一些好習慣–Global 變數

JSLint

用 JSLint 來測定你的 javascript 的品質。

The Console

Console 物件並不是 javascript 的一部份，而是屬於 Browser。

Console 物件可以用來 取代 alert()。與其將變數的值alert出來，不如就用 console.log 將值顯示出來吧。(alert 會中斷程式執行)

 

寫 Javascript 的好習慣

Minimizing Globals

javascript 是利用 function 來定義命名空間(scope)。在function 裡定義的變數是 local 變數，在function之外則存取不到。而 global 變數則是存在 function 之外，每一個 global 變數會變成一個global 物件的屬性(property)

   1: myglobal = "hello"; // antipattern

   2: console.log(myglobal); // "hello"

   3: console.log(window.myglobal); // "hello"

   4: console.log(window["myglobal"]); // "hello"

   5: console.log(this.myglobal); // "hello"

使用 global 變數的問題

很容易跟其他人寫的 javascript 發生衝突，而此種衝突是最難發現的，有人在 global 定義了一個變數叫 result 則以下的 code 就會將 result 的值改變，造成潛在的  bug

   1: function sum(x, y) {

   2:     // antipattern: implied global

   3:     result = x + y;

   4:     return result;

   5: }

var 讓 result 這個變數變成 local ，就不會造成  global 的問題

   1: function sum(x, y) {

   2:     // antipattern: implied global

   3:     var result = x + y;

   4:     return result;

   5: }

小心這樣也會變成 global

chain assignments

   1: function foo() {

   2:     // antipattern: do not use

   3:     var a = b = 0;

   4:     // ….

   5: }

上面的 code 等同於 var a = (b = 0);  不小心就多了一個 global 變數，應該改為下面的寫法。

   1: function foo() {

   2:     var a, b;

   3:     // ...

   4:     a = b = 0; // both local

   5: }

如何安全的使用 Global

如果真的必需要使用 global 也請用下面的方式來寫，以提醒自已目前使用的是 global 變數

   1: var global = (function(){return this;}());

   2:  

   3: test1();

   4:  

   5: function test1(){

   6:   global.msg = "this is test 1";

   7:   test2();

   8: }

   9: function test2(){

  10:   console.log(global.msg);

  11:   console.log("msg:" + msg);

  12: }

使用單一 var 來定義變數 (single var)

好處

• 將所有的變數定義在程式最開始的地方
  
• 避免使用到未定義的變數
  
• 幫助你記得要定義變數，以避免不小心將變數變成 global
  
• 較少的程式碼

   1: function func() {

   2:     var a = 1,

   3:         b = 2,

   4:         sum = a + b,

   5:         myobject = {},

   6:         i,

   7:         j;

   8:     // function body...

   9: }

  10:  

  11: function updateElement() {

  12:     var el = document.getElementById("result"),

  13:         style = el.style;

  14:     // do something with el and style...

  15: }