ES6 - 模块化 - 《🥇前端进阶目录》

CommonJS
ES6 Module
样式文件中的模块化

文章参考：https://juejin.im/post/5aaa37c8f265da23945f365c#heading-3

模块化的开发方式可以提高代码的复用率，方便进行代码的管理。
通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。
目前有 CommonJS AMD CMD 以及 ES6的模块系统。

CommonJS

主要体现在nodejs.他有四个重要的环境变量为模块化的实现提供支持， module exports require global

//导入 
const moduleA = require('./moduleA')
//导出
module.exports = moduleA.someFunc

优点：

代码可复用于Nodejs环境下并运行，例如做同构应用
通过NPM发布的很多第三方模块都采用了CommonJS规范

缺点：

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

示例：

math.js
// 定义模块math.js
var basicNum = 0
function add(a,b){
    return a+b
}
module.exports = { //在这里写上需要向外暴露的函数、变量
    add:add,
    basicNum:basicNum
}
index.js
// 引用自定义的模块时，参数包含路径，可省略.js
var math = require('./math')
console.log(math.add(2,5))
-----------------------------------------------------
// 引用核心模块时，不需要带路径
var http = require('http');
http.createService(...).listen(3000);

ES6 Module

文章链接

其模块功能主要由两个命令构成 export 和 import

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

export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };
/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

export default 为模块指定默认输出对应的 import 语句不需要使用大括号

/** export default **/
//定义输出
export default { basicNum, add };
//引入
import math from './math';
function test(ele) {
    ele.textContent = math.add(99 + math.basicNum);
}

export 命令

export 命令规定的是对外的接口，必须与模块内部的变量建议一一对应关系

输出变量

第一种

export var name = "chu"

第二种：优先考虑这种写法，因为可以很直观的看到输出了哪些变量

var name = "chu"
export {name}

输出函数或类

第一种：

export function multiply(x,y){
    return x * y
}

第二种

as 关键字是重命名了 函数v1 的对外接口
function v1(){}
export { v1 as streamV1 }  //这段是 将v1重新命名为streamV1 。导入的时候名称为streamV1

import 命令

语法规则

import ... from ...
1.from后面指定模块文件的位置，可以是相对路劲也可以是绝对路径
2. .js 后缀名可以省略

import 命令加载这个模块，需要注意大括号里面的变量名称，必须与被导入模块对外接口的名称相同

// main.js
import { firstName, lastName, year } from './profile.js';
function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

如果想为输入的变量重新取一个名字 import 命令需要使用 as 关键字。

import { lastName as surname } from './profile.js' //surname 为最终名称

建议：
import 命令输入的变量都是只读的，因为它的本质是输入接口。
（这样不好）当导入的是一个对象的时候，我们可以改写对象的属性。
推荐在 import 导入接口的时候不要去修改其值。

import命令具有提升效果，会提升到整个模块的头部，首先执行。

不会报错
foo();
import { foo } from 'my_module';

模块的整体加载

export function a(){
}
export function b(){
}
1.逐一加载的方法
import {a,b} from './test'
2.整体加载的方法
import * as test from './test'

备注：整体加载的方法，当文件不是默认导出方法的时候可用

//module1.js
export function foo(){
    console.log('foo')
}
export function bar(){
    console.log('bar')
}
//home.vue
import * as module1 from '@/utils/module1'
上面的方法也可以写
// module1.js
function a(){}
export { a }

export default 命令

export default 命令输出的是一个叫做 default 的变量，所以后面不可以跟变量声明的语句

基本使用
import 命令可以为该匿名函数指定任意名字

//导出一个对象
export default {
    name:"doraemon"
}
//导出函数
export default function(){
    console.log("default")
}
import a from './test'

比较

// 第一组
export default function crc32() { // 输出
  // ...
}
import crc32 from 'crc32'; // 输入
// 第二组
export function crc32() { // 输出
  // ...
};
import {crc32} from 'crc32'; // 输入

输出类

// MyClass.js
export default class { ... }
// main.js
import MyClass from 'MyClass';
let o = new MyClass();

样式文件中的模块化

// util.scss 文件
// 定义样式片段
@mixin center {
  // 水平竖直居中
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
// main.scss 文件
// 导入和使用 util.scss 中定义的样式片段
@import "util";
#box{
  @include center;
}