拥抱新时代前端---对webpack和vue的通俗理解

好久没做前端了，对于一些概念和原理还有印象，这里做个通俗的解释~

一、JS模块化

1 模块化概念

类比于java的导包，按功能把JS开发的各个类、对象、字面量对象等组成一个模块，模块内部作为一个闭包，可能包含互相依赖的多种类和对象，但模块对外导出的是有限的对象，可能导出一个对象、一个类等

2 如何管理模块

JS执行引擎或者模块容器应该提供管理模块的方法，比如define用来定义模块、require、import用来调用模块，模块和模块间的依赖通过在新模块内import其他模块来实现

二、Webpack是干啥的

1 webpack是基于nodejs的前端JS模块打包编译构建工具，为什么要有模块打包？因为把模块分散在多个JS文件里的话，在html页面里面就需要引入非常多的script标签，浏览器会分多个请求去加载一批js文件，影响效率和用户体验，如果把所有的模块都打包成一个js文件，这个大js文件里包含了所有模块和他们之间互相依赖的模块，浏览器加载的时候只加载一个js就可以了，用户体验和效率都会很高

2 webpack帮我们实现模块化管理方法：由于原生浏览器还不能完全支持模块化管理方法（import），所以需要在js里自己实现一套模块化管理方法，webpack会在最终打包的模块里实现require等方法

3 webpack打出的包中是如何组织模块的？ 答案是生成一个数组来管理所有的打包进去的模块，每个模块都是数组中一个带编号的对象,模块调用require的时候，从数组中找到对应的模块来执行

4 webpack也支持运行时动态加载新的模块包，是如何实现的？答案是jsonp,webpack实现了一个回调函数,webpack把模块片段包编译出来的时候，会把动态加载的模块包数组作为那个回调函数的参数传递，当前端某一模块调用webpack的动态加载模块包函数的时候，会动态生成script标签来异步加载，当js加载完的时候自动会执行回调函数来把新模块包里面的模块添加到已有的模块包里面去，然后会回调一个用户准备好的promise,通知用户函数来require新的模块~

5 webpack可以打包的不止有js模块，还能打包css、甚至图片到模块里面去,背后的魔法其实是webpack把所有的资源都包装成了模块，比如css模块，调用require的时候自动释放到页面的style中去

6 webpack的编译打包过程是怎样？答案是给webpack的配置文件指定一个入口JS，webpack从入口js作为根,依次分析其中的require调用，取出require调用的函数参数，根据配置文件中配置的文件后缀名等信息，来调用不同的loader进行处理，比如.js .css .png分别调用不同的loader来把资源处理成模块、、这是一个递归的顺藤摸瓜的操作，直到最终生成了上面所说的打包后的大模块~

三、VUE的基本概念

将vue前先讲一讲web前端的发展和变迁历史，多年前最初的web前端js开发框架最常用的为jquery，最初的项目一般都是从0开始用jquery操作DOM完成页面的数据绑定和UI展示，随着前端UI的复杂化，出现了最初的前端面向对象的思想：Jquery插件!

jquery插件的原理是先用JS面向对象方式开发一个操作相关DOM的具体的插件类，然后给Jquery类的prototype（fn）上增加新的函数作为插件的入口，在构建Jquery对象实例的时候调用插件函数,如$("#xxxdom").testPlugin("callHello")，插件函数的实现一般是实例化上述具体插件类对象，绑定到$("#xxxdom")的data上,然后调用插件函数的参数指定的"callHello"方法。

jquey插件的产生使得高复用的一堆牛逼组件的产生：可ajax可编辑可排序的牛逼表格、下拉列表、屏风菜单等等、、大大繁荣了web前端的开发，继而导致了Bootstrap、miniui、easyui等外带css和一堆jquery插件的全家桶式的前端框架。。。

然而上面的框架还是不够完美，要么就是封装的太聚合，内部的实现不好改动，导致定制开发困难，所有实现千篇一律；要不就是封装的太开放，还是免不了大量的DOM操作和赋值操作，于是等了若干年，新一代的牛逼框架诞生了------vue、anglar、reactjs之类的数据绑定框架,这些框架的优点是什么呢，用过都知道、大大减少了dom操作，爽很很、、

开始正题：(先列提纲，有空完善)

1 数据绑定的概念（单向绑定、双向绑定）

2 组件化开发的思想

3 虚拟dom是怎么回事

4 前端路由是怎么回事

5 前端多组件共享的状态数据如何统一管理