前端模块化-2、CommonJS

CommonJS的历史渊源： nodejs项目的诞生，将javascript语言用于服务器编程。由于服务器端开发十分复杂，需要与OS以及其他应用程序互动，模块化的理念对服务器端开发是必需的。而nodejs的模块系统，就是参照CommonJS规范实现的

@因此我理解CommonJS即为服务器端模块的规范。 CommonJS的规范： 根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。下面就是一个简单的模块文件a.js

//a.js 模块定义 
var name = 'Bryant';
var firstname = 'Kobe ';
function printName() {
    console.log(name);
}

function printFullName(){
    console.log(firstname + name);
}

###方法1：
//输出的内容用module.exports表示
module.exports = {
    printName: printName,
    printFullName: printFullName
}

###方法2：
//输出内容用exports.xxx表示。
exports.printFullName = printFullName;

//b.js 模板引用
###方法1：
var nameFunction= require('./a');
nameFunction.printFullName();

###方法2
var  nameFunction  = require('./a').printFullName;
nameFunction();

输出结果：

image.png

注意：b模板虽然定义了变量var firstname = 'Koby ';,但是由于各自命名的独立性，所以如果a.js没有firstname，那么执行nameFunction.printFullName()时，输出结果时会报错。

//定义模板a.js
var name = 'Bryant';
// var firstname = 'Kobe ';
function printName() {
   console.log(name);
}

function printFullName(){
   console.log(firstname + name);
}

module.exports = {
   printName: printName,
   printFullName: printFullName
}

//加载模板b.js
var nameFunction = require('./a');
var firstname = 'Koby ';
nameFunction.printFullName();

输出结果：

image.png

CommonJS的使用虽然简单方便，在服务器端进行同步加载也不是问题（直接从本地读取），但是在浏览器端，我们是否也有相同或者类似的工具呢?

to be continued...