javascript模块化编程02模块化编程规范之CommonJS

javascript模块化编程规范

CommonJS
AMD
CMD
ES6

CommonJs

规范

说明

1.自行百度查阅文字性描述，本文只精简介绍
2.每个文件都可当作一个模块
3.在服务器端：模块的加载和运行是同时加载的
4.在浏览器端：模块需要提前编译打包处理

基本语法

暴露模块

module.exports = value;原来就有值是一个空的对象
exports.xxx = value无限对export对象添加属性和方法
问题：暴露的模块到底是什么？暴露的模块可以是一个对象，也可以是一个函数

引入模块

requier(需要引入的模块)
自己的模块，通过路径找到
第三方模块，直接就是包名

require语言在浏览器端不支持，CommonJS规范的代码在浏览器端不能使用，必须通过browserify打包使用

CommonJS服务器端实现（NODE）

项目文件结构

.

CommonJS-node
|modules
|   |----module1.js
|   |----module2.js
|   |----module3.js
|app.js

执行命令行：
1.npm init 创建初始化package.json
2.npm install uniq –save //随便安装一个第三方的包，为了以后关于自己的包与第三方包测试使用

代码

app.js

//引入第三方库
let uniq = require('uniq');
//将其他的模块汇集到主模块
let module1 = require('./modules/module1');
let module2 = require('./modules/module2');
let module3 = require('./modules/module3');
module1.foo();
module2();
module3.foo();
module3.bar();
console.log(module3.arr);
let res = uniq(module3.arr);
console.log(res);

module1.js

module.exports = {
    msg: 'module1',
    foo(){
        console.log(this.msg);
    }
};

module2.js

//暴露一个函数
module.exports = function(){
    console.log("module2");
}

module3.js

exports.foo = function(){
    console.log("foo() module3");
};
exports.bar = function(){
    console.log("bar() module3");
}
exports.arr = [2,2,3,3,3,11,11,31,32,41];

执行命令行，进入该目录，使用node执行该JS查看结果

CommonJS-browserify（CommonJS规范浏览器端的实现）

需要注意的是CommonJS的require方法在浏览器端是不支持的所以，需要通过browserify打包实现

项目结构

CommonJS-browserify
|js
|   |----dist
|   |----src
|       |----module1.js
|       |----module2.js
|       |----module3.js
|       |----app.js
|index.html

执行命令行：
1.npm init 创建初始化package.json
2.npm install uniq –save //随便安装一个第三方的包，为了以后关于自己的包与第三方包测试使用
3.npm install browserify -g //全局安装browserify
4.npm install browserify –save-dev //将browserify安装到本地并保存为开发环境依赖

代码

app.js

//引入第三方库
let uniq = require('uniq');
//将其他的模块汇集到主模块
let module1 = require('./module1');
let module2 = require('./module2');
let module3 = require('./module3');
module1.foo();
module2();
module3.foo();
module3.bar();
console.log(module3.arr);
let res = uniq(module3.arr);
console.log(res);

module1.js

module.exports = {
    msg: 'module1',
    foo(){
        console.log(this.msg);
    }
};

module2.js

//暴露一个函数
module.exports = function(){
    console.log("module2");
}

module3.js

exports.foo = function(){
    console.log("foo() module3");
};
exports.bar = function(){
    console.log("bar() module3");
}
exports.arr = [2,2,3,3,3,11,11,31,32,41];

执行命令行：
browserify ./js/src/app.js -o ./js/dist/bundle.js
打开浏览器访问index.html，查看console