首页 > 代码库 > node模块机制

node模块机制

一、node模块化机制 
1、commonJS模块规范包括三部分:模块引用、模块定义、模块标识。例如:
//math.js
exports.add = function(){
    var sum = 0;
    var args = arguments;
    var len = args.length;
    for(var i = 0;i < len;i++){
        var num = args[i];
        sum += num;
    }
    return sum;
}
 
 
// increment.js
var math = require(‘./math‘);
exports.increment = function(val){
    return math.add(val, 1);
};
 
 
// app.js
var increment = require(‘./increment.js‘);
console.log(increment.increment(5));
 
注意:模块标识符就是传递给require方法的参数,可以是./ 或者 ../ 开头的相对路径,也可以是 / 开头的绝对路径。
 
2、node实现了commonJS模块规范,同时引入了自己的特性。node引入模块需要经历一下三个步骤:
(1)、路径分析
(2)、文件定位。可以没有拓展名,如果没有拓展名,node将按照.js .node .json的顺序定位文件。
(3)、编译执行。
 
node中有两种模块:
(1)、核心模块(node自身提供)node进程启动时,会载入部分核心模块。 
(2)、文件模块(用户编写)。第一次编译执行文件模块后,node以文件路径作为索引,将该模块对象缓存在Module._cache对象上。
 
3、commonJS包规范
目录结构:
package.json 包描述文件
bin 二进制可执行文件
lib JS代码目录
doc 文档
test 测试用例
 
4、基于commonJS包规范node有了npm npm的常用命令:npm install express可安装express框架
 
5、由于前端受网络环境的限制commonJS规范并不适用于前端。于是有了AMD。实现了AMD规范的JS库:require.js,curl.js
 
require.js 核心代码:
(function () {
    require.load = function (context, moduleName, url) {
        var xhr = new XMLHttpRequest();
        xhr.open(‘GET‘, url, true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                eval(xhr.responseText);
                //Support anonymous modules.
                context.completeLoad(moduleName);
            }
        };
    };
}());
 
curl.js核心代码:
loadScript: function (def, success, failure) {
// script processing rules learned from RequireJS
// TODO: pass a validate function into loadScript to check if a success really is a success


// insert script
var el = doc.createElement(‘script‘);


// initial script processing
function process (ev) {
ev = ev || global.event;
// detect when it‘s done loading
// ev.type == ‘load‘ is for all browsers except IE6-9
// IE6-9 need to use onreadystatechange and look for
// el.readyState in {loaded, complete} (yes, we need both)
if (ev.type == ‘load‘ || readyStates[el.readyState]) {
delete activeScripts[def.id];
// release event listeners
el.onload = el.onreadystatechange = el.onerror = ‘‘; // ie cries if we use undefined
success();
}
}


function fail (e) {
// some browsers send an event, others send a string,
// but none of them send anything useful, so just say we failed:
failure(new Error(‘Syntax or http error: ‘ + def.url));
}


// set type first since setting other properties could
// prevent us from setting this later
// actually, we don‘t even need to set this at all
//el.type = ‘text/javascript‘;
// using dom0 event handlers instead of wordy w3c/ms
el.onload = el.onreadystatechange = process;
el.onerror = fail;
// js! plugin uses alternate mimetypes
el.type = def.mimetype || ‘text/javascript‘;
// TODO: support other charsets?
el.charset = ‘utf-8‘;
el.async = !def.order;
el.src = http://www.mamicode.com/def.url;


// loading will start when the script is inserted into the dom.
// IE will load the script sync if it‘s in the cache, so
// indicate the current resource definition if this happens.
activeScripts[def.id] = el;


head.insertBefore(el, insertBeforeEl);


// the js! plugin uses this
return el;
}
 
二、前端脚本按需加载方式:
1、创建XMLHttpRequest对象获取JS文件,用eval方法执行完毕后,执行回调。(require.js) 存在跨域问题。
2、动态创建<script>标签,同时绑定onload onreadystatechange方法执行回调。(curl.js)