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

gfrv

　　原文地址：点击打开链接
　　当你在与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文件：



[javascript] view plaincopy

• <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，即不采用延迟加载的方式，最终将会生成如下代码：



[javascript] view plaincopy

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

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



[javascript] view plaincopy

• <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#代码）也提供了两个静态方法来做同样的事情：



[javascript] view plaincopy

• <a target="_blank" href="http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.scriptlink.registerscriptafterui.aspx">ScriptLink.RegisterScriptAfterUI</a> (相当于LoadAfterUI=true)  
  
• <a target="_blank" href="http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.scriptlink.registerondemand.aspx">ScriptLink.RegisterOnDemand</a> (相当于OnDemand=true)  
  

　　下面分别介绍一下SP.SOD类中的一些方法。   
　　SP.SOD.executeOrDelayUntilScriptLoaded
　　SP.SOD.executeOrDelayUntilScriptLoaded(func, scriptName)，func是一个异步回调方法，这个方法会在script（scriptName）发出了载入成功的信号之后执行，发出载入成功的信号其实就是执行notifyScriptLoadedAndExecuteWaitingJobs(scriptName)方法。所有的SharePoint内置的脚本在它们载入成功之后都会执行这个方法。但是，executeOrDelyUnitlScriptLoaded并不触发载入一个延迟的脚本。
　　代码示例1：
　　My_ApplicationPage.aspx:



[html] view plaincopy

• <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



[javascript] view plaincopy

• 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文件：



[html] view plaincopy

• <span style="font-size:14px;"><script type='text/javascript'>RegisterSod('my_script.js', '/_layouts/my_script.js'); </script></span>  
  

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



[html] view plaincopy

• <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



[javascript] view plaincopy

• 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



[html] view plaincopy

• <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



[javascript] view plaincopy

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

　　        My_Script2.js
        




[javascript] view plaincopy

• 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脚本，脚本越多，花费在载入上的时间就越长。因此，延迟加载脚本可以使用户在最快的时间看到页面的内容。