SharePoint JS延迟加载类（SP.SOD）介绍

最新推荐文章于 2022-07-07 20:09:04 发布

计算机器

最新推荐文章于 2022-07-07 20:09:04 发布

阅读量3.3k

点赞数

分类专栏： SharePoint 研究文章标签： SharePoint SP.SOD

SharePoint 研究专栏收录该内容

86 篇文章 1 订阅

订阅专栏

原文地址：点击打开链接

当你在与Ribbon UI，客户端对象模型（Client OM）或者复杂的SharePoint js打交道的时候，你可能会发现，SharePoint使用了一个内建的js类SP.SOD（SOD是指Script On Demand 延迟加载），这里对它做一个简单的介绍。

SharePoint的js代码，以及js的一些扩展，分散在不同的文件中。我们在SharePoint上做开发的时候，也会写很多js代码。SP.SOD的主要作用就是决定在什么时候，载入哪些js代码！SP.SOD类的具体定义可以在init.js文件找到。

ScriptLink

SP.SOD与ScriptLink这个服务端控件联系紧密，首先介绍一下这个控件。这个服务端控件主要就是用来注册js文件。例如下面的例子，使用这个控件注册了My_Script.js文件：

    <SharePoint:ScriptLink ID="scriptLink1" runat="server" Name="My_Script.js" Localizable="false" LoadAfterUI="true" OnDemand="false" />

这个控件默认要注册的js文件部署在layouts文件夹下，因此如果js文件在layouts中，“Name”属性可以直接填写文件的名字。你也可以使用一个相对路径来代替文件名，但是如果OnDemand属性为“true”，使用相对路径可能会产生问题，所以这个地方要尽量使用文件名而不是相对路径，当然这违反了一个最佳实践，就是“在layouts中创建一个子文件夹来存放你自己的文件”，但是为了避免问题，在给文件命名的时候，要尽量避免同名的问题。
"Localizable"为true，控件会在指定的layouts下面与语言相关的文件夹中查找script文件，例如(_layouts/1033/My_Script.js)
"LoadAfterUI"决定了脚本的引用位置，如果为true，会在HTML body之后引用，如果为false，会在HTML head中引用。
“OnDemand”为false，即不采用延迟加载的方式，最终将会生成如下代码：

<script type="text/javascript">
// <![CDATA[
document.write('<script type="text/javascript" src="/_layouts/my_script.js"></' + 'script>');
// ]]>
</script>

如果是true，采用延迟加载的方式，My_Script.js会根据需要载入，将会生成如下代码：

<script type="text/javascript">RegisterSod("my_script.js", "\u002f_layouts\u002fmy_script.js");</script>

可以看到，如果为true，，脚本并不是直接引用的，而是使用了RegisterSod这个方法来载入的。RegisterSod就是SP.SOD.registerSod(key, url)。脚本直到使用SP.SOD.executeFunc请求的时候才会载入（SP.SOD.executeFunc会在下面的内容中介绍）。

另外，SPScriptLink类（C#代码）也提供了两个静态方法来做同样的事情：

ScriptLink.RegisterScriptAfterUI (相当于LoadAfterUI=true)
ScriptLink.RegisterOnDemand (相当于OnDemand=true)

下面分别介绍一下SP.SOD类中的一些方法。

SP.SOD.executeOrDelayUntilScriptLoaded

SP.SOD.executeOrDelayUntilScriptLoaded(func, scriptName)，func是一个异步回调方法，这个方法会在script（scriptName）发出了载入成功的信号之后执行，发出载入成功的信号其实就是执行notifyScriptLoadedAndExecuteWaitingJobs(scriptName)方法。所有的SharePoint内置的脚本在它们载入成功之后都会执行这个方法。但是，executeOrDelyUnitlScriptLoaded并不触发载入一个延迟的脚本。

代码示例1：

My_ApplicationPage.aspx:

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<SharePoint:ScriptLink ID="sl" runat="server" Name="My_Script.js" LoadAfterUI="true" OnDemand="false" />
<script type="text/javascript" language="javascript">
 
function myCallback() {
//sayHello is defined in MyScript.js
sayHello();
}
 
alert('1');
 
ExecuteOrDelayUntilScriptLoaded(myCallback, "my_script.js");
 
alert('2');
 
</script>
</asp:Content>

My_Script.js

alert('3');
 
function sayHello() {
alert('4');
}
 
SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("my_script.js");

在aspx页面中，我们使用script link注册My_Script.js，因为设置属性LoadAfterUI=true，因此script文件会在HTML body之后引用。然后定义了一个myCallback方法，这个方法会在my_script.js文件载入之后执行。这段代码的运行结果是分别弹出1，2，3，4。

SP.SOD.registerSOD

SP.SOD.registerSod(key,url)这个方法可以手动注册一个延迟加载的js文件：

<script type='text/javascript'>RegisterSod('my_script.js', '/_layouts/my_script.js'); </script>

SP.SOD.executeFunc

SP.SOD.executeFunc(key, functionName, fn)这个方法之前提到过，是用来确保需要延迟加载的js文件已经载入，然后执行回调函数fn。参数key必须要与ScriptLink的Name属性的值相同（key需要使用小写字母）。functionName参数期待一个ASP.NET AJAX js类的类型名字（typeof ...）。executeFunc这个方法首先检查这个AJAX类是否已经被注册，如果没有，会检查是否可以参数中指定的延迟加载文件已经载入了。载入是指在HTML head中添加相关的script tag。这些检查是为了确定脚本没有被载入过。如果你不想使用AJAX js类的话，你可以传入一个null。fn定义了一个回调，这个回调函数会在脚本载入后执行。

代码示例2：

My_ApplicationPage.aspx

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<SharePoint:ScriptLink ID="sl" runat="server" Name="My_Script.js" LoadAfterUI="true" OnDemand="true" />
<!-- RegisterSod('my_script.js', '/_layouts/My_Script.js'); -->
 
<script type="text/javascript" language="javascript">
 
function myCallback() {
sayHello();       
}
 
alert('1');
 
SP.SOD.executeFunc("my_script.js", null, myCallback);
 
alert('2');
 
</script>
</asp:Content>

My_Script.js

alert('3');
 
function sayHello() {
alert('4');
}
 
SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("my_script.js");

与代码示例1不同的地方是，ScriptLink注册了一个延迟加载的脚本（OnDemand=true）。My_Script.js直到显式调用了SP.SOD.executeFunc("my_script.js")之后才会载入。当延迟加载的脚本调用了SP.SOD.norifyScriptLoadedAdnExecuteWaitingJobs("my_script.js")之后，myCallback才会被执行，因此这段代码的输出结果还是分别弹出1，2，3，4。（因此，如果某个脚本文件是延迟载入的，那么调用其中的方法是，最好使用executeFunc，来确保方法所在的js文件已经加载）

SP.SOD.registerSodDep

SP.SOD.registerSodDep(key, dep)可以注册延迟加载脚本的依赖文件。参数key指定了一个延迟加载的脚本，这个脚本定义在dep参数所指定的文件中。用户请求key参数指定的脚本时，dep参数所指定的文件会首先加载。你也可以定义一个依赖链，依次加载相互依赖的脚本。

代码示例3：

My_ApplicationPage.aspx

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" language="javascript">
function myCallback() {
sayHello();       
}
 
alert('1');
 
function myInit(){
SP.SOD.executeFunc("my_script.js", null, myCallback);
alert('2');
}
 
_spBodyOnLoadFunctionNames.push("myInit");
 
RegisterSod('my_script.js', '/_layouts/My_Script.js');
RegisterSod('my_script2.js', '/_layouts/My_Script2.js');
 
RegisterSodDep('my_script.js', 'my_script2.js');
 
</script>
</asp:Content>

My_Script.js

alert('4');
 
function sayHello() {
alert('5');
sayHello2();
}
 
SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("my_script.js");

My_Script2.js

alert('3');
 
function sayHello2() {
alert('6');
}
 
SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("my_script2.js");

这段代码注册了两个延迟加载的脚本，分别是My_Script.js和My_Script2.js。当调用SP.SOD.executeFunc(My_Script.js, null, myCallback)来请求My_Script.js文件的时候，SP.SOD会首先载入My_Script2.js，然后载入My_Script.js，这段代码的输出结果是1，2，3，4，5，6

延迟加载脚本技术的主要作用在于节省时间，因为SharePoint在运行时需要很多js脚本，脚本越多，花费在载入上的时间就越长。因此，延迟加载脚本可以使用户在最快的时间看到页面的内容。