使用AngularJS編寫較為優美的JavaScript代碼指南

 　　本文示例代碼下載：modulePattern.zip - 所有的 4 個 HTML 文件 以及 panacea.js - 1.6 KB

　　介紹

　　AngularJS 的庫裡面有很多東西，但本文中我只想專注於小的，針對特定主題的庫，我相信通過它們能對Angular有一個較好的介紹. 理解這篇文章並不需要你有任何Angular相關的，甚至是JavaScript的經驗。希望你能從本文中看到一些使用Angular的好處，並樂於動手嘗試.

　　背景

　　我使用Angular有一段時間了，而在學習Angular的時候，我也喜歡構建一些樣例，所以當我一開始深入進去的時候，對於模塊或者JavaScript的設計模式，我也沒有多想，那樣對保持代碼組織和條理性有幫助. 那就是所有的重點：保持代碼的組織和條理性. 因此，現在我回過頭來，創建了這個極其小巧的樣例，以展示使用模塊可以有多簡單. 一路走來，我希望它能夠成為一篇好的對Angular的介紹.

　　(大多數)文章在闡述模式時的問題

　　大多數時候人們都會嘗試去在讀者知道模式是啥概念之前就開始闡述一個模式，而這基本上誤導了每一個人. 這裡要努力使得本文盡量簡單，讓我們首先來看一看這個問題吧。哪個問題呢?就是有關默認會在全局內存空間被創建的所有東西的Javascript的問題.

　　下面就是我所說的意思.

　　JavaScript 默認的全局問題

　　設想你的HTML中有下面這樣一段腳本.

　　?

1 2 3 <script> var isDoingWork = false; </script>

　　范圍?

　　你清楚這個變量的范圍麼?

　　是的，它是全局的。這個布爾值實際上被添加到了浏覽器的全局窗口對象中.

　　把它設置到Action中

　　這裡你可以看到它在Action中是怎樣的.

　　下載本文的代碼樣例.

　　在你的浏覽器中打開 modulePattern.htm .

　　打開浏覽器開發工具 -- F12(Chrome, IE) or Ctrl-Shift-I (Opera) -- (那樣就可以看見控制台了)

　　在浏覽器工具控制台下，輸入: isDoingWork，然後回車

　　你會看到輸出的值為false.

　　現在輸入 : isDoingWork = true，然後回車

　　如此下載的值就為true了. 你已經改變了這個值.

　　你可以看到這個值已經通過輸入doingwindow.isDoingWork = true然後回車，被添加到了全局窗口對象之中.

　　這可能會造成一些名字沖突，也會導致一些嚴重的bug. 這也許對你而言有點杞人憂天了，是不? 但是請設想你是決定要去實現某一個新的JS庫，它每分每秒都可以被創建出來. 假設你發現了這個叫做 Panacea.js 的很棒的庫，它將解決你所有的問題.

　　因此你向下面這樣在你的頁面中引用了它:

　　?

1 <script src="panacea.js"></script>

　　如此簡單，你就已經解決之前你遇到的所有問題. 然而，因為它是一個龐大的庫，而你只想要解決方法，卻不回去深挖這個龐大(幾千行代碼)源文件裡的每一行代碼. 而深埋在 Panacea.js 裡面某個角落的確實下面這樣的代碼:

　　?

1 2 3 var isDoingWork = false;   setInterval(function(){isDoingWork = !isDoingWork;}, 3000);

　　這代碼真是酷，你知道嗎?

　　每個3秒，它都會將這個布爾值設置成相對的值。啊!

　　自己動手看看

　　如果你想要自己動手驗證下這個東西，你可以做下面這幾步:

　　下載本文的樣例代碼.

　　在你的浏覽器中打開 modulePattern2.htm .

　　打開浏覽器開發工具 -- F12(Chrome, IE) 或者 Ctrl-Shift-I (Opera) -- (這樣你就可以看到控制台了)

　　在浏覽器開發工具的控制台下，輸入 : isDoingWork 然後回車

　　將第4步多重復幾次，你將會發現isDoingWork的值會每個大約3秒鐘變化一次.

　　那這是不是很棒呢?

　　我的第一個觀點 : 模塊模式是很有用的

　　我需要為此做出解釋，為了要向你展示為什麼 JavaScript 的模塊模式是很有用的. 我得想你展示 JavaScript 的模塊模式，那樣我就可以告訴你它是如何在AngularJS中被使用或實現的了.

　　模塊模式：封裝

　　如此，實際就是，模塊模式基本上就是封裝了. 封裝聽起來很熟悉，如果你有點面向對象編程經歷的話 -- 而我也希望你能有點這個經驗. 封裝是面向對象編程的三原則之一。封裝的另外一個說法就是數據隱藏。在經典的面向對象編程中——它不同於JavaScript所依賴的原型化OOP -- 數據隱藏是構建一個類模板的內在組成部分.

　　例如在 C#中， Animal 類的封裝 -- 隱藏數據 -- 特定的值被關聯到Animal對象. 那樣，如果某人決定變更那些值，他或他必須明確的通過初始化一個Animal對象並設置這個對象的值來達到目的. 在JavaScript中，我們則可以隨意的在全局窗口對象中設置值.

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 public class Animal   { // constructor allows user to set the commonName public animal(string name) { this.commonName = name; } // making commonName private hides (encapsulates) it in the class private string commonName; //explicitly exposing the value for reading only public string CommonName get { return this.commonName } }

　　在JavaScript中，模塊已經被創建用來模擬這種封裝行為了，如此我們就不會去將我們的變量組織到一個全局的命名空間中，並造成了隱藏很深的難以被發現和修復的問題.

　　現在你知道為什麼了，讓我們來看看如何會是這樣的.

　　函數被立即調用的表達式(IIFE)

　　看上去就好像每次我們向前推進一步，我們都要走點旁門左道. 因為要獲得能讓我們創建模塊模式的JavaScript語法，我們就得去了解一種叫做函數被立即調用的表達式語法，也叫做IIFE ( IIFE 發音是 "iffy").

　　最基礎的 IIFE 看起來像這樣:

　　?

1 2 3 4 5 (function(){ // lines // of // code }());

　　如果你從來沒有看到過像這樣的東西，那你就有點說不過去了.

　　立即被調用

　　首先，這個名稱的第一部分叫做立即被調用的原因是，一般包含這個特殊函數的源文件被加載好了，那麼包含在這個函數中的代碼就會運行.

　　對IIFE語法更加仔細的觀察

　　你可以看到這個語法的最中心是一個函數。看一下這個代碼塊，我已經將代碼分段並將一些行標上了號，如此我們就可以探討它了.

　　?

1 2 3 4 5 6 7 8 ( // 1. function() //2. { // 3. // 一行一行 // 的 // 代碼 }() // 4. ); // 5.

　　首先，看看上面腳本的第2行。這一行通常看來就是一個匿名(也就是沒有命名)的函數聲明. 而後，第3一直到第4則是這個函數的主題部分。最後，第4行最後以一對括弧結束，這對 括弧會告訴JavaScript解釋器去調用這個函數。最終, 所有這些都會被包在一個不歸屬任何部分的括弧(第1和第5行)中, 而這對括弧會告訴解釋器要調用這個外部的匿名函數，它包含了我們所定義的函數.

　　IIFE 可以帶上參數

　　這段奇怪的語法會在帶上參數之後，看起來會更加的奇怪. 它看起來會像是下面這樣

　　?

1 2 3 4 5 (function(thing1, thing2){ // lines // of // code }("in string", 382));

　　現在，你可以看到這個函數可以帶上兩個會被內部的函數引用的thing1