CommonJS

  一开始大家都认为JS是辣鸡,没什么用,官方定义的API只能构建基于浏览器的应用程序,CommonJS就按耐不住了,CommonJS API定义很多普通应用程序(主要指非浏览器的应用)使用的API,从而填补了这个空白。它的终极目标是提供一个类似Python,Ruby和Java标准库。这样的话,开发者可以使用CommonJS API编写应用程序,然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。

  在兼容CommonJS的系统中,你可以使用JavaScript开发以下程序:

(1)、服务器端JavaScript应用程序
(2)、命令行工具
(3)、图形界面应用程序
(4)、混合应用程序(如,Titanium或Adobe AIR)

  2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程。这标志"Javascript模块化编程"正式诞生。因为老实说,在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限;但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程。NodeJS是CommonJS规范的实现,webpack 也是以CommonJS的形式来书写。

  node.js的模块系统,就是参照CommonJS规范实现的。在CommonJS中,有一个全局性方法require(),用于加载模块。假定有一个数学模块math.js,就可以像下面这样加载。

var math = require('math');

  然后,就可以调用模块提供的方法:

var math = require('math');
math.add(,); //

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

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

  下面讲讲commonJS的原理以及简易实现:

1、原理

  浏览器不兼容CommonJS的根本原因,在于缺少四个Node.js环境的变量。

  • module
  • exports
  • require
  • global

  只要能够提供这四个变量,浏览器就能加载 CommonJS 模块。下面是一个简单的示例。

var module = {
exports: {}
}; (function(module, exports) {
exports.multiply = function (n) { return n * };
}(module, module.exports)) var f = module.exports.multiply;
f() // 5000

  上面代码向一个立即执行函数提供 module 和 exports 两个外部变量,模块就放在这个立即执行函数里面。模块的输出值放在 module.exports 之中,这样就实现了模块的加载。

2、Browserify 的实现

  知道了原理,就能做出工具了。Browserify 是目前最常用的 CommonJS 格式转换的工具。

  请看一个例子,main.js 模块加载 foo.js 模块。

// foo.js
module.exports = function(x) {
console.log(x);
}; // main.js
var foo = require("./foo");
foo("Hi");

  使用下面的命令,就能将main.js转为浏览器可用的格式。

$ browserify main.js > compiled.js

  Browserify到底做了什么?安装一下browser-unpack,就能看清楚了。

$ npm install browser-unpack -g

  然后,将前面生成的compile.js解包。

$ browser-unpack < compiled.js

[
{
"id":,
"source":"module.exports = function(x) {\n console.log(x);\n};",
"deps":{}
},
{
"id":,
"source":"var foo = require(\"./foo\");\nfoo(\"Hi\");",
"deps":{"./foo":},
"entry":true
}
]

  可以看到,browerify 将所有模块放入一个数组,id 属性是模块的编号,source 属性是模块的源码,deps 属性是模块的依赖。

  因为 main.js 里面加载了 foo.js,所以 deps 属性就指定 ./foo 对应1号模块。执行的时候,浏览器遇到 require('./foo') 语句,就自动执行1号模块的 source 属性,并将执行后的 module.exports 属性值输出。

3、Tiny Browser Require

  虽然 Browserify 很强大,但不能在浏览器里操作,有时就很不方便。

  根据 mocha 的内部实现,可以做一个纯浏览器的 CommonJS 模块加载器 tiny-browser-require 。完全不需要命令行,直接放进浏览器即可,所有代码只有30多行。它的逻辑非常简单,就是把模块读入数组,加载路径就是模块的id。

function require(p){
var path = require.resolve(p);
var mod = require.modules[path];
if (!mod) throw new Error('failed to require "' + p + '"');
if (!mod.exports) {
mod.exports = {};
mod.call(mod.exports, mod, mod.exports, require.relative(path));
}
return mod.exports;
} require.modules = {}; require.resolve = function (path){
var orig = path;
var reg = path + '.js';
var index = path + '/index.js';
return require.modules[reg] && reg
|| require.modules[index] && index
|| orig;
}; require.register = function (path, fn){
require.modules[path] = fn;
}; require.relative = function (parent) {
return function(p){
if ('.' != p.charAt()) return require(p);
var path = parent.split('/');
var segs = p.split('/');
path.pop(); for (var i = ; i < segs.length; i++) {
var seg = segs[i];
if ('..' == seg) path.pop();
else if ('.' != seg) path.push(seg);
} return require(path.join('/'));
};
};

  使用的时候,先将上面的代码放入页面。然后,将模块放在如下的立即执行函数里面,就可以调用了。

<script src="require.js" />
<script>
require.register("moduleId", function(module, exports, require){
// Module code goes here
});
var result = require("moduleId");
</script>

  还是以前面的 main.js 加载 foo.js 为例。

require.register("./foo.js", function(module, exports, require){
module.exports = function(x) {
console.log(x);
};
}); var foo = require("./foo.js");
foo("Hi");

  注意,这个库只模拟了 require 、module 、exports 三个变量,如果模块还用到了 global 或者其他 Node 专有变量(比如 process),就通过立即执行函数提供即可。

 

深入理解CommonJS!的更多相关文章

  1. 理解CommonJS ,AMD ,CMD, 模块规范

    参考 : https://blog.csdn.net/xcymorningsun/article/details/52709608 1.CommonJS 模块规范 (同步加载模块): var math ...

  2. 简要理解CommonJS规范

    写在前面: 一个文件就是一个模块. 另外本文中的示例代码需要在node.js环境中方可正常运行,否则将出现错误.事实上ES6已经出现了模块规范,如果使用ES6的模块规范是无需node.js环境的.因此 ...

  3. bebugger调试理解commonJS原理

    上面图片是bebugger一个导入的模块,使用vscode可以轻松的看到调用栈,通过断点调试进入断点 Mode函数的原型里面有一个require方法,函数里面有Module._load()加载模块,传 ...

  4. 前端面试总结 (转 0C°)

    前端面试总结 1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势. 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的? 5.未来三到五 ...

  5. 前端工程师面试问题归纳(一、问答类html/css/js基础)

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  6. 第四章-使用本机文件对话框和帮助进程间沟通 | Electron实战

    本章主要内容: 使用Electron的dialog模块实现一个本机打开文件对话框 促进主进程和渲染器进程之间的通信 将功能从主进程暴露给渲染器进程 使用Electron的remote模块从主进程导入功 ...

  7. 三、$JavaScript(1)

    1.闭包 闭包就是能够读取其他函数内部变量的函数 闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以 ...

  8. JavaScript(上)

    说说你对作用域链的理解 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到 window 对象即被终止,作用域链向下访问变量是不被允许的. 简单的说,作 ...

  9. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

随机推荐

  1. 利用opencv自带源码,调试摄像头做人脸检测

    本文为原创作品,转载请注明出处 欢迎关注我的博客:http://blog.csdn.net/hit2015spring 和 http://www.cnblogs.com/xujianqing/ 作者: ...

  2. 【转】针对Android上的ROP攻击剖析

    引言       ROP(Return-oriented programming),即“返回导向编程技术”.其核心思想是在整个进程空间内现存的函数中寻找适合指令片断(gadget),并通过精心设计返回 ...

  3. 教你从头到尾利用DQN自动玩flappy bird(全程命令提示,GPU+CPU版)【转】

    转自:http://blog.csdn.net/v_JULY_v/article/details/52810219?locationNum=3&fps=1 目录(?)[-] 教你从头到尾利用D ...

  4. 使用go写一个检测tcpudp状态的包

    使用go写一个检测tcpudp状态的包 http://www.2cto.com/os/201501/367596.html

  5. 【bzoj3227】红黑树

    神TM的红黑树,其实本质上应该还是一种树dp的问题…… 一开始想了一个比较裸的树dp,后来发现还有更强的做法. 每个前端黑节点是看作一个物品,然后这就是很典型的树形dp的问题. 不过可以这么考虑,考虑 ...

  6. SpringMVC - 个人对@ModelAttribute的见解 和 一些注入参数、返回数据的见解

    2016-8-23修正. 因为对modelattribute这个注解不了解,所以在网上搜寻一些答案,感觉还是似懂非懂的,所以便自己测试,同时还结合网上别人的答案:最后得出我自己的见解和结果,不知道正确 ...

  7. 配置WCF

    出处:http://blog.csdn.net/fangxing80/article/details/6106228 前面一篇文章<WCF 学习总结1 -- 简单实例>一股脑儿展示了几种W ...

  8. selenium 截图 添加时间戳

    在自动化程序中运行的代码报错信息或者是相关日志有可能并无法直观的判断出错信息.因此截图是避免不了的.为了避免因为重复运行或者是图片名称相同导致截图被覆盖. 建议在截图时使用时间戳,保证截图图片名称的唯 ...

  9. mysql之any,some all(zz)

    转载自:http://blog.csdn.net/netcy/article/details/8464503 ALL和ANY操作符的常见用法是结合一个相对比较操作符对一个数据列子查询的结果进行测试.它 ...

  10. Delphi Socket通信及多线程编程总结

    http://cxhblog.blog.sohu.com/41930676.html 一.Socket通信: Delphi在ScktComp单元中对WinSock进行了封装,该单元提供了TAbstra ...