我是如何对待写静态页这项工做的

欢迎一块儿交流

欢迎关注个人我的公众号，不按期更新本身的工做心得。

什么是静态页

传送门

文章原由

最近负责公司商家后台项目的前端业务，惋惜只是写静态页，不用写任何JS代码，做为一名新时代的FE，一开始我是拒绝的，我怎么能作这么low的事呢？前端必需要高大上啊！什么Angular、React搞起来啊！毕竟咱们招聘JD上面也有相应的技能树要求的嘛。

不就是让你切个图嘛~说了这么多，到底能不能作？

因此有了这篇文章。

磨刀不误砍柴工

开工以前先了解一下需求

有人会问了，写静态页还要了解需求？

若是我告诉你，我是照着产品经理的Axure切呢？

了解以后才发现，全部后台都有计划重作。。。。。

开工，我是如何定义现代切图的

UI Framework

既然全部后台都有计划重作，那么统一风格那就是必须的了。既然须要统一风格，那么一套UI Framework就是必不可少的了。这里选择Bootstrap为基础，经过less进行深度定制，造成公司统一风格UI库。看到这里也许你会说，不就是引用Bootstrap吗，若是你这么想，那你真的只能是切图了，换作我，我会这么作。

基于Bootstrap使用less进行UI定制。好比基本色调，好比圆角，好比字体大小，好比间距，好比组件样式。经过这些工做你能够深刻了解less这么CSS预处理语言，传送门

自动化构建

What the fuck！不就是写静态页吗？这和自动化构建有什么关系？你丫也太能折腾了。

固然，传统使用DW画页面确实是不须要的。不过若是你是对工做效率有一点点追求的工程师，那么，你必定会采用自动化构建，让咱们来看看，自动化以后有什么好处。

1. 去除重复工做。经过自动化，你能够将重复的工做都交给构建工具来完成，好比通用头部、尾部、banner等等能够抽象成独立模板引入。

2. 经过构建能够进行less代码编译、压缩、合并等，这一切都在你按下command+s的瞬间完成

3. 避免出现低级错误。若是你常常切图的话必定出现过，拷贝一个新的HTML后发现样式错乱了，原来是css引用没更名字~~，这类问题均可以经过自动化解决。想一想生活是否是美好不少呢。

4. 解放ctrl+c/v。这就不须要解释了吧~~毕竟80%的代码都是这么产生的嘛。。。

5. 提升效率。解决了上面的问题，还不能提高你的效率？

6. 增长技能树，既然是前端来作自动化构建，那么我首推gulp 毕竟gulp的口号是Automate and enhance your workflow嘛。

7. 若是你也是这么作，而且想到有更多益处，请给我留言^_^

协做

传统方式

传统的先后端切图协做方式是，A（切图仔）将静态页面写好以后，通知 B（后端工程师），将页面经过QQ、Email等方式发送给 B，B将代码下载后，在本地预览，肯定符合需求后，将静态页面套成后端模板（例如我司使用的FreeMarker）。

配合代码管理工具

一个复杂的项目，大多会用到代码管理工具（经常使用的如Git、SVN等）。有了代码管理工具之后，A 将静态页面写好以后，只须要提交代码，通知 B，B将代码拉取后本地预览，肯定符合需求后，将静态页面套成后端模板。

我是怎么作的？

在我司，后端采用的是SVN进行代码管理。咱们前端部门采用的是本身搭建的Gitlab。做为一个前端工程师，我绝不掩饰本身对Git的钟爱。让我使用SVN，我是不乐意的。让后端迁移到Git上？这就像空格与Tab的一场圣战~

固然这不是最主要的，有过切图经验的同窗应该都有过这种经验。你幸幸苦苦写完一个页面以后，后端同窗每每会发表一些想法（虽然他们本身不写）。这里要改一下，那里改一下，如此等等。产品经理就是这么被揍的，不是吗？为了不这种状况，最好是否是在后端用以前先让他们看一看？

个人方案以下：

1. 提供一个能够在线预览静态页面的地方，后端工程师在使用以前先在线预览页面并给出意见。我采用Node.js提供一个Server服务，提供静态页面预览。

2. 提供一个在线下载源码的地方，毕竟我不想为了一个代码管理工具，发起一场战斗^_^，经过Node.js提供动态打包压缩功能，支持单个页面独立打包和打包全部页面。

3. 上面的功能应该是自动化的，基于Gitlab的Hook功能，自动构建发布

一些经验

所谓解决方案，大体能够分为两种:

一种是普适性的，这种每每会造成一套框架，如：Angular、React、vue等；

一种是基于特定业务的，这种每每是多个技能树拼凑起来的一套流程

By vczero

我我的很承认这种说法。我本身更看重基于业务的解决方案，更可以考验一我的的总体素质。

在我看来，解决方案没有最好，只有更合适，须要工程师在不断自我完善的过程当中以不断创新的标准要求本身。我倡导一切技术性研究都应该以业务为基础。

我在生活中比较喜欢用意淫这个词，在面试中发现有不少程序员喜欢背名词，之前端为例，什么Angular、React、Node.js、NPM、Bower如此等等，再一细问绝大多数都只是停留在一个demo中，并不能领会这些技术的精髓，以及了解技术的适用场景，我把这些称为意淫；工做中常常遇到一大堆成天吹嘘各类技术名词的人，工做中却仍然不能突破本身的温馨区，我把这些也称为意淫；

写在最后，我我的认为产品经理是这个世界上意淫频率最高的物种。没错！我就是这么直接。

写在最后的最后，不论你在从事什么工做，请成长在每一次业务中