require.js入门教程(2)_H5之家 - 中国HTML5教程资源分享第一站

1 <script>require( ["some" ] );</script>

虽然仅仅是写法的变化，但带来了很多好处：
1、避免阻塞，提高了 js 的加载性能；

三、基本配置

上面使用 RequireJS 的方式是这样处理的：

1 <script src="require.js"></script>

这种写法虽然简单，但其实并不推荐，一般的写法还要再加个属性：

1 <script data-main="js/main" src="js/require-jquery.js"></script>

就像一个c程序总有一个 main 方法作为入口一样，上面这种写法，做了几件事情：
1、加载了 require-jquery.js 文件。注意，官方提供了 RequireJS 和 jquery 的打包版本，推荐。
2、在加载之后，加载入口文件 js/main.js ，注意，main.js 写进去的时候，不需要后缀名。

你的所有其他 js 模块文件，都可以写在 main.js 里面，通过 main.js 加载。

四、加载的用法

到此为止，我们遇到了两个关键词，一个是 define ，可以用来定义模块(命名空间)，第一部分我们讲了；还有一个是 require，可以直接加载其他 js。它除了简单的用法：

1 <script>

2 require( ["some" ] );

3 </script>

之外，还有和 define 类似的复杂用法：

1 <script>

2 require(["aModule", "bModule"], function() {

3 myFunctionA(); // 使用 aModule.js 中的函数 myFunctionA

4 myFunctionB(); // 使用 bModule.js 中的函数 myFunctionB

5 });

6 </script>

总结一下，define 是你定义自己的模块的时候使用，可以顺便加载其他js；require 直截了当，供你加载用的，它就是一个加载方法，加载的时候，可以定义别名。

五、在 RequireJS 之前运行

有了 RequireJS 这个工具，我们可以将网页 <head> 中的所有 js 都挪到页脚，以提高 js 的加载速度。请在网页上右键查看 html 源码，看一下实际效果。

理论上，js 脚本都应该放到独立的 js 文件中，而不是直接嵌入网页内联执行，好处是方便浏览器缓存，不用每次都加载页面内容。但只要你不是有真正的代码洁癖，总有一些特殊时候，需要在加载 require.js 之前，运行一些script脚本。这时候，你可以使用 wojilu 目前的做法，把所有的代码都放在一个叫 _run 的函数中，比如在 require.js 加载代码上面一行：

1 <script>

2 _run(function () {

3 require(['wojilu.core.base'], function (x) { x.customSkin().backTop(); });

4 });

5 </script>

这行代码引用了 wojilu.core.base 文件，但因为是放在 _run 中的，所以并不是立刻执行，而是延迟到 require.js 加载之后执行。 run 表示运行，前面加上下划线，表示“延迟”运行。

至于wojilu如何做到这一点的，请自己阅读源码，其实思路是很简单的。

六、版本号

为了在js更新之后，及时通知客户端刷新缓存，我们一般需要给js加上版本号，具体说明，参看这里：。在 RequireJS 中也可以给所有需要加载的 js 加上版本号，方法是给 require.js 提供一个配置文件。请在 requrie.js 加载之前，提供一个全局变量 require：

1 <script>

2 var require = {

3 urlArgs: 'v=版本号'

4 };

5 </script>

6 <script src="scripts/require.js"></script>

注意：不要把 require 变量写成 window.require ，据说在IE下会有问题。

RequireJS 还提供了其他丰富的配置选项，具体请访问官网查看。

七、其他问题

1、路径与后缀名

在 require 一个 js 文件的时候，一般不需要加上后缀名。如果加上后缀名，会按照绝对路径加载。没有后缀名，是按照下面的路径加载：

1 <script data-main="js/main" src="js/require-jquery.js"></script>

也就是默认加载 data-main 指定的目录，即 js/main.js 文件所在的目录。当然，你可以通过配置文件修改。

2、define 定义模块方法只能用在独立的js文件中，不能在页面中直接使用。
否则会报 Mismatched anonymous define() module 错误。

3、和其他第三方js类库是否冲突？

不会冲突。一般比较规范的类库，都会给自己的js加上命名空间。比如 wojilu 旧有的 wojilu.common.js ，其实就是放在 wojilu 命名空间中(当然是通过更原始的方式实现命名空间的)。

在通过 RequireJS 加载这些第三方的 js 的时候，完全不要有任何担忧。

当然，如果第三方类库能够使用 RequireJS 的方式进行改造，那是最好。比如 wojilu 中大多数js 都按照 RequireJS 的方式进行了改造。但是，如果你不改造，也是完全不要紧的。

4、在代码中 require 一个文件多次，是否会导致浏览器反复加载？

不会，这是 RequrieJS 的优点，即使你反复 require 它，它只加载一次。

转载自：

上一篇 jquery 结合css3使图片大小自适应下一篇点击按钮切换页面，版面滑动切换

文章评论以下网友留言只代表其个人观点，不代表本网站的观点和立场。