js实现reqire中的amd,cmd功能

时间:2021-05-18 18:14:07

js实现reqire中的amd,cmd功能 ,大概实现了 路径和模块 引入等重要功能。 本帖属于原创,转载请出名出处。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script> /*
原生js 实现 require Cmd Amd 功能
作者:姚观寿
*/
(function( root, factory ) {
var modules = {}, // 内部require 。
_require = function( deps, callback ) {
var args, len, i;
// 如果deps不是数组,则直接返回指定module
if ( typeof deps === 'string' ) {
return getModule( deps );
} else {
args = [];
for( len = deps.length, i = 0; i < len; i++ ) {
args.push( getModule( deps[ i ] ) );
} return callback.apply( null, args );
}
}, // 内部define,暂时不支持不指定id.
_define = function( id, deps, factory ) {
if ( arguments.length === 2 ) {
factory = deps;
deps = null;
} _require( deps || [], function() {
setModule( id, factory, arguments );
});
}, // 设置module, 兼容CommonJs写法。
setModule = function( id, factory, args ) {
var module = {
exports: factory
},
returned; if ( typeof factory === 'function' ) {
args.length || (args = [ _require, module.exports, module ]);
returned = factory.apply( null, args );
returned !== undefined && (module.exports = returned);
} modules[ id ] = module.exports;
}, // 根据id获取module
getModule = function( id ) {
var module = modules[ id ] || root[ id ]; if ( !module ) {
throw new Error( '`' + id + '` is undefined' );
} return module;
}, // 将所有modules,将路径ids装换成对象。
exportsTo = function( obj ) { var key, host, parts, part, last, ucFirst,obj=obj||{}; ucFirst = function( str ) {
return str && (str.charAt( 0 ).toUpperCase() + str.substr( 1 ));
};
for ( key in modules ) {
host = obj; if ( !modules.hasOwnProperty( key ) ) {
continue;
} parts = key.split('/');
last = ucFirst( parts.pop() ); while( (part = ucFirst( parts.shift() )) ) {
host[ part ] = host[ part ] || {};
host = host[ part ];
} host[ last ] = modules[key]; } return obj;
}, makeExport = function( ) {
// root.__dollar = dollar||''; return exportsTo( factory( root,_define, _require ) );
}, origin,
arr,
pattern = new RegExp(/\(.+\)/, "igm"),
str = factory.toString().match(pattern);
str = str[0].replace(/\s/g, "");
str = str.substring(1, str.toString().length - 1);
arr = str.split(',');
if ( typeof module === 'object' && typeof module.exports === 'object' ) {
module.exports = makeExport();
} else if ( typeof define === 'function' && define.amd ) { define([ ], makeExport );
} else { root[arr[3]] = makeExport()||{};
} }
//这里最后一个参数是插件名称 这样window 上面就能用了
)(window, function( window,define, require, carousel ) { //定义模块
define('setId',[],function() {
return function(id){
this.id=id;
}
});
//定义模块
define('getId',[],function() { return function(){
console.log("id:"+this.id);
}
}); //定义模块
define('getAge',[],function() { return function(){
console.log("age:"+this.age);
}
}); //定义模块 合并
define('merge',['setId','getId','getAge'],function(setId,getId,getAge) { return {
getId:getId,
setId:setId,
getAge:getAge
};
}); //定义插件 或者组件构造函数
define('_carousel',['merge'],function(merge) { function _carousel(age){
this.age=age;
}
_carousel.prototype=merge;
return _carousel;
}); return require('_carousel');
});
var _carousel=new carousel('25')
_carousel.getAge();
_carousel.setId(30);
_carousel.getId();
</script>
</body>
</html>