构建web应用前端方面的一点点心得

首先做个自我介绍：馒头（1990.07）。做了大概有2年前端了。 现在一家公司担任前端负责人。平时喜欢研究一些技术，搞点设计什么的~

去年。利用业余时间做了一个HTML5的在线编辑器，就以这个编辑器为例子，谈谈对前端构建web应用的一点心得吧~

编辑器大致是这样的：通过一些拖拽，点击，完成一个HTML5手机页面的制作。

这里谈谈我大致的制作流程：

1、技术的选型。

类似这种web应用，技术的选型相当重要，关系到后面开发的时间，以及开发的难度。因为技术选型没选好而夭折的项目太多了。所以一定要慎重。这里考虑到项目的实际性质。我选择了jquery，然后就是HTML5，因为做了前后端的分离，至于后台用什么技术，我就不多谈了。之前有考虑angluarjs的，但是考虑到这个编辑器与服务器不是频繁的交互，用了等于累赘，还得处理其他隐藏的问题，于是就放弃了，因为JS代码会比较多，使用模块化工具是必须的，所以我选择了seajs。

2、前端开发环境搭建。

选择好了技术，那么开发一个自动化的环境是必不可少的，这里选择了grunt，因为css不是太多，而且就一个页面。这里就没用sass/less这类了。自动化主要处理一些JS模块化的合并等等。

3、面向对象的编程思维构建框架。

一切就绪，该写代码了？别急，这是很多程序员的通病 —— 急着写代码~ 咱们还没构建项目框架呢，仔细想想，这个项目里面能提取的类有哪些？玩过PS的人都知道，其实这个东西和PS有很多共同点，所以我借鉴了PS的一些东西。

类：页面，单页面，图层

属性：动画，功能，参数。

关系：页面包含单页面，单页面由多个图层组成，动画是图层的属性，功能是所有类的属性，参数是图层的属性。

好了，大的关系理清了。小的关系我这里就不多理了（我很懒）~ 

那就开始写代码。新建3个类，一层一层的继承成下去。因为功能比较特殊，所有类都涉及到功能。这里要对功能进行分类。

最好写一个单独JS来存放配置信息，这样，我们在修改参数的时候就不用到处去找。

当然，我们可以把一些常用的方法封装成插件，比如：（拖拽方法，滑块插件，拖动排序，弹窗插件，图片上传插件，自定义下拉选择框等）切记：能封装成插件的都封装成插件，这样在写代码的时候，我们可以专注在业务逻辑上，不因为那些非逻辑代码扰乱我们的思维~

4、写代码：从整体到局部。

写代码也是很有讲究的，我们先把框架的东西写好，然后把代码模块化，细节的东西可以先不写，但是命名一定要做好，但是我一般会写个console.log，如果你有下属，那么恭喜你，码砖的活儿就可以交给他们了~ 整体就算完成了。

然后就是码砖，码砖，码砖~ 重要的事情说三遍 ~

没有数据的话，可以自己造个~ 试着跑跑~ 没问题后，就和后台对接数据。前后端分离。这样效率也会高很多。我和朋友两个人，他做后台，我做前端+设计，利用工作的业余时间，用1个月时间完成了这套系统~ 

5、发布上线。

最后发布之前，记得合并JS哟，我一个人写，所以模块分的不是太细，大大小小也有30多个JS文件。如果直接用，要向服务器发送30多个请求，考虑到效率问题，用grunt对js进行了模块化合并，然后压缩瞬间小了很多。终于完成了，可以坐下来喝杯咖啡，欣赏自己的作品，一种成就感莫名涌上心头~

（附带线上的网址：h5ds.com）