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

　　介紹

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

　　背景

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

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

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

　　下面就是我所說的意思.

　　JavaScript 默認的全局問題

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

　　?

　　范圍?

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

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

　　把它設(shè)置到Action中

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

　　下載本文的代碼樣例.

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

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

　　在瀏覽器工具控制臺下，輸入: isDoingWork，然后回車

　　你會看到輸出的值為false.

　　現(xiàn)在輸入 : isDoingWork = true，然后回車

　　如此下載的值就為true了. 你已經(jīng)改變了這個值.

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

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

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

　　?

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

　　?