前端基础之《ECMAScript 6（12）—模块化》

一、模块化

1、什么是模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来，实现我们的功能。

二、模块化的好处

1、模块化的优势有以下几点

（1）防止命名冲突
（2）代码复用
（3）高维护性

三、模块化规范产品

1、ES6之前模块化规范有（规范对应的模块加载框架）

（1）CommonJS  =>  NodeJS、Browserify
（2）AMD  =>  requireJS
（3）CMD  =>  seaJS

四、ES6模块化引入

1、模块化功能主要由两个命令构成：export和import

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

2、在变量和函数前加export，暴露数据
模块化-m1.js

export let school = 'xxx三中';

export function teach(){
    console.log("我们可以教课");
}

	//引入 模块化-m1.js
    //通用方式
    import * as m1 from "./模块化-m1.js";
    console.log(m1);

引入“模块化-m1.js”的内容，都保存在m1变量中。

五、ES6模块暴露语法的其他使用情况

1、分别暴露

就是在变量和函数前分别加上export。

2、统一暴露

语法：export{...}
模块化-m2.js

let school = 'xxx二中';

function findJob(){
    console.log("我们可以找工作");
}

//统一暴露
export{school, findJob}

    //引入 模块化-m2.js
    import * as m2 from "./模块化-m2.js";
    console.log(m2);

3、默认暴露

语法：export default {...}
数据以对象的形式定义。
模块化-m3.js

export default {
    school: 'xxx一中',
    change: function(){
        console.log("我们可以改变");
    }
}

    //引入 模块化-m3.js
    import * as m3 from "./模块化-m3.js";
    console.log(m3);
    //调用方法
    m3.default.change();

六、ES6模块引入语法的其他使用情况

1、通用的导入方式

引入一个模块：import * as 别名 from "模块.js";

2、解构赋值形式

    //解构赋值形式
    import {school, teach} from "./模块化-m1.js";
    //直接使用school和teach这两个变量
    console.log(school);
    console.log(teach);

3、使用别名

两个js里都有school，使用别名避免冲突。

    import {school, teach} from "./模块化-m1.js";
    import {school, findJob} from "./模块化-m2.js";

报错：Uncaught SyntaxError: Identifier 'school' has already been declared

添加别名：

    //使用别名
    import {school, teach} from "./模块化-m1.js";
    import {school as erzhong, findJob} from "./模块化-m2.js";

4、默认暴露的引入

引入default对象：import {default as 别名} from "模块.js";

    import {default as m3} from "./模块化-m3.js";
    console.log(m3);

5、简便形式，只能用于默认暴露

引入对象：import 别名 form "模块.js";
用别名代替了default。

    import m3 from "./模块化-m3.js";
    console.log(m3);

七、浏览器使用ES6模块的方式二

1、以前都是在script语句块中写

2、建立入口文件“模块化-main.js”

//入口文件

//模块引入
import * as m1 from "./模块化-m1.js";
import * as m2 from "./模块化-m2.js";
import * as m3 from "./模块化-m3.js";

console.log(m1);
console.log(m2);
console.log(m3);

3、引入入口文件

<script src="./模块化-main.js" type="module"></script>

八、ES6模块化在项目中的使用

1、babel对ES6模块化代码转换

babel是一个JavaScript编译器。

2、安装工具

安装：babel-cli、babel-preset-env、browserify（暂时不用webpack）

npm init
npm install babel-cli babel-preset-env browserify

转换文件

npx babel ./模块化*.js -d dist/js --presets=babel-preset-env

转换后的文件
模块化-m1.js

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.teach = teach;
var school = exports.school = 'xxx三中';

function teach() {
    console.log("我们可以教课");
}

模块化-m2.js

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
var school = 'xxx二中';

function findJob() {
    console.log("我们可以找工作");
}

//统一暴露
exports.school = school;
exports.findJob = findJob;

模块化-m3.js

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = {
    school: 'xxx一中',
    change: function change() {
        console.log("我们可以改变");
    }
};

模块化-main.js

"use strict";

var _m = require("./\u6A21\u5757\u5316-m1.js");

var m1 = _interopRequireWildcard(_m);

var _m2 = require("./\u6A21\u5757\u5316-m2.js");

var m2 = _interopRequireWildcard(_m2);

var _m3 = require("./\u6A21\u5757\u5316-m3.js");

var m3 = _interopRequireWildcard(_m3);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

console.log(m1); //入口文件

//模块引入

console.log(m2);
console.log(m3);

3、打包

npx browserify dist/js/模块化-main.js -o dist/bundle.js

4、引入bundle.js

<script src="dist/bundle.js"></script>

九、ES6模块化引入NPM包

1、安装jquery包

npm install jquery

2、ES6引入npm包
建立background.js

//修改背景颜色为粉色
import $ from 'jquery'; //等于const $ = require("jquery");
$('body').css('background','pink');

3、编译并打包

npx babel ./background.js -d dist/js --presets=babel-preset-env
npx browserify dist/js/background.js -o dist/bundle.js