### 一、js模块化
```
命名空间
commonJS
AMD/CMD/UMD
ES6 module
```
### 二、命名空间
库名.类别名.方法名
```js
var NameSpace = {}
NameSpace.type = NameSpace.type || {}
NameSpace.type.method = function () {
}
```
### 三、commonJS规范
一个文件为一个模块，通过module.export暴露块接口，通过require引入模块，同步执行
[commonJS 文档](http://wiki.commonjs.org/wiki/Modules/1.1.1)
示例：
```js
const Router = require('./router/route')
export = module.exports = createApplication;
```
### 四、AMD规范
```js
Async Module Definition
使用define定义模块
使用require加载模块
RequireJS
依赖前置，提前执行
```
[AMD规范文档](https://github.com/amdjs/amdjs-api/wiki/AMD)
示例：
```js
define(
// 模块名字
"alpha",
// 模块输出
["require", "exports", "beta"],
// 模块输出
function (require, exports, beta) {
exports.verb = function () {
return beta.verb();
return require("beta").verb();
}
}
)
define(
["a", "b", "c"],
function (a, b, c) {
// 等于在最前面声明并初始化了要用到的模块
if (false) {
// 即使没用到模块b，但b还是提前执行了
b.foo();
}
}
)
```
### 五、CMD
```js
Common module definition
一个文件为一个模块
使用define来定义一个模块
使用require来加载一个模块
SeaJS
尽可能懒加载
```
示例：
```js
// 所有模块都通过define定义
define(function (require, exports, module) {
// 通过require引入模块
var $ = require('jquery');
var Spining = require('./spinning');
// 通过exports对外提供接口
exports.doSomething =
// 或者通过module.exports 提供整个接口
module.exports =
})
```
### 六、UMD
```
Universal Module definition
通用解决方法
三个步骤：
1.判断是否支持AMD
2.判断是否支持CommonJS
3.如果都没有，使用全局变量
```
示例：
```js
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof exports == 'object') {
module.exports = factory();
} else {
root.returnExports = factory()
}
}(this, function () {
return {}
}))
```
### 七、ESM
```js
esmascript module
一个文件一个模块
export / import
```
示例：
```js
// 加载模块的变量或方法
import theDefault, {named1, named2} from 'src/mylib'
import theDefault from 'src/mylib'
import {named1, named2} from 'src/mylib'
// 引入模块进来并且将named1命名为Named1
import {named1 as myNamed1} from 'src/mylib'
// 加载模块里全部的变量和方法
import * as mylib from 'src/mylib';
// 只加载，不做任何处理
import 'src/mylib'
// 定义一个模块，暴露的接口
export var name1 = "Bob";
export let name2 = "Bob";
export let NAME3 = "Bob";
export function myFunc() {}
export class MyClass {}
// 可以选择暴露
const USERNAME = "Bob";
function myFunc() {}
export {USERNAME, myFunc};
export {USERNAME as NAME, myFunc as Fn};
// 引入其他文件的变量或方法，再暴露出去
export * from "src/other_module";
export {foo, bar} from 'src/other_module';
export {foo as myFoo, bar} from 'src/other_module';
export {foo as myFoo, bar} from 'src/other_module'
```
### 八、webpack支持
```js
AMD(require)
ES Modules 推荐
CommonJS
```
### 九、CSS模块化
```
OOCSS
SMACSS
Atomic CSS
MCSS
AMCSS
BEM
CSS modules
```
Atomic CSS 每个类都是独立的
MCSS 多层级的css
AMCSS 针对属性来写css
BEM：Block，Element，Modifier
```html
<!-- BEM -->
<button class="button">
Default Button
</button>
<button class="button button--state-success">
Success Button
</button>
<button class="button button--state-danger">
Danger Button
</button>
```