迷一样的前端字眼笔记

1.CommonJS模块化规范

核心思想：

通过require方法同步加载依赖的其他模块
通过module.exports导出需要暴露的接口

const moduleA = require(' ./moduleA');
module.exports = moduleA.someFunc;

缺点：无法在浏览器环境下直接运行，必须通过工具转换成辨准的ES5

2.AMD

与CommonJS 最大的不同在于，异步方式去加载依赖的模块
主要用于解决浏览器环境的模块化问题，可在不转码的情况下直接在浏览器运行

//定义一个模块
defind('module',['dep'],function(dep) {
  return exports;
})
//导入和使用
require(['module'],function(module) {

})

缺点：JavaScript 运行环境没有原生支持，需要先导入AMD库才能正常使用

3.ES6模块化

将逐渐取代CommonJS 和AMD规范

//导入
import {readFile} from 'fs';
import React from 'react';
//导出
export function hello() {};
export default {
  //..
}

4.样式文件中的模块化

例如SCEE

//util.scss文件
//定义样式片段
@mixin center{
  //水平竖直居中
  postion: absolute;
  left: 50%;
  right: 50%;
  transform: transform(-50%,-50%);
}

//main.scss文件
//导入和使用util.scss中定义的样式片段
@import "util";
#box{
  @include center;
}