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

博客转自：《在SharePoint解决方案中使用JavaScript (1) – 引用.js文件》

[转载]SharePoint 2013 解决方案中使用JavaScript的更多相关文章

  1. SharePoint 2013 页面中window/document.onload/ready 事件不能触发的解决方案

    问题1:在SharePoint 2013页面中使用Javascript 事件window/document.onload/ready时,你会发现处理onload/ready事件的代码根本不能执行. 问 ...

  2. 在SharePoint解决方案中使用JavaScript (2) – 模块化

    本文是在SharePoint中使用JavaScript的第二篇文章,前面的文章包括: 在SharePoint解决方案中使用JavaScript (0) 在SharePoint解决方案中使用JavaSc ...

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

    本文是系列文章的第一篇. 在SharePoint解决方案中使用JavaScript (0) 作为在SharePoint应用程序中使用JavaScript的第一步,就是要知道如何将一个写好的.js文件, ...

  4. SharePoint 2013/2010 中的日历重合 (Calendars Overlay)

    本文介绍 SharePoint 2013/2010 中的日历重合 (Calendars Overlay). 日历重合 (Calendars Overlay)的用途就是将 不多于10个日历或日历视图聚集 ...

  5. 在SharePoint 2013 场中移除服务器，提示 cacheHostInfo is null 错误

    Problem 在SharePoint 2013 场中移除服务器,提示 cacheHostInfo is null 错误 Resolution 这是由于SharePoint 2013中分布式缓存实例( ...

  6. Office 365 - SharePoint 2013 Online 中创建母版页

    1.登陆SharePoint Online站点,点击右上角的设置按钮,如下图: 2.点击进入网站设置,到下面两个地方开启SharePoint Server 发布基础架构: 网站集管理 – 网站集功能 ...

  7. 转载 SharePoint 2013 Search功能

    转载原出处: http://www.cnblogs.com/OceanEyes/p/SharePont-2013-Search-Develop.html 阅读目录 启用Search Service A ...

  8. 转载 SharePoint 2013配置Master Page and Page Layout

    转载原地址: http://www.cnblogs.com/huangjianwu/p/4539706.html 涉及到的内容是关于SharePoint 2013如何部署自定义的母版页和布局页. 进入 ...

  9. [转载]SharePoint 2013测试环境安装配置指南

    软件版本 Windows Server 2012 标准版 SQL Server 2012 标准版 SharePoint Server 2013 企业版 Office Web Apps 2013 备注: ...

随机推荐

  1. Python 3 数值计算

    Python 3.4.3 (v3.4.3:9b73f1c3e601, Feb 24 2015, 22:43:06) [MSC v.1600 32 bit (Intel)] on win32Type & ...

  2. SQL获取本周销售总数

    select sum("NUMBER") as WEEK_NUMBER, COMPANY_CODE, PROJECT_CODE from D_VISIT WHERE "D ...

  3. [算法导论]强连通分量 @ Python

    class Graph: def __init__(self): self.V = [] class Vertex: def __init__(self, x): self.key = x self. ...

  4. 1、Orchard商城开发——开发需求

    需要开发的功能: 1.商品详情,可添加商品属性,如颜色,尺寸等. 2.商品类别,可显示该类别下的所有商品,可按品牌.颜色.尺寸等检索,并可按价格.销量等排序游览. 3.商品游览记录,收藏商品,加入购物 ...

  5. ASP.NET 4.5 和 Visual Studio 2012 中的新功能

    原文地址:http://www.asp.net/aspnet/overview/aspnet-and-visual-studio-2012/whats-new#_Toc318097372

  6. JAVA常见错误处理方法 和 JVM内存结构

    OutOfMemoryError在开发过程中是司空见惯的,遇到这个错误,新手程序员都知道从两个方面入手来解决:一是排查程序是否有BUG导致内存泄漏:二是调整JVM启动参数增大内存.OutOfMemor ...

  7. LCLFramework框架 1.1 Pre-Alpha 源码公布

    使用开发框架的好处:1.框架在技术上为软件系统提供了完整的模式实践2.框架为团队提供了合理可行的软件开发过程模式3.框架的应用大大提高了团队的开发效率,团队只需要关注与领域相关的业务实现,而无需关注具 ...

  8. LeetCode: Remove Nth Node From End of List 解题报告

    Remove Nth Node From End of List Total Accepted: 46720 Total Submissions: 168596My Submissions Quest ...

  9. 在c#程式中配置log4net

    參考網址: http://www.cnblogs.com/kissazi2/p/3393595.html http://www.cnblogs.com/kissazi2/p/3389551.html ...

  10. PHP cURL应用实现模拟登录与采集使用方法详解

    对于做过数据采集的人来说,cURL一定不会陌生.虽然在PHP中有file_get_contents函数可以获取远程链接的数据,但是它的可控制性太差了,对于各种复杂情况的采集情景,file_get_co ...