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

如何做到 jQuery-free?

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

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')。
( k+ p' ?# S; T- C/ J) S七、addClass方法3 }( p! F# C7 `/ t
jQuery的addClass方法,用于为DOM元素添加一个class。
6 @+ x" ]! \) n6 g7 p" }: r& M9 T8 ~& DDOM元素本身有一个可读写的className属性,可以用来操作class。
4 {: v+ _7 c+ ?: W4 ^' K. PHTML 5还提供一个classList对象,功能更强大(IE 9不支持)。# p7 e, K- Q7 ?! V+ N/ \& W  n5 c
八、CSS
; y7 V4 a! E4 z! xjQuery的css方法,用来设置网页元素的样式。
7 K# i0 Y- m+ C1 z$ TDOM元素有一个style属性,可以直接操作。: r, ^7 S$ y! j# ?: J# `9 _! N
九、数据储存2 d* E  }2 z8 O- j1 C0 j7 Q
jQuery对象可以储存数据。* ?0 Q+ J" ~$ A. ^: n! B" o% h% k
HTML 5有一个dataset对象,也有类似的功能(IE 10不支持),不过只能保存字符串。
, G6 g& a* o8 r* ~十、Ajax# h1 u% c7 D% g/ K
jQuery的Ajax方法,用于异步操作。
+ O8 ^$ T, D$ h& `" ?$ w$ U" G$ \我们可以定义一个request函数,模拟Ajax方法。
$ N8 i5 y3 f% f: o5 {  u: [ egvSuA02GgAGUhSV.jpg ( g9 }6 p! ?$ [  I! i6 i2 @& {
然后,基于request函数,模拟jQuery的get和post方法。* H% x1 ?5 G" n8 x: n/ O" x
十一、动画( j& W! X$ P* c9 s7 M. v
jQuery的animate方法,用于生成动画效果。6 _4 L8 F7 u' Y4 o
jQuery的动画效果,很大部分基于DOM。但是目前,CSS 3的动画远比DOM强
, ?7 s1 c! C2 L大,所以可以把动画效果写进CSS,然后通过操作DOM元素的class,来展示动画。/ ^3 a$ y: K2 x* U* k
如果需要对动画使用回调函数,CSS 3也定义了相应的事件。
% `  o/ F: c3 V十二、替代方案: Y6 c) T8 X( |
下面就探讨如何用JavaScript标准语法,取代jQuery的一些主要功能,做到jQuery-free。2 o7 F7 S3 x) R3 g7 E
一、选取DOM元素8 w* s9 R! w3 F/ ^, i  v4 x. b
jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。: w" e+ A4 {6 ~7 M7 g* E
这里需要注意的是,querySelectorAll方法返回的是NodeList对象,它很像数组(有数字索引和length属性),但不是数组,不能使用pop、push等数组特有方法。如果有需要,可以考虑将Nodelist对象转为数组。
# c3 H* X- C$ _8 a1 C; Q二、DOM操作: e6 |4 n9 E* d8 @6 G& z- u
DOM本身就具有很丰富的操作方法,可以取代jQuery提供的操作方法。% l6 p4 n# E2 c
尾部追加DOM元素。( Y8 P- M! t5 m3 _/ u) B
头部插入DOM元素。9 z8 Y! M8 i0 c1 C1 p% V# \
删除DOM元素。: n7 m+ U1 S7 d# A4 n* e
三、事件的监听$ E1 _% j0 P! ]0 ^9 ?- d# A& L' {
jQuery的on方法,完全可以用addEventListener模拟。6 l" }4 [' d7 J, S! \- Q
为了使用方便,可以在NodeList对象上也部署这个方法。
1 {( a& V; `( V! K* }/ d0 H/ L四、事件的触发
- `/ W8 M" m$ g( RjQuery的trigger方法则需要单独部署,相对复杂一些。
% c. u7 [. s9 e# c% @: k  S- k3 j在NodeList对象上也部署这个方法。
$ {" {) b+ V- k0 S- U" x# j2 L五、document.ready
  g! `9 ^" a# v, O+ P! x目前的最佳实践,是将JavaScript脚本文件都放在页面底部加载。这样的话,其实document.ready方法(jQuery简写为$(function))已经不必要了,因为等到运行的时候,DOM对象已经生成了。
, q3 Z+ w3 {" s' z5 F2 ]六、attr方法
! l4 N2 u) t1 S, U9 wjQuery使用attr方法,读写网页元素的属性。
% y# u) T7 O/ k2 j8 ~" WDOM元素允许直接读取属性值,写法要简洁许多。3 f! J6 ^2 T, `0 B
由于jQuery体积过大,替代方案层出不穷。# d! H2 ?# s" d% _: ~6 S( L
其中,最有名的是zepto.js。它的设计目标是以最小的体积,做到最大兼容jQuery的API。zepto.js 1.0版的原始大小是55KB,优化后是29KB,gzip压缩后为10KB。
2 f! Z# r: Y& u* F, \如果不求最大兼容,只希望模拟jQuery的基本功能,那么,min.js优化后只有200字节,而dolla优化后是1.7KB。
; X/ A+ P0 F' g9 z' H此外,jQuery本身采用模块设计,可以只选择使用自己需要的模块。具体做法参见它的github网站,或者使用专用的Web界面。1 t& k3 V4 v: g! M& q  }
十三、参考链接" O) }+ ^5 [/ ]3 M& A# n
Remy Sharp,I knowjQuery. Now what?2 C2 Q+ j. R% x+ [! b, E
Hemanth.HM,Power ofVanilla JS9 e5 ]/ ?. Z- q3 {! c: |4 @
Burke Holland,5 Things YouShould Stop Doing With jQuery
/ I- }4 Z* [" l2 m0 g& a后语# i. m: P  M# E, e
你学习js是从什么时候开始的?从哪方面开始入手的,欢迎讨论~" u, h1 }' J+ d) q; k! \
关于本文

0

主题

7

帖子

20

积分

1°伸手党

Rank: 2

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

使用道具 举报

网站简介

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