js模块化编程 ： require.js

目录

目录

一 requirejs的诞生

二 Javascript模块化的规范

三 requirejs具有如下优点

四 requirejs的使用

五详细概念请参考

六DEMO

一 、 require.js的诞生

为了解决以下两个问题而诞生：

（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。

二、 Javascript模块化的规范

Javascript模块规范共有两种：CommonJS 和 AMD。

三、 requirejs具有如下优点：

(1)防止js加载阻塞页面渲染

(2)RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。

(3)使用程序调用的方式加载js，防止出现如下丑陋的场景

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
......
<script type="text/javascript" src="z.js"></script>

四、 requirejs的使用

（1） 首先加载requireJS (注意：async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。)

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

（2）其次进行配置 使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths（有三种配置方式）属性指定各个模块的加载路径。

path配置方式：

一种则是直接改变基目录（baseUrl）：

　require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",　　　　　　
　　　　　　"math": "math"
　　　　　　}
　　});

如果某个模块在另一台主机上，也可以直接指定它的网址：

paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}

全路径配置：

　require.config({

　　　　paths: {

　　　　　　"jquery": "js/lib/jquery.min"
　　　　}

　　});

（3）书写模块 (math.js)

define(function () {
var add = function (x, y) {
return x + y;
};
return {
add: add
};
});

（4）模块化调用（main.js）

require(['math'], function (math){

　　　　alert(math.add(1,1));

　　});

（五）详细概念请参考

RequireJS和AMD规范

（六）DEMO

demo下载