玩儿玩儿ES6—第三期

一、背景

前两期文章讲了ES6中变量的定义及箭头函数的知识。接下来我准备跟大家分享一下关于JS模块化的一些知识。

关于模块化，我之所以谈到它肯定不是空穴来风。包括之前使用的变量定义与箭头函数，都是在项目中会很常见的见到。

而模块化的重要作用是在js文件中引入js。听起来比较拗口，其实很简单。一般地，我们在项目开发中通常是引用别人写好的js库，将其引入到页面文件中使用。但是后来我在写项目中发现，很多时候我们是需要包装我们自己的js库的。那么这就是一个js模块化的问题了。

二、核心内容

3 模块化

关于模块化，我也就不分ES5与ES6的区别了。直接看例子吧：

① 首先在项目中引入crypto-js.js(关于这个文件的下载地址为：https://github.com/shen8332402/publicResource/tree/master/AES_JAVA_JS)

② 编写我们加密工具类(js_util.js)

import CryptoJS from 'crypto-js';

const mode = CryptoJS.mode.CBC;

const padding = CryptoJS.pad.ZeroPadding;

var encryptData= function (data){

//加密

let encrypted = CryptoJS.AES.encrypt(

data,

key,

{

iv: iv, mode: mode, padding: padding

});

console.log('encrypted: ' + encrypted);

return encrypted;

}

var decryptData = function (data){

//解密

let decrypted = CryptoJS.AES.decrypt(data, key, { iv: iv, padding: padding });

//console.log('decrypted: ' + decrypted.toString(CryptoJS.enc.Utf8));

return decrypted;

}

module.exports = {

decryptData: decryptData,

encryptData: encryptData

}

③ 编写应用程序js(index.js)

const js_crypt = require('../../utils/js_util.js');

import CryptoJS from '../../utils/crypto-js';

console.log('111');

letjiami = js_crypt.encryptData('zxcxzvdsv');

console.log(jiami);

console.log(js_crypt.decryptData(jiami).toString(CryptoJS.enc.Utf8));

解释：

关于上面三段程序，看过我之前文章的朋友应该能看出来。不错就是AES对称加密的前端实现。这里我再细细说一下。

1.在以上②加密工具类中使用import CryptoJS from 'crypto-js';命令将AES的js库导入该文件，并将其命名为CryptoJS.关键就在import上，通过这个关键字将库文件引入我们的js中。然后在加密工具js(js_util.js)中定义一些常量(const)并编写加密与解密的方法。

2.在以上②中后面几行：

module.exports = {

decryptData: decryptData,

encryptData: encryptData

}

中用到了module.exports这个方法，那么它是什么意思呢？它的作用就是将该js中的两个function暴露出去。同时我们可以看到它的格式为的样子。也就是说可以对工具类的方法进行重命名。

3.再看应用程序的js—index.js

在这个程序中我们看到这样两行

const js_crypt = require('../../utils/js_util.js');

import CryptoJS from '../../utils/crypto-js';

import这个关键字我们刚才已经说了，它的作用就是将js引入当前文件。重点是关于require关键字。require关键字是配合上面module.exports它使用的。require可以将引入的js中暴露的方法，加载到当前文件。

那么就产生了一个很重要的问题：关于import和require。他们两个有什么区别呢？

其实说实话我也是没搞懂。但是有个大概得概念就是require引入的只能是js中暴露出来的方法或者变量，常量等。而import引入的应该是js全部。之所以我在引入js库时使用了import。我觉得是因为库是用es5及之前的语法写的。库中并没有暴露任何方法。所以require会失效。关于这两个的区别，希望大家一起学习吧，后续我们继续讨论。

那么现在到底是用import呢还是用require呢？我个人觉得还是require好。通过联合module.exports，我们可以完全控制js中要暴露的方法与要引入的方法，更贴合java面向对象的概念。实际上也是require更好（如果import更好用的话，为啥还要开发require呢？）

上述程序目录结构如下：

上述程序运行结果如下：

小彩蛋：也许有朋友会觉得这个运行截图很奇怪，不错这个程序是在开发小程序的时候用到的，所以用的是微信开发工具这款IDE。关于小程序的一些问题，希望也可以与大家一起讨论啦，赶紧关注我吧！！！

三、总结

本节跟大家闲扯了点关于js模块化的问题。随着js的不断更新，它也是在慢慢向java一般的面向对象的思想靠近，所以学习这个还是很重要的。

今天就跟大家分享到这里啦。赶紧关注我，每天学习一点点，一起进步吧。