玩儿玩儿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一般的面向对象的思想靠近,所以学习这个还是很重要的。

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180524G0C0YU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券