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

当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉。网站技术是为业务而存在的,除此毫无意义,框架也是一样。在技术选型和架构设计当中,脱离网 站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道。就好像一个日均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框架一定会给前端工作带来效率上的飞跃。

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

转载于:https://blog.51cto.com/jojowei/1697779

Web前端框架与类库的思考相关推荐

  1. Web 前端框架分类解读

    Web前端框架可以分为两类: JS的类库框架 JQuery.JS Angular.JS(模型, scope作用域,controller,依赖注入,MVVM):前端MVC Vue.JS(MVVM)*** ...

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

    1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...

  3. web前端框架Hui使用

    最近在写SSM项目,没有太多时间去设计web前端,就想要学习使用web前端框架,在这里选择了Hui前端框架,以下是学习记录和心得. 1.下载前端框架 网址:http://www.h-ui.net/ 2 ...

  4. WEB前端框架jQuery、VueJS、React.JS、Node.JS、Bootstrap解读

    Web前端框架可以分为两类: 1)JS的类库框架 JQuery.JS Angular.JS(模型,  scope作用域,controller,依赖注入,MVVM):前端MVC Vue.JS(MVVM) ...

  5. Angular 8.0.0-beta.5 发布,Web 前端框架

    Angular 8.0.0-beta.5 发布了.Angular 是一款十分流行且好用的 Web 前端框架,与 React 和 Vue 并称前端三大框架/库,目前由 Google 维护. 更新内容如下 ...

  6. 几款常用的高质量web前端框架

    Web前端框架就是为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队),根据我经验找的几款web前端框架做出了分析.都是个人意见,仁者见仁智者见智. QUICK UI Q ...

  7. 看一看:不同Web前端框架的优缺点分别是什么?

    移动互联网的快速发展,多屏互动和多端兼容友好的界面成为目前所有系统重要的需求,Web前端开发工程师成为目前市场紧俏.火爆的人才.正在从事Web前端工作的小伙伴们一定不会对Web前端框架陌生,那么这么多 ...

  8. Web 前端框架 Layui

    Web 前端框架 Layui 1. 模块化前端框架 Layui 2. 在 Web 项目中引入 Layui 框架 3. 网页轮播特效 4. 表格模块和分页模块的使用 1. 模块化前端框架 Layui L ...

  9. 2019年web前端框架排行

    如果你是前端开发人员,当你开发一个新项目时,肯定会有人问过你,关于你使用什么框架的问题.然后就是各种源源不断的关于web前端技术的问题讨论.然而,对于新手的前端小白来说,估计这样的问题会引发一系列问题 ...

最新文章

  1. 日记 [2007年01月26日] 用 phpMyAdmin 让 MySQL 数据库管理温和化
  2. 小波包分解 matlab_多尺度一维小波分解
  3. 安装 Anaconda 5.2+python 3.6地址
  4. HBase读写的几种方式(三)flink篇
  5. rust 案例_RUST-X气相防锈产品落户中国,助力中国高端制造出口海外
  6. 如何才能真正的提高自己,真正成为一名出色的架构师?
  7. AcWing--2.01背包问题
  8. c++ 写x64汇编 5参数_怀念9年前用纯C和汇编写的入侵检测软件
  9. java远程桌面连接不上_Java远程桌面调用失败
  10. kafka server常用核心配置
  11. 通过ajax传值,出现的乱码和特殊字符问题
  12. 计算机电缆执行标准是什么,DJYVP计算机电缆执行标准
  13. 水晶报表for java_水晶报表(crystal reports)--java
  14. Cisco思科交换机Vlan划分
  15. springboot配置文件密文解密
  16. 汇智动力学员最新就业喜报,最高薪资16K!
  17. android 文字倾斜,TextView中文本倾斜
  18. 计算机自带输入法在哪里设置方法,Windows7设置默认输入法_Win7默认输入法怎么设置?-192路由网...
  19. 快过年了,用五种不同的JS特效带你看烟花
  20. 汇编 eax寄存器和AX,AH,AL之间的关系

热门文章

  1. LeetCode 22. Generate Parentheses--Python 解法--广度优先、深度优先解法
  2. linux mysql 1030,MySQL报错ERROR 1030 (HY000): 解决过程
  3. pdf转换为html5,PDF转换为HTML5的四种方式
  4. c++ 按键暂停继续 程序_CNC操作面板讲解,看看这些按键是什么意思
  5. 基于Matlab的声波信号处理,基于声卡和Matlab平台的语音信号增强处理系统
  6. oracle中set怎么用,sqlplus命令格式以及sqlplus中set的用法与解释-Oracle
  7. java按特殊标志截取_java 字符串分割处理split及特殊符号
  8. 如何备考上海市高等学校计算机一级,计算机一级考试备考攻略
  9. iOS开发笔记--UIView中的坐标转换
  10. RunLoop 详解