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>