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

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

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

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

这里谈谈我大体的制做流程：

一、技术的选型。

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

二、前端开发环境搭建。

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

三、面向对象的编程思惟构建框架。

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

类：页面，单页面，图层

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

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

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

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

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

固然，咱们能够把一些经常使用的方法封装成插件，好比：（拖拽方法，滑块插件，拖动排序，弹窗插件，图片上传插件，自定义下拉选择框等）切记：能封装成插件的都封装成插件，这样在写代码的时候，咱们能够专一在业务逻辑上，不由于那些非逻辑代码扰乱咱们的思惟~

四、写代码：从总体到局部。

写代码也是颇有讲究的，咱们先把框架的东西写好，而后把代码模块化，细节的东西能够先不写，可是命名必定要作好，可是我通常会写个console.log，若是你有下属，那么恭喜你，码砖的活儿就能够交给他们了~ 总体就算完成了。

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

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

五、发布上线。

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

 

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