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

hebwxw · 发表于 2015-9-24 09:33:52

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

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

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

账号		自动登录	找回密码
密码			立即注册

VMware vcenter+vSphere 6.5 U2共享

zabbix3.4.1安装部署+微信推送信息+大屏显

winhex数据恢复教程（非常巨大，内容丰富）

【跟谁学】韩宇极简英语课-技术人员不得不

用Zabbix通过JMX方式监控weblogic

Symantec Backup Exec 2015 2016/2012 BE20

NetScaler VPX部署之：NetScaler Gateway调

[经验分享] 在SharePoint解决方案中使用JavaScript (1) – 引用.js文件

扫码加入运维网微信交流群