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

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

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(<template>)、CSS(<style>)、JS代码(<script>)，而它的script可以由多个模块组成，JS模块利用命名空间、闭包等方式将想要暴露的属性暴露出来，或使用AMD、CMD、ES6
Module等方式，而CSS模块利用LESS、SASS、Stylus等预处理器的@import导入、@mixin混入特性实现。

说到这里，似乎联想到了架构、框架、模式、模块、组件、插件、控件、中间件等相关概念，它们的含义与区别请见：

2) 静态资源管理

①　资源加载策略

无论访问哪个页面都能按需加载页面所需资源，没访问过的无需加载，访问过的可以缓存复用。

②　增量加载（增量更新）

在需要更新资源的时候，不需要重新加载所有资源，只需要加载变化的资源（新增的资源），然后合并到当前资源上。

③　前端优化

l 加载相关的策略：按需加载、延迟加载、预加载、请求合并；

l 缓存相关的方案：缓存利用，缓存更新、缓存共享、非覆盖式发布。

前端高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送。

④　静态资源管理系统 = 一个通用的资源表生成工具 + 基于表的资源加载框架

l 资源表：一份数据文件，如JSON，是项目中所有静态资源（主要是JS和CSS）的构建信息记录，通过构建工具扫描项目源码生成，是一种key-value结构的数据，以每个资源的id为key。

l 资源加载框架：提供一些资源引用的API，让开发者根据id来引用资源，替代静态的script/link标签来收集、去重、按需加载资源。调用这些接口时，框架通过查表来查找资源的各项信息，并递归查找其依赖的资源信息，可以在此过程中实现各种性能优化算法来智能地加载资源。