深入理解CommonJS!
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!的更多相关文章
- 理解CommonJS ,AMD ,CMD, 模块规范
参考 : https://blog.csdn.net/xcymorningsun/article/details/52709608 1.CommonJS 模块规范 (同步加载模块): var math ...
- 简要理解CommonJS规范
写在前面: 一个文件就是一个模块. 另外本文中的示例代码需要在node.js环境中方可正常运行,否则将出现错误.事实上ES6已经出现了模块规范,如果使用ES6的模块规范是无需node.js环境的.因此 ...
- bebugger调试理解commonJS原理
上面图片是bebugger一个导入的模块,使用vscode可以轻松的看到调用栈,通过断点调试进入断点 Mode函数的原型里面有一个require方法,函数里面有Module._load()加载模块,传 ...
- 前端面试总结 (转 0C°)
前端面试总结 1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势. 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的? 5.未来三到五 ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- 第四章-使用本机文件对话框和帮助进程间沟通 | Electron实战
本章主要内容: 使用Electron的dialog模块实现一个本机打开文件对话框 促进主进程和渲染器进程之间的通信 将功能从主进程暴露给渲染器进程 使用Electron的remote模块从主进程导入功 ...
- 三、$JavaScript(1)
1.闭包 闭包就是能够读取其他函数内部变量的函数 闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以 ...
- JavaScript(上)
说说你对作用域链的理解 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到 window 对象即被终止,作用域链向下访问变量是不被允许的. 简单的说,作 ...
- node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
随机推荐
- HDU1045(二分图经典建模)
Fire Net Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- 千万不要使用xfce和KDE版Manjaro Linux--之荒谬言论
Manjaro Linux 使用经验: ①千万不要使用xfce版,虽然性能上廉价,但是吃亏,调声音80%几率卡死调不了,托盘图标很容易不响应!关机的Beep声,分分钟吓死人!按照网上各种方法弄,下次开 ...
- Linux IO 同步/异步 阻塞/非阻塞
同步IO:导致请求进程阻塞,直到IO操作完成: 是内核通知我们何时进行启动IO操作,而实际的IO操作需要当前进程本身阻塞完成: 包括:阻塞式IO模型,非阻塞式IO模型,IO复用模型,信号驱动式IO模型 ...
- 连接Linux服务器:Win免费SSH客户端工具
连接Linux服务器:Win免费SSH客户端工具 http://blog.csdn.net/jiangdou88/article/details/51585555
- css3 不常用但重要的属性
IOS 2.-webkit-touch-callout (ios 2.0+) none:禁止弹出系统弹窗 default:默认 Android Common 1.-webkit-user-select ...
- vue+axios下载文件的实现
HTML代码: <el-button size="medium" @click="download">下载表格</el-button> ...
- jquery 操作dom效率测试------html和append插入文档
$(function () { var htmlResult = createHtmlContent(100); console.log(htmlResult) insertHtml.call($(& ...
- Delphi - 字符串 详解
来自:http://www.cnblogs.com/huangjacky/archive/2009/12/10/1620950.html ------------------------------- ...
- happens-before规则
happens-before原则: happens-before它是判断数据是否存在竞争.线程是否安全的主要依据.为了保证线程安全我们可以让2个操作具有happens-before关系.(JDK5 开 ...
- 《锋利的JQuery》读书要点笔记3——事件和动画
第四章 jQuery中的事件和动画 JS和HTML的交互是通过用户和浏览器操作页面时引发的事件来处理的,事件由浏览器自动生成. 4.1 jQuery中的事件 1. 加载DOM 这里主要是搞明白wind ...