本文是系列文章的第一篇。
作為在SharePoint應用程序中使用JavaScript的第一步，就是要知道如何將一個寫好的.js文件，引用到頁面上。嗯，你可能覺得這個話題太簡單了，"引用一個.js文件不就是在頁面上方加一個<script>標簽嗎？"但是我們要考慮的事情，可通常要比這復雜得多。比如，我們大部分的.js文件，可能都是需要放置在網站中的所有頁面上的，修改網站里面的每一個.aspx顯然不是好主意，我們需要一個更好、更靈活的方案。
1、直接在母版頁上引用.js文件
由於SharePoint網站中所有的頁面，都默認使用同一個母版頁(.master文件)，所以在母版頁上去引用一個.js文件，就會自動讓所有使用這個母版頁的網站頁面，都引用到這個.js文件。在母版頁的<head>區域，添加相應的<script>標簽，來引用我們所需的.js文件，如下圖所示。
(雖然上面的截圖是使用了SharePoint Designer，但是我並不建議你在生產環境中，直接使用SPD來對母版頁進行這樣的修改。正確的做法應該是在Visual Studio項目中維護對自定義母版頁的修改，並且以Module方式將自定義母版頁發布到網站里面。)
在母版頁中直接引用.js，簡單、直接。這種方法非常適合引用一些幾乎所有頁面上都會用到的JavaScript庫，比如jQuery。在母版頁上完成了對jQuery的引用之后，網站中所有頁面(和頁面上的所有自定義Web Part)中的JavaScript代碼，就都可以直接使用jQuery庫了。整個項目中，如果有一些公用的自定義JavaScript庫文件，也可以用這種方式來進行引用。
但是要注意的一點是，你需要認真考慮是否將.js文件的引用放到<head>區域中。這是因為頁面在載入一個.js文件后，需要等待這個.js文件運行完成，才能繼續后面HTML內容的渲染 (因為JS代碼有可能修改DOM，所以得等到它運行完成，才能繼續)。如果你的自定義.js文件中的代碼非常復雜且耗時，那么會影響整個HTML頁面的渲染速度 (即使服務器能很快的運行完成頁面后端的代碼並將HTML內容發送回客戶端的瀏覽器)。所以如果不是一定需要，你可以將對.js文件的引用，放到頁面的最后面，這樣頁面可以先將HTML內容渲染出來，然后再載入並運行.js文件。
<script>標簽支持defer屬性，這個屬性用來告訴瀏覽器:你可以在完成HTML內容的加載之后再運行我。HTML5還給<script>標簽又添加了一個async屬性，來標記代碼可以異步執行。但是由於瀏覽器兼容性的原因(你懂的)，我建議你不要依賴這些屬性。
2、使用SPWeb.CustomJavaScriptFileUrl屬性
如果你希望在所有頁面上都引用一個.js文件，而同時又不希望修改母版頁，那么一個替代的方案是通過SPWeb.CustomJavaScriptFileUrl屬性來做到。給這個屬性設置一個.js文件的路徑，母版頁上的<SharePoint:CustomJSUrl>控件就會自動將那個.js文件載入到頁面上。
下面的PowerShell腳本示范了如何為SPWeb.CustomJavaScriptFileUrl設置一個值。我使用PowerShell只是出於示范的目的，在你的項目中，這些代碼通常會用C#實現，並很可能寫在一個Feature的激活事件中，使得Feature被激活時，就設置好網站中所有頁面需要載入的腳本。
SPWeb.CustomJavaScriptFileUrl屬性的一個問題，就是它只能用來指定一個.js文件。但是這個問題很容易克服，我們可以讓被引用的.js文件只是一個"啟動器"，它負責去載入其它必需的.js文件。就類似這樣：
當然你也可以把這個"啟動器"寫得稍微復雜、靈活一點。
SPWeb.CustomJavaScriptFileUrl屬性的另外一個問題，就是通過它所引用的.js文件，必然在<head>區域就被加載。之前說過，如果你的.js文件中的代碼比較復雜耗時，那么它會影響到頁面的整體加載速度。這個問題可以通過一些JavaScript的技巧來避免。如下圖所示范的代碼，代碼首先立即載入jquery.js文件，然后在頁面DOM加載完成之后，再載入其它的.js文件。
3、使用Custom Action
在大部分情況下，使用Custom Action的目的，都是為了向界面上添加自定義的菜單項或其它UI元素，但是Custom Action其實也是可以用來向頁面上添加.js引用的。
在Visual Studio中，向SharePoint項目添加一個"空元素"，然后如下所示，在<Elements>元素中添加一個<CustomAction>元素。"Location='ScriptLink'"屬性告訴SharePoint，這個<CustomAction>的目的是為了向頁面"注入"腳本。"ScriptSrc"屬性用來指定要引用的.js文件的位置。在"ScriptSrc"屬性里面，是可以使用"~site"和"~sitecollection"標記，用來表示網站和網站集的根目錄的，比如:"ScriptSrc='~site/ScriptLibrary/Start.js'"。
如果要引用多個.js文件，也很好辦，只需要添加多個<CustomAction>標簽即可。注意每個<CustomAction>的"Sequence"屬性，這個屬性的值用來標識每個.js引用的載入順序。SharePoint會按照"Sequence"屬性所指定的順序 (而並非<CustomAction>標簽的聲明順序)，依次引用.js文件。
Custom Action最大的好處，在於你可以將它放在一個Feature里面。用戶激活Feature，網站就會引用Custom Action所指定的.js文件，用戶停用Feature，這些.js文件就不會被引用。這是一個巨大的靈活性。
Custom Action的一個限制，就是它的"ScriptSrc"屬性所引用的.js文件，要么位於_layouts中，要么位於網站或網站集里面。它是不能用來引用一個外部的.js文件的，比如，"ScriptSrc=' http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.2.min.js'"是不會工作的。當然，你可以使用之前說過的"啟動器"的方案，來解決這個問題，先通過Custom Action引用一個"啟動器".js文件，然后在這個"啟動器"里面去載入其它外部的.js文件。
4、自定義方案
如果上述的方案你都覺得不適合(或不夠強大/靈活…)，那么你可以構建一個自定義的.js文件載入方案。一個自定義的.js文件加載方案應該嘗試解決如下問題:
- 可以引用網站內部、或外部任意位置的.js文件；
- 可以指定某個.js文件的加載時機：在<head>區域/DOM加載完成之后/整個頁面加載完成之后等等
- 可以指定將某個.js文件只加載到特定頁面，比如：列表的Forms頁面/列表的新建列表項頁面(New Form)/某個特定URL的頁面
- 可以指定多個.js文件之間的依賴關系，並按照依賴關系順序加載
文本概要的講述了在SharePoint網站中引用.js文件的幾種常見方式，在后面的文章里面，我們將繼續講述將.js文件放置到哪里比較合適、如何在Web Part上使用JavaScript腳本等話題。