我的前端MVC之路

大约十几个月前，了解到时下前端MVC之火爆，同事推荐我了解一下angular。当时也不是特别在意，只是稍稍阅读了一遍官方文档，并尝试了文档上的例子。其实当时也颇有震惊之感的，原来代码还可以这么写！看完之后，很兴奋，也确实想在实际项目中运用一下，但可能我对它的理解不够深入，真到了项目里不知如何下手。后来也就不了了之了。又过了不久，另一个同事推荐我了解一下backbone，我找了一份中文文档来阅读。在当时看来，我更喜欢backbone的代码组织风格，有条不紊，比较好理解。同样也手痒，想要找个实际项目试试手。但由于当时基本都是基于老代码做更新维护，没有实践的机会。于是我的mvc之路便暂时搁浅了。

 

直到2014年3月换到了现在的公司，一切都可以重新来过了。新公司头一件事是进一步研究seajs+spm，之前仅仅是用seajs，没有配合其使用打包工具spm。

 

从2014年3月到4月底，我疯狂地在网上查资料，学习的过程也是很坎坷，官方的文档不够全面，网上的资料还穿插着历史的各种版本，很容易搞混API。由于跟官方的构建方案不大一样，所以官方的教程行不通。后来我甚至直接通过旺旺联系官方支付宝的spm维护人员，好消息是，他点到了其中一个关键配置，使得整个构建行的通，我之前的博客里也有提到他。再之后的一系列摸索，都顺利的多了，非常感谢。后来通过与backbone配合，真正实现了我所设想的构建方案，并发布到了github上。

 

2014年4月底，来了一个电商类的新项目，正好是个机会拿我刚提炼出来的spm构建方案试试手。没有经过实践的东西始终还是会有缺陷的呀，进入到了实际项目，有许多问题就暴露出来了，经过不断的摸索，基本都逐个击破了。

 

电商项目告一段落后，另外一个平台类的项目接踵而至。这个项目的重量级更高，需要更加重视。此时我又开始考虑是否要使用Angular，查了很多资料，想起之前对Angular的了解，有一个阻断我选择它的观点是，“Anagular不能与其他库并存？！”（后来发现这是错误的观点！有可能当时误解了）那岂不是所有组件都要自己写？！但是一方面又对很酷的编程体验很是向往。最终考虑到浏览器兼容，放弃了Angular（对IE8及以下支持不好），选择了Backbone。网上说，其实backbone提供的东西并不多，只是在代码结构组织方面有一定积极的作用。在数据绑定，页面渲染等方面都需要开发者自己搞定。于是在网上找是否有合适的基于backbone的框架可用。后来找到了marionette，跟着教程做了一个页面，发现有各种layout，感觉用起来好累，也许是当初用错了方法。

 

后来想起了arale组件库，当初在支付宝的时候，用过一些组件，感觉蛮方便，而且arale也是以seajs为模块加载器。我把widget进步一包装作为我们的基类按需扩展，派生出了很多常用组件，而backbone仅仅作为业务单元的路由工具使用（想想有点对不起它- -）。在技术选型确定以后，以这套方案开发了几个月后，越发觉得arale的基类很强大，兼具继承，混入和AOP特性，而且代码里发现很多backbone的影子。

 

之后来了一个手机端项目，相对简单。正好大漠的《用AngularJS开发下一代web应用》看的差不多了，想来正好是个实践的机会。试用了一下yo官网的generator-angular，很给力！这次尝试给了我前所未有的编程体验，一个字~爽！

 

generator-angular是一个用于生成angular工程脚手架的工具，包括初始化工程，和在开发过程中新建指定的模块，比如可以根据指定名称生成directive，controller，filter等。另外它还提供了一个完备的gruntfile构建流程，基本能够应对很多项目类型，不过开发者可以根据自己需要进行更改，我就大大小小增删改了很多流程，这个gruntfile对其他项目也具有很大的借鉴意义。

 

之后又有一个之前已经开发好的后台管理系统，我们决定把它用angular重构一遍。这个项目就复杂一些了，不过我还是继续使用generator-angular

 

generator-angular引入的angular模块都是angular官方的，很可能满足不了业务需求，这时候需要我们自己找第三方的模块，或者自己开发组件。我找到了angular-bootstrap作为基本组件库，很好用，而且通过阅读它的源代码，我也了解了很多angular的原理。之后花了一些时间开了form组件和datagrid表格组件，过程确实比较艰难坎坷，指令的确是angular最难的部分。

 

随着此项目的进行，业务需求越来越复杂，form组件和datagrid组件也越来越庞大臃肿，这还可以忍受。我看到controller里一大段一大段的配置对象代码（比如200行的代码，有120行是form组件和datagrid组件的配置代码），着实有些不爽，而且对有些需求真的很难扩展。这是，倒是对当初不用组件开发的方式有点留恋了，优势是思路简单，复杂需求可以较方便的实现。但是手写那么庞大的视图（尤其是form），而且经常是重复或近似的代码也挺无力。于是我终于下定决心想写一个自己的generator，用“代码写代码”，完成乏味的重复劳动，实有一种“返璞归真”的赶脚！

 

花了一个多星期的时间，参照generator-angular，各种踩坑与摸索后，酝酿出了generator-ngstone（以我自己的外号命名- -），算是实现了我之前的想法，尤其是根据配置文件生成form代码与datagrid代码（包括view与controller）。下面这个是我的项目地址：

 

 

欢迎使用，欢迎关注，更欢迎提出宝贵意见！

 

这一路走来，也有一年的时间了，感觉自己还是有一番提升的，这一年没有白过~

未来，HTML5应用会更加火爆，特别是微信SDK的发布，或许应该在这方面下点功夫了。

另外对iOS也是有一番兴趣，尚未深入了解，不知以后的路会怎样。

 

要过年了，给大家拜个早年！新年快乐！