其差别在于,脚本加载列表中的每个资源均会运行callback,而只有当所有脚本都加载完成后才会运行complete。yepnope 的标志性特征是条件加载。给定test 参数,yepnope 会根据该参数值是否为真而加载不同的资源。举个例子,可以以一定的准确度判断用户是否在用触摸屏设备,从而据此相应地加载不同的样式表及脚本。
yepnope({ test: Modernizr.touch, yep: ['touchStyles.css', 'touchApplication.js'], nope: ['mouseStyles.css', 'mouseApplication.js'], complete: function() { // 不管是哪一种情况,应用程序均已就绪! } });
我们只用寥寥几行代码就搭好了舞台,可以基于用户的接入设备而给他们完全不同的使用体验。当然,不是所有的条件加载都需要备齐yep(是)和nope(否)这两种测试结果。yepnope 最常见的用法之一就是加载垫片脚本以弥补老式浏览器缺失的功能。
yepnope({ test: window.json,nope: ['json2.js'], complete: function() { // 现在可以放心地用JSON 了 } });
页面使用了yepnope 之后应该变成下面这种漂亮的标记结构:
<html> <head> <!-- metadata and stylesheets go here --> <script src="https://www.jb51.net/headScripts.js"></scripts> <script src="https://www.jb51.net/deferredScripts.js" defer></script> </head> <body> <!-- content goes here --> </body> </html>
很眼熟?这个结构和讨论defer 属性那一节给出的结构一样,唯一的区别是这里的某个脚本文件已经拼接了yepnope.js(很可能就在deferredScripts.js 的顶部),这样就可以独立地加载那些根据条件再加载的脚本(因为浏览器需要垫片脚本)和那些想要动态加载的脚本(以便回应用户的动作)。结果将是一个更小巧的deferredScripts.js。
四、Require.js/AMD 模块化加载
开发人员想通过脚本加载器让混乱不堪的富脚本应用变得更规整有序一些,而Require.js 就是这样一种选择。Require.js 这个强大的工具包能够自动和AMD技术一起捋顺哪怕最复杂的脚本依赖图。
现在先来看一个用到Require.js 同名函数的简单脚本加载示例。
require(['moment'], function(moment) { console.log(moment().format('dddd')); // 星期几 });
require 函数接受一个由模块名称构成的数组,然后并行地加载所有这些脚本模块。与yepnope 不同,Require.js 不会保证按顺序运行目标脚本,只是保证它们的运行次序能满足各自的依赖性要求,但前提是
这些脚本的定义遵守了AMD(Asynchronous Module Definition,异步模块定义)规范。
案例一: 加载 JavaScript 文件
<script src="https://www.jb51.net/article/js/require.js"></script> <script> require(["./js/a.js", "./js/b.js"], function() { myFunctionA(); myFunctionB(); }); </script>
如案例一 所示,有两个 JavaScript 文件 a.js 和 b.js,里面各自定义了 myFunctionA 和 myFunctionB 两个方法,通过下面这个方式可以用 RequireJS 来加载这两个文件,在 function 部分的代码可以引用这两个文件里的方法。
require 方法里的这个字符串数组参数可以允许不同的值,当字符串是以”.js”结尾,或者以”/”开头,或者就是一个 URL 时,RequireJS 会认为用户是在直接加载一个 JavaScript 文件,否则,当字符串是类似”my/module”的时候,它会认为这是一个模块,并且会以用户配置的 baseUrl 和 paths 来加载相应的模块所在的 JavaScript 文件。配置的部分会在稍后详细介绍。
这里要指出的是,RequireJS 默认情况下并没有保证 myFunctionA 和 myFunctionB 一定是在页面加载完成以后执行的,在有需要保证页面加载以后执行脚本时,RequireJS 提供了一个独立的 domReady 模块,需要去 RequireJS 官方网站下载这个模块,它并没有包含在 RequireJS 中。有了 domReady 模块,案例一 的代码稍做修改加上对 domReady 的依赖就可以了。
案例二: 页面加载后执行 JavaScript
<script src="https://www.jb51.net/article/js/require.js"></script> <script> require(["domReady!", "./js/a.js", "./js/b.js"], function() { myFunctionA(); myFunctionB(); }); </script>