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规范
回首萧瑟,残月挂角,孤草弄影. 看了一下上一篇随笔的日期,距离上一篇日志又过去了许久.在这段时间中,我尽全力去拯救那间便利店,可惜到最后依然失败,这一次是所有的出路全部没有了,我也做了所有的努力.闲下 ...
随机推荐
- 关于使用jQuery操作dom时的一点发现
<body> <ul> <li>list item 1</li> <li>list item 2</li> <li> ...
- cout设置输出数据不显示科学计数法
[解决方案] 1.在头文件包含—#include<iomanip>——定义IO流输出输入格式控制相关函数. 2.利用cout输出格式为—cout << fixed <&l ...
- flutter Row 垂直或水平放置多个widget
使用行(Row)水平排列widget,使用列(Column)垂直排列widget.在行或列中嵌套行或列实现复杂的布局.如下图所示: 此布局按行排列.该行包含两个子布局,左侧一列和右侧的图片 对于行(R ...
- Zabbix server的配置文件没有真正生效
现状 Zabbix server端迁移之后,一直卡,卡的不行的卡,一直以为是网络的原因,实在忍受不下去了,还是得排查排查 在界面上一直显示这条,但是我的zabbix_server确实是启动的,但是 ...
- python selenium-webdriver 登录验证码的处理（十二）
很多系统为了防止坏人,会增加各样形式的验证码,做测试最头痛的莫过于验证码的处理,验证码的处理一般分为三种方法 1.开发给我们设置一个万能的验证码: 2.开发将验证码给屏蔽掉: 3.自己识别图片的上的千 ...
- [转]Linux编译和安装boost库
1. 下载boost安装包并解压缩 到http://www.boost.org/下载boost的安装包,以boost_1_58_0.tar.gz为例 下载完成后进行解压缩: tar zxvf boos ...
- Oracle触发bug(cursor: mutex S)，造成数据库服务器CPU接近100%---SQL子游标多版本问题
问题现象: 项目反馈系统反应非常缓慢,数据库服务器CPU接近100%! INSERT INTO GSPAudit1712(ID,TypeID,CategoryID,DateTime,UserID,Us ...
- 分类问题的几个评价指标（Precision、Recall、F1-Score、Micro-F1、Macro-F1
轉自 https://blog.csdn.net/sinat_28576553/article/details/80258619 四个基本概念TP.True Positive 真阳性:预测为正,实 ...
- Notepad2用法说明
Notepad2用法说明:1.替换系统记事本.bat和恢复系统记事本.bat可以替换.回复系统记事本.2.查看→默认字体,编程可用Consolas,字号四号.3.查看→自定义方案,Identifier ...
- TCP/IP学习20180805-数据链路层-IP选路
转,原文链接https://blog.csdn.net/wh1511995112/article/details/51474692 IP选路 什么是IP选路? IP选路,即IP寻路,就是根据路由表中的 ...