Web前端框架与类库的思考

说起前端框架,我也是醉了。现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利。

  当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉。网站技术是为业务而存在的,除此毫无意义,框架也是一样。在技术选型和架构设计当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道。就好像一个日均pv只有几百的小型电商网站,却要大喊“某宝就是这么搞的”,然后搭建应用服务器集群,使用分布式文件系统和分布式数据库系统...等巴拉巴拉的一堆用来处理高并发,海量数据访问的手段。我想说,有意义吗?


前端框架的理解误区

  网站的价值在于它能为用户提供什么价值,在于网站能做什么,而不在于它是怎么做的,所以在网站还很小的时候就去追求网站的架构框架是舍本逐末,得不偿失的。前端框架同理,如果是一个简单的页面型产品,应用只是依赖服务器来生成Web页面和视图,并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性,那么一个JQuery前端类库就可以了,真的没必要用上一些高大上的框架。

  当然,框架的确是很有用的,重点是我们要知道什么时候该用什么框架。大公司大项目的经验和成功模式固然重要,值得学习借鉴,但我们不能因此变得盲从。只有深刻去理解前端框架,知道什么时候该用什么什么框架解决什么问题,才能有的放矢,直击要害。

前端框架与前端类库的区别

  使用框架前,我觉得很重要的一点是弄清类库(诸如JQuery)和框架(诸如angularJS)的区别在何处。

  简单而言,类库,解决的是代码或者是模块级别的复用或者对复杂度的封装问题,例如将一个解决复杂问题的功能模块封装成一个函数,提供一个简单的接口。库它是一种工具,它提供了很多封装好的方法,用与不用取决于我们自身,即使用了也不会影响我们呢的代码结构。

  而框架,更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC,为了实现M和V的解耦,把复杂的耦合关系由经常变化的业务代码转移到不经常变化的框架内部消化。是面向一个领域来提供一套解决方案,提高开发效率,如果我们选择了使用某框架,就应该遵循该框架所规定的规则。

  二者最主要的区别是:JQuery以DOM操作为中心,框架,准确来说是MVC框架,是以模型(model)为中心,而DOM操作是附加的。所以,以模型为中心最终达到的目的是带来一整套工作流程的变更,使得后台工程师可以编写前端的模型代码,把后台与前端打通,交互设计师处理UI跟模型的互动关系,UI设计师可以专注、无障碍的处理HTML源码,把它们以界面模板的形式提交给交互工程师。这一整套协作机制能大大提高开发效率。使用MVC框架使得前端任务更好的被解耦。

前端MVC框架思想

  我们知道,传统的MVC模式将一个应用划分为——模型层(model)、视图层(view)、控制层(controller)。他们在应用系统中担当不同的角色,完成不同的任务。

  • Model:即数据模型,用来包装和应用程序的业务逻辑相关的数据或者对数据进行处理,模型可以直接访问数据。
  • View:视图用来有目的显示数据,在视图中一般没有程序上的逻辑,为了实现视图上的最新功能,视图需要访问它监视的数据模型。
  • Controller:控制器调控模型和视图的联系,它控制应用程序的流程,处理事件并作出响应,事件不仅仅包括用户的行为还有数据模型上的改变。通过捕获用户事件,通知模型层作出相应的更新处理,同时将模型层的更新和改变通知给视图,使得视图作出相应改变。因此控制器保证了视图和模型的一致性。

  

  那么在前端中的表现。前端MVC中各部分的职责:

  

  我对前端的View的理解是,与页面上元素直接相关的部分都属于View。包括html,CSS和一部分直接控制页面元素的JS。可以从Model中得到数据,并将其显示到页面上。而关于数据的变更与请求,则统统交给Controller处理。

  那么Controller呢?作为Model和View的粘合剂,Controller将View方面的请求转发给合适的Model,在必要时也会去更新View。而Controller本身也可以作为Model的观察者,获取Model的变更。而作为Controller本身,就不应该有涉及到页面元素的代码了。

  最后谈谈Model,与后端的沟通、AJAX请求以及对数据的处理都属于Model的工作。Model本身不知道谁是View,谁是Controller。它只提供一些方法供View和Controller调用,并且将变更通知给它的观察者View或Controller。显然,Model与页面元素之间也解耦了。

  虽然基于MVC模型的框架之间也有很多不同之处,但是总体而言,Model负责保存vier需要的数据以及数据处理逻辑,例如读写,更新,删除,验证,转换等。View负责接收并显示Model提供的数据以及接收用户的输入,并且响应事件,Model更新后及时将更新反馈回用户。Controller处理业务逻辑和事件逻辑。

知己知彼,对症下药

  在前端框架和类库越来越丰富的今天。选择一款对的框架或类库就显得尤为重要了,我觉得没必要盲目跟风,看见什么框架火就屁颠屁颠跑去啃一个星期,然后因为项目工作上用不到,几个月之后又全忘光了。

  所以我觉得重要的是把基础打扎实,重点是去了解各个类库与框架的作用,某类框架着重用于解决什么问题,然后在项目需要用到时候再去研读API才是上策。

  最后,我们要清楚MVC在前端开发中的应用具有的局限性,简单的项目如果使用MVC框架会可能导致项目变得更加复杂。当然随着Web前端的复杂度不断增加,前端MVC框架的不断发展,相信在未来的应用软件类复杂产品当中,MVC框架一定会给前端工作带来效率上的飞跃。

  

  以上只是我对前端框架和类库一些浅显的认识,不喜勿喷,更希望您能提出更好的学习框架和类库的方法。共同进步,共同学习。

原文 : http://www.imooc.com/article/1368

时间: 2024-08-02 02:49:04

Web前端框架与类库的思考的相关文章

国内5款优秀的WEB前端框架

1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 WebQQ 等大规模的 WebApp. JX 是模块化的非侵入式Web前端框架,开发于2008年,并于2009年开源于GoogleCode ,于2012年切换到Github. JX 框架同时适用于 Web Page 和 Web App 项目的开发,特别适合构建和组织大规模.工业级的Web App,腾

国内5款优秀的WEB前端框架4

1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 WebQQ 等大规模的 WebApp. JX 是模块化的非侵入式Web前端框架,开发于2008年,并于2009年开源于GoogleCode ,于2012年切换到Github. JX 框架同时适用于 Web Page 和 Web App 项目的开发,特别适合构建和组织大规模.工业级的Web App,腾

React 还是 Vue: 你应该选择哪一个Web前端框架?

学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西,请使用Vue    如果你的应用需要尽可能的小和快,请使用Vue    如果你计划构建一个大型应用程序,请使用React    如果你想要一个同时适用于Web端和原生App的框架,请选择React    如果你想要最大的生态圈,请使用React    如果你已经对其中一个用得满意了,就没有必要换了

推荐一款程序员常用的web前端框架

不知道现在大家使用的web前端框架都是什么?也许有人和我一样会想到jQuery,但今天给大家介绍的确实另外一款比较受欢迎的web前端框架,把我用的体验和大家分享一下,希望这款web前端框架能够被大家认识. 这是一款比较新颖的前端框架,但是功能不得不服.100多项功能任你选,你想要的各类表格.组件.各种不同的界面选择性很多,这也是我选择用QUICK UI的原因,很多人应该和我之前一样,不知道QUICK UI是什么?这里给大家也简单的介绍一下. QUICK UI 是基于jquery开发的一款前端UI

Web前端框架学习成本比较及学习方法

就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理, 后台取出的数据把它显示在页面上不就这么简单么; 弄清楚这其中的提交方式(特别点就ajax方式), 参数传递, 事件机制然后在看懂API; 那么不管用什么web框架开发都是很顺心的, API在手通吃所有;  前提是一定要看懂API , 总是去问别人不会有多大进步的, 自己多看API文档; 学习成本

2017年前端框架、类库、工具大比拼

相比于JavaScript开发人员的数量,目前JavaScript框架.类库和工具的数量似乎更多一些.截至2017年5月,GitHub上的快速搜索显示,有超过110万个JavaScript项目.npmjs.org有50万个可用的软件包,每月下载量近100亿次. 本文将会讨论目前最为流行的客户端JavaScript框架.类库和工具以及它们之间的基本差异.也许本文无法告诉你哪个是最好的,但是最适合自己项目的,就是最好的. 类库 类库是一个有组织的功能集合.典型的类库包括字符串处理.日期.HTML D

【转】2017年前端框架、类库、工具大比拼

原文链接:https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/ 源于:葡萄城控件 欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 相比于JavaScript开发人员的数量,目前JavaScript框架.类库和工具的数量似乎更多一些.截至2017年5月,GitHub上的快速搜索显示,有超过110万个JavaScript项目.npmjs.org有50万个可用的软件包,每月下载量近100

web前端框架

1. Bootstrap Boostrap绝对是目前最流行用得最广泛的一款框架.它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面.它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件. Bootstrap是用动态语言LESS写的,主要包括四部分的内容: 脚手架——全局样式,响应式的12列栅格布局系统.记住Bootstrap在默认情况下并不包括响应式布局的功能.因此,如果你的设计需要实现响应式布局,那么你需要手动开启这项功能.

Web前端框架汇总

转载:赞生博客 在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apache基金会后发布的第一个版本. 需要注意的是,Flex目前还在孵化阶段,还不是Apache的正式项目,Flex 4.8也不是一个正式的Apache版本. Apache称,该版本标志着Flex新时代的开始,Flex的未来将由社区来驱动,而不是由一个公司驱动.开发者可以通过贡献代码,来帮助