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功能的更多相关文章

  1. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  2. js实现网页中的"运行代码"功能

    <!DOCTYPE html> <html> <head> <meta charset='utf8' /> <title>网页中的运行代码功 ...

  3. JS开发之CommonJs和AMD/CMD规范

    CommonJS是主要为了JS在后端的表现制定的,他是不适合前端的,AMD(异步模块定义)出现了,它就主要为前端JS的表现制定规范. 在兼容CommonJS的系统中,你可以使用JavaScript开发 ...

  4. js模块化编程之CommonJS和AMD/CMD

    js模块化编程commonjs.AMD/CMD与ES6模块规范 一.CommonJS commonjs的require是运行时同步加载,es6的import是静态分析,是在编译时而不是在代码运行时.C ...

  5. JS模块化规范CommonJS，AMD，CMD

    模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块.理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可.一个模块化系统所必须的 ...

  6. JS JavaScript模块化（ES Module/CommonJS/AMD/CMD）

    前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了, jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得 ...

  7. [转]js模块化编程之彻底弄懂CommonJS和AMD/CMD！

    原文: https://www.cnblogs.com/chenguangliang/p/5856701.html ------------------------------------------ ...

  8. js模块化AMD/CMD

    JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统 ...

  9. js中的AMD规范

    回首萧瑟,残月挂角,孤草弄影. 看了一下上一篇随笔的日期,距离上一篇日志又过去了许久.在这段时间中,我尽全力去拯救那间便利店,可惜到最后依然失败,这一次是所有的出路全部没有了,我也做了所有的努力.闲下 ...

随机推荐

  1. Space Invaders 太空侵略者

    发售年份 1978 平台 街机 开发商 Taito 类型 射击 https://www.youtube.com/watch?v=MU4psw3ccUI

  2. chrome添加离线插件

    1.首先用户点击谷歌浏览器右上角的自定义及控制按钮,在下拉框中选择工具选项,然后点击扩展程序来启动Chrome浏览器的扩展管理器页面. 2.在打开的谷歌浏览器的扩展管理器中用户可以看到一些已经安装程序 ...

  3. my sql无法删除数据库

    mysql有时候会无法删除数据库,可以通过 1.select @@datadir 查询到文件目录 'C:\\ProgramData\\MySQL\\MySQL Server 5.7\\Data\\' ...

  4. <ROS> NodeHandle句柄

    作者:jack_20 原文:https://blog.csdn.net/jack_20/article/details/70746736 1.句柄可以让你通过构造函数指定命名空间 ros::NodeH ...

  5. 函数中不能对全局变量进行修改，想要修改全局变量需要在变量前面加global

    # def change_name(name):#     global school    #     school = "Mage Linux"#     print(&quo ...

  6. C# 6.0：Expression – Bodied Methods

    Expression-bodied 方法是C# 6.0 中另一个能简化代码的特性.我们已经对lambda表达式将funciton和delegation关联起来的这种用法很熟悉了.Expression- ...

  7. 非阻塞I/O事件驱动

    在 Java.PHP 或者.net 等服务器端语言中,会为每一个客户端连接创建一个新的线程.而每个线程需要耗费大约 2MB 内存.也就是说,理论上,一个 8GB 内存的服务器可以同时连接的最大用户数为 ...

  8. 一个故事带你理解if __name__ == '__main__'

    如果你刚刚接触python,相信会在看别人的程序的时候会遇到if __name__ == '__main__'酱紫的语法,如果当时没看懂现在也一知半解的话,看下去,本文可以帮你解决这个问题. 大家都知 ...

  9. 微软 workflow 工作流总结

    1.状态机工作流 (1)状态机工作流从state1 流转到 state2 到stateN (2) state中有执行状态和退出状态 (3) 在进入下一个步骤(state1 到 state2)前,首先会 ...

  10. [SQL]事务回滚详解及示例

    存储过程中的 SET XACT_ABORT ON 和事务 在存储过程中写SET XACT_ABORT ON 有什么用? SET XACT_ABORT ON是设置事务回滚的! 当为ON时,如果你存储中的 ...