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

node模块机制

2024-07-14 07:49:01   227人阅读

一、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）


 


联系
我们