模块化

一、概述

      ES6模块化思想：静态化，编译时就确定这些模块的依赖关系。以及输入输出的对象。ES6模块

      CommonJs（服务器）或者AMD（浏览器）模块化就是对象，在运行时确定模块的依赖关系。

二、exports命令

      定义：一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

      用途：

              -- 变量

var firstName = "Michael";
var lastName = "Jackson";
 
// 单个变量
export firstName; 
// 多个变量要用{}
export { firstName, lastName } 

          -- 函数

export function multiply(x, y) {
     return x * y;
};
 
// export输出的变量就是本来的名字，但是可以使用as关键字重命名。
function v1() { ... }
function v2() { ... }
export {
    v1 as streamV1,
    v2 as streamV2,
};

          -- 类

export class multiply  {
  
};

三、import命令

      定义：使用export命令定义了模块的对外接口，其他JS文件就可以通过import命令加载这个模块。import命令是编译阶段执行的，在代码运行之前

import {firstName, lastName} from './profile';
// 如果想为输入的变量重新取一个名字，import命令要用as关键字，将输入的变量重命名
import { lastname as surname} from './profile';

      模块整体加载：星号（*）指定一个对象，所有输出值都加载在这个对象上面。

import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

四、export default命令

      定义：为模块指定默认输出。一个模块只能有一个默认输出。所以，import命令后面才不用加大括号，因为只可能对应一个方法。

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

      一条import语句中，同时输入默认方法和其他接口

import _, { each, each as forEach } from 'lodash';

 

转载于:https://www.cnblogs.com/nankeyimeng/p/7246095.html