我的前端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也是有一番兴趣,尚未深入了解,不知以后的路会怎样。

要过年了,给大家拜个早年!新年快乐!

时间: 2024-10-14 01:06:13

我的前端MVC之路的相关文章

我的web前端自学之路-心得篇:我为什么要学习web前端?

时光如流水,转眼间,自己已经是大三的学长了,看着一个个学弟学妹,心中有种莫名的感觉,很怀念大学的前两年时光,但也很憧憬着自己的未来,自己将要去经历很多从未经历的事.我是我们学校信科院的一名学生,在编程方面,一开始只是接触到了C语言,但是c语言对于我来说并不友好,也并不是那么的好学,所以自己对程序不是很有兴趣,但一个偶然的机会,我接触到了web前端,看着我的一个大牛同学用前端 所涉及的语言写出了一些很棒的程序,于是就产生了一种很想学习前端的想法和很想把前端做的完美的渴望,于是,就开始了我的前端之路

前端这条路,我们该何去何从

原文地址:https://www.usblog.cc/blog/post/justzhl/前端这条路,我们该何去何从 这样,因为你会发现,如果你觉得某个教程写的不好,那可能很难找到一个教程适合你的,不是因为别人教程写的差(除非特别那种的),而是你该问问自己,是否有静下心来认真去看.找教程我给一个建议,建议你刚入门不要去看大牛的作品,最好看那些菜鸟或者和你技术差不多的,因为他们更容易让你懂,大牛的作品一般里面会涉及到很多东西,你去看的话,难免受打击,等到你了解部分之后再去品味大牛的作品. 当然菜鸟

前端 MVC 变形记

前端 MVC 变形记 提交 我的评论 加载中 已评论 前端 MVC 变形记 背景: MVC是一种架构设计模式,它通过关注点分离鼓励改进应用程序组织.在过去,MVC被大量用于构建桌面和服务器端应用程序,如今Web应用程序的开发已经越来越向传统应用软件开发靠拢,Web和应用之间的界限也进一步模糊.传统编程语言中的设计模式也在慢慢地融入Web前端开发.由于前端开发的环境特性,在经典MVC模式上也引申出了诸多MV*模式,被实现到各个Javascript框架中都有多少的衍变.在研究MV*模式和各框架的过程

走入asp.net mvc不归路:[2]控制器概览

asp.net mvc中最灵活的地方就是控制器,这里可以验证数据,可以跳转视图,还可以访问数据库等等.所以,我们要先从这里说起. 1 控制器就是继承了Controller的类,一般来说,类名后面都会增加"Controller"字样,asp.net mvc是一个约定优先的框架,在这里就能看到一点点端倪,接下来还要涉及到其他约定 2 这个控制器里面,有一些方法,其中图示的public并且返回值为ActionResult的方法就是所谓的Action,可以理解为动作.行为.功能等:图示就是登录

走入asp.net mvc不归路:[1]项目文件结构

先来了解一下一个asp.net mvc项目的文件结构. 1 项目文件结构一览 2 mvc,顾名思义,一个项目中最重要的就是这三个东西:M(Model,模型),V(View,视图),C(Controller控制器),其关系一般如下,控制器控制模型和视图,模型传数据给视图: 3 控制器就是控制整个逻辑走向的机制,可以对模型数据进行处理,也可以控制呈现在用户眼前的视图. 4 一般来说,一类的操作会放在同一个控制器中,如账号相关则放于AccountController中,里面有各种Action,即一个一

前端MVC学习总结——AngularJS验证、过滤器

前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令(directive) 3.1.支持AngularJS功能的指令 3.1.1.应用与模块(ng-app) 3.1.2.控制器(ng-Controller) 3.1.3.包含(ng-Include) 3.1.4.不绑定(ngNonBindable) 3.2.扩展表单元素的指令 3.2.1.ng-opti

我为什么要选前端这条路

我们都知道,前端水很深,大坑.. 因为她知识面广,越往后,越广乃至越深.. 相对于后端的先慢后快,前端是先快后慢,易学难精 选择前端,当然也是因为我算法这方面水平太次了 随意搜索一下“如何才能成为优秀的前端开发工程师”,就能发现前端要学的东西是不可估量的 也正是因为这样,我喜欢挑战,挑战各种知识,而这里的各种知识,都联系着前端这条路. 个人期望能用5-10年左右的时间将前端涉及的大部分知识了解一通,当然,往后还有机会的话,投入,更专注地深入各个细节. mark: 这只是目前心中的想法,不知几年后

走入asp.net mvc不归路:[3]创建控制器

实际上,控制器就是一个类,一个继承自Controller的类.正常创建一个Controller即可,而问题在于asp.net mvc提供了一套便捷的方法,在创建一个Controller时,可以自动创建一些Action.   1 打开项目,在Controller文件夹上右键,选择,创建Controller 2 输入控制器名,点击确定:注意,控制器名一般都有Controller作为后缀 3 框架会创建这个控制器,继续自Controller,并全默认生成一个名为Index的Action 4 其实上并没

最轻量级的前端Mvc框架backbone

最轻量级的前端Mvc框架backbone依赖最轻量级的库understore backbone并非将前端再次切分为mvc,而是分为了七大模块,分别是:Events.Model.Collection.Router.History.Sync.View 一个Model对应一个View,如果是多个Model时,则进化为一个Collection对应一个View Sync负责与服务器端进行交互 官方网站 http://backbonejs.org/ github地址 https://github.com/j