我眼中的前端世界

接触而且正式入坑前端也有近两年了，谈谈我我的对于前端开发的一种理解吧，全为我的体验之谈。

偏向设计

所谓偏向设计，即是前端开发的最终目的即是将脑子里的 idea 或者设计师提供的设计稿赋予实践，具体开发中会精确到每一像素，还有文字的排版样式，以及一些动效等等，其最终成果是面向于普通大众的。

于后端的交流

前端开发只要不是单纯的静态展现页面，势必会涉及到数据的操做，而数据的具体处理过程是交由后台的同窗的来实现的（插一句，相对于前面提到的，我认为后端开发的最终成果是面向专业人士的，好比咱们前端的同窗），因此在先后端分离大行其道的今天，为了提升开发效率，先后端同窗就有必要事先约定数据的交换规则。包括数据的格式（通常 json 比较多还有 xml 之类的）；还有 HTTP 行为（GET、POST、PUT、DELETE ...）。

在约定完一些规则以后，为了缓解服务器的压力前端的同窗能够适当地将一些后端逻辑放到浏览器上来解决，表明成果就是 MVVM 了。

自身的开发架构

如今的前端开发其需求已不仅仅知足于 Web1.0 时代单纯的信息发布，上网随便打开一个页面里面充斥各类 css 样式表以及 javascript 脚本，而页面内容也是更为丰富，功能也更加齐全。不少更俨然就是个单页面应用（SPA）。

因此 Web1.0 时代的开发手段对于应用级别的开发已经是捉襟见肘，为了适应从 WebPage --> WebApp 的转化，随之而来的即是前端工程化。

前端工程化

首先很明显，前端工程化不是一种技术手段而是一种思惟方式，它所要解决的问题是：

• 如何提升开发效率也就是解放生产力了

• 如何提高代码的可维护性（包括代码规范、文档整理等等）

• 如何实现性能的优化

因而各类开发工具也就层出不穷，就拿我本人所接触过且用的比较频繁的来讲吧：

• git 版本控制，多人协做开发

• npm 强大的包管理，以及灵活的 npm scripts

• gulp 自动化构建工具

• webpack 出色的打包能力

• sass/scss 一种 css 预编译手段

• eslint JS 代码规范，入门

• postcss CSS 开发中的瑞士军刀

• ...

对于这些工具个人态度是看需求，本身用着方便便可（学习其实现原理另说，轮子之心不死啊?），毕竟咱们的目的是利用工具来简化流程方便开发管理。

而前端工程化具体到技术实现即是模块化开发和组件化开发。

模块化

组件化的核心思想就是：复用且分而治之。

对于 JS 而言，实现就多了：

• CommonJS 最为熟悉的应用便在是 NodeJS 中，不适用浏览器环境

• AMD (Asynchronous Module Definition) 弥补 CommonJS 在浏览器环境下的尴尬处境，推崇依赖前置，在定义模块的时候就要声明其依赖的模块

• CMD (Common Module Definition) 推崇就近依赖，只有在用到某个模块的时候再去 require

AMD 和 CMD 的区别有哪些？

CSS 中模块化的实践就是 sass、less、stylus（表示只用过 sass）就很少解释了。

组件化

那什么又是前端组件化呢？积木都玩过吧或者都据说过吧?，前端组件就相似于那一个个几何形状的椎啊柱啊，每个组件之间都是相互独立的个体，拥有一套完整的视觉效果和一些功能，具体到每一个组件它都就近维护这本身的一套资源。表明框架 Vue、React。

最后

第一次在社区发帖，对于个人理解有误或不足的地方欢迎补充拍砖 ?

原文连接：http://minds.hxtao.xyz/front-...