一、js模块化
命名空间 commonJS AMD/CMD/UMD ES6 module
二、命名空间
库名.类别名.方法名
var NameSpace = {}
NameSpace.type = NameSpace.type || {}
NameSpace.type.method = function () {
}
三、commonJS规范
一个文件为一个模块，通过module.export暴露快接口，通过require引入模块，同步执行
示例：
const Router = require('./router/route')
export = module.exports = createApplication;
四、AMD规范
Async Module Definition 使用define定义模块 使用require加载模块 RequireJS 依赖前置，提前执行
示例：
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
Common module definition 一个文件为一个模块 使用define来定义一个模块 使用require来加载一个模块 SeaJS 尽可能懒加载
示例：
// 所有模块都通过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.如果都没有，使用全局变量
示例：
(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
esmascript module 一个文件一个模块 export / import
示例：
// 加载模块的变量或方法
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支持
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
<!-- 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>