jQuery王者归来
曾经jQuery也是王者,只是时代变了,不过时代仍然在变,我们会发现jQuery还是那个王者。react和jquery比起来,你会不会发现,那些花里胡哨的东西,在jquery面前,就是笨拙的大象么?react的生态如此庞大,以及react本身所提出的协程,不都是因为react慢吗?项目里面打包一个react-dom,噢,让界面打开再飞一会儿。总而言之,现代前端虽然有很多创新,但带来的痛苦也不尽其数。
让我们再回头,弹一弹jQuery身上的尘土,看,它还在发光。 react之所以让我们热爱,抛开工程化的那一套,单纯从视图驱动讲,是因为它提出了virtual dom,在这一杀手级特性下,它可以让界面更新在更小范围内进行,从而在更新界面时拥有更好的性能。然而,在react16之前,所谓的更好的性能,在官方demo里面,也就是卡卡卡,于是有了fiber。而jquery永远都是直接操作DOM,所以直接操作DOM有多快,它的性能就有多好,而且jquery的包只有几十kb。那么,jquery怎么就不能吸收react这一创新呢?
jQuery入门
jQuery特指jQuery Core,它还有jQuery UI等其他套件,不在我们考虑范围内。要使用jQuery非常简单,不需要任何构建工具:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
复制代码
jQuery的设计,核心是封装DOM操作为更简便的接口,为了配套,它还提供了很多辅助的模块。在操作DOM时,它强调一种抽象的集合操作,比如:
<script>
$(document).ready(() => {const $div = $('div') // $div是指被选取到的所有DOM节点的一个抽象集合$div.css({ margin: '10px' }) // 对集合中的所有元素进行相同操作
})
</script>
复制代码
一个$
包含了jQuery的所有核心理念。
通过阅读jQuery的API文档,可以快速入门,不需要太多其他辅助工具。你可能觉得它的api太多了,记不住,我可以教你一个方法,把这些api进行分类:
- 选择器::focus :selected :hidden ...
- 选DOM节点:$, find, eq ...
- 识别DOM集合:each ...
- 操作DOM节点:html, appendTo, prependTo ...
- 事件相关:on, off, trigger ...
- Ajax: ajax, get, post ...
- Deferered
- CSS: css, addClass ...
- 动画效果:fadeIn, fadeOut, slideDown ...
- 处理函数:extend ...
基本上按照这样分,就可以把api都摸一遍了,而且它的api文档页面,也提供了这个分类,可以快速找到你需要的api。
现代编程
基于jQuery,我们可以直接快速操作DOM,但是由于jQuery不包含数据驱动视图的思想,所以导致我们无法运营现代编程的熟悉套路。既然如此,我们能不能在jQuery中使用数据驱动视图的方案呢?幸运的是,jQuery提供了成熟的插件系统,而基于这个插件体系,市面上出现了无数的jQuery插件,实现了各种非常棒的效果。为了实现现代编程,我们引入jqvm插件:
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script src="https://unpkg.com/jqvm/dist/jqvm.min.js"></script>
复制代码
接下来,我们就可以利用这个插件完成数据驱动视图的开发:
<template id="app"><div class="count">{{count}}</div><button jq-on="click:plus">+</button><button jq-on="click:minus">-</button>
</template><script>const view = $('#app').vm({ count: 0 }).fn('plus', state => state.count ++).fn('minus', state => state.count --).mount()
</script>
复制代码
你看,在现代编程范式下,jquery也和vue一样,由状态驱动视图更新。 而且,和vue react不同的是,jquery可以直接操作DOM,而vue和react理念上不提倡对DOM进行操作,这样在某些场景下,我们就失去了操作DOM带来的特殊效果,例如在拖拽场景下。而使用jquery则完全和原生DOM结合在一起。
$('#app').vm({ ... }).on('mousedown', '.dragbar', function() {const view = thisreturn function() {view.draging = $(this)}}).on('mousemove', function(state) {if (!this.draging) {return}...}).on('mouseup', function(state) {this.draging = null...}).mount()
复制代码
也就是说,驱动视图变化的状态的变化,与视图本身的变化是相辅相成的,视图的变化由用户操作实时变化,再反馈回状态,这样既可以享受状态驱动视图带来的便利性,又不丢失直接操作DOM的愉悦性。
结语
jQuery作为视图驱动库,本身只考虑视图驱动问题,不像react,声称的是视图库,却干着一整套框架的事。我们以jquery作为底层视图驱动,在上面去搭建区别于/借鉴于react等的框架,可以实现非常多有意思的东西。比如,我们可以结合rxjs和jquery,创建一个流式的视图驱动框架。虽然它已经有10多年的年龄,但是,它依然在web领域处于王者的高度,试想一下,DOM领域还有什么是jquery实现不了而非得用vue或react的呢?
本文首发于前端黑洞网,csdn同步跟新
jQuery王者归来相关推荐
- 《Ajax实战》三部曲之“王者归来”
<Ajax实战>三部曲之"王者归来" --<Ajax实战:实例详解> 推荐阅读:Ajax 2.0时代的王者 Web始终都是催生创新的温床,在它不长的历史里, ...
- JavaScript王者归来
内容简介回到顶部↑ 你手中的这本<javascript王者归来>不仅是一本传播知识的书,更是一本求道的书. 本书分为五个部分循序渐进地与读者讨论了javascript的方方面面,从简单的语 ...
- Ajax接收Java异常_java – 处理来自Servlet的Jquery AJAX响应中的异常
我的servlet代码是 try{ //something response.setStatus(201); out.print("Data successfully saved" ...
- Jquery DIV滚动至浏览器顶部后固定不动代码
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 效果例1 代码如下复制代码 <scr ...
- jquery.raty评星插件
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
- jquery autocomplete demo
根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择. jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquer ...
- 在Ant-design-pro框架中引入jQuery和jQuery-ui步骤
1.安装jQuery和jQuery-ui npm i jquery s npm i jquery-ui s yarn install 2.在vue.config.js中进行配置 // webpack ...
- 火狐浏览器允许ajax,解决火狐浏览器发送jquery的ajax请求无效的问题
今天遇到这样一个问题: 页面在chrome下发送ajax的请求是没有问题的,但是在firfox下无效. 代码大致如下: //前面省略 ..... 生成成绩 查询成绩 ...... ...... fun ...
- jquery 监听的案例
jQuery 简介 jQuery 是一个 JavaScript 库. jQuery 使用 可以下载一个,也可以使用Staticfile CDN.百度.又拍云.新浪.谷歌和微软的服务器都存有 jQuer ...
最新文章
- C++通过GSoap访问webService
- python3 socket 超时设置
- 6月17 表单验证
- C++编程笔记:贪心算法实现活动安排问题
- tempdb数据库清理_如何检测和防止TempDB数据库意外增长
- 初识AngularJS 之 HelloWorld和数据绑定
- php输入一个字符串 输出所有组合,C++_C语言实现输入一个字符串后打印出该字符串中字符的所有排列,本文实例讲述了C语言实现输入 - phpStudy...
- 缓存key生成策略的一些思考
- 2018最新的Java黑马视频教程,包含十次方和乐优商城项目
- mov和mp4格式哪个好_公文需带附件时,标准的格式排布
- PRCV2021 第四届中国模式识别与计算机视觉大会开放注册
- Java SE 正则表达式
- mr图像翻转的原因_前置摄像头水平翻转问题
- 开源维基百科文档系统mediawiki
- Python中的 生成器、迭代器
- 买房税费大攻略!哪些费用必须交?
- excel报错无法粘贴信息,原因复制区域跟粘贴区域形状不同
- 可以安心过中秋了!黎曼猜想亡不了区块链!
- 懒人福利!传沃尔玛计划将超市购物车变为智能机器人
- 网络编程主机号和网络号转化
热门文章
- java 蓝桥杯算法训练 未名湖边的烦恼
- 人之间的尊重是相互的_人与人之间的感情,最基本的是相互尊重
- (190)FPGA变量初始化方法initial
- oracle导出报错04063,Oracle EXP导出报错的解决方法
- offes给excel增加下拉选项_财务“救星”:Excel不止可以下拉单元格,还可以进行成本核算...
- python 直线过滤掉不在边缘上的点_不存在所谓的机器学习平台
- 26.QTableWidget用法
- idea中拉取项目时 没有文件_idea编译器中maven项目获取路径的方法
- 两数之和python哈希_LeetCode-python 1.两数之和
- gridsearchcv参数_Python机器学习库Sklearn系列教程(21)-参数优化