命名空间 commonJS AMD/CMD/UMD ES6 module
库名.类别名.方法名css
var NameSpace = {} NameSpace.type = NameSpace.type || {} NameSpace.type.method = function () { }
一个文件为一个模块,经过module.export暴露快接口,经过require引入模块,同步执行html
commonJS 文档jquery
示例:webpack
const Router = require('./router/route') export = module.exports = createApplication;
Async Module Definition 使用define定义模块 使用require加载模块 RequireJS 依赖前置,提早执行
AMD规范文档git
示例:github
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(); } } )
Common module definition 一个文件为一个模块 使用define来定义一个模块 使用require来加载一个模块 SeaJS 尽量懒加载
示例:web
// 全部模块都经过define定义 define(function (require, exports, module) { // 经过require引入模块 var $ = require('jquery'); var Spining = require('./spinning'); // 经过exports对外提供接口 exports.doSomething = // 或者经过module.exports 提供整个接口 module.exports = })
Universal Module definition 通用解决方法 三个步骤: 1.判断是否支持AMD 2.判断是否支持CommonJS 3.若是都没有,使用全局变量
示例:api
(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 {} }))
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'
AMD(require) ES Modules 推荐 CommonJS
OOCSS SMACSS Atomic CSS MCSS AMCSS BEM CSS modules
Atomic CSS 每一个类都是独立的ui
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>