在SharePoint解決方案中使用JavaScript (2) – 模塊化

本文是在SharePoint中使用JavaScript的第二篇文章，前面的文章包括：

• 在SharePoint解決方案中使用JavaScript (0)
• 在SharePoint解決方案中使用JavaScript (1) – 引用.js文件

 

理論上，無論你是在哪一個場景中編寫JavaScript代碼，都應該讓你的代碼模塊化。JavaScript代碼是很是容易變成一團亂麻的，特別是在你沒有將代碼進行模塊化的狀況下。在SharePoint中使用JavaScript也一樣如此。一些基本的JavaScript模塊化的原則包括：

• 儘可能讓每個.js文件都是一個模塊
• 每一個模塊均可以有隻屬於本身的"私有"數據和函數，模塊只暴露必要的數據和方法出去
• 模塊之間存在依賴關係
• 經過某個加載方案，使模塊能按照正確的順序（一般是它們的依賴關係）被加載

 

下面介紹兩種常見的JavaScript模塊化的方法，以及所對應的加載方案。

 

一、最簡模塊化

 

最簡單的一種方式，就是直接使用JavaScript的匿名函數。經過將整個模塊都放在一個當即執行的匿名函數裏面，咱們就能夠得到一個獨立的"執行空間"。在下面的示例中，咱們能夠在模塊中定義"私有"的變量和函數，而後將須要暴露的內容註冊到一個全局的"命名空間"MyNameSpace裏面。因爲JavaScript實際上並無命名空間的概念，因此咱們的命名空間，實際上也是經過定義一個全局變量實現的。將整個應用程序的全部模塊都註冊到同一個"命名空間"裏面，能夠儘可能減小全局變量的使用（理論上來講，除了這個命名空間自己，就不須要註冊其它全局變量了）。

 

 

這種命名空間的定義方式，有時候也會寫成以下圖那個樣子。在下圖的例子中，模塊直接暴露了一個構造函數。

 

 

將命名空間傳遞給匿名函數的參數的好處是，在其它模塊中，能夠經過參數所傳遞進來的命名空間，很天然的調用另外一個模塊暴露出來的接口。

 

 

這種最簡模塊化定義方式最大的好處，就是它不須要依賴任何第三方的庫，具備很是好的兼容性。你能夠將一個模塊文件從一個項目複製到另一個項目，（除了要修改一下模塊註冊到的命名空間以外，）極可能就能夠直接使用了。

 

管理模塊間的依賴關係，並按照依賴關係載入這些模塊，是開發人員須要考慮的問題。你既能夠用一些簡單的方法（好比直接將全部模塊文件都引用到頁面上，若是模塊比較少的話），或者建立一些自定義的方案來進行管理。

 

下面是一個簡單的例子，對一個應用程序中全部的模塊進行聲明，並定義它們之間的依賴關係，而後經過一個自定義的腳本載入器，根據聲明按照順序載入全部的模塊。嗯，具體載入器的實際代碼就不附上了，這個只是隨手寫的一個例子。實際上，只要有了模塊的聲明，使用LazyLoad之類的函數來進行模塊加載，並不難實現。

 

 

二、AMD（Asynchronous Module Definition）模塊化

 

除了使用不依賴任何第三方庫的匿名函數對模塊進行封裝以外，固然還可使用AMD規範來進行模塊的定義。支持AMD規範的庫不少，好比著名的RequireJS。下面就是一個基於RequireJS所定義的模塊。

 

 

固然，一旦決定了使用哪一個AMD庫，那麼全部模塊就須要使用那個庫所要求的樣子，所幸大部分基於AMD規範的庫對於模塊的定義要求都是很是相似的。RequireJS可以根據模塊所聲明的依賴，在加載一個模塊時，自動加載它所依賴的其餘模塊。關於RequireJS的更詳細信息，請參考它的官方網站。

 

本文只介紹了兩種進行JavaScript模塊化的方案。固然，進行模塊化還有不少其餘的方案，市面上存在着許多相似的庫。不少更復雜的JavaScript框架裏面（好比AngularJS），甚至會直接包含有模塊化的功能。微軟的TypeScript直接內置了module這個關鍵字（TypeScript好像是儘可能模擬ES Harmony，下一個JavaScript語言規範版本中的用法），來支持模塊化。基於何種方案進行JavaScript模塊化，須要你根據各個因素，選擇一種對你的應用程序來講最佳的方案。根據個人經驗，基本上全部方案都應該能很好的和SharePoint一起工做。