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规范
回首萧瑟,残月挂角,孤草弄影. 看了一下上一篇随笔的日期,距离上一篇日志又过去了许久.在这段时间中,我尽全力去拯救那间便利店,可惜到最后依然失败,这一次是所有的出路全部没有了,我也做了所有的努力.闲下 ...
随机推荐
- sql注入-输入’or 1=1#
比如:在用户名输入框中输入:’or 1=1#,密码随便输入,这时候的合成后的SQL查询语句为: select * from users where username='' or 1=1#' a ...
- click python cli 开发包
python click 包是一个方便的cli 开发包,我们可以用来开发强大的cli 应用 使用venv 进行环境准备,示例代码来自官方 venv 环境准备 python3 -m venv demoa ...
- mysql 生成时间序列数据 - 存储过程
由于时间自动转换为int值, 做一步转化,也可在调用时处理 use `test`; CREATE table test.test1 as SELECT state, id, `规格条码`, `色号条码 ...
- 20175202 《Java程序设计》第三周学习总结
20175209 2018-2019-2 <Java程序设计>第三周学习总结 教材知识点总结 1.编程语言发展阶段: 面向机器语言——面向过程语言——面向对象语言. 2.类声明: 类名必须 ...
- 20165308『网络对抗技术』Exp5 MSF基础应用
20165308『网络对抗技术』Exp5 MSF基础应用 一.原理与实践说明 实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 一个主动攻击实 ...
- C# 生成海报，文本区域指定和换行，图片合成
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string path = Server.MapPa ...
- 采用Anaconda平台调用pymc3时出现错误的解决方法
提示:(1)module 'theano' has no attribute 'gof',c++编辑出现错误 (2)stdio.h file not found 解决方法:(1)在终端中输入 xcod ...
- apache2.4+php7.3.2+mysql5.7
一.下载php7和apache2.4 1 首先下载php7的windows压缩包,到这里下载http://windows.php.net/download/ 我选择的是php7的这个版本,由于它是vc ...
- 爬虫系列2：Requests+Xpath 爬取租房网站信息
Requests+Xpath 爬取租房网站信息 [抓取]:参考前文 爬虫系列1:https://www.cnblogs.com/yizhiamumu/p/9451093.html [分页]:参考前文 ...
- AX2012 ERP 维度相关表数据关系图
AX2012比AX2009可怜的几个维度来说,太丰富了,可以无数个啊.维度多了,如何使用以及管理是个问题.这个需要在做调研时,充分分析讨论确定.以下为维度表关联关系,在做SQL取值时需要了解下,比如在 ...