热门关键字:

RequireJS

1679
作者:管理员
发布时间:2015/6/3 22:47:51
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=618

RequireJS

一、什么是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
友荐云推荐