js实现reqire中的amd，cmd功能
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>
js实现reqire中的amd，cmd功能的更多相关文章
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- js实现网页中的"运行代码"功能
<!DOCTYPE html> <html> <head> <meta charset='utf8' /> <title>网页中的运行代码功 ...
- JS开发之CommonJs和AMD/CMD规范
CommonJS是主要为了JS在后端的表现制定的,他是不适合前端的,AMD(异步模块定义)出现了,它就主要为前端JS的表现制定规范. 在兼容CommonJS的系统中,你可以使用JavaScript开发 ...
- js模块化编程之CommonJS和AMD/CMD
js模块化编程commonjs.AMD/CMD与ES6模块规范 一.CommonJS commonjs的require是运行时同步加载,es6的import是静态分析,是在编译时而不是在代码运行时.C ...
- JS模块化规范CommonJS，AMD，CMD
模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块.理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可.一个模块化系统所必须的 ...
- JS JavaScript模块化（ES Module/CommonJS/AMD/CMD）
前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了, jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得 ...
- [转]js模块化编程之彻底弄懂CommonJS和AMD/CMD！
原文: https://www.cnblogs.com/chenguangliang/p/5856701.html ------------------------------------------ ...
- js模块化AMD/CMD
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统 ...
- js中的AMD规范
回首萧瑟,残月挂角,孤草弄影. 看了一下上一篇随笔的日期,距离上一篇日志又过去了许久.在这段时间中,我尽全力去拯救那间便利店,可惜到最后依然失败,这一次是所有的出路全部没有了,我也做了所有的努力.闲下 ...
随机推荐
- 用汇编语言角度来理解C语言的一些问题
在汇编的世界里,整数的存在和表示是没有有符号数和无符号数之分的,都是用数的补码表示,有无符号的计算是靠指令来进行确定.如JA/JB是用于无符号数的跳转指令,而JG/JL则是用于有符号数的指令.汇编中的 ...
- Taro 代码及功能，需要注意的地方
Taro 代码不能使用的写法: 请注意无 AppID 关联下,调用 wx.operateWXData 是受限的, API 的返回是工具的模拟返回
- div 内容宽度自适应、超出后换行
div 内容宽度自适应,超出后换行 { max-width:100%;width: fit-content;width: -webkit-fit-content;width: -moz-fit-con ...
- Linux基础入门-基本概念及操作
桌面环境: KDE.GNOME.XFCE.LXDE 实验楼使用的是XFCE 终端: gnome-terminal, kconsole, xterm, rxvt, kvt, nxterm, eterm ...
- 安装owncloud出现：Error while trying to create admin user: An exception occurred while executing
安装owncloud出现:Error while trying to create admin user: An exception occurred while executing 1.安装ownc ...
- MyBatis DTD文件下载地址
下载链接: http://mybatis.org/dtd/mybatis-3-config.dtdhttp://mybatis.org/dtd/mybatis-3-mapper.dtd
- 解决spyder、Jupyter Notebook 打不开
参考: https://blog.csdn.net/lanchunhui/article/details/72891918 https://stackoverflow.com/questions/49 ...
- python-pcl
python-pcl安装和使用 https://blog.csdn.net/joker_hapy/article/details/85006818 Ubuntu16.04下安装PCL及python-p ...
- CUDA 编程
作者:MingChaoSun 原文:https://blog.csdn.net/sunmc1204953974/article/details/51000970 一.CPU和GPU 上图是CPU与GP ...
- mplayer用法收集【转】
转自:https://blog.csdn.net/wylhistory/article/details/4816653 1,录音: mplayer mms://202.***.***.***/test ...