Front-End MV*简述(一)

本文作者:IMWeb 何璇 原文出处:IMWeb社区 未经同意,禁止转载

近几年来由于web应用的交互越来越复杂,前端技术也迎来了一个飞速发展的时期。本文意在描述前端MV类型的框架发展历程及对部分MV\框架的介绍。

为什么需要MV*

从前的web应用,前端主要负责改善用户体验,而服务器则将视图(view)和数据结合渲染成页面吐给浏览器。而随着Ajax等技术的出现,如今的web应用的也变得越来越复杂,相比于桌面应用来说也不虚。

如果此时我们还是仅仅使用jquery类库来开发web应用,那么随着应用的功能越来越丰富,业务逻辑越来越复杂,你的代码就可能会变成这样:

然后应用就会在一堆杂乱无章的选择器和回调函数中死亡。所以前端也需要将代码的逻辑分层,引用设计模式分离代码的职责,解除不同逻辑之间的耦合,使得前端的代码具有良好的维护性和扩展性。

什么是MV*

在讲什么是MV*之前首先讲讲什么是MVC? 可以先看看维基百科的结果和著名前端布道师Addy Osmani解释

MVC is an architectural design pattern that encourages improved application organization through a separation of concerns. It enforces the isolation of business data (Models) from user interfaces (Views), with a third component (Controllers) traditionally managing logic, user-input, and coordination of Models and Views. The pattern was originally designed by Trygve Reenskaug while working on Smalltalk-80 (1979), where it was initially called Model-View-Controller-Editor.

传统的MVC模式是从GUI编程衍生的MVC模式:

  • M是Models,表示应用中特定领域(domain-specific)的数据或业务规则,我把他理解为是一个具有数据结构能代表现实实体的抽象形式,当然还有就是当model发生改变时它能通知到相应的观察者(observers)
  • V是Views,表示应用中的组成展示视图的模版或标记语言等,它们是Models的观察者,但是它们不耦合
  • C是Controllers,负责处理用户输入和更新Models

然而,前端Javascript框架并不严格遵循传统的MVC模式,部分框架的解决方案实现了所谓的Model-View-Presenter(MVP) and Model-View-ViewModel(MVVM)模式,实际上就是将职责重分配,都是为了将数据,视图与业务逻辑的拆分。

所以我们把这些前端框架叫做MV*框架

关于框架与库

传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权。框架提供架构,控制运行流程,让开发者在合适的地方书写针对具体问题的代码;而库则附属于架构,不控制运行流程,只提供可调用的函数

许多前端项目像Backbone官方文档描述本身是库,却经常在各种地方被人们称作框架 。但是对于前端来说,库与框架的区分显得并不重要,因为我们经常将前端库和框架做比较,在这里不做细致区分。

过去的路

2010年,作为前端MV*模式开山鼻祖的Backbone诞生了,Backbone是一个轻量级的javascript库,作者是Jeremy Ashkenas,同时他也是coffeescript的作者。

Backbone对于许多前端框架的设计来说具有深远的影响,如其名就像是做了个骨架。一些早年的框架如ExtSproutCore也在2011年的时候将框架实现为MVC架构的形式。

也许你会说Backbone不是第一个web前端MV框架,更早的Cappuccino(一个专门设计给web application(not website)的框架,用自己开创的建立于javascript之上的Objective-J语言开发,实现了一套基于cocoa框架的API),早已实现了MVC模式,毕竟上文也提到说MVC其实是从早期的GUI引申的概念。但Backbone是唯一影响深远且基于javascript实现了MV模式的框架或库,当然实现上可能有更早的痕迹可循,例如js-model等,这里不做深究。

同年,MVVM思想也开始出现,knockoutjs就是较早的尝试,但由于作者并不是搞前端的,不熟悉javascript语言,使得knockout的绑定语法被许多开发者吐槽。

2011年,就逐渐开始涌现出许多前端框架,比如JavascriptMVC,深受到backbone影响的Spine.js等。

2012年,出现了许多较为成熟的框架,比如Google的Angular,前身是SproutCore的Emberjs等。后来还出现了舍弃兼容优化的方案,不同组件化方案的框架等等,有Googler尤大大的Vuejsbatmanjs等, 国内也出现像Q.jsAvalonjs等。概念火了,就会百花齐放。

再接下来,基本上就不是mv*的天下了,自从Node和Hybrid开发火了之后,前端工程师的价值体现更加多元化,让我们继续走下去。

(接下来将尽力去剖析一些成熟的框架,写下自己的理解)

说明

文中事实均来源于网络,如发现错误,欢迎指正,谢谢! 本文首发IMWeb。

Reference

开源前端框架纵横谈 — 尤雨溪

Exploring JavaScript MV* Frameworks Part 1 – Hello Backbonejs

Developing Backbone.js Applications

TodoMVC

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Data Analysis & Viz

(送福利)BDP绘制微博转发动态热力图

先把效果图放上来,酷炫压场。看完本文,你就能轻松实现这个动态效果,全程只需几分钟!

1222
来自专栏BestSDK

从初创到BAT,都必须遵守的4个用户体验设计细节

启动页 当用户打开 app 时,最不能做的事情就是让他们等待。但是如果 app 的初始设置非常耗时,又不可能优化该怎么办?你不得不让用户等。如果他们愿意等,你得...

3054
来自专栏杨建荣的学习笔记

最近让我焦灼的四个问题(有解) (r7笔记第76天)

之前写了一篇 《最近让我焦灼的四个问题》,既是感慨,也是无奈,既是记录问题,也是鞭策自己,当然只是吐槽,抱怨是没有任何意义的,所以我更新第二篇,这些问题在近些天...

3686
来自专栏华章科技

教你如何获取IP地址侦测用户来源可视化分析

假设一家商业网站开发了软件产品,他们希望知道都是来自哪里的用户下载或更新我们的软件,并进行可视化分析。

2871
来自专栏运维

从软件部署看运维的四种境界

       首先,博文的名字很难取啊,叫什么都感觉不太对,这里就暂定这样吧。不可否认这里有点哗众取宠的动机,不谈境界总感觉格局不够大哈。

1762
来自专栏华章科技

泣血推荐丨学编程开始前就该知道的工具集,提升五倍学习效率

导读:兵法有云:三军未动粮草先行。对于程序员来说,粮草莫过于一干好用的工具了。下面推荐几款比较好用的辅助工具。特别对于初学者来说,学习编程之初就了解这些工具,会...

931
来自专栏企鹅号快讯

2018年Python 值得关注的开源库、工具和开发者

码个蛋第249次推文 1 开源库 Web 领域:Sanic ? https://github.com/channelcat/sanic 这个库的名字和之前一个很...

2489
来自专栏华章科技

12款堪称神器的 Chrome 插件,Max 你的工作效率!

导语:好的工具插件是提高程序员生产力的法宝,本文介绍了 12 款Chrome 插件,非常高效实用,还附带下载地址, 果断收藏~

1722
来自专栏IT派

50行代码教你打造一个公众号文章采集器

Alfred的女票是一枚数据科学领域的新媒体运营官(是的,Alfred是一名程序员,Alfred有女票

701
来自专栏腾讯Bugly的专栏

跨平台 ListView 性能优化

导语 精神哥前阵子去参加了好友小青在北京办的T沙龙,探讨移动端热更新相关的话题。Bugly 曾为大家介绍过不少腾讯内部的热更新的框架,正好这次看到了美团,去哪儿...

41312

扫码关注云+社区