对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 相关文章推荐
JScript分割字符串示例代码
Sep 04 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
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
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
php对称加密算法示例
2014/05/07 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
python处理xml文件的方法小结
2017/05/02 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
django序列化serializers过程解析
2019/12/14 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
python实现图像拼接功能
2020/03/23 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
实习自我评价怎么写
2013/12/02 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
工作散漫检讨书
2014/09/16 职场文书
交通事故协议书范文
2014/10/23 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
2022年四月新番
2022/03/15 日漫