Commonjs,AMD,CMD,es6模块 学习
js模块化
开始js是没有模块化的说法,js代码就一个一个重上到下执行
模块化的优点,方便开发维护,解耦,只需要依赖需要的模块,避免全局污染
Commonjs,AMD,CMD,es6 都是js模块化的规范,只不过es6 是js自己的规范。
Commonjs(服务器环境,不适应浏览器)
Commonjs 是应用于服务端的javaScript,一个js文件就是一个模块,模块中的变量不对外暴露,不支持异步。nodejs 遵循commonjs规范
基本用法
require 引用模块
exports 导出模块
module 模块标识
栗子
exports
common.js
const name = 'jsong';
const age = 1;
const sayHelloName = function() {
console.log(name);
};
module.exports = { name, age, sayHelloName };
// { name: 'jsong', age: 1, sayHelloName: [Function: sayHelloName] }
console.log(module.exports);
common2.js
exports.name = 'jsong';
exports.age = 11;
// {name:'jsong',age:11}
console.log(module.exports);
import
const commonjs = require('./common.js');
const commonjs2 = require('./common2.js');
// jsong
commonjs.sayHelloName();
// jsong
console.log(commonjs2.name);
AMD(Asynchronous Module Definition),异步模块定义(适用浏览器环境)
语法
require([module],callback)
第一个参数是要加载的模块数组,即使只加载一个模块,也要使用数组形式。第二个参数是加载成功之后的回调函数
requirejs遵循AMD规范
安装requirejs
npm install requirejs
上面的栗子用requirejs的写法
define(['moduel'], () => {
'use strict';
const name = 'jsong';
const sayHello = function() {
console.log(`hello ${name}`);
};
return { name, sayHello };
});
require(['module'], module => {
module.sayHello();
});
requirejs 的三个函数
define 定义模块
require 引用依赖模块
config 配置
// todo
requirejs使用与浏览器环境,之后需要详细学习总结requrejs的用法
CMD(Common Module Definition)(适用浏览器环境)
https://github.com/seajs/seajs/issues/242
a.js
define(function(require, exports, module) {
const name = 'jsong';
const age = 11;
const sayHello = () => {
console.log(`hello ${name}`);
};
module.exports = { name, sayHello };
console.log(module.exports);
});
define(function(require, exports, module) {
const m = require('./cmddefined');
m.sayHello();
});
es6
es6,全称ECMAScript6.0,是js的一个标准,es6中一个文件默认为一个模块,通过export向外暴露,import输入其他模块提供的功能
es6.js
导出变量
// 导出变量
export const name = 'jsong';
// 等价于
// const name = 'jsong';
// export { name };
export const sayHello = () => console.log(`hello ${name}`);
// 等价于
// const sayHello = () => console.log(`hello ${name}`);
// export { sayHello };
导出函数
// 导出函数
export function eat() {
console.log(`${name} eat`);
}
// 等价于
// function eat() {
// console.log(`${name} eat`);
// }
// export { eat };
导出对象
const age = 11;
// 导出对象
export const people = {
name,
age,
hello: () => console.log(`hello ${name}`)
};
// 等价于
// const people = {
// name,
// age,
// hello: () => console.log(`hello ${name}`)
// };
// export { people };
导出对象
// 导出类
export class jsong{
sayHello() {
console.log(`hello ${name}`);
}
}
// 等价于
// class jsong {
// sayHello() {
// console.log(`hello ${name}`);
// }
// }
// export { jsong };
import
es6-3.js
import * as people from './es6.js';
// jsong
console.log(people.name);
// hello jsong
people.sayHello();
// jsong eat
people.eat();
console.log(people.people);
// hello jsong
people.people.hello();
// hello jsong
new people.jsong().sayHello();
es6-2.js
import { name, sayHello } from './es6.js';
// jsong
console.log(name);
// hello jsong
sayHello();
export default 相当于默认导出一个东西, import的时候随便引入,随便起名
const age = 11;
export default age;
import的名字随便写,不用加括号{}
import s from './es6.js';
// 11
console.log(s);
html中执行es6模块
<script type="module" src="./es6.js"></script>
<script type="module" src="./es6-2.js"></script>
<script type="module" src="./es6-3.js"></script>
<script type="module" src="./es6-4.js"></script>