腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

如何做到 jQuery-free?

1
回复
1167
查看
[复制链接]

3

主题

0

帖子

28

积分

球球发

钻石VIP

Rank: 32Rank: 32Rank: 32Rank: 32Rank: 32Rank: 32Rank: 32Rank: 32

积分
28
发表于 19-1-20 16:19:25 | 显示全部楼层 |阅读模式         
需要注意,input元素的this.value返回的是输入框中的值,链接元素的this.href返回的是绝对URL。如果需要用到这两个网页元素的属性准确值,可以用this.getAttribute('value')和this.getAttibute('href')。
' M4 a  ]% \' r0 M, H3 ]七、addClass方法
1 P/ w, J% J! }" a3 D! p  l. h  WjQuery的addClass方法,用于为DOM元素添加一个class。! }2 Z. `: V9 G1 u# S0 W- u# ~# I
DOM元素本身有一个可读写的className属性,可以用来操作class。0 H" e7 e2 b9 \( n6 `
HTML 5还提供一个classList对象,功能更强大(IE 9不支持)。
- x+ U) k% }9 M3 Y' {八、CSS
& z7 o% ], c) _% q% B' Z% PjQuery的css方法,用来设置网页元素的样式。/ {' T5 ?4 k; |" k6 S
DOM元素有一个style属性,可以直接操作。
8 y  p8 C) o% G0 H8 |4 ]5 E, R# D九、数据储存
. ?" w0 z/ k2 ]6 vjQuery对象可以储存数据。: o/ p9 B7 |/ s+ y. M( ]  n
HTML 5有一个dataset对象,也有类似的功能(IE 10不支持),不过只能保存字符串。
& ?5 s# I/ E( S0 u* c* K: B; {十、Ajax
, s8 e' I- _( z$ T( Q2 U, z& ejQuery的Ajax方法,用于异步操作。$ p& l1 p* w# l' X3 A; h
我们可以定义一个request函数,模拟Ajax方法。
1 f% d8 D' B) j1 w+ ?; y: O egvSuA02GgAGUhSV.jpg
4 v: h" S7 L4 t然后,基于request函数,模拟jQuery的get和post方法。' v" E( I6 ~" Z# n9 |
十一、动画* u1 w1 z2 R( R' p; R8 A  ]
jQuery的animate方法,用于生成动画效果。
6 m7 a! \. P+ O- p' x% XjQuery的动画效果,很大部分基于DOM。但是目前,CSS 3的动画远比DOM强
5 W& v( h2 K0 F# i0 e/ D大,所以可以把动画效果写进CSS,然后通过操作DOM元素的class,来展示动画。
) \6 j8 B+ x% r5 [( v1 Z$ b如果需要对动画使用回调函数,CSS 3也定义了相应的事件。3 [* U. J3 I5 y
十二、替代方案) o2 Z) t" w* I( D
下面就探讨如何用JavaScript标准语法,取代jQuery的一些主要功能,做到jQuery-free。
* c  }; h/ I2 {7 w# y一、选取DOM元素
# E# u* I3 q, W" |2 Z" T# ]  M. |jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。! o5 Q- U7 w: `. t4 w& z2 t1 v( {
这里需要注意的是,querySelectorAll方法返回的是NodeList对象,它很像数组(有数字索引和length属性),但不是数组,不能使用pop、push等数组特有方法。如果有需要,可以考虑将Nodelist对象转为数组。
8 I1 u/ A; g4 E  O# d3 O% B二、DOM操作8 f* J3 ~7 }- _5 k
DOM本身就具有很丰富的操作方法,可以取代jQuery提供的操作方法。
, W+ l# X' s( p, ?9 d1 R( M尾部追加DOM元素。
/ N$ a; @# ~. I1 E0 q) r3 y9 _& R头部插入DOM元素。. l# O) A0 _. U! B; Q" B
删除DOM元素。' G- X7 h4 ^' E6 ?% U1 l) m7 N
三、事件的监听
6 ^4 l# Z- N$ F; r& d3 w; `& Q- r) xjQuery的on方法,完全可以用addEventListener模拟。9 P+ }- v1 _5 B4 G* b! R2 G
为了使用方便,可以在NodeList对象上也部署这个方法。9 [0 m9 s. k0 H5 b9 N! o( J: A( N
四、事件的触发
) w# `" a$ }! C3 g3 _6 \* BjQuery的trigger方法则需要单独部署,相对复杂一些。
$ o2 F' P" M6 s1 j4 o. Z在NodeList对象上也部署这个方法。; b$ T2 l! U3 W1 g
五、document.ready# W+ x3 W" M. \4 S7 [
目前的最佳实践,是将JavaScript脚本文件都放在页面底部加载。这样的话,其实document.ready方法(jQuery简写为$(function))已经不必要了,因为等到运行的时候,DOM对象已经生成了。
; e1 G: _: W; I: _: o  L六、attr方法
& a/ l* v; G) P+ [6 ajQuery使用attr方法,读写网页元素的属性。$ O8 }6 [# E5 {+ {5 G) T+ g6 v" F
DOM元素允许直接读取属性值,写法要简洁许多。
7 G" P. g/ h: ?0 ]* h; K由于jQuery体积过大,替代方案层出不穷。
$ e( p$ ^5 B9 \! b) H其中,最有名的是zepto.js。它的设计目标是以最小的体积,做到最大兼容jQuery的API。zepto.js 1.0版的原始大小是55KB,优化后是29KB,gzip压缩后为10KB。" x* u3 E2 _3 e, U4 ]9 h+ N
如果不求最大兼容,只希望模拟jQuery的基本功能,那么,min.js优化后只有200字节,而dolla优化后是1.7KB。# \2 u0 q* ?# L5 M
此外,jQuery本身采用模块设计,可以只选择使用自己需要的模块。具体做法参见它的github网站,或者使用专用的Web界面。( B/ z- A! H8 ?
十三、参考链接
# Y. z+ W$ B7 H' T' fRemy Sharp,I knowjQuery. Now what?2 H0 _' n& ?) n- U3 m( \2 l! j
Hemanth.HM,Power ofVanilla JS" c9 v8 _5 r1 t' `4 O: x( k
Burke Holland,5 Things YouShould Stop Doing With jQuery, ]( e: b+ l3 L; {
后语
0 N" P/ U8 w5 D3 m1 Y你学习js是从什么时候开始的?从哪方面开始入手的,欢迎讨论~
! f' @* V; g9 t1 a7 i' P关于本文

0

主题

10

帖子

20

积分

1°伸手党

Rank: 2

积分
20
发表于 19-9-20 13:15:55 | 显示全部楼层         
支持一下
回复

使用道具 举报

网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除