requirejs加载远程非AMD规范js及和seajs规范CMD比较
2016-06-21 16:09
513 查看
requirejs加载远程非AMD规范的模块(js)(非AMD规范的模块在用require()加载之前,需要先用require.config()方法,定义它们的一些特征。如下)
require(['qsearch'],function(_Qsearch){ new _Qsearch(this,{}); //调用qsearch里面的构造方法 });需要一个config.js文件,配置路径:require.config()接受一个配置对象,这个对象除了paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。
require.config({ baseUrl:"static/js", //如果是本地的话路径前缀配置 shim: { 'qsearch':{ exports: 'qsearch' } }, paths: { "qsearch": "http://static.1n4j.com/static/newStatic/common/js/ui/qsearch" } });在requirejs的引入的地方配置在data-main里面配置config.js路径
<script type="text/javascript" data-main="$!staticModule.getTarget("/js/common/config")" src="$!staticModule.getTarget("/js/common/require.js")"></script>
data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的config.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把config.js简写成config。
注意:我们这里引用的非AMD规范的模块qsearch.js define规范是seajs的定义规范 --CMD 规范
可以简单看看:
CMD 规范(seajs):
define( 'qsearch', function( require, exports, module ) { });define 也可以接受两个以上参数。字符串 id 表示模块标识,数组 deps 是模块依赖。在开发阶段,推荐不要手写 id 和 deps 参数,因为这两个参数可以在构建阶段通过工具自动生成。define(id, deps, factory)define(‘hello’, [‘jquery’], function(require, exports, module) {// 模块代码});也可以手动指定模块 id 和依赖,require, exports 和 module 三个参数可酌情省略require 是一个方法,接受模块标识作为唯一参数,用来获取其他模块提供的接口。exports 是一个对象,用来向外提供模块接口。(// 对外提供 name 属性exports.name = ‘aaa’;// 对外提供 fun 方法exports.fun = function() {};)除了给 exports 对象增加成员,还可以使用 return 直接向外提供接口。module 是一个对象,上面存储了与当前模块相关联的一些属性和方法。exports 是 module.exports 的一个引用。在 factory 内部给 exports 重新赋值时,并不会改变 module.exports 的值。因此给 exports 赋值是无效的,不能用来更改模块接口。factory 为对象、字符串时,表示模块的接口就是该对象、字符串。factory 为函数时,表示是模块的构造方法。
AMD 规范(requirejs)
:
define(['jquery'], function($) { });
如果一个模块不依赖其他模块,那么可以直接定义在define()函数的
function
之中,如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。如上,表示该模块是依赖jquery的。如果qsearch是AMD规范的话,那么可以直接调用,不用上面那么麻烦了:
require(['http://static.1n4j.com/static/newStatic/CMS/js/ui/qsearch.js'],function(_Qsearch){new _Qsearch(this,{}); //调用qsearch里面的构造方法});
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享