一、什么是RequireJS
RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
IE 6+ .......... 兼容
Firefox 2+ ..... 兼容
Safari 3.2+ .... 兼容
Chrome 3+ ...... 兼容
Opera 10+ ...... 兼容
它提供了以下功能:
1、声明不同js文件之间的依赖
2、可以按需、并行、延时载入js库
3、可以让我们的代码以模块化的方式组织
二、RequireJS的使用
在html中引入requirejs
在HTML中,添加这样的 <script> 标签:
<script src="/path/to/require.js" data-main="/path/to/app/config.js"></script>
通常使用requirejs的话,我们只需要导入requirejs即可,不需要显式导入其它的js库,因为这个工作会交给requirejs来做。
属性 data-main 是告诉requirejs:你下载完以后,马上去载入真正的入口文件。它一般用来对requirejs进行配置,并且载入真正的程序模块。
在config.js中配置requirejs
config.js 中通常用来做两件事:
配置requirejs 比如项目中用到哪些模块,文件路径是什么
载入程序主模块
requirejs.config({
baseUrl: '/public/js',
paths: {
app: 'app'
}
});
requirejs(['app'], function(app) {
app.hello();
});
在 paths 中,我们声明了一个名为 app 的模块,以及它对应的js文件地址。在最理想的情况下, app.js 的内容,应该使用requirejs的方式来定义模块:
define([], function() {
return {
hello: function() {
alert("hello, app~");
}
}
});
这里的 define 是requirejs提供的函数。
requirejs一共提供了两个全局变量:
requirejs/require: 用来配置requirejs及载入入口模块。如果其中一个命名被其它库使用了,我们可以用另一个
define: 定义一个模块
另外还可以把 require 当作依赖的模块,然后调用它的方法:
define(["require"], function(require) {
var cssUrl = require.toUrl("./style.css");
});
三、RequireJS的优点
1、可维护性
(1、灵活架构,焦点分离
(2、方便模块间组合、分解
(3、方便单个模块功能调试、升级
(4、多人协作互不干扰
2、可测试性
(1、可分单元测试
四、RequireJS的缺点
性能损耗
1、系统分层,调用链会很长
2、模块间通信,模块间发送消息会很耗性能
五、RequireJS的总结
内聚度
内聚度指模块内部实现,它是信息隐藏和局部化概念的自然扩展,它标志着一个模块内部各成分彼此结合的紧密程度。好处也很明显,当把相关的任务分组后去阅读就容易多了。 设计时应该尽可能的提高模块内聚度,从而获得较高的模块独立性。
耦合度
耦合度则是指模块之间的关联程度的度量。耦合度取决于模块之间接口的复杂性,进入或调用模块的位置等。与内聚度相反,在设计时应尽量追求松散耦合的系统。
如果您觉得本文的内容对您的学习有所帮助:
关键字:
RequireJS javascript define function require config