浅谈前端架构的工程化、模块化、组件化、规范化

前言

一个项目组成分为 前端，服务端。传统的前端项目用三剑客 javascript html css 就传统的项目结构已经不能满足日益壮大的大型应用的需求了。现在前端的生态圈很繁荣，各种框架，组件的出现。让前端发展迅速，快速开发已经成为了前端的一个标准。如果你想构建一个易维护，代码简洁，性能优化程度高的项目就离不开前端的架构。这也就解疑了架构是不是必须的？

架构的目的是什么？答案是提升质量和效率。

工程化

工程化就像是百叶箱一样，减少人的操作，把工作所需要的工具做到的标准化，工作的流程做到的标准化。同时把很多重复的工作交给了代码来做，保证高质，标准统一。

先从工具入手，工程化包括哪些方面：

• 模块化与组件化: npm, es6,seajs, react/angularjs/Vue
• 代码版本管理: git
• 代码风格管理: jscs, editorconfig
• 代码编译: babel, less,sass,scss, imgmin, csssprit, inline-svg
• 代码质量管理 (QA): eslint, mocha
• 代码构建: webpack
• 项目脚手架: yeoman
• 持续集成/持续交付/持续部署: jenkins
• 本地化与国际化

执行工程化：

• 在配置初始项目文件结构和基本文件依靠命令行（工具）自动生成。
• 确定代码规范，缩进，换行，以及各种预编译工具less，coffee，保证输出代码的标准一致
• 对JS文件是否规范化，进行单元测试，不用手动复制到jshint上去检测，现在配置grunt监听文件变动自动检验显示检验结果还可以通过配置构建工具自动刷新浏览器实现文件实时变动监听。
• 以前压缩合并文件用手工复制到压缩工具然后复制到一个文件里面，现在配置一下 grunt，gulp可以做自动任务，实时编译，并且监测文件改变而做出响应。
• 以前发布到服务器上，要手动使用 FTP 软件上传，现在也可以用工具自动打包上传。

模块化

在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀

这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码
就

---

模块

既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念——package，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应的package即可

import java.util.ArrayList;

遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。

是"业务框架"或者“业务模块"，也可以理解为“框架”，意思是把功能进行划分，将同一类型的代码整合在一起，所以模块的功能相对复杂，但都同属于一个业务。

一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，各行其是就都乱套了

---

使用

按照项目功能需求划分成不同类型的业务框架（例如：注册、登录、外卖、直播…）

目的

隔离/封装 （高内聚）。

依赖

模块之间有依赖的关系，可通过路由器进行模块之间的耦合问题。

架构定位

横向分块（位于架构业务框架层）。

---

组件化

就是"基础库"或者“基础组件"，意思是把代码重复的部分提炼出一个个组件供给功能使用。

使用：

Dialog，各种自定义的UI控件、能在项目或者不同项目重复应用的代码等等。

目的

复用，解耦。

依赖

组件之间低依赖，比较独立。

架构定位

纵向分层（位于架构底层，被其他层所依赖）。

---

规范化

作用

使项目目录结构非常清晰。当进行开发的时候，哪些代码应该放到哪里都进行了明确的规定，并且每个文件的功能都尽量清晰并且单一。

顶层目录结构如下图：

1. src文件夹存放的是所有的的源代码和其他静态资源（比如图片，iconfont)。
2. dist文件夹存放的是所有编译后的代码。
3. build文件夹存放的是所有工程化所需要的代码。
4. document文件夹当然存放的文档。

下面重点看下src目录结构，如下图：

1. app文件夹里的每一个子文件夹代表了一个页面，每个页面所用到的所有静态资源都存放在这个子文件下面（除了引用的公共资源以外），构建的时候，每个子文件夹会生成自己的静态资源供页面引用。

2. common文件夹里面的所有代码在构建的时候会单独生成js文件和css文件供页面引用。所以一个页面会引用两个js和两个css.里面存放的是每个页面都会用到的一些共用资源。比如触屏端使用了react,那么跟react相关的那些包就会放在common里面。

3. components文件夹里面存放的是共用组件，每一个子文件夹代表了一个组件。有可能是通用的功能组件，比如分页组件，Loading组件，ModalDialog组件。也有可能是一个通用的业务组件，比如站点通用头部，通用footer，通用分享组件。注意，在其他地方引用这些组件时，是不需要写相对路径的，直接写组件名字就可以了，比如import pager from ‘pager’。这样对使用者更方便。

4. lib文件夹存放的是通用的js类库。比如检测浏览器用的browserDetect.js,处理日期用的dateUtil.js。同样的，在其他地方需要引入这些JS时，也不需要写相对路径，直接写JS的名字就可以了。比如import{isIE} from ‘browserDetect’。

5、style文件夹里面存放的一些公用的sass资源。比如function,mixing, variable。其他的sass文件需要引入这些资源的时候，使用方式跟使用通用js一样，直接@import “base.scss”即可。