对Web开发中前端框架与前端类库的一些思考


Posted in Javascript onMarch 27, 2015

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

当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉。网站技术是为业务而存在的,除此毫无意义,框架也是一样。在技术选型和架构设计当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道。就好像一个日均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:控制器调控模型和视图的联系,它控制应用程序的流程,处理事件并作出响应,事件不仅仅包括用户的行为还有数据模型上的改变。通过捕获用户事件,通知模型层作出相应的更新处理,同时将模型层的更新和改变通知给视图,使得视图作出相应改变。因此控制器保证了视图和模型的一致性。

对Web开发中前端框架与前端类库的一些思考

我对前端的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框架一定会给前端工作带来效率上的飞跃。

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

文中若有技术层面的错误还请斧正,误人子弟实乃罪过。

Javascript 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 #Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 #Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 #Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 #Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 #Javascript
javascript包装对象实例分析
Mar 27 #Javascript
javascript操作select元素实例分析
Mar 27 #Javascript
You might like
一个PHP日历程序
2006/12/06 PHP
E路文章系统PHP
2006/12/11 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
Python实现简单登录验证
2016/04/13 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
几个数据库方面的面试题
2016/07/01 面试题
单位刻章介绍信范文
2014/01/11 职场文书
作风建设年活动总结
2014/08/27 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
致运动员加油稿
2015/07/21 职场文书
八年级数学教学反思
2016/02/17 职场文书
Go语言基础map用法及示例详解
2021/11/17 Golang