原文地址:点击打开链接
当你在与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中创建一个子文件夹来存放你自己的文件”,但是为了避免问题,在给文件命名的时候,要尽量避免同名的问题。
<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>
alert('3'); function sayHello() { alert('4'); } SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("my_script.js");
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(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");
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");
延迟加载脚本技术的主要作用在于节省时间,因为SharePoint在运行时需要很多js脚本,脚本越多,花费在载入上的时间就越长。因此,延迟加载脚本可以使用户在最快的时间看到页面的内容。