浅谈前端架构的⼯程化、模块化、组件化、规范化
前⾔
⼀个项⽬组成分为 前端，服务端。传统的前端项⽬⽤三剑客 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.⾥⾯存
jquery是什么功能组件
放的是每个页⾯都会⽤到的⼀些共⽤资源。⽐如触屏端使⽤了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”即可。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。