您的位置:首页 > 产品设计 > UI/UE

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里面的构造方法});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息