浅谈前端项目发展的四个阶段——库/框架、构建优化、模块化开发、组件化开发和资源管理

前端项目发展的四个阶段：

1、库/框架

库：jQuery

框架：vue、React、Angularjs

 

2、构建优化

选择Gulp, Grunt, Webpack 等构建工具，对代码进行压缩、校验，再以页面为单位进行简单的资源合并。

 

3、JavaScript和CSS模块化开发

分而治之是软件工程中的重要思想，模块化是目前前端最流行的分治手段。模块化开发的最大价值不是复用，而应该是分治。

1) JavaScript模块化开发：

JavaScript模块化开发的方案有很多，包括：

①　AMD规范：用于客户端，RequireJS实现；

②　CommonJS规范：用于服务端，Browserify实现；

③　ES6 Module：export和import实现。

2) CSS模块化开发：

CSS模块化开发是在LESS、SASS、Stylus等预处理器的@import导入、@mixin混入特性支持下实现的。

注意：模块化中的模块一般指JavaScript模块。

4、组件化开发与资源管理

1) 组件化开发

组件化开发的最大价值在于复用。

①　页面上的每个独立的可视/可交互区域视为一个组件；

②　每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；

③　由于组件具有独立性，因此组件与组件之间可以自由组合；

④　页面只不过是组件的容器，负责组合组件形成功能完整的界面；

⑤　当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。

前端项目的几个开发概念：

概念	说明	实例
JS模块	独立的算法和数据单元	浏览器环境检测，网络请求Ajax，应用配置，DOM操作，工具函数及组件里的JS单元
CSS模块	独立的功能性样式单元	栅格系统，字体图标，动画样式及组件里的CSS单元
UI组件	独立的可视/可交互功能单元。一个组件一个目录，资源就近维护；组件可组合；组件的JS可依赖其他JS模块， 组件的CSS可依赖其他CSS单元	页头，页尾，导航栏，搜索框
页面	UI组件的容器，由UI组件组成	首页，列表页，用户管理
应用	整个项目或整个站点称为应用，由多个页面组成

前端项目的目录结构示例：

组件与模块的异同与联系：

①　相同点：

都是基于功能划分的单位。

②　不同点：

组件，偏向发行的概念，强调复用，作为可以被第三方客户使用的独立工具，组件一般都有独立的封装。

模块，偏向设计的概念，强调分治，一般指JavaScript模块，但也包括CSS模块等，用于在项目中划分相对独立的功能，封装时可以和其他模块混合，发行时可以多个模块合并后一起发行。

③　联系：

组件与模块没有上下级的包含关系，模块可以引用多个组件，组件也通常由多个模块实现。也就是说，将页面分成一个个组件，各组件互不干扰，分别开发，可随意组合，组件包括HTML(