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

時間 2019-11-18

標籤 sharepoint 解決方案使用 javascript 引用文件欄目 Java開源简体版

原文原文鏈接

本文是系列文章的第一篇。javascript

在SharePoint解決方案中使用JavaScript (0)

做爲在SharePoint應用程序中使用JavaScript的第一步，就是要知道如何將一個寫好的.js文件，引用到頁面上。嗯，你可能以爲這個話題太簡單了，"引用一個.js文件不就是在頁面上方加一個<script>標籤嗎？"可是咱們要考慮的事情，可一般要比這複雜得多。好比，咱們大部分的.js文件，可能都是須要放置在網站中的全部頁面上的，修改網站裏面的每個.aspx顯然不是好主意，咱們須要一個更好、更靈活的方案。html

一、直接在母版頁上引用.js文件 java

因爲SharePoint網站中全部的頁面，都默認使用同一個母版頁(.master文件)，因此在母版頁上去引用一個.js文件，就會自動讓全部使用這個母版頁的網站頁面，都引用到這個.js文件。在母版頁的<head>區域，添加相應的<script>標籤，來引用咱們所需的.js文件，以下圖所示。jquery

(雖然上面的截圖是使用了SharePoint Designer，可是我並不建議你在生產環境中，直接使用SPD來對母版頁進行這樣的修改。正確的作法應該是在Visual Studio項目中維護對自定義母版頁的修改，而且以Module方式將自定義母版頁發佈到網站裏面。)web

在母版頁中直接引用.js，簡單、直接。這種方法很是適合引用一些幾乎全部頁面上都會用到的JavaScript庫，好比jQuery。在母版頁上完成了對jQuery的引用以後，網站中全部頁面(和頁面上的全部自定義Web Part)中的JavaScript代碼，就均可以直接使用jQuery庫了。整個項目中，若是有一些公用的自定義JavaScript庫文件，也能夠用這種方式來進行引用。ajax

可是要注意的一點是，你須要認真考慮是否將.js文件的引用放到<head>區域中。這是由於頁面在載入一個.js文件後，須要等待這個.js文件運行完成，才能繼續後面HTML內容的渲染 (由於JS代碼有可能修改DOM，因此得等到它運行完成，才能繼續)。若是你的自定義.js文件中的代碼很是複雜且耗時，那麼會影響整個HTML頁面的渲染速度 (即便服務器能很快的運行完成頁面後端的代碼並將HTML內容發送回客戶端的瀏覽器)。因此若是不是必定須要，你能夠將對.js文件的引用，放到頁面的最後面，這樣頁面能夠先將HTML內容渲染出來，而後再載入並運行.js文件。後端

二、使用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文件。

三、使用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文件。

四、自定義方案

若是上述的方案你都以爲不適合(或不夠強大/靈活…)，那麼你能夠構建一個自定義的.js文件載入方案。一個自定義的.js文件加載方案應該嘗試解決以下問題: