您的位置:首页 > Web前端 > JavaScript

commonJS和AMD简单实现原理

2018-06-01 14:51 120 查看

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)})

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: