cainiaoblog 23.2.171

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (401) hide show
  1. package/CNAME +1 -0
  2. package/MP_verify_o6dHCK5mIkxNpzvZ.txt +1 -0
  3. package/README.md +8 -0
  4. package/about/index.html +54 -0
  5. package/ads.txt +1 -0
  6. package/app/manual.html +104 -0
  7. package/appConfigs/config +1 -0
  8. package/archives/2018/index.html +48 -0
  9. package/archives/2019/index.html +48 -0
  10. package/archives/2019/page/2/index.html +48 -0
  11. package/archives/2020/index.html +48 -0
  12. package/archives/2021/index.html +48 -0
  13. package/archives/2022/index.html +48 -0
  14. package/archives/2023/index.html +48 -0
  15. package/archives/index.html +48 -0
  16. package/archives/page/2/index.html +48 -0
  17. package/archives/page/3/index.html +48 -0
  18. package/article/10047.html +148 -0
  19. package/article/10164.html +64 -0
  20. package/article/10624.html +436 -0
  21. package/article/10745.html +586 -0
  22. package/article/11674.html +71 -0
  23. package/article/11939.html +72 -0
  24. package/article/12238.html +86 -0
  25. package/article/1230.html +533 -0
  26. package/article/13265.html +69 -0
  27. package/article/13823.html +78 -0
  28. package/article/14125.html +72 -0
  29. package/article/14192.html +561 -0
  30. package/article/14375.html +85 -0
  31. package/article/14744.html +83 -0
  32. package/article/14936.html +451 -0
  33. package/article/1518.html +250 -0
  34. package/article/15428.html +71 -0
  35. package/article/15518.html +288 -0
  36. package/article/15569.html +418 -0
  37. package/article/1566.html +122 -0
  38. package/article/16017.html +156 -0
  39. package/article/16947.html +440 -0
  40. package/article/17096.html +82 -0
  41. package/article/17246.html +89 -0
  42. package/article/17575.html +350 -0
  43. package/article/179.html +757 -0
  44. package/article/18039.html +233 -0
  45. package/article/18071.html +375 -0
  46. package/article/18142.html +71 -0
  47. package/article/19909.html +160 -0
  48. package/article/20014.html +89 -0
  49. package/article/20021.html +389 -0
  50. package/article/20037.html +280 -0
  51. package/article/20056.html +95 -0
  52. package/article/20093.html +404 -0
  53. package/article/2021.html +607 -0
  54. package/article/20459.html +115 -0
  55. package/article/20613.html +263 -0
  56. package/article/20635.html +71 -0
  57. package/article/21317.html +71 -0
  58. package/article/21320.html +90 -0
  59. package/article/21782.html +548 -0
  60. package/article/22230.html +435 -0
  61. package/article/22237.html +347 -0
  62. package/article/22398.html +109 -0
  63. package/article/22422.html +270 -0
  64. package/article/22565.html +300 -0
  65. package/article/23046.html +250 -0
  66. package/article/23083.html +215 -0
  67. package/article/23195.html +297 -0
  68. package/article/23301.html +835 -0
  69. package/article/23589.html +285 -0
  70. package/article/23655.html +338 -0
  71. package/article/23864.html +76 -0
  72. package/article/23914.html +96 -0
  73. package/article/24169.html +135 -0
  74. package/article/24581.html +349 -0
  75. package/article/2475.html +500 -0
  76. package/article/24826.html +77 -0
  77. package/article/24924.html +247 -0
  78. package/article/25164.html +1495 -0
  79. package/article/25318.html +394 -0
  80. package/article/25710.html +1129 -0
  81. package/article/25734.html +83 -0
  82. package/article/26083.html +174 -0
  83. package/article/26147.html +283 -0
  84. package/article/26291.html +110 -0
  85. package/article/26354.html +71 -0
  86. package/article/26624.html +145 -0
  87. package/article/26639.html +298 -0
  88. package/article/26850.html +138 -0
  89. package/article/26940.html +258 -0
  90. package/article/27796.html +190 -0
  91. package/article/27800.html +161 -0
  92. package/article/28963.html +159 -0
  93. package/article/28976.html +247 -0
  94. package/article/29042.html +72 -0
  95. package/article/29596.html +81 -0
  96. package/article/29619.html +183 -0
  97. package/article/29623.html +329 -0
  98. package/article/29829.html +205 -0
  99. package/article/29abbd1c.html +112 -0
  100. package/article/30215.html +178 -0
  101. package/article/30552.html +78 -0
  102. package/article/30818.html +201 -0
  103. package/article/31330.html +364 -0
  104. package/article/3154.html +577 -0
  105. package/article/31695.html +348 -0
  106. package/article/31826.html +71 -0
  107. package/article/31843.html +132 -0
  108. package/article/32280.html +212 -0
  109. package/article/32431.html +74 -0
  110. package/article/32443.html +72 -0
  111. package/article/32732.html +122 -0
  112. package/article/3286.html +251 -0
  113. package/article/32960.html +198 -0
  114. package/article/33713.html +72 -0
  115. package/article/33899.html +615 -0
  116. package/article/34351.html +74 -0
  117. package/article/34372.html +89 -0
  118. package/article/34410.html +74 -0
  119. package/article/34431.html +118 -0
  120. package/article/3447.html +75 -0
  121. package/article/34474.html +142 -0
  122. package/article/34871.html +147 -0
  123. package/article/35397.html +175 -0
  124. package/article/3544.html +199 -0
  125. package/article/35503.html +115 -0
  126. package/article/35624.html +84 -0
  127. package/article/35697.html +384 -0
  128. package/article/35863.html +73 -0
  129. package/article/36037.html +253 -0
  130. package/article/36118.html +71 -0
  131. package/article/3621.html +119 -0
  132. package/article/36251.html +296 -0
  133. package/article/36642.html +352 -0
  134. package/article/37102.html +763 -0
  135. package/article/37336.html +351 -0
  136. package/article/37351.html +89 -0
  137. package/article/3760.html +294 -0
  138. package/article/37749.html +75 -0
  139. package/article/37789.html +83 -0
  140. package/article/38005.html +765 -0
  141. package/article/38009.html +284 -0
  142. package/article/38269.html +194 -0
  143. package/article/38344.html +88 -0
  144. package/article/38359.html +334 -0
  145. package/article/38423.html +379 -0
  146. package/article/38530.html +213 -0
  147. package/article/38743.html +268 -0
  148. package/article/38753.html +204 -0
  149. package/article/38881.html +71 -0
  150. package/article/39087.html +414 -0
  151. package/article/39309.html +84 -0
  152. package/article/39486.html +74 -0
  153. package/article/39637.html +306 -0
  154. package/article/39839.html +72 -0
  155. package/article/39937.html +152 -0
  156. package/article/39970.html +71 -0
  157. package/article/402.html +559 -0
  158. package/article/40698.html +71 -0
  159. package/article/40811.html +71 -0
  160. package/article/40964.html +462 -0
  161. package/article/41011.html +322 -0
  162. package/article/41152.html +78 -0
  163. package/article/41696.html +71 -0
  164. package/article/41717.html +281 -0
  165. package/article/41777.html +149 -0
  166. package/article/419.html +985 -0
  167. package/article/4233.html +136 -0
  168. package/article/4292.html +86 -0
  169. package/article/43302.html +96 -0
  170. package/article/43397.html +106 -0
  171. package/article/43724.html +281 -0
  172. package/article/43999.html +224 -0
  173. package/article/44426.html +77 -0
  174. package/article/44964.html +137 -0
  175. package/article/45004.html +123 -0
  176. package/article/4510.html +83 -0
  177. package/article/45156.html +320 -0
  178. package/article/45157.html +52 -0
  179. package/article/45267.html +87 -0
  180. package/article/45641.html +207 -0
  181. package/article/45960.html +75 -0
  182. package/article/46100.html +1262 -0
  183. package/article/46366.html +74 -0
  184. package/article/46771.html +96 -0
  185. package/article/46911.html +517 -0
  186. package/article/46948.html +137 -0
  187. package/article/46ee4850.html +349 -0
  188. package/article/47019.html +84 -0
  189. package/article/47532.html +94 -0
  190. package/article/4783.html +429 -0
  191. package/article/47972.html +72 -0
  192. package/article/48216.html +127 -0
  193. package/article/48252.html +185 -0
  194. package/article/48520.html +74 -0
  195. package/article/48722.html +75 -0
  196. package/article/48807.html +99 -0
  197. package/article/49126.html +323 -0
  198. package/article/50001.html +88 -0
  199. package/article/50058.html +151 -0
  200. package/article/50343.html +410 -0
  201. package/article/50510.html +82 -0
  202. package/article/51082.html +98 -0
  203. package/article/51677.html +111 -0
  204. package/article/5204.html +1085 -0
  205. package/article/52500.html +538 -0
  206. package/article/52689.html +259 -0
  207. package/article/52877.html +569 -0
  208. package/article/53125.html +191 -0
  209. package/article/53428.html +251 -0
  210. package/article/53524.html +74 -0
  211. package/article/53698.html +322 -0
  212. package/article/53803e6.html +93 -0
  213. package/article/53924.html +291 -0
  214. package/article/53962.html +253 -0
  215. package/article/54006.html +71 -0
  216. package/article/54018.html +88 -0
  217. package/article/54161.html +83 -0
  218. package/article/54178.html +69 -0
  219. package/article/54258.html +327 -0
  220. package/article/54295.html +214 -0
  221. package/article/54313.html +1976 -0
  222. package/article/54351.html +90 -0
  223. package/article/54604.html +80 -0
  224. package/article/54632.html +71 -0
  225. package/article/54912.html +756 -0
  226. package/article/54918.html +129 -0
  227. package/article/55119.html +136 -0
  228. package/article/55756.html +118 -0
  229. package/article/55769.html +136 -0
  230. package/article/55870.html +161 -0
  231. package/article/56139.html +92 -0
  232. package/article/56557.html +69 -0
  233. package/article/56604.html +69 -0
  234. package/article/56816.html +266 -0
  235. package/article/56926.html +153 -0
  236. package/article/57747.html +409 -0
  237. package/article/57965.html +475 -0
  238. package/article/58816.html +78 -0
  239. package/article/59059.html +435 -0
  240. package/article/59095.html +350 -0
  241. package/article/59349.html +244 -0
  242. package/article/59402.html +216 -0
  243. package/article/59448.html +55 -0
  244. package/article/59870.html +94 -0
  245. package/article/59877.html +208 -0
  246. package/article/5dbb6f41.html +86 -0
  247. package/article/6008.html +75 -0
  248. package/article/60327.html +126 -0
  249. package/article/6035.html +76 -0
  250. package/article/60428.html +71 -0
  251. package/article/60544.html +128 -0
  252. package/article/61319.html +95 -0
  253. package/article/61367.html +93 -0
  254. package/article/624d1918.html +292 -0
  255. package/article/62543.html +71 -0
  256. package/article/62887.html +169 -0
  257. package/article/63074.html +120 -0
  258. package/article/63266.html +311 -0
  259. package/article/63351.html +74 -0
  260. package/article/63542.html +104 -0
  261. package/article/63824.html +275 -0
  262. package/article/64051.html +653 -0
  263. package/article/64189b69.html +72 -0
  264. package/article/64354.html +75 -0
  265. package/article/64869.html +79 -0
  266. package/article/64923.html +596 -0
  267. package/article/65128.html +95 -0
  268. package/article/65295.html +79 -0
  269. package/article/6888.html +75 -0
  270. package/article/7065.html +84 -0
  271. package/article/7455.html +85 -0
  272. package/article/7a3ef8f.html +315 -0
  273. package/article/8140.html +188 -0
  274. package/article/8190.html +85 -0
  275. package/article/8225.html +78 -0
  276. package/article/84c9ccd6.html +159 -0
  277. package/article/8f9a9ae3.html +82 -0
  278. package/article/9174.html +73 -0
  279. package/article/9738.html +294 -0
  280. package/article/a4145266.html +71 -0
  281. package/article/bedea419.html +72 -0
  282. package/article/bf7e7421.html +78 -0
  283. package/article/c1867fbf.html +103 -0
  284. package/article/c5576490.html +70 -0
  285. package/article/dcb0db28.html +76 -0
  286. package/article/fc3b727a.html +79 -0
  287. package/atom.xml +445 -0
  288. package/baidusitemap.xml +1079 -0
  289. package/blocks/dns.txt +264 -0
  290. package/blocks/filter.txt +1070 -0
  291. package/blocks/script.js +42 -0
  292. package/categories/CDN/index.html +48 -0
  293. package/categories/IDE/index.html +48 -0
  294. package/categories/git/index.html +48 -0
  295. package/categories/hexo/index.html +48 -0
  296. package/categories//345/205/254/345/205/261/350/212/202/346/227/245/index.html +48 -0
  297. package/categories//345/210/206/344/272/253/index.html +48 -0
  298. package/categories//345/211/215/347/253/257/index.html +48 -0
  299. package/categories//345/211/215/347/253/257/page/2/index.html +48 -0
  300. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250/index.html +48 -0
  301. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250//347/275/221/347/273/234/345/215/217/350/256/256/index.html +48 -0
  302. package/categories//345/215/232/345/256/242/index.html +48 -0
  303. package/categories//345/267/245/345/205/267/index.html +48 -0
  304. package/categories//345/271/277/345/221/212/350/277/207/346/273/244/index.html +48 -0
  305. package/categories//345/271/277/345/221/212/350/277/207/346/273/244//350/247/206/351/242/221/347/224/265/350/247/206/345/260/217/350/257/264/346/274/253/347/224/273/350/265/204/350/256/257/351/237/263/344/271/220/index.html +48 -0
  306. package/categories//346/255/243/345/210/231/index.html +48 -0
  307. package/categories//346/265/217/350/247/210/345/231/250/index.html +48 -0
  308. package/categories//347/256/227/346/263/225/index.html +48 -0
  309. package/categories//350/265/204/350/256/257/index.html +48 -0
  310. package/categories//350/275/273/346/235/276/344/270/200/345/210/273/index.html +48 -0
  311. package/cdn/css/font-awesome.min.css +4 -0
  312. package/cdn/css/grids-responsive-min.css +7 -0
  313. package/cdn/css/normalize.css +349 -0
  314. package/cdn/css/pure-min.css +11 -0
  315. package/cdn/fonts/fontawesome-webfont.eot +0 -0
  316. package/cdn/fonts/fontawesome-webfont.svg +2671 -0
  317. package/cdn/fonts/fontawesome-webfont.ttf +0 -0
  318. package/cdn/fonts/fontawesome-webfont.woff +0 -0
  319. package/cdn/fonts/fontawesome-webfont.woff2 +0 -0
  320. package/cdn/js/Valine.min.js +17 -0
  321. package/cdn/js/canvas-nest.js +1 -0
  322. package/cdn/js/clipboard.min.js +7 -0
  323. package/cdn/js/crypto-js.js +25 -0
  324. package/cdn/js/jquery.min.js +2 -0
  325. package/css/default.css +1144 -0
  326. package/css/donate.css +338 -0
  327. package/css/hbe.style.css +749 -0
  328. package/css/style.css +2095 -0
  329. package/donate/index.html +39 -0
  330. package/google917dcf72f6e5c7f5.html +1 -0
  331. package/guestbook/index.html +68 -0
  332. package/hosts/ads.txt +149 -0
  333. package/hosts/flash.txt +9 -0
  334. package/hosts/github.txt +6 -0
  335. package/hosts/google.txt +16936 -0
  336. package/hosts/winrar.txt +2 -0
  337. package/img/alipay.svg +46 -0
  338. package/img/bitcoin.svg +135 -0
  339. package/img/blog.ico +0 -0
  340. package/img/blog.png +0 -0
  341. package/img/gaba.png +0 -0
  342. package/img/github.svg +1 -0
  343. package/img/like.svg +1 -0
  344. package/img/mp-mini.jpg +0 -0
  345. package/img/mp.png +0 -0
  346. package/img/paypal.svg +63 -0
  347. package/img/upy_logo.svg +59 -0
  348. package/img/wechat.svg +49 -0
  349. package/index.html +48 -0
  350. package/jd_root.txt +1 -0
  351. package/js/codeblock-resizer.js +51 -0
  352. package/js/dark.js +12 -0
  353. package/js/donate.js +87 -0
  354. package/js/fixedPage.js +106 -0
  355. package/js/gitment.browser.js +3751 -0
  356. package/js/search.js +86 -0
  357. package/js/share.js +60 -0
  358. package/js/smartresize.js +32 -0
  359. package/js/totop.js +12 -0
  360. package/kankan/index.html +77 -0
  361. package/lib/hbe.js +293 -0
  362. package/package.json +25 -0
  363. package/page/10/index.html +49 -0
  364. package/page/11/index.html +59 -0
  365. package/page/12/index.html +67 -0
  366. package/page/13/index.html +63 -0
  367. package/page/14/index.html +66 -0
  368. package/page/15/index.html +60 -0
  369. package/page/16/index.html +60 -0
  370. package/page/17/index.html +62 -0
  371. package/page/18/index.html +61 -0
  372. package/page/19/index.html +58 -0
  373. package/page/2/index.html +48 -0
  374. package/page/20/index.html +57 -0
  375. package/page/21/index.html +61 -0
  376. package/page/22/index.html +55 -0
  377. package/page/23/index.html +64 -0
  378. package/page/24/index.html +60 -0
  379. package/page/25/index.html +58 -0
  380. package/page/26/index.html +48 -0
  381. package/page/27/index.html +58 -0
  382. package/page/3/index.html +48 -0
  383. package/page/4/index.html +48 -0
  384. package/page/5/index.html +51 -0
  385. package/page/6/index.html +51 -0
  386. package/page/7/index.html +51 -0
  387. package/page/8/index.html +53 -0
  388. package/page/9/index.html +48 -0
  389. package/randomcall/README.html +1 -0
  390. package/randomcall/lucker.html +290 -0
  391. package/randomcall/lucky.png +0 -0
  392. package/robots.txt +22 -0
  393. package/search.xml +6740 -0
  394. package/sitemap.xml +2669 -0
  395. package/tags//345/216/237/345/210/233/index.html +48 -0
  396. package/tags//345/250/261/344/271/220/index.html +48 -0
  397. package/tags//346/211/213/345/206/231/index.html +48 -0
  398. package/tags//347/226/253/346/203/205/index.html +48 -0
  399. package/tags//350/275/254/350/275/275/index.html +48 -0
  400. package/tags//350/275/254/350/275/275/page/2/index.html +48 -0
  401. package/v.html +90 -0
package/article/56816.html ADDED
@@ -0,0 +1,266 @@
1
+ <!DOCTYPE html><html lang="zh-CN" data-dark><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="前端壹菜鸟，记录工作难题，关注前端知识，收集精彩博文，做技术的搬运工"><meta name="msvalidate.01" content="0FE4D8B3381D3D87088996B886E1E2BD"><title>利用&quot;交叉观察者&quot;(IntersectionObserver接口)，轻松实现懒加载、吸顶、触底 | 前端壹菜鸟</title><link rel="stylesheet" type="text/css" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/css/style.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css@latest/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/grids-responsive-min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="icon" mask="" sizes="any" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="Shortcut Icon" type="image/x-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="apple-touch-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="apple-touch-icon-precomposed" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8385136408348258"></script><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><script>(function(){
2
+ var bp = document.createElement('script');
3
+ var curProtocol = window.location.protocol.split(':')[0];
4
+ if (curProtocol === 'https'){
5
+ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
6
+ }
7
+ else{
8
+ bp.src = 'http://push.zhanzhang.baidu.com/push.js';
9
+ }
10
+ var s = document.getElementsByTagName("script")[0];
11
+ s.parentNode.insertBefore(bp, s);
12
+ })();
13
+ </script><script>(function(){
14
+ var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
15
+ document.write('<script src="' + src + '" id="sozz"><\/script>');
16
+ })();
17
+ </script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
18
+ </script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
19
+ </script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">利用&quot;交叉观察者&quot;(IntersectionObserver接口)，轻松实现懒加载、吸顶、触底</h1><div class="post-meta"><span class="date">2019-09-29</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 2.1k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 8</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/56816.html#vcomment"><span class="waline-comment-count" data-path="/article/56816.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://juejin.im/post/5d665133e51d4561c83e7c83#heading-1</code><br>可以先看一下<code>MDN</code>中的介绍：<br><code>IntersectionObserver</code>接口，提供了一种异步观察<code>目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态</code>的方法，祖先元素与视窗(<code>viewport</code>)被称为根(<code>root</code>);</p>
20
+ <span id="more"></span>
21
+
22
+ <p>直接进入正题，<code>IntersectionObserver</code> 翻译为 “<code>交叉观察者</code>“，它的任务就是监听<code>目标元素</code>跟<code>指定父元素</code>（用户可指定，默认为<code>viewport</code>）是否在发生<code>交叉行为</code>，简单理解就是监听<code>目标元素</code>是否进入或者离开了<code>指定父元素</code>的内部（理解这句就行了，管他交不交叉呢），我好像在开车，但是你们没有证据 … 😐<br><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd5e48ee2fc2e9?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="xuehuayu.cn"><br>以下的<code>目标元素</code>简称为<code>目标</code>、<code>指定父元素</code>简称为<code>父亲</code>、<code>交叉行为</code>简称为<code>交叉</code>，<code>viewport</code>简称为<code>视窗</code> 👌</p>
23
+ <p>下面会有动图介绍，先忍忍！</p>
24
+ <h2 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h2><h4 id="1-构造函数"><a href="#1-构造函数" class="headerlink" title="1. 构造函数"></a>1. 构造函数</h4><pre><code>new IntersectionObserver(callback, options);
25
+ </code></pre>
26
+ <h4 id="2-callback"><a href="#2-callback" class="headerlink" title="2. callback"></a>2. callback</h4><p>发生<code>交叉</code>的回调，接受一个<code>entries</code>参数，返回当前<code>已监听</code>并且发生了<code>交叉</code>的<code>目标</code>集合（后面会举例说明为什么是”<code>且发生了交叉</code>“）：</p>
27
+ <pre><code>new IntersectionObserver(entries =&gt; &#123;
28
+ entries.forEach(item =&gt; console.log(item));
29
+ // ...
30
+ &#125;);
31
+ </code></pre>
32
+ <p>我们看看<code>item</code>里面包含哪些<code>常用</code>属性：<br>属性说明boundingClientRect空间信息intersectionRatio元素可见区域的占比isIntersecting字面理解为是否正在<code>交叉</code>，可用做判断元素是否可见target目标节点，就跟<code>event.target</code>一样<br>注意：页面初始化的时候会触发一次<code>callback</code>，<code>entries</code>为<code>所有已监听的目标集合</code>✅</p>
33
+ <h4 id="3-options"><a href="#3-options" class="headerlink" title="3. options"></a>3. options</h4><p>顾名思义，它是一个<code>配置</code>参数，对象类型，非必填，<code>常用</code>属性如下：<br>属性说明root指定父元素，默认为<code>视窗</code>rootMargin触发<code>交叉</code>的偏移值，默认为”0px 0px 0px 0px”（上左下右，正数为向外扩散，负数则向内收缩）<br> new IntersectionObserver(callback, {<br> root: document.querySelector(“xx”),<br> rootMargin: “0px 0px -100px 0px”<br> });</p>
34
+ <p>如果设置<code>rootMargin</code>为”<code>20px 0px 30px 30px</code>“，那么元素未到达<code>视窗</code>时，就已经切换为<code>可见</code>状态了：</p>
35
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd6260edf6ebe5?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="xuehuayu.cn"></p>
36
+ <h4 id="4-常用方法"><a href="#4-常用方法" class="headerlink" title="4. 常用方法"></a>4. 常用方法</h4><p>名称说明参数observe开始监听一个目标元素节点unobserve停止监听一个目标元素节点takeRecords返回所有监听的目标元素集合disconnect停止所有监听</p>
37
+ <h2 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h2><h4 id="1-假设页面上有一个class-quot-box-quot-的盒子且父元素为视窗："><a href="#1-假设页面上有一个class-quot-box-quot-的盒子且父元素为视窗：" class="headerlink" title="1. 假设页面上有一个class=&quot;box&quot;的盒子且父元素为视窗："></a>1. 假设页面上有一个<code>class=&quot;box&quot;</code>的盒子且父元素为<code>视窗</code>：</h4><pre><code>let box = document.querySelector(&quot;.box&quot;);
38
+
39
+ let observer = new IntersectionObserver(entries =&gt; &#123;
40
+ entries.forEach(item =&gt; &#123;
41
+ let tips = item.isIntersecting ? &quot;进入了父元素的内部&quot; : &quot;离开了父元素的内部&quot;;
42
+ console.log(tips);
43
+ &#125;);
44
+ &#125;);
45
+
46
+ observer.observe(box); // 监听一个box
47
+ </code></pre>
48
+ <p>效果如下：</p>
49
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd5ed1eb7a2546?imageslim" alt="xuehuayu.cn"></p>
50
+ <h4 id="2-假设页面上有多个class-quot-box-quot-的盒子且父元素为视窗："><a href="#2-假设页面上有多个class-quot-box-quot-的盒子且父元素为视窗：" class="headerlink" title="2. 假设页面上有多个class=&quot;box&quot;的盒子且父元素为视窗："></a>2. 假设页面上有多个<code>class=&quot;box&quot;</code>的盒子且父元素为<code>视窗</code>：</h4><pre><code>let box = document.querySelectorAll(&quot;.box&quot;);
51
+
52
+ let observer = new IntersectionObserver(entries =&gt; console.log(`发生交叉行为，目标元素有$&#123;entries.length&#125;个`));
53
+
54
+ box.forEach(item =&gt; observer.observe(item)); // 监听多个box
55
+ </code></pre>
56
+ <p>当所有盒子距离视窗顶部距离<code>一致</code>时，效果如下:</p>
57
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd5fd77e7cf265?imageslim" alt="xuehuayu.cn"><br>当所有盒子距离视窗顶部距离<code>不一致</code>时，效果如下:</p>
58
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd5fdc6a297fe1?imageslim" alt="xuehuayu.cn"><br>为什么要<code>举例</code>以上两种情况呢，因为<code>entries</code>是返回当前<code>已监听</code>并且发生了<code>交叉</code>的<code>目标集合</code>，第一种情况，大家都<code>一起</code>发生<code>交叉</code>，固每次返回的集合长度都为<code>三</code>；第二种情况则是每个目标<code>轮流</code>发生<code>交叉</code>，且当前只触发了<code>一个</code>，所以每次返回的集合长度只有<code>一</code>✅</p>
59
+ <h4 id="3-指定父元素"><a href="#3-指定父元素" class="headerlink" title="3. 指定父元素"></a>3. 指定父元素</h4><p>假设<code>html</code>如下:</p>
60
+ <pre><code>&lt;div class=&quot;parent&quot;&gt;
61
+ &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;
62
+ &lt;/div&gt;
63
+ </code></pre>
64
+ <p>然后开始监听：</p>
65
+ <pre><code>let child = document.querySelector(&quot;.child&quot;);
66
+
67
+ let observer = new IntersectionObserver(entries =&gt; &#123;
68
+ entries.forEach(item =&gt; &#123;
69
+ console.log(item.isIntersecting ? &quot;可见&quot; : &quot;不可见&quot;);
70
+ &#125;);
71
+ &#125;, &#123;
72
+ root: document.querySelector(&quot;.parent&quot;)
73
+ &#125;);
74
+
75
+ observer.observe(child); // 开始监听child
76
+ </code></pre>
77
+ <p>效果如下：</p>
78
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd638b4cff37e2?imageslim" alt="xuehuayu.cn"></p>
79
+ <h2 id="实际应用"><a href="#实际应用" class="headerlink" title="实际应用"></a>实际应用</h2><h4 id="1-图片懒加载"><a href="#1-图片懒加载" class="headerlink" title="1. 图片懒加载"></a>1. 图片懒加载</h4><p>以前都是监听浏览器滚动，然后遍历拿到每个图片的空间信息，然后判断一些位置信息从而进行图片加载；而现在只需要交给<code>交叉观察者</code>去做；</p>
80
+ <p>假设<code>html</code>结构如下：</p>
81
+ <pre><code>// 多个
82
+ &lt;img src=&quot;&quot; data-origin=&quot;图片链接&quot;&gt;
83
+ </code></pre>
84
+ <p>然后开始监听：</p>
85
+ <pre><code>let images = document.querySelectorAll(&quot;img.lazyload&quot;);
86
+
87
+ let observer = new IntersectionObserver(entries =&gt; &#123;
88
+ entries.forEach(item =&gt; &#123;
89
+ if (item.isIntersecting) &#123;
90
+ item.target.src = item.target.dataset.origin; // 开始加载图片
91
+ observer.unobserve(item.target); // 停止监听已开始加载的图片
92
+ &#125;
93
+ &#125;);
94
+ &#125;);
95
+
96
+ images.forEach(item =&gt; observer.observe(item));
97
+ </code></pre>
98
+ <p>效果如下：</p>
99
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd60f3b3f1a495?imageslim" alt="xuehuayu.cn"><br>把网速调慢：</p>
100
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd60f51f89057d?imageslim" alt="xuehuayu.cn"><br>设置<code>rootMargin</code>偏移值为”<code>0px 0px -100px 0px</code>“（底部向内收缩）：</p>
101
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd61d39a83b0a8?imageslim" alt="xuehuayu.cn"><br>该方法还有一个好处，那就是当页面上某个节点存在横向滚动条的时候，一样应对自如：</p>
102
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd61a02c0a19ab?imageslim" alt="xuehuayu.cn"><br>传统的懒加载只是监听全局滚动条的滚动，像这种小细节还是无法实现的（传统的实现方法并不是判断目标是否出现在<code>视窗</code>，所以横向的图片会一起加载，即使你没有向左滑动），所以这也是<code>交叉观察者</code>的一大优点✅</p>
103
+ <h4 id="2-触底"><a href="#2-触底" class="headerlink" title="2. 触底"></a>2. 触底</h4><p>我们在列表底部放一个<code>参照元素</code>，然后让<code>交叉观察者</code>去监听；</p>
104
+ <p>假设<code>html</code>结构如下：</p>
105
+ <pre><code>&lt;!-- 数据列表 --&gt;
106
+ &lt;ul&gt;
107
+ &lt;li&gt;index&lt;/li&gt;
108
+ &lt;/ul&gt;
109
+
110
+ &lt;!-- 参照元素 --&gt;
111
+ &lt;div class=&quot;reference&quot;&gt;&lt;/div&gt;
112
+ </code></pre>
113
+ <p>然后监听参照元素：</p>
114
+ <pre><code>new IntersectionObserver(entries =&gt; &#123;
115
+ let item = entries[0]; // 拿第一个就行，反正只有一个
116
+ if (item.isIntersecting) console.log(&quot;滚动到了底部，开始请求数据&quot;);
117
+ &#125;).observe(document.querySelector(&quot;.reference&quot;)); // 监听参照元素
118
+ </code></pre>
119
+ <p>效果如下：</p>
120
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd62f5fa1285fb?imageslim" alt="xuehuayu.cn"></p>
121
+ <h4 id="3-吸顶"><a href="#3-吸顶" class="headerlink" title="3. 吸顶"></a>3. 吸顶</h4><p>实现元素吸顶的方式有很多种，如css的<code>position: sticky</code>，兼容性较差；如果用<code>交叉观察者</code>实现也很方便，同样也要放一个<code>参照元素</code>；</p>
122
+ <p>假设<code>html</code>结构如下：</p>
123
+ <pre><code>&lt;!-- 参照元素 --&gt;
124
+ &lt;div class=&quot;reference&quot;&gt;&lt;/div&gt;
125
+
126
+ &lt;nav&gt;我可以吸顶&lt;/nav&gt;
127
+ </code></pre>
128
+ <p>假设<code>scss</code>代码如下：</p>
129
+ <pre><code>nav &#123;
130
+ &amp;.fixed &#123;
131
+ position: fixed;
132
+ top: 0;
133
+ left: 0;
134
+ width: 100%;
135
+ &#125;
136
+ &#125;
137
+ </code></pre>
138
+ <p>开始监听：</p>
139
+ <pre><code>let nav = document.querySelector(&#39;nav&#39;);
140
+ let reference = document.querySelector(&quot;.reference&quot;);
141
+
142
+ new IntersectionObserver(entries =&gt; &#123;
143
+
144
+ let item = entries[0];
145
+ let top = item.boundingClientRect.top;
146
+
147
+ // 当参照元素的的top值小于0，也就是在视窗的顶部的时候，开始吸顶，否则移除吸顶
148
+ if (top &lt; 0) nav.classList.add(&quot;fixed&quot;);
149
+ else nav.classList.remove(&quot;fixed&quot;);
150
+
151
+ &#125;).observe(reference);
152
+ </code></pre>
153
+ <p>效果如下：</p>
154
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd69467ab027cc?imageslim" alt="xuehuayu.cn"><br>但是有个问题，当你滚动的慢的时候，会掉进一个死循环：</p>
155
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd6c0564e35a27?imageslim" alt="xuehuayu.cn"><br>为了方便观察，我们把参考元素加一个高度跟颜色：</p>
156
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd6c07116980ed?imageslim" alt="xuehuayu.cn"><br>问题很明显，当给<code>nav</code>增加<code>fixed</code>定位时，<code>nav</code>脱离了文档流，自然<code>参考元素</code>会往下掉，然后往下掉又发生了<code>交叉</code>，从而去除<code>fixed</code>定位，陷入一个死循环;</p>
157
+ <p>思考了一会，解决办法是，让<code>参考元素</code>绝对定位至<code>nav</code>的上方：</p>
158
+ <pre><code>let nav = document.querySelector(&#39;nav&#39;);
159
+ let reference = document.querySelector(&quot;.reference&quot;);
160
+
161
+ reference.style.top = nav.offsetTop + &quot;px&quot;;
162
+
163
+ // 以下代码不变 ...
164
+ </code></pre>
165
+ <p>这样，即使<code>nav</code>脱离的文档流，也不会影响<code>参考元素</code>的位置：</p>
166
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd6cf23d7538f0?imageslim" alt="xuehuayu.cn"></p>
167
+ <h4 id="4-动画展示"><a href="#4-动画展示" class="headerlink" title="4. 动画展示"></a>4. 动画展示</h4><p>相信很多人都需要过这种需求，当某个元素出现的时候就给该元素加个动画，比如渐变、偏移等；</p>
168
+ <p>假设<code>html</code>结构如下：</p>
169
+ <pre><code>&lt;ul&gt;
170
+ &lt;li&gt;&lt;/li&gt;
171
+ &lt;/ul&gt;
172
+ </code></pre>
173
+ <p>假设<code>scss</code>代码如下:</p>
174
+ <pre><code>ul &#123;
175
+ li &#123;
176
+ &amp;.show &#123;
177
+ // 默认从左边进来
178
+ animation: left 1s ease;
179
+
180
+ // 偶数从右边进来
181
+ &amp;:nth-child(2n) &#123;
182
+ animation: right 1s ease;
183
+ &#125;
184
+ &#125;
185
+ &#125;
186
+ &#125;
187
+
188
+ @keyframes left &#123;
189
+ from &#123;
190
+ opacity: 0;
191
+ transform: translate(-20px, 20px); // right动画改成20px, 20px即可
192
+ &#125;
193
+
194
+ to &#123;
195
+ opacity: 1;
196
+ &#125;
197
+ &#125;
198
+ </code></pre>
199
+ <p>然后开始监听：</p>
200
+ <pre><code>let list = document.querySelectorAll(&quot;ul li&quot;);
201
+
202
+ let observer = new IntersectionObserver(entries =&gt; &#123;
203
+ entries.forEach(item =&gt; &#123;
204
+ if (item.isIntersecting) &#123;
205
+ item.target.classList.add(&quot;show&quot;); // 增加show类名
206
+ observer.unobserve(item.target); // 移除监听
207
+ &#125;
208
+ &#125;);
209
+ &#125;);
210
+
211
+ list.forEach(item =&gt; observer.observe(item));
212
+ </code></pre>
213
+ <p>效果如下:</p>
214
+ <p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd6867993fe3ef?imageslim" alt="xuehuayu.cn"></p>
215
+ <h2 id="兼容性"><a href="#兼容性" class="headerlink" title="兼容性"></a>兼容性</h2><p>IE不兼容，不过有<a target="_blank" rel="noopener" href="https://github.com/w3c/IntersectionObserver/tree/master/polyfill">官方的polyfill</a>✅</p>
216
+ <h2 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h2><p>暂时就发现这么多用途啦，值得注意的是，必须是<code>子元素跟父元素发生交叉</code>，如果你想检查两个<code>非父子关系的交叉</code>，那是<code>不行</code>的嘻嘻，如果你觉得这篇文章不错，请别忘记点个<code>赞</code>跟<code>关注</code>哦~😊</p>
217
+ </div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&amp;WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&amp;UnionPayQR=null&amp;GitHub=null&amp;BTCQR=null&amp;BTCKEY=null&amp;PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/56816.html">https://xuehuayu.cn/article/56816.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/23301.html">30 seconds of code 30秒就能理解的JavaScript优秀代码</a><a class="next" href="/article/8140.html">Array.from() 五个超好用的用途</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
218
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
219
+ const locale = {
220
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
221
+ sofa: '沙发空缺中，还不快抢~',
222
+ };
223
+ Waline.init({
224
+ el: '#vcomment',
225
+ serverURL: serverURL,
226
+ pageSize: '20',
227
+ visitor: true, // 阅读量统计
228
+ requiredMeta: ['nick', 'mail'],
229
+ emoji: [
230
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
231
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
232
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
233
+ ],
234
+ locale,
235
+ pageview: true
236
+ })
237
+ </script></div></div></div><div class="pure-u-1 pure-u-md-1-4 fixed-search hidden_mid_and_down"><div id="sidebar"><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/search.min.js"></script><div class="widget"><div class="widget-search"><input class="search" type="radio" name="search" value="baidu" id="baidu" checked="checked"/><label class="label" for="baidu" title="百度全站搜索">百度</label><input class="search" type="radio" name="search" value="google" id="google"/><label class="label" for="google" title="谷歌全站搜索">谷歌</label><input class="search" type="radio" name="search" value="self" id="self"/><label class="label" for="self" title="使用站内搜索">站内</label></div><div class="widget" id="search"><form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"/><input type="hidden" name="si" value="xuehuayu.cn"/><input type="hidden" name="cl" value="3"/><input type="hidden" name="ct" value="2097152"/><input type="hidden" name="s" value="on"/><input class="search-submit" type="submit" value=""/></form></div></div><script>$('input[type=radio][name=search]').change(function() {
238
+ var val = $(this).val()
239
+ var self = '<div class="search-form"><input id="local-search-input" placeholder="站内搜索，首次慢" type="search" name="q" results="0"><input class="search-submit" type="submit" value=""/><div id="local-search-result"></div></div>'
240
+ var google = '<form class="search-form" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="q" maxlength="30" placeholder="谷歌全站搜索"><input type="hidden" name="sitesearch" value="xuehuayu.cn"><input class="search-submit" type="submit" value=""/></form>'
241
+ var baidu = '<form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"><input type="hidden" name="si" value="xuehuayu.cn"><input type="hidden" name="cl" value="3"><input type="hidden" name="ct" value="2097152"><input type="hidden" name="s" value="on"><input class="search-submit" type="submit" value=""/></form>'
242
+
243
+ if (val === 'self') {
244
+ $('#search').html(self)
245
+ var search_path = 'search.xml';
246
+ if (search_path.length == 0) {
247
+ search_path = 'search.xml';
248
+ }
249
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
250
+ searchFunc(path, 'local-search-input', 'local-search-result');
251
+ } else if (val === 'baidu') {
252
+ $('#search').html(baidu)
253
+ } else if (val === 'google') {
254
+ $('#search').html(google)
255
+ }
256
+ })</script><div class="widget widget-wxmp"><img alt="微信公众号" width="100%" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/mp-mini.jpg"/></div><div class="widget widget-categories"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CDN/">CDN</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%85%AC%E5%85%B1%E8%8A%82%E6%97%A5/">公共节日</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E4%BA%AB/">分享</a><span class="category-list-count">29</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">191</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/">网络协议</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/">广告过滤</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/%E8%A7%86%E9%A2%91%E7%94%B5%E8%A7%86%E5%B0%8F%E8%AF%B4%E6%BC%AB%E7%94%BB%E8%B5%84%E8%AE%AF%E9%9F%B3%E4%B9%90/">视频电视小说漫画资讯音乐</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%AD%A3%E5%88%99/">正则</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%B5%84%E8%AE%AF/">资讯</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BD%BB%E6%9D%BE%E4%B8%80%E5%88%BB/">轻松一刻</a><span class="category-list-count">1</span></li></ul></div><div class="widget widget-tags"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 15px;">原创</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 15px;">转载</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 15px;">手写</a> <a href="/tags/%E7%96%AB%E6%83%85/" style="font-size: 15px;">疫情</a> <a href="/tags/%E5%A8%B1%E4%B9%90/" style="font-size: 15px;">娱乐</a></div></div><div class="widget widget-recent-posts"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/article/c5576490.html">面试准备</a></li><li class="post-list-item"><a class="post-list-link" href="/article/84c9ccd6.html">精读《SolidJS》</a></li><li class="post-list-item"><a class="post-list-link" href="/article/53803e6.html">git提交注释规范</a></li><li class="post-list-item"><a class="post-list-link" href="/article/a4145266.html">前端数组拍平flat一行代码</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bedea419.html">一道前端this面试题</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bf7e7421.html">git多账号配置</a></li></ul></div><div class="widget widget-links"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://github.com/npljy?utm_source=xuehuayu.cn" title="GitHub" target="_blank">GitHub</a><ul></ul><a href="https://laonongmin.online?utm_source=xuehuayu.cn" title="看看" target="_blank">看看</a><ul></ul><a href="https://cainiaoblog.cn?utm_source=xuehuayu.cn" title="菜鸟博客" target="_blank">菜鸟博客</a><ul></ul><a href="mailto:cainiaoblog@126.com" title="友链联系" target="_blank">友链联系</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer"><div class="flex-block justify-center align-center flex-wrap"><a class="gxba-link" id="gxba" rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">京ICP备20007647号-2</a><a class="gaba-link" id="gaba-link" rel="nofollow" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031264"><img class="nofancybox" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/gaba.png" alt=""/><span id="gaba">京公网安备 11010802031264号</span><span style="padding-right: 10px;"></span></a><span>Copyright © 2023 </span><a href="/." rel="nofollow">前端壹菜鸟. </a><script>(function(){
257
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
258
+ if (cnb) {
259
+ var gxba =document.getElementById('gxba')
260
+ var gaba =document.getElementById('gaba')
261
+ var gabaLink =document.getElementById('gaba-link')
262
+ gxba.innerText ='京ICP备20007647号-1'
263
+ gaba.innerText ='京公网安备 11010802031254号'
264
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
265
+ }
266
+ })()</script></div><div class="flex-block justify-center align-center flex-wrap"><a rel="nofollow" target="_blank" href="https://v6.51.la/s/Guz3lwHCsVme9Cu"><div class="busuanzi_container" id="busuanzi_container"><span class="busuanzi_container_site_pv" id="busuanzi_container_site_pv">访问量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner"></i></span></span><span class="busuanzi_container_site_uv" id="busuanzi_container_site_uv">访客数：<span id="busuanzi_value_site_uv"><i class="fa fa-spinner"></i></span></span><span style="padding-right: 10px;"></span></div></a><a rel="nofollow" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><span style="font-weight:bold;letter-spacing: 1px;">本网站由 </span><img class="nofancybox" height="32" style="vertical-align: middle" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/upy_logo.min.svg" alt=""/><span style="font-weight:bold;letter-spacing: 1px;">提供CDN加速/云存储服务</span></a><span style="padding-right: 10px;"></span><a rel="nofollow" style="font-size:18px;font-weight:bold;vertical-align: middle" target="_blank" title="注册就送代金券可直接使用" href="https://console.upyun.com/register/?invite=HyDsjZHIL">注册</a></div></div></div></div><a class="show" id="rocket" href="#top"></a><div class="darkmode-toggle">🌓</div><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/totop.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/dark.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/codeblock-resizer.min.js"></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/smartresize.min.js"></script></div></body></html>
package/article/56926.html ADDED
@@ -0,0 +1,153 @@
1
+ <!DOCTYPE html><html lang="zh-CN" data-dark><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="前端壹菜鸟，记录工作难题，关注前端知识，收集精彩博文，做技术的搬运工"><meta name="msvalidate.01" content="0FE4D8B3381D3D87088996B886E1E2BD"><title>React useEffect的陷阱 | 前端壹菜鸟</title><link rel="stylesheet" type="text/css" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/css/style.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css@latest/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/grids-responsive-min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="icon" mask="" sizes="any" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="Shortcut Icon" type="image/x-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="apple-touch-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="apple-touch-icon-precomposed" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8385136408348258"></script><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><script>(function(){
2
+ var bp = document.createElement('script');
3
+ var curProtocol = window.location.protocol.split(':')[0];
4
+ if (curProtocol === 'https'){
5
+ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
6
+ }
7
+ else{
8
+ bp.src = 'http://push.zhanzhang.baidu.com/push.js';
9
+ }
10
+ var s = document.getElementsByTagName("script")[0];
11
+ s.parentNode.insertBefore(bp, s);
12
+ })();
13
+ </script><script>(function(){
14
+ var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
15
+ document.write('<script src="' + src + '" id="sozz"><\/script>');
16
+ })();
17
+ </script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
18
+ </script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
19
+ </script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">React useEffect的陷阱</h1><div class="post-meta"><span class="date">2019-12-16</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 1.6k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 5</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/56926.html#vcomment"><span class="waline-comment-count" data-path="/article/56926.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://zhuanlan.zhihu.com/p/84697185</code></p>
20
+ <p>今天就来讲一个useEffect这个Hook使用的一个小陷阱，看下面的代码，一个Counter，在窗口大小改变的时候，在console上输出当前count。</p>
21
+ <span id="more"></span>
22
+
23
+ <p>好久不写React的相关的东西，因为虽然这个技术作为工具还是在得到越来越多的应用，但是，React自<a target="_blank" rel="noopener" href="https://www.zhihu.com/lives/1051824303045246976">Hooks和Suspense</a>以来，也没有什么特别值得一说的新功能出来，所以，我也觉得真没有什么好写的:-)</p>
24
+ <p>回顾一下过去几个月，值得一提的，就是React Hooks正式推出之后暴露出来的一些小问题，这些小问题不是React的缺陷，而是开发者在面对Hooks这种新的思维方式时的水土不服。</p>
25
+ <p>今天就来讲一个useEffect这个Hook使用的一个小陷阱，看下面的代码，一个Counter，在窗口大小改变的时候，在console上输出当前count。</p>
26
+ <pre><code>function App() &#123;
27
+ const [count, setCount] = useState(0)
28
+
29
+ useEffect(() =&gt; &#123;
30
+ // 让resize事件触发handleResize
31
+ window.addEventListener(&#39;resize&#39;, handleResize)
32
+ return () =&gt; window.removeEventListener(&#39;resize&#39;, handleResize)
33
+ &#125;, [])
34
+
35
+ const handleResize = () =&gt; &#123;
36
+ // 把count输出
37
+ console.log(`count is $&#123;count&#125;`)
38
+ &#125;
39
+
40
+ return (
41
+ &lt;div className=&quot;App&quot;&gt;
42
+ &lt;button onClick=&#123;() =&gt; setCount(count + 1)&#125;&gt;+&lt;/button&gt;
43
+ &lt;h1&gt;&#123;count&#125;&lt;/h1&gt;
44
+ &lt;/div&gt;
45
+ );
46
+ &#125;
47
+
48
+ const rootElement = document.getElementById(&quot;root&quot;);
49
+ ReactDOM.render(&lt;App /&gt;, rootElement);
50
+ </code></pre>
51
+ <p>这段代码会画出我们熟悉的Counter例子。<br><img src="https://pic1.zhimg.com/v2-c9caa4d47ed8c35c4d26d61be1e97f20_b.jpg" alt="xuehuayu.cn"><img src="https://pic1.zhimg.com/80/v2-c9caa4d47ed8c35c4d26d61be1e97f20_hd.jpg" alt="xuehuayu.cn"><br>现在我们如果点击那个+按钮，下面的数字0当然会增长，比如我们现在让count增长为1，这时候你去改变浏览器窗口的大小，console上会输出什么呢？</p>
52
+ <p>你可能预期这样输出：</p>
53
+ <pre><code>count is 1
54
+ </code></pre>
55
+ <p>事实上，输出是这样：</p>
56
+ <pre><code>count is 0
57
+ </code></pre>
58
+ <p>怎么会这样?！</p>
59
+ <p>我先直接说这个问题怎么fix吧，关键在useEffect是用法上，正确的写法是这样：</p>
60
+ <pre><code> useEffect(() =&gt; &#123;
61
+ // 让resize事件触发handleResize
62
+ window.addEventListener(&#39;resize&#39;, handleResize)
63
+ return window.removeEventListener(&#39;resize&#39;, handleResize)
64
+ &#125;, [count]) //看这一行！！！ useEffect有第二个数组参数！！！
65
+ </code></pre>
66
+ <p>看了fix之后，你也许就明白这是怎么回事了。</p>
67
+ <p>useEffect的第二个参数可选，如果用上的话，这个参数必须是一个数组。useEffect在每次被调用的时候，都会“记住”这个数组参数，当下一次被调用的时候，会逐个比较数组中的元素，看是否和上一次调用的数组元素一模一样，如果一模一样，第一个参数（那个函数参数）也就不用被调用了，如果不一样，就调用那个第一个参数。</p>
68
+ <p>当我们代码中的App组件第一次被渲染的时候，useEffect百分之百会调用第一个函数参数，这时候count变量是0，但是，当我们点+按钮让Counter增长为1，这时候App被重新渲染，但是因为useEffect第一个参数总是一个空数组，所以不会重新做addEventListener的工作。</p>
69
+ <p>你可能又会问：就算useEffect不重新执行第一个函数参数，也不应该有什么问题啊，handleResize函数利用闭包(clousre)功能访问App中的count变量，那也应该是使用更新为1的count啊！</p>
70
+ <p>抱歉，又让你失望了，虽然闭包的确可以访问外围的变量，但是，此handleResize非彼handleResize，第一次渲染时的handleResize和第二次渲染时的handleResize，虽然源自同一段代码，但是在运行时却是两个不同的函数对象。这并不难理解，handleResize是一个局部变量，每次App被执行时，handleResize都会被重行赋值，所以每一次App被渲染时，都会给handleResize一个全新的函数对象。</p>
71
+ <p>如果你觉得有点绕，我们详细复盘一下：</p>
72
+ <ol>
73
+ <li><p>App第一次被渲染</p>
74
+ </li>
75
+ <li><p>给handleResize赋值了一个函数对象（我们姑且用XX-1代表），这个XX-1引用的count值是这一次App被渲染时的count值，值为0；</p>
76
+ </li>
77
+ <li><p>handleResize被useEffect挂到resize事件上，以后，当resize时间发生时，handleResize（应该说是XX-1)被调用；</p>
78
+ </li>
79
+ <li><p>App第二次被渲染</p>
80
+ </li>
81
+ <li><p>有一次给handleResize赋值了一个函数对象，代号YY-2，注意，这个YY-2和之前的XX-1不是同一个函数对象，XX-1依然引用的是值为0的count，但是YY-2引用的是值为1的count；</p>
82
+ </li>
83
+ <li><p>handleResize（也就是YY-2）没有被useEffect挂到resize时间上，换句话说，YY-2这个函数对象压根没有派上用场。</p>
84
+ </li>
85
+ <li><p>resize事件发生了</p>
86
+ </li>
87
+ <li><p>window上挂的resize事件处理，是第一次渲染时候创造的XX-1号handleResize，所以方位的count值为0</p>
88
+ </li>
89
+ </ol>
90
+ <p>希望现在你明白了。</p>
91
+ <p>总结一下，请明白这几点：</p>
92
+ <ul>
93
+ <li>React Hooks只能用于函数组件，而每一次函数组件被渲染，都是一个全新的开始；</li>
94
+ <li>每一个全新的开始，所有的局部变量全都重来，全体失忆；</li>
95
+ <li>每一次全新的开始，只有Hooks函数（比如useEffect）具有上一次渲染的“记忆”；</li>
96
+ </ul>
97
+ <p>对于上面说的问题，因为count每次渲染都会改变，而且我们想要useEffect总会用上count的值，所以，就要把count放在useEffect的第二个数组参数里面。</p>
98
+ <p>规矩就是：如果useEffect第一个函数参数直接或者间接用上某个变量，就请把这个变量放在useEffect的第二个参数里。 </p>
99
+ <p>如果根本不用useEffect的第二个参数呢？</p>
100
+ <p>也行，但是，这样每次渲染都会执行useEffect的第一个参数，这……在某些场景下有一点点浪费。</p>
101
+ <p>其实要做到上面的规矩，也没那么难，不过在实际操作的时候，的确让人容易失误，你看，在上面的例子中，useEffect并没有直接使用count，只不过使用了handleResize，handleResize虽然直接使用了count，但是它作为一个独立函数并不知道（或者说也不该知道）自己会被useEffect用到，这……让人防不胜防啊！</p>
102
+ <p>这只有一层简介调用，靠人的眼力脑力还能把我，假设useEffect调用了函数X，函数X调用了Y，Y调用了Z……曲里拐弯调用N层之后再调用handleResize，真的不容易看出useEffect需要加上对count的依赖。</p>
103
+ <p>好吧，这是useEffect的一个陷阱，所以，我们再加一个规矩：使用useEffect，不要调用函数层次太多，代码应该一眼看清楚哪些函数会被useEffect调用。</p>
104
+ </div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&amp;WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&amp;UnionPayQR=null&amp;GitHub=null&amp;BTCQR=null&amp;BTCKEY=null&amp;PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/56926.html">https://xuehuayu.cn/article/56926.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/48216.html">Web性能领域常见的专业术语</a><a class="next" href="/article/57965.html">React SSR 详解 + 2个项目实战</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
105
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
106
+ const locale = {
107
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
108
+ sofa: '沙发空缺中，还不快抢~',
109
+ };
110
+ Waline.init({
111
+ el: '#vcomment',
112
+ serverURL: serverURL,
113
+ pageSize: '20',
114
+ visitor: true, // 阅读量统计
115
+ requiredMeta: ['nick', 'mail'],
116
+ emoji: [
117
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
118
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
119
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
120
+ ],
121
+ locale,
122
+ pageview: true
123
+ })
124
+ </script></div></div></div><div class="pure-u-1 pure-u-md-1-4 fixed-search hidden_mid_and_down"><div id="sidebar"><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/search.min.js"></script><div class="widget"><div class="widget-search"><input class="search" type="radio" name="search" value="baidu" id="baidu" checked="checked"/><label class="label" for="baidu" title="百度全站搜索">百度</label><input class="search" type="radio" name="search" value="google" id="google"/><label class="label" for="google" title="谷歌全站搜索">谷歌</label><input class="search" type="radio" name="search" value="self" id="self"/><label class="label" for="self" title="使用站内搜索">站内</label></div><div class="widget" id="search"><form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"/><input type="hidden" name="si" value="xuehuayu.cn"/><input type="hidden" name="cl" value="3"/><input type="hidden" name="ct" value="2097152"/><input type="hidden" name="s" value="on"/><input class="search-submit" type="submit" value=""/></form></div></div><script>$('input[type=radio][name=search]').change(function() {
125
+ var val = $(this).val()
126
+ var self = '<div class="search-form"><input id="local-search-input" placeholder="站内搜索，首次慢" type="search" name="q" results="0"><input class="search-submit" type="submit" value=""/><div id="local-search-result"></div></div>'
127
+ var google = '<form class="search-form" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="q" maxlength="30" placeholder="谷歌全站搜索"><input type="hidden" name="sitesearch" value="xuehuayu.cn"><input class="search-submit" type="submit" value=""/></form>'
128
+ var baidu = '<form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"><input type="hidden" name="si" value="xuehuayu.cn"><input type="hidden" name="cl" value="3"><input type="hidden" name="ct" value="2097152"><input type="hidden" name="s" value="on"><input class="search-submit" type="submit" value=""/></form>'
129
+
130
+ if (val === 'self') {
131
+ $('#search').html(self)
132
+ var search_path = 'search.xml';
133
+ if (search_path.length == 0) {
134
+ search_path = 'search.xml';
135
+ }
136
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
137
+ searchFunc(path, 'local-search-input', 'local-search-result');
138
+ } else if (val === 'baidu') {
139
+ $('#search').html(baidu)
140
+ } else if (val === 'google') {
141
+ $('#search').html(google)
142
+ }
143
+ })</script><div class="widget widget-wxmp"><img alt="微信公众号" width="100%" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/mp-mini.jpg"/></div><div class="widget widget-categories"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CDN/">CDN</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%85%AC%E5%85%B1%E8%8A%82%E6%97%A5/">公共节日</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E4%BA%AB/">分享</a><span class="category-list-count">29</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">191</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/">网络协议</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/">广告过滤</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/%E8%A7%86%E9%A2%91%E7%94%B5%E8%A7%86%E5%B0%8F%E8%AF%B4%E6%BC%AB%E7%94%BB%E8%B5%84%E8%AE%AF%E9%9F%B3%E4%B9%90/">视频电视小说漫画资讯音乐</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%AD%A3%E5%88%99/">正则</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%B5%84%E8%AE%AF/">资讯</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BD%BB%E6%9D%BE%E4%B8%80%E5%88%BB/">轻松一刻</a><span class="category-list-count">1</span></li></ul></div><div class="widget widget-tags"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 15px;">原创</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 15px;">转载</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 15px;">手写</a> <a href="/tags/%E7%96%AB%E6%83%85/" style="font-size: 15px;">疫情</a> <a href="/tags/%E5%A8%B1%E4%B9%90/" style="font-size: 15px;">娱乐</a></div></div><div class="widget widget-recent-posts"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/article/c5576490.html">面试准备</a></li><li class="post-list-item"><a class="post-list-link" href="/article/84c9ccd6.html">精读《SolidJS》</a></li><li class="post-list-item"><a class="post-list-link" href="/article/53803e6.html">git提交注释规范</a></li><li class="post-list-item"><a class="post-list-link" href="/article/a4145266.html">前端数组拍平flat一行代码</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bedea419.html">一道前端this面试题</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bf7e7421.html">git多账号配置</a></li></ul></div><div class="widget widget-links"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://github.com/npljy?utm_source=xuehuayu.cn" title="GitHub" target="_blank">GitHub</a><ul></ul><a href="https://laonongmin.online?utm_source=xuehuayu.cn" title="看看" target="_blank">看看</a><ul></ul><a href="https://cainiaoblog.cn?utm_source=xuehuayu.cn" title="菜鸟博客" target="_blank">菜鸟博客</a><ul></ul><a href="mailto:cainiaoblog@126.com" title="友链联系" target="_blank">友链联系</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer"><div class="flex-block justify-center align-center flex-wrap"><a class="gxba-link" id="gxba" rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">京ICP备20007647号-2</a><a class="gaba-link" id="gaba-link" rel="nofollow" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031264"><img class="nofancybox" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/gaba.png" alt=""/><span id="gaba">京公网安备 11010802031264号</span><span style="padding-right: 10px;"></span></a><span>Copyright © 2023 </span><a href="/." rel="nofollow">前端壹菜鸟. </a><script>(function(){
144
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
145
+ if (cnb) {
146
+ var gxba =document.getElementById('gxba')
147
+ var gaba =document.getElementById('gaba')
148
+ var gabaLink =document.getElementById('gaba-link')
149
+ gxba.innerText ='京ICP备20007647号-1'
150
+ gaba.innerText ='京公网安备 11010802031254号'
151
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
152
+ }
153
+ })()</script></div><div class="flex-block justify-center align-center flex-wrap"><a rel="nofollow" target="_blank" href="https://v6.51.la/s/Guz3lwHCsVme9Cu"><div class="busuanzi_container" id="busuanzi_container"><span class="busuanzi_container_site_pv" id="busuanzi_container_site_pv">访问量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner"></i></span></span><span class="busuanzi_container_site_uv" id="busuanzi_container_site_uv">访客数：<span id="busuanzi_value_site_uv"><i class="fa fa-spinner"></i></span></span><span style="padding-right: 10px;"></span></div></a><a rel="nofollow" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><span style="font-weight:bold;letter-spacing: 1px;">本网站由 </span><img class="nofancybox" height="32" style="vertical-align: middle" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/upy_logo.min.svg" alt=""/><span style="font-weight:bold;letter-spacing: 1px;">提供CDN加速/云存储服务</span></a><span style="padding-right: 10px;"></span><a rel="nofollow" style="font-size:18px;font-weight:bold;vertical-align: middle" target="_blank" title="注册就送代金券可直接使用" href="https://console.upyun.com/register/?invite=HyDsjZHIL">注册</a></div></div></div></div><a class="show" id="rocket" href="#top"></a><div class="darkmode-toggle">🌓</div><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/totop.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/dark.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/codeblock-resizer.min.js"></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/smartresize.min.js"></script></div></body></html>