前端的模块化发展

2018-10-08  本文已影响0人  bzwhlll

模块化与组件化的区别

  1. 模块化解耦复杂度,即将功能分成小块
  2. 组件化我理解为可复用的功能,比如写一个轮播组件,基于Vue框架的UI组件库中的一个组件
  3. 以下主要讨论模块化的历史

最初

在一个index.html里的script块里我们直接写很多js代码

随后

用引入一个js文件替代这种方式。在js文件里的代码不断增多时,可以把一个js中不同功能的部分抽离出来,写成多个js文件。

  1. MVC

一个js文件中的代码又可用MVC来设计,具有很好的可读性。

  1. 依赖顺序

<script src="a.js"></script>
<script src="b.js"></script>

这种方式下,依然需要用script方式引入多个js文件,严重依赖于引入顺序,若b模块依赖a模块,则顺序错误时便会出错。
import export的方式解决了这一问题,明确了每部分模块的依赖关系。

Node.js出世

适用于服务器端的规范——CommonJs

浏览器端的模块解决方案

  1. AMD(Asynchronous Module Definition)规范

  1. CMD(Common Module Definition)规范

  1. AMD和CMD差异

统一规范

CommnJs,RequireJs,SeaJs,众多规范看起来实在头疼,好在es6要解决模块问题了

  1. ES6Module

在之前众多非原生解决方案后,ES6提出module模块,以exportimport方式来解决依赖问题。
但是目前浏览器还未支持,因此不能直接运行。一般使用babel将其转为浏览器能运行的版本(向过去转换)

  1. 特性

Ref

上一篇 下一篇

猜你喜欢

热点阅读