对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 相关文章推荐
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 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
投票管理程序
2006/10/09 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
php通过字符串调用函数示例
2014/03/02 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
python使用turtle库绘制时钟
2020/03/25 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
第一节英语课开场白
2015/06/01 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers