在没有DOM操作的日子里,我是怎么熬过来的(上)
前言
在我动笔写这篇文章的时候,我刚刚从我的项目中删除了最后一行JQuery代码。至于我为何要这么做,请听闰土娓娓道来。前几年我还在想,假如有一天,前端世界里不能再直接操作dom了,我该怎么办?没想到竟一语成谶,这一天终究还是来了......
此文记录了一次JQ党转变成Vue信徒的心路历程。
那么接下来,正文从这开始~
熟悉闰土的朋友都知道,我是从JQ时代过来的前端,在刚接触react和vue这类MVVM框架的时候,完全可以用一脸懵逼来形容我,最为贴切。在啃官方API文档的时候,总是按照以前jquery的思想来衡量,当时看的还是相当费劲,不过最后还是艰难的看完了。
我在想,如果能从一开始学的时候,把之前的开发思路忘掉,就当自己从来没学过编程,以一种空杯心态从零开始学的话,应该会比较快。之前没有考虑到思路转换这一步,走了弯路。现在想想,有种欲练此功,必先自宫的感觉。
相信从JQ时代过来的前端码农们都知道,jQuery完全是通过美元符号$来对各种元素进行操作!根据HTML元素的id、class、name等属性来获取到元素并对其进行取值、赋值、修改属性等行为,也就是直接操作DOM。
比如我们公司前些日子正在做的一个教育平台的webOS项目,技术栈用的正是vue+webpack这对黄金组合。刚开始我是直接下载vue.js文件,并用script标签引入,此时vue会被注册为一个全局变量。
当时我还是习惯性的沿用jq的思想,想直接操作dom,通过id或class来获取元素,并为其切换class,达到改变样式的目的。但是,这样的想法一开始就是错误的,因为你已经用了vue作为开发框架,就不能再按照jquery的思想去直接操作dom了。
当时还被笼罩在jq旧时代的我,可以说是被难住了。按照我以前的开发经验,如果不直接操作dom,难道vue还有更先进的办法吗?答案是,有的。
vue大法好,应该有的尽量有。在vue的王国里,操作元素的class列表和内联样式,是数据绑定的一个常见需求。 那vue的办法就是,用v-bind去绑定它们。
先来聊聊绑定HTML Class,举个例子:
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示,类名active的存在与否,取决于数据属性isActive的boolean值是true or false。
另外,你也可以在对象中传入更多属性来动态切换多个class,比如以下模板:
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
和如下data:
data: {isActive: true,hasError: false}
当然,vue既然可以绑定class,那么同样也可以绑定style内联样式,同样贴出代码:
<div v-bind:style="styleObject"></div>
data: {styleObject: {color: 'red',fontSize: '13px'}}
自此,vue大法的套路已逐渐清晰。
使用jq需要拿到数据后操作dom元素来实现,vue直接用v-for来实现,不需要我们来操作dom元素,在这种程度上,我们其实可以说vue实现了model和view的分离。
Vue大法的惯用套路是:先绘制HTML界面,然后在需要绑定数据的地方写下v-model、v-on等这些绑定属性和方法,在显示数据内容的地方使用双大括号显示内容。然后在Vue中,el属性绑定根视图的id,data属性定义并初始化v-model、双大括号用到的数据和一些其他数据。methods属性定义在v-on中用到的和一些其他方法。更新界面修改数据实现。而修改数据通过操作界面实现。
在写完了这个demo后,我感觉到了Vue的确有它的魅力所在。它的MVVM让业务逻辑变得更加清晰和简单。
vue.js能在那么多前端框架中脱颖而出确实有它的独到之处,组件相较于react有很大特色,开发效率相当高,打包的时候可以把所有的东西都整合到 js 文件中,执行效率也很高。不过传统的前端开发最麻烦的就是频繁的dom操作,有时候还会有性能问题。
还有,后端人员上手 Vue.js 的效率应该会比传统前端人员上手的快,因为大多数后端的模板都是数据绑定,而传统前端又有先入为主的思想,会受到以前开发思路的影响,反而降低了上手效率。
那么,在弃用JQ的日子里,Vue是否能承担起操作dom的重任呢?
尤雨溪说,我们Vue 官方是不建议直接操作 DOM 的,Vue 的用途在于视图和数据的绑定。如果通过JQuery 直接操作 DOM 的话,势必会造成视图数据和模型数据的不匹配,这样 Vue 就失去它存在的意义了。
既然vue不能直接操作dom,而我又不想完全弃用jQuery,那么请问jQuery和VueJS能否一起使用呢?
答案自然是可以的。JQuery 和 VueJS 合理使用并不会造成冲突,因为他们的侧重点不同,VueJS 侧重数据绑定和视图组件,JQuery 侧重异步请求和动画效果。如果使用JQuery + VueJS 开发,一定要在 Vue 渲染完所有的 HTML组件之后再通过 JQuery 处理,而使用 JQuery 时应避免直接操作 DOM ,但是应用动画是允许的。
JQuery 与 VueJS 相互配合可以非常高效的完成异步任务,首先通过 JQuery 发出 Ajax 请求,接收到从服务器端传递过来的 JSON 数据后,再通过 Vue 将数据绑定到组件上,最后由 JQuery 进行动画处理,整个过程就如行云流水般自然。
说句题外话,Vue 的目的不是取代 JQuery,它是为了解决前后端分离而出现的。如果没有数据变化,只是单纯的样式变化,则没有必要去大费周章进行视图模型的绑定,并且还不利于 SEO 优化。
jQuery本质上只是一个简化了的操作函数库而已,代表的是优化过的JavaScript dom操作。vue的话是一个能提供动态绑定等等功能的一个框架,把你从复杂繁琐的dom操作中解放出来了,代表的是虚拟dom的新思路。其实两者并没有什么功能上的交集,如果你非要问可不可以用vue来实现jQuery所能实现的功能的话,我只想说,能,并且更加简洁。
在公司里用了大半年Vue,体验不用说,个人感觉VueJS是MVVM 里最好的。用 Node.js 来做前后端分离,开发效率实在太快了。其实 vue 有个好基友 Vuex 类Flux数据流控制框架,和 Vue 配合起来才是移动端 WebApp 大杀器。开发体验非常接近 React Native + Redux,思维上可以做到非常好的切换。今年在前端圈内极有可能会大爆发~
后记
至此,学习vue已有一段时间了,不断的填坑,es6,vue-router,vuex,webpack,看来我还有好长一段路要走。关于后来我是如何从DOM操作的时代毫无压力地过渡到了MVVM的时代,我们下一篇再聊。
以上,是我今天分享的所有内容,中篇即将更新。
- [大数据之Spark]——快速入门
- [大数据之Spark]——Actions算子操作入门实例
- [大数据之Spark]——Transformations转换入门经典实例
- 字符串的排列
- 斐波那契额数列及青蛙跳台阶问题
- 在Mac OS X上配置Apache2
- 合并两个排序的链表
- 还有5天,你的比特币最重要的孩子UB-UBTC 可能就永远不属于你了
- Spark SQL 用户自定义函数UDF、用户自定义聚合函数UDAF 教程(Java踩坑教学版)
- Webpack多入口文件、热更新等体验
- 从hello world 解析程序运行机制
- 万达大量员工“被”辞职?曲德君回应:万达网科没有倒
- iOS Programming – 触摸事件处理(2)
- 洋葱海外仓融资2亿元 官网启用msyc.cc域名
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Windows系统中使用Linux命令(可以批量下载Modis数据)
- Python制作桑基图(我承认我低估了这个教程)
- 几个好看的Seaborn图样~(虽然官方配色一般般,但我还是忍不住夸它)
- GDAL读取MAIAC的HDF文件(熟肉)
- Google Earth Engine(GEE)-谷歌地球引擎的大致Python入门
- 谷歌地球引擎(Google Earth Engine)之数据初探(栅格和矢量)
- Python-gdal离线文档下载
- 利用python把shp文件写入PostgresSQL数据库
- python调用cmd运行GDAL报错解决:ERROR 1: PROJ
- Tungsten Fabric知识库丨测试2000个vRouter节点部署
- 一行代码快速图像识别~一排代码搞定视频识别
- Python测试开发django5.urls.py参数name与<a>标签的引用
- Pytest配置文件pytest.ini
- 移植uc/OS-III最新版到小熊派开发板(STM32L431)
- phpStudy默认配置致Nginx解析漏洞复现