可编程的脚本加载 虽然标签简单得令人心动，但有些情况确实需要更精致的脚本加载方式。我们可能只想给那些满足一定条件的用户加载某个脚本，譬如白金会员或达到一定级别的玩家，也可能只想当用户单击激活时才加载某个特性，譬如聊天小部件。<br><span style="color: rgb(0, 0, 0);"><strong>1、直接加载脚本</strong></span><br>我们可以用类似下面这样的代码来插入<script>标签。<br></p> <p class="jb51code"><br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = '/js/feature.js'; head.appendChild(script);</pre><div class="contentsignin">登录后复制</div></div><p>稍等，我们如何才能知道脚本何时加载结束呢？我们可以给脚本本身添加一些代码以触发事件，但如果要为每个待加载脚本都添加这样的代码，那也太闹心了。或者是另外一种情况，即我们不可能给第三方服务器上的脚本添加这样的代码。HTML5 规范定义了一个可以绑定回调的onload 属性。</p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">script.onload = function() { // 现在可以调用脚本里定义的函数了 };</pre><div class="contentsignin">登录后复制</div></div><p>不过， IE8 及更老的版本并不支持onload ， 它们支持的是onreadystatechange。某些浏览器在插入<script>标签时还会出现一些“灵异事件”。而且，这里甚至还没谈到错误处理呢！为了避免 <br/>所有这些令人头疼的问题，在此强烈建议使用脚本加载库。</p><p><span style="color: #000000"><strong>yepnope的条件加载</strong><br/></span>yepnope是一个简单的、轻量级的脚本加载库（压缩后的精简版只有1.7KB），其设计目标就是真诚服务于最常见的动态脚本加载需求。<br/>yepnope 最简单的用法是，加载脚本并对脚本完成运行这一事件返回一个回调。<br/></p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ load: 'oompaLoompas.js', callback: function() { console.log('oompa-Loompas ready!'); } });</pre><div class="contentsignin">登录后复制</div></div><p>还是无动于衷？下面我们要用yepnope 来并行加载多个脚本并按给定次序运行它们。举个例子，假设我们想加载Backbone.js，而这个脚本又依赖于Underscore.js。为此，我们只需用数组形式提供这两个脚本的位置作为加载参数。</p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ load: ['underscore.js', 'backbone.js'], complete: function() { // 这里是Backbone 的业务逻辑 } });</pre><div class="contentsignin">登录后复制</div></div><p>请注意，这里使用了complete（完成）而不是callback（回调）。</p><p>其差别在于，脚本加载列表中的每个资源均会运行callback，而只有当所有脚本都加载完成后才会运行complete。yepnope 的标志性特征是条件加载。给定test 参数，yepnope 会根据该参数值是否为真而加载不同的资源。举个例子，可以以一定的准确度判断用户是否在用触摸屏设备，从而据此相应地加载不同的样式表及脚本。</p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ test: Modernizr.touch, yep: ['touchStyles.css', 'touchApplication.js'], nope: ['mouseStyles.css', 'mouseApplication.js'], complete: function() { // 不管是哪一种情况，应用程序均已就绪！ } });</pre><div class="contentsignin">登录后复制</div></div><p>我们只用寥寥几行代码就搭好了舞台，可以基于用户的接入设备而给他们完全不同的使用体验。当然，不是所有的条件加载都需要备齐yep（是）和nope（否）这两种测试结果。yepnope 最常见的用法之一就是加载垫片脚本以弥补老式浏览器缺失的功能。</p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ test: window.json,nope: ['json2.js'], complete: function() { // 现在可以放心地用JSON 了 } });</pre><div class="contentsignin">登录后复制</div></div><p>页面使用了yepnope 之后应该变成下面这种漂亮的标记结构：<br/></p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xhtml;"><html> <head> <!-- metadata and stylesheets go here --> <script src="headScripts.js"></scripts> <script src="deferredScripts.js" defer>
