我们通过一个简单的demo来说明如何引用RequireJS来进行JS模块化管理,预览效果链接如下:
https://greygao.github.io/require-demo/index.html
描述
- 首先,在主index.html在script中引入我们的require.js的依赖,
<script src="./require.js"></script>
- 由requirejs的说明文档可知,我们还需要引用以下声明来异步加载main.js:
<script data-main="scripts/main" src="require.js"></script>
- main.js可以看作是整个html的JS管理入口,之后我们所有的依赖都在main.js里来控制处理。main.js基本内容分两部分
- require.config主要来布置一些外来引入的依赖,用固定的path定义,
- requirejs([url],callback)来引入我们自己定义的依赖,可以有多个:
require.config({
paths: {
jquery: 'jquery.min'
}
});
requirejs(["hello"], function(hello) {
//回调函数内容
var text = JSON.stringify(hello);
var content = document.createElement("div");
content.innerHTML = text;
document.body.appendChild(content);
console.log(2)
});
- 与之相应的,被引入的依赖如hello.js就需要用define()来定义,才可以被成功引用,而在define()内部,我们可以继续引用其他依赖,如frank.js;
define(["frank"],function (text) {
console.log(text)
console.log(1)
//回调函数内容
return text;
}
);
- 定义frank.js为一个数据文件:
define(
{
name:"frank",
age:18,
hobby:"coding",
parter:"dog",
sayHi:"Hello, Frank"
}
);
- 为了看出执行的先后顺序,在每一层函数里加入了console.log(1),console.log(2).可以看出执行顺序是先hello.js后main.js:
{name: "frank", age: 18, hobby: "coding", parter: "dog", sayHi: "Hello, Frank"}
1
2
- 这样就可以实现一个RequireJS模块化管理的基本模型,例子中的main.js定义了一个固定路径的jquery依赖和自己定义的hello.js模块,又在hello.js内引入frank.js的数据,最后成功拿到frank的数据,输出在页面里。