在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文件加载方案应该尝试解决以下问题:

能够引用网站内部、或外部任意位置的.js文件；
能够指定某个.js文件的加载时机：在<head>区域/DOM加载完成以后/整个页面加载完成以后等等
能够指定将某个.js文件只加载到特定页面，好比：列表的Forms页面/列表的新建列表项页面(New Form)/某个特定URL的页面
能够指定多个.js文件之间的依赖关系，并按照依赖关系顺序加载

文本概要的讲述了在SharePoint网站中引用.js文件的几种常见方式，在后面的文章里面，咱们将继续讲述将.js文件放置到哪里比较合适、如何在Web Part上使用JavaScript脚本等话题。