commonJS和AMD简单实现原理

a.js内容：

module.exports= "笔记整理来自珠峰公开课";

1、commonJS

（1）用法

   CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}

    require()用来引入外部模块；exports对象用于导出当前模块的方法或变量，唯一的导出口；module对象就代表模块本身。

    虽说Node遵循CommonJS的规范，但是相比也是做了一些取舍，填了一些新东西的。
    var math = require('math');

    然后，就可以调用模块提供的方法：

    　　var math = require('math');

        math.add(2,3); // 5

（2）实现

let fs = require('fs');
function req(moudleName) {
    let content = fs.readFileSync(moudleName,'utf-8')
    let fn = new Function('exports','module','__dirname','__filename',content + '\n return module.exports');
    let module ={
        exports:{}
    }
    return fn(module.exports,module,req,__dirname,__filename)
}
let str = req("./a.js")
 console.log(str);

2、AMD（requireJS）

(1)简介

（1）实现js文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护。
用法：
　   <script src="js/require.js" defer async="true" ></script>
       async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

      <script src="js/require.js" data-main="js/main"></script>
    data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。
    由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

require.config({ 
    'baseUrl': 'js',  //指定相对路径
    'paths': {    //管理引用需要的JS模块
    	jquery: 'libs/jquery-1.11.1.min',
        underscore: 'libs/underscore-min',
        backbone: 'libs/backbone-min', 
	},
	'shim':  //配置依赖关系
	{
		backbone: {
			'deps': ['jquery', 'underscore'],
			'exports': 'Backbone'
		},
		underscore: {
			'exports': '_'
		},
	},
	 urlArgs: "version=1.0"   //版本号，修改可解决304缓存
});

（2）原理

let factorys ={};

function define(moudleName,dependencies,factory){
    factorys[moudleName] = factory;
    factory.dependencies = dependencies; //将依赖记在函数上。
}
function require(mods,callback){
    let result =  mods.map(function(mod){ //name  age
       let factory = factorys[mod];
       let exports;
       let dependencies = factory.dependencies;//依赖可能是多个，
       require(dependencies,function(){
        exports = factory.apply(null,arguments);
       })
       return exports;
    });
    callback.apply(null,result)
}
define("name",[],function(){
    return "dong" 
})
define("age",["name"],function(name){
    return  name+26
})
require(["age"],function(age){
   console.log(age)})

commonJS和AMD简单实现原理

猜你喜欢