前端成长必经之路：项目设计之美

有没有听后端说前端太水？我曾经就被人家说前端太简单了，我也会。我的反应就是：你行你来，但是你写完请自己维护。

“怼回去”才能让我们出气，可是尊严必须自己挣回来。这个小故事绝非杜撰，很多号称技术开发不把前端放在眼里，“切图仔”、“攒页面”就是前端工程师的绰号。我们该怎么做，才能让那些自以为是的人把嘴闭上，还能对我们竖起大拇指，值得我们每个人反思。

没错，成长并不断的让自己变得强大，我们才能赢得更多认可获得更多尊重。今天就聊聊前端工程师该如何成长的话题之项目设计。

听很多同学说自己做的项目比较简单，维护官网、电商项目复杂度不高、专题活动太简单等等，更有甚者觉得麻木了，出去面试也会自卑，因为项目完全没有亮点，体现不出自己的优势。

上述情况可能已经发生在很多同学身上，这个也非常自然，成长的每个阶段都有对应的瓶颈期，从未知到入门、从入门到进阶、从进阶到钻研，每个阶段成熟之后就会迷茫、纠结不知道下一个方向是什么？如果你有同感请继续阅读。

在这我想问大家一个问题：平时都是怎么做项目的？

• a、历史项目，在上面添砖加瓦
• b、养家糊口，完成任务万事大吉
• c、爱折腾，不断挑战新高度

选择a的同学应该占大多数，职场新人或者缺乏独立开发机会的同学都处于这个阶段。

选择b的同学应该也有一定比例，不折腾不犯错按月领到薪水保平安。这个阶段也属于职称新人或者工作已久的中庸之人。

选择c的同学应该不多，一是公司的限制、一是有激情的工程师已不多见了。

然而，我要重点说的就是想要成长，想要赢得认可就要努力做c选项中的人。说个通俗易懂的例子：现在框架满天飞，用框架实现个业务功能就能被尊重了吗？估计我们都没法说服自己是能力较强的技术人。

第一、自14年以来MVVM框架开始流行，可是仍然很多同学再使用jquery做开发，对组件化技术不熟悉；

第二、很多使用MVVM框架的同学，也停留在“会用”的地步，对项目设计比较随意甚至是想到哪写到哪，功能实现就打住了。

那我们这个时代前端工程师该如何做项目呢，我比较主张以下几个做法：

1、学会独立思考

首先拿到项目，要和产品经理确定好目标，作为工程师要有产品意识，从用户的角度去思考什么样的交互才是需要的才是被期待的。其次，在明确产品需求明确、目标明晰之后要独立思考项目该如何设计，目录结构、模块化设计、前后端分离、性能优化、后期拓展等等。类似于写作文之前要构思，写项目也要思考很多问题。

2、学会工程化

前端为什么会被鄙视？不懂算法？不懂程序设计？对，这是所谓“后端”自以为是的卖点。要知道，前端从业人员本科以上学历的人比比皆是。程序设计可是工科生的必修课，难道前端项目无用武之地吗？必然不是。前端项目包括css、js、html三种语言，css还包括sass、less等预编译语言，js还有es6的高级语法，各种类库层出不穷，html看似简单但真的用的很好吗？恕我举例说明：

• a、css为什么会有预编译语言，主要解决什么问题？
• b、es6很强大，该如何发挥它的实力？
• c、MVVM框架（vue\react\angular）实现了组件化，怎么能更好的抽象设计？
• d、各种构建工具能否信手拈来？

没错，css预编译语言就是用来处理模块化解决复用性的设计问题，es6集成了很多之前需要hack的代码，让开发更简单，同时模块化也得到支持，我们都知道MVVM框架实现了组件化，可是真的不需要自己的代码设计吗，需求和功能该如何拆分，组件应该如何定义，组件之间的关系如何管理？webpack、gulp等各种构建工具能否变成你手中的利器解决各种工程问题，开发效率提升，上线、自动化测试等等。

前端项目是个复杂的工程，学会用工程化的思维去设计，代码和产品质量才能得到保证，自己的技术水平才能登上一个新的台阶。

3、学会自动化

很多同学说自动化离我们很远，其实就在我们身边。大家不要只关心自己的业务实现，很多新的技术改革在发生，能不用人工的方式处理问题就要尽量的回避，同时也要关心一切自动化背后的原理，不要与时代脱节。我们先说最近的：自动化构建和自动化测试，很多人都觉得很多第三方的脚手架已经满足了，不关心背后的原理也不自己动手去实现以下，等发现第三方不满足的时候就比较被动。我们再说下相对比较远的，用深度学习自动生成HTML代码。大家要及时充电，防止技术革命对自己的冲击。

4、学会合作

团队合作很重要，如何在项目开发上完成团队合作，就要看项目设计的是否合理了，合理的项目大家可以分工协作，彼此同时开发，再结合代码版本管理工具可以大大提升团队协作的能力。让生产力更上一层楼。设计有缺陷的项目往往环环相扣，彼此之间依赖性较强，拖慢开发进度。

5、学会复盘

所谓复盘就是项目设计完成之后要去思考设计是否合理，或者说过一阶段要适时调整项目设计。没有绝对完美的思维，没有一步到位的设计，做项目要不断提高就得不断沉淀经验，反复思考是否有更好的方法，多去参考“大牛”的项目代码，多维度去比较，总结自己的长处也要看到他人的优点。

光说不练假把式，大家可以把自己的代码亮出来和大家进行深入的讨论，欢迎大家拍砖。

====================2018.1.27 更新===========================

有同学说上面都是思想和理论，我们具体要怎么做呢？今天我们就聊点干货，不过要想学到更多具体的细节，不是我在文章里举几个例子就能讲明白的，还是要看实战，只有通过一个完整的项目从需求分析、数学建模、技术方案选型、技术方案设计、设计背后的原理再到一步一步的实施才能更好的吸收里面的精华。我们捡干货来聊：组件化的思维与技巧。

我们看下京东金融这个项目，选择了首页、理财、白条几个页面，原型图如下：

                            -- 首页分割线 -- 

---

                           -- 理财分割线 --

---

                        -- 白条分割线 --

---

从几个页面大家独立思考下以下几个问题：

1. 使用了Vue.js、React.js、Angular.js框架，如何定义组件呢？
2. 如何将组件的复用性做到最佳
3. CSS该如何组织才能保证开发简单并达到后期维护省事的目标
4. 如果让一套代码完成各个设备的自适应

看上去不是特别难的问题我们一个一个来剖析：

第一、使用了Vue.js、React.js、Angular.js框架，如何定义组件呢？
大部分同学都是一个文件一个组件，一个看似可以复用的小模块就声明为一个组件，有的组件甚至嵌套了好几个层级，到后来发现组件之间的数据传递、状态管理相当复杂，这个时候想起了vuex，然后再然后发现代码不忍直视。

这种情况下大家追求大而全，号称自己的项目使用了Vue三件套瞬间觉得天下无敌，不可一世。倘若我遇到了这样的候选人，我只能用“差评”来总结他的“不求甚解”。

框架让组件定义变的容易，但也让组件管理变的“复杂”。之所以这样说框架赋予大家的灵活导致更多同学的懒惰，对项目毫无设计而言。组件要区分功能组件和业务组件，按照软件工程“高内聚低耦合”的原则：功能组件和业务组件。对于功能组件只实现“架子”，让组件具备一定的“功能”但是不实现具体的业务逻辑，它具备一切共有属性和方法但是可以通过继承被修改。而业务组件是对功能组件的具体实现，涉及更复杂的业务逻辑，是开发修改最频繁的组件。

关于到底用不用Vuex去管理组件呢？我的建议是根据自己的项目认真去评估。评估的方法参考如下：

（1）vuex的目的是去管理非亲子组件之间的共享状态，如果是父子组件可以使用props、slot插槽等设计来实现，对于非父子组件也可以使用事件总线的方式来实现。

（2）禁止vuex用来存储数据，有的同学图省事竟然用vuex来存储组件的数据，这是要禁止的，组件的data才是用来存储数据的方法，不要用vuex来做这样的事情，只会让问题变的更加复杂。

第二、如何将组件的复用性做到最佳

对于组件复用性，按照我们第一步的做法将功能组件和业务组件划分开，然后在功能组件上也要继续设计，基本方法就是不断抽象然后再去实现，比如我们上面的几个页面原型图，都要先抽象再具体的方式去设计，如图：

通过这种方式功能组件可以得到最大化的复用，而且无论随着业务如何变化，功能组件的稳定性都不会遭到破坏。

第三、CSS该如何组织才能保证开发简单并达到后期维护省事的目标

关于CSS是经常被大家所忽略的，很多同学都熟悉sass或者less等预编译语言，但有没有想过让css也具备较强的模块化。之前大家的做法类似命名空间，让更多的样式可以被复用，但是这种做法还远远不够。预编译语言让模块化做的更强，比如颜色的定义、模块的定义、样式的继承等等，都有很强的复用性设计空间，大家多去挖据。

第四、如果让一套代码完成各个设备的自适应

关于自适应大家能想到的就是media+rem的方式了，但是要知道media是有优先级的，而且要根据不同的手机设备来书写，类似于switch..case的方式，试问那么多的手机设备怎么能做到，一般的公司也就几台测试手机，甚至有的还么有测试机，这种人肉的方式并不是最理想的方案。如果我们知道不同手机显示差异的原因，知道css的各种单位，再结合现在强大的构建工具让css中按固定的设计稿写固定的尺寸(px)其余的自动编译就好，是不是大快人心。

今天我就更新到这吧，做项目有很多好玩的方案，只要认真思考一定非常有心得，也会让自己在技术的道路上愈加成熟，欢迎大家积极讨论。