为什么要学习前端模块化

因为前端模块化是学习VUE框架的基础，而笔者最近正在攻略VUE这座大山，所以了解前端模块化的知识必不可少。

走进前端模块化

是什么

首先要说明，前端模块化开发并不是一种编程技术，而是一种编程思想。通过将复杂代码划分为不同功能模块，对不同功能模块进行单独维护，来提升效率，降低成本。

为什么

学习前端模块化，我们需要了解

为什么会出现前端模块化这种思想
这种编程思想解决了前人编程的哪些痛点

我们才能更好的理解这种思想的先进和带来的方便。

1. 为什么会出现前端模块化这种思想
早期的前端页面都比较简单，就是使用java script进行表单交互，js的组织结构也比较凌乱。而且前后端代码也没有进行分离，前端代码经常和后端的操作搅在一起。因为这样凌乱的，难以维护的方式肯定不利于企业的维护，也不利于代码的复用。所以慢慢的出现了前后端分离和前端的模块化。

2. 前端模块化的优点

可维护
可复用
方便管理依赖关系（当不同模块/类之间的执行有顺序关系，通俗的说前一个的输出是后一个的输入时，我们需要确保模块/类按顺序执行）
分治思想（将一个N规模的问题分为n个a规模的问题）
减少全局变量污染（当声明了一个全局变量，当在其他文件中出现同名的变量时，会产生冲突）

怎么做

为了统一不同开发项目和开发者之间的编程习惯，推出了前端模块化规范。现在有四种模块化规范方案可供同学们选择。

commonJS模块化规范方案

在node.js（一个使JavaScript能够脱离浏览器运行的环境，采用了chrome v8 JavaScript引擎，支撑ES6标准）推出后，在最开始的一段时间内只支持commonJS模块化规范。（node.js是commonJS的实现，在commonJS规范的基础上增加了自己的一些新特性实现了自己的模块化系统。先有的commonJS，再有的node,js，node.js将commonJS发扬光大），AMD，CMD等方案都是基于commonJS的发展。commonJS是应用最广泛的模块化规范

AMD模块化规范方案

CMD模块化规范方案

UMD模块化规范方案

ESM模块化规范方案（重要）

ECMAScript 6(ES6)推出的模块化方案，是写在ECMA规范里面的，主要就学这个规范就好，是模块化的标准。

【VUE】前端模块化相关推荐

1.(vue)前端模块化 2.(node)后端模块化
在这里有两个知识点1.(vue)前端模块化 2.(node)后端模块化模块化: 所谓的模块化就是把某块功能的代码抽里成一个js文件用到的时候直接引入当做函数一样的调用这点我觉得有点像jav ...
2021 年 Angular vs. React vs. Vue 前端框架对比
2021 年 Angular vs. React vs. Vue 前端框架对比一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架 ...
❤️《Vue前端基础框架集合从入门到高级》（小白也可学，建议收藏）❤️
<Vue前端基础框架集合从入门到高级>,小白也可学文章目录 <Vue前端基础框架集合从入门到高级>,小白也可学 ❤️一.前端核心分析 ❤️1.1.概述 ❤️1.2.前端三要素 ...
2018年流行的vue前端UI框架
2018年九个很受欢迎的vue前端UI框架作者: 祈澈菇凉原文: https://blog.csdn.net/qq_36538012/article/details/82152052 最近在逛各大 ...
视频教程-新React+VUE前端教程入门到精通-Vue
新React+VUE前端教程入门到精通 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开发项目.百余客户, ...
前端模块化的前世今生
前端模块化是前端工程化所不可或缺的重要一环. 前言与十年之前只用jQuery就可以解决一切的情况完全不同的是,如今的前端生态可谓是遍地开花,百花齐放.各种框架层出不穷,像什么大名鼎鼎的Vue,R ...
vue前端UI框架整理
整理的vue前端UI框架. PC端: 1.Elementi:一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库. 2.iView:一套基于 Vue.js 的开源 UI 组件库,主 ...
浅析：前端模块化开发规范
浅析:前端模块化开发规范早期的模块化解决方案 NameSpace:命名空间模式匿名闭包:IIFE模式模块模式:IIFE+依赖传参 ES6之前的模块化解决方案 CommonJS模块化规范 AMD模 ...
前端模块化的十年征程
来源 | https://zhuanlan.zhihu.com/p/265632724 也许在谈论具体的内容之前,我们需要谈论一下关键词的定义.什么是"模块"?在不同的语境下模块有 ...

【VUE】前端模块化