我的前端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)。下面这个是我的项目地址:

https://github.com/stoneChen/generator-ngstone

欢迎使用,欢迎关注,更欢迎提出宝贵意见!

这一路走来,也有一年的时间了,感觉自己还是有一番提升的,这一年没有白过~
未来,HTML5应用会更加火爆,特别是微信SDK的发布,或许应该在这方面下点功夫了。
另外对iOS也是有一番兴趣,尚未深入了解,不知以后的路会怎样。

–从cnblogs搬来,写于 2015-01-25 12:38