在没有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的时代,我们下一篇再聊。
以上,是我今天分享的所有内容,中篇即将更新。
在没有DOM操作的日子里,我是怎么熬过来的(上)的更多相关文章
- 在没有DOM操作的日子里,我是怎么熬过来的(终结篇)
前言 在我写终结篇的日子里,Vue版本稳定在2.9.1.当我摸清Vue的脉络之后,以一个爬坑无数的亲历者的身份,谈谈我在MVVM时代里遇到的那些事儿. 接下来,正文从这开始~ 好多童鞋学习Vue都有灯 ...
- 在没有DOM操作的日子里,我是怎么熬过来的(中)
前言 继上篇推送之后,在掘金.segmentfault.简书.博客园等平台上迅速收到了不俗的反馈,大部分网友都留言说感同身受,还有不少网友追问中篇何时更新.于是,闰土顺应呼声,在这个凛冽的寒冬早晨,将 ...
- 给DOM操作生成的元素添加事件
问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...
- 摆脱DOM操作,从TodoMVC看angularJS
取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...
- JQuery中的DOM操作
JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- jquery学习笔记---Dom操作
一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-D ...
- DOM操作 append prependTo after before
通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数 ...
- js,jQuery和DOM操作的总结(一)
废话不说,直接上图 一 js的基本操作 (1)js 的六种数据类型 var n4;//六种数据类型用typeof来确定类型,Null类型的用typeof是不行的,这个是特殊 alert(typeof ...
随机推荐
- win10 uwp 车表盘 径向规
车表盘就是有刻度的圆盘加上针,这个控件可以直观让用户知道当前的速度或其他 看名字不知道是什么,我就放一张图 使用很简单,在Nuget,Radial Gauge 要使用大神做的,简单,在使用我们需要在N ...
- uva1629,Cake Slicing,记忆化搜索
同上个题一样,代码相似度极高,或者说可以直接用一个模板吧 dp[i,j,p,q]表示一块长为j-i+1,宽为q-p+1,左上角在位置(i,j)上的蛋糕,dp[]表示当前状态下的最优值,然后对该块蛋糕枚 ...
- ajax 轮询 和 php长连接
只看加粗的字体 js 部分 1: ajax 成功回调函数中 一定要用时间函数间隔调用 get_comment(). get_comments('init'); function ...
- Linux系统Shell脚本编程
1. shell脚本概念:C语言编写的.命令解释器.编程语言. 是用户使用linux的桥梁. shell脚本语言非常擅长处理文本类型的数据. 2. shell脚本作用:自动化管理.监控管理.日志数据处 ...
- 开发《WORD阅读器》小结(1)
这是一个相对原生的APP开发, 从GITHUB上下载了相应的框架,应该是至少2年以前的一个lovereader,是我能快速找到的为数不多的WORD阅读器的源码.应该是用ECLIPSE开发的,而我现在只 ...
- iOS 之 protocol的相关问题
定义一个协议, 一个协议可以扩展子另一个协议 如果需要扩展多个协议中间使用逗号分隔 //定义一个协议 @protocol AnimalDelegate <NSObject, ***> @r ...
- 10大H5前端框架,让你开发不愁
![](http://upload-images.jianshu.io/upload_images/8373224-7903a1466f7b9722?imageMogr2/auto-orient/st ...
- ubuntu上安装adt时无法在线安装的问题
安装了新的ubuntu系统之后,就得重新布置android开发环境了. 找了网上的教程,一步一步做,到了在eclipse上在线下载adt总是出现 Unable to connect to reposi ...
- C#语言支持的特性,.NET却不支持,那么C#不被.NET支持的部分又是如何在.NET上运行的呢?
阅读<C#高级编程>系列丛书中,介绍C#与.NET的关系,提到C#是语言,.NET是平台(C#不是.NET的一部分),说".NET支持的一些特性,C#并不支持",这个可 ...
- 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】
原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...