Vue.js的模块化开发与ES6模块化

学习模块化开发的相关内容。

模块化开发

这其实是JavaScript发展成熟后生成的产物,模块化借鉴于后端的一些概念。JavaScript在早期使用时仅仅是用来制作一些简单动画或简单的表单验证,当时的代码量相对较少,直接将代码写在<script>标签里面即可。随着ajax异步请求的出现,慢慢地形成了前后端的分离。客户端需要完成的事情越来越多,代码量与日俱增。为了应对代码量的剧增,人们将JavaScript代码放在多个文件中进行维护,但仍然无法避免全局变量重名等各种麻烦的问题。即使变量名重复的问题可以通过闭包函数限制作用域解决,但这也降低了代码的复用性,会导致代码冗余。

(这样一想,大型项目使用原生JavaScript开发还是真的难顶)

原生的模块化也是通过各种语法模拟出来的,而且变量命名有很大的规矩限制,现在随着前端发展越来越完善,模块化开发也变得越来越流行,成熟度也越来越高。可以将需要暴露到外面的变量,使用一个模块作为出口。首先在匿名函数内部定义一个对象,给对象添加各种需要暴露在外面的属性和方法,不需要暴露的直接定义即可,最后将这个对象返回,并且在外面使用一个变量接收。在main.js当中只需要使用属于自己模块的属性和方法即可。这就是模块最基础的封装,事实上模块的封装还有很多高级操作。比较幸运的是,到目前为止,前端模块化已经有了很多既有的规范,以及对应的实现方案。常见的模块化规范有:CommonJS、AMD(和另一个AMD不一样hh、CMD,还有ES6的Modules。

模块化有两个核心,导出和导入。

ES6模块化的导入和导出

主要使用ES6中的两个核心关键字,一个叫导入export,一个叫导入import。

比如我想导出一些变量,可供他人使用,那么需要执行这两步。

首先需要在引入这个JavaScript的时候这样写:

1
<script src="路径" type="module"></script>

这样,引入的这个js文件就被当作一个模块,module类型为它添加了一个限定作用域,限定所有的变量都在本文件下的作用域。

然后我操作了一些变量,可以导出了,使用:

1
2
3
4
let name = "Shawn Zhou";
let age = 24;
let job = "student";
export {name, age, height}

如果有某个JavaScript文件想要引入我的这几个变量,首先需要在html文件中使用那个文件,和上面写法一样,也是加入module的type。然后在里面这样写:

1
import {name, age, job} from "./路径";

然后这些变量就可以正常使用了。

想要导出函数或者导出类,就在定义函数或定义类的时候前面加上export关键字就可以了。也可以先把函数或类定义好,然后再使用export导出。导入操作相同,然后就该咋用咋用。

某些情况下,一个模块中包含的某个功能,我们并不希望给这个功能命名,而是让导入者自己给它命名,这时候就可以使用export default。但是这种默认的定义只能存在一个。在导入的时候,把大括号去掉,里面写上自己想定义的名字,就可以了。

(所以怎么感觉还是不太方便

如果我们希望某个模块中所有的信息都导入,一个个导入显然有点麻烦,通过*可以导入模块中所有的export变量,但是通常情况下我们需要给*起一个别名,方便后续的使用。

1
import * as info from './info.js';

这样,info就变成了一个大对象,包含info.js里面的全部导出内容,然后使用成员访问运算符就可以访问到相应的成员变量或者成员函数。

今晚开始webpack

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信