作为在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脚本等话题。