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/18071.html ADDED
@@ -0,0 +1,375 @@
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组件设计的7个准则之SRP | 前端壹菜鸟</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组件设计的7个准则之SRP</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"> 3.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"> 14</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/18071.html#vcomment"><span class="waline-comment-count" data-path="/article/18071.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://github.com/YvetteLau/Blog/issues/42</code><br><code>翻译：刘小夕</code><br><code>原文链接：https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/</code></p>
20
+ <p>原文的篇幅<strong>非常</strong>长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长，我不得不进行了分割，本篇文章重点阐述 <code>SRP</code>，即单一职责原则。</p>
21
+ <p>我喜欢React组件式开发方式。你可以将复杂的用户界面分割为一个个组件，利用组件的可重用性和抽象的DOM操作。</p>
22
+ <p>基于组件的开发是高效的：一个复杂的系统是由专门的、易于管理的组件构建的。然而，只有设计良好的组件才能确保组合和复用的好处。</p>
23
+ <p>尽管应用程序很复杂，但为了满足最后期限和意外变化的需求，你必须不断地走在架构正确性的细线上。你必须将组件分离为专注于单个任务，并经过良好测试。</p>
24
+ <span id="more"></span>
25
+
26
+ <p><a target="_blank" rel="noopener" href="https://camo.githubusercontent.com/e0466af2704b7c0b63dbe09ce745685905625aea/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031392f382f372f313663366332393930653932323737353f773d3131393426683d36373026663d6a70656726733d3638313831"><img src="https://camo.githubusercontent.com/e0466af2704b7c0b63dbe09ce745685905625aea/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031392f382f372f313663366332393930653932323737353f773d3131393426683d36373026663d6a70656726733d3638313831" alt="xuehuayu.cn"></a></p>
27
+ <p>不幸的是，遵循错误的路径总是更加容易：编写具有许多职责的大型组件、紧密耦合组件、忘记单元测试。这些增加了技术债务，使得修改现有功能或创建新功能变得越来越困难。</p>
28
+ <blockquote>
29
+ <p>编写React应用程序时，我经常问自己：</p>
30
+ </blockquote>
31
+ <ul>
32
+ <li>如何正确构造组件？</li>
33
+ <li>在什么时候，一个大的组件应该拆分成更小的组件？</li>
34
+ <li>如何设计防止紧密耦合的组件之间的通信？</li>
35
+ </ul>
36
+ <p>幸运的是，可靠的组件具有共同的特性。让我们来研究这7个有用的标准(本文只阐述 <code>SRP</code>，剩余准则正在途中)，并将其详细到案例研究中。</p>
37
+ <h3 id="单一职责"><a href="#单一职责" class="headerlink" title="单一职责"></a>单一职责</h3><blockquote>
38
+ <p>当一个组件只有一个改变的原因时，它有一个单一的职责。</p>
39
+ </blockquote>
40
+ <p>编写React组件时要考虑的基本准则是单一职责原则。单一职责原则(缩写：<code>SRP</code>)要求组件有一个且只有一个变更的原因。</p>
41
+ <p>组件的职责可以是呈现列表，或者显示日期选择器，或者发出 <code>HTTP</code> 请求，或者绘制图表，或者延迟加载图像等。你的组件应该只选择一个职责并实现它。当你修改组件实现其职责的方式（例如，更改渲染的列表的数量限制），它有一个更改的原因。</p>
42
+ <p>为什么只有一个理由可以改变很重要？因为这样组件的修改隔离并且受控。单一职责原则制了组件的大小，使其集中在一件事情上。集中在一件事情上的组件便于编码、修改、重用和测试。</p>
43
+ <blockquote>
44
+ <p>下面我们来举几个例子</p>
45
+ </blockquote>
46
+ <p><strong>实例1：一个组件获取远程数据，相应地，当获取逻辑更改时，它有一个更改的原因。</strong></p>
47
+ <p>发生变化的原因是：</p>
48
+ <ul>
49
+ <li>修改服务器URL</li>
50
+ <li>修改响应格式</li>
51
+ <li>要使用其他HTTP请求库</li>
52
+ <li>或仅与获取逻辑相关的任何修改。</li>
53
+ </ul>
54
+ <p><strong>示例2：表组件将数据数组映射到行组件列表，因此在映射逻辑更改时有一个原因需要更改。</strong></p>
55
+ <p>发生变化的原因是：</p>
56
+ <ul>
57
+ <li>你需要限制渲染行组件的数量（例如，最多显示25行）</li>
58
+ <li>当没有要显示的项目时，要求显示提示信息“列表为空”</li>
59
+ <li>或仅与数组到行组件的映射相关的任何修改。</li>
60
+ </ul>
61
+ <p>你的组件有很多职责吗？如果答案是“是”，则按每个单独的职责将组件分成若干块。</p>
62
+ <p>如果您发现SRP有点模糊，请阅读<a target="_blank" rel="noopener" href="https://8thlight.com/blog/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html">本文</a>。</p>
63
+ <p>在项目早期阶段编写的单元将经常更改，直到达到发布阶段。这些更改通常要求组件在隔离状态下易于修改：这也是 SRP 的目标。</p>
64
+ <h4 id="1-1-多重职责陷阱"><a href="#1-1-多重职责陷阱" class="headerlink" title="1.1 多重职责陷阱"></a>1.1 多重职责陷阱</h4><p>当一个组件有多个职责时，就会发生一个常见的问题。乍一看，这种做法似乎是无害的，并且工作量较少：</p>
65
+ <ul>
66
+ <li>你立即开始编码：无需识别职责并相应地规划结构</li>
67
+ <li>一个大的组件可以做到这一切：不需要为每个职责创建组成部分</li>
68
+ <li>无拆分-无开销：无需为拆分组件之间的通信创建 <code>props</code> 和 <code>callbacks</code></li>
69
+ </ul>
70
+ <p>这种幼稚的结构在开始时很容易编码。但是随着应用程序的增加和变得复杂，在以后的修改中会出现困难。同时实现多个职责的组件有许多更改的原因。现在出现的主要问题是：出于某种原因更改组件会无意中影响同一组件实现的其它职责。</p>
71
+ <p><a target="_blank" rel="noopener" href="https://camo.githubusercontent.com/f7e7bdcc886c056fe73619eb67f45f1e9a101443/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031392f382f382f313663366365653830643463333131643f773d3130313426683d3134303026663d6a70656726733d313838393638"><img src="https://camo.githubusercontent.com/f7e7bdcc886c056fe73619eb67f45f1e9a101443/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031392f382f382f313663366365653830643463333131643f773d3130313426683d3134303026663d6a70656726733d313838393638" alt="xuehuayu.cn"></a></p>
72
+ <p>不要关闭电灯开关，因为它同样作用于电梯。</p>
73
+ <p><a target="_blank" rel="noopener" href="https://camo.githubusercontent.com/a4ed6a87c4e6c7cfea71dc3f2100740a24646856/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031392f382f382f313663366430323531343130386433653f773d32303026683d32303026663d6a70656726733d34323334"><img src="https://camo.githubusercontent.com/a4ed6a87c4e6c7cfea71dc3f2100740a24646856/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031392f382f382f313663366430323531343130386433653f773d32303026683d32303026663d6a70656726733d34323334" alt="xuehuayu.cn"></a></p>
74
+ <p>这种设计很<strong>脆弱</strong>。意外的副作用是很难预测和控制的。</p>
75
+ <p>例如，<code>&lt;ChartAndForm&gt;</code> 同时有两个职责，绘制图表，并处理为该图表提供数据的表单。<code>&lt;ChartandForm&gt;</code> 就会有两个更改原因：绘制图表和处理表单。</p>
76
+ <p>当你更改表单字段（例如，将 <code>&lt;input&gt;</code> 修改为 <code>&lt;select&gt;</code> 时，你无意中中断图表的渲染。此外，图表实现是不可重用的，因为它与表单细节耦合在一起。</p>
77
+ <p>解决多重责任问题需要将 <code>&lt;ChartAndForm&gt;</code> 分割为两个组件：<code>&lt;Chart&gt;</code> 和<code>&lt;Form&gt;</code>。每个组件只有一个职责：绘制图表或处理表单。组件之间的通信是通过<code>props</code> 实现。</p>
78
+ <p>多重责任问题的最坏情况是所谓的上帝组件（上帝对象的类比）。上帝组件倾向于了解并做所有事情。你可能会看到它名为 <code>&lt;Application&gt;</code>、<code>&lt;Manager&gt;</code> 、<code>&lt;Bigcontainer&gt;</code> 或 <code>&lt;Page&gt;</code>，代码超过500行。</p>
79
+ <p>在组合的帮助下使其符合SRP，从而分解上帝组件。(组合（composition）是一种通过将各组件联合在一起以创建更大组件的方式。组合是 React 的核心。)</p>
80
+ <h4 id="1-2-案例研究：使组件只有一个职责"><a href="#1-2-案例研究：使组件只有一个职责" class="headerlink" title="1.2 案例研究：使组件只有一个职责"></a>1.2 案例研究：使组件只有一个职责</h4><p>设想一个组件向一个专门的服务器发出 <code>HTTP</code> 请求，以获取当前天气。成功获取数据时，该组件使用响应来展示天气信息：</p>
81
+ <pre><code>importaxiosfrom&#39;axios&#39;;
82
+ // 问题: 一个组件有多个职责classWeatherextendsComponent &#123;
83
+ constructor(props) &#123;
84
+ super(props);
85
+ this.state= &#123; temperature:&#39;N/A&#39;, windSpeed:&#39;N/A&#39; &#125;;
86
+ &#125;
87
+
88
+ render() &#123;
89
+ const &#123; temperature, windSpeed &#125; =this.state;
90
+ return (
91
+ &lt;div className=&quot;weather&quot;&gt;&lt;div&gt;Temperature: &#123;temperature&#125;°C&lt;/div&gt;&lt;div&gt;Wind: &#123;windSpeed&#125;km/h&lt;/div&gt;&lt;/div&gt;
92
+ );
93
+ &#125;
94
+
95
+ componentDidMount() &#123;
96
+ axios.get(&#39;http://weather.com/api&#39;).then(function (response) &#123;
97
+ const &#123; current &#125; =response.data;
98
+ this.setState(&#123;
99
+ temperature:current.temperature,
100
+ windSpeed:current.windSpeed
101
+ &#125;)
102
+ &#125;);
103
+ &#125;
104
+ &#125;
105
+ </code></pre>
106
+ <p>在处理类似的情况时，问问自己：是否必须将组件拆分为更小的组件？通过确定组件可能会如何根据其职责进行更改，可以最好地回答这个问题。</p>
107
+ <p><strong>这个天气组件有两个改变原因：</strong></p>
108
+ <ol>
109
+ <li><p><code>componentDidMount()</code> 中的 <code>fetch</code> 逻辑：服务器URL或响应格式可能会改变。</p>
110
+ </li>
111
+ <li><p><code>render()</code> 中的天气展示：组件显示天气的方式可以多次更改。</p>
112
+ </li>
113
+ </ol>
114
+ <p>解决方案是将 <code>&lt;Weather&gt;</code> 分为两个组件：每个组件只有一个职责。命名为 <code>&lt;WeatherFetch&gt;</code> 和 <code>&lt;WeatherInfo&gt;</code>。</p>
115
+ <p><code>&lt;WeatherFetch&gt;</code> 组件负责获取天气、提取响应数据并将其保存到 <code>state</code> 中。它改变原因只有一个就是获取数据逻辑改变。</p>
116
+ <pre><code>importaxiosfrom&#39;axios&#39;;
117
+ // 解决措施: 组件只有一个职责就是请求数据classWeatherFetchextendsComponent &#123;
118
+ constructor(props) &#123;
119
+ super(props);
120
+ this.state= &#123; temperature:&#39;N/A&#39;, windSpeed:&#39;N/A&#39; &#125;;
121
+ &#125;
122
+
123
+ render() &#123;
124
+ const &#123; temperature, windSpeed &#125; =this.state;
125
+ return (
126
+ &lt;WeatherInfo temperature=&#123;temperature&#125; windSpeed=&#123;windSpeed&#125; /&gt;
127
+ );
128
+ &#125;
129
+
130
+ componentDidMount() &#123;
131
+ axios.get(&#39;http://weather.com/api&#39;).then(function (response) &#123;
132
+ const &#123; current &#125; =response.data;
133
+ this.setState(&#123;
134
+ temperature:current.temperature,
135
+ windSpeed:current.windSpeed
136
+ &#125;);
137
+ &#125;);
138
+ &#125;
139
+ &#125;
140
+ </code></pre>
141
+ <p>这种结构有什么好处？</p>
142
+ <p>例如，你想要使用 <code>async/await</code> 语法来替代 <code>promise</code> 去服务器获取响应。更改原因：修改获取逻辑</p>
143
+ <pre><code>// 改变原因: 使用 async/await 语法classWeatherFetchextendsComponent &#123;
144
+ // ..... //asynccomponentDidMount() &#123;
145
+ constresponse=awaitaxios.get(&#39;http://weather.com/api&#39;);
146
+ const &#123; current &#125; =response.data;
147
+ this.setState(&#123;
148
+ temperature:current.temperature,
149
+ windSpeed:current.windSpeed
150
+ &#125;);
151
+ &#125;
152
+ &#125;
153
+ </code></pre>
154
+ <p>因为 <code>&lt;WeatherFetch&gt;</code> 只有一个更改原因：修改 <code>fetch</code> 逻辑，所以对该组件的任何修改都是隔离的。使用 <code>async/await</code> 不会直接影响天气的显示。</p>
155
+ <p><code>&lt;WeatherFetch&gt;</code> 渲染 <code>&lt;WeatherInfo&gt;</code>。后者只负责显示天气，改变原因只可能是视觉显示改变。</p>
156
+ <pre><code>// 解决方案: 组件只有一个职责，就是显示天气functionWeatherInfo(&#123; temperature, windSpeed &#125;) &#123;
157
+ return (
158
+ &lt;div className=&quot;weather&quot;&gt;&lt;div&gt;Temperature: &#123;temperature&#125;°C&lt;/div&gt;&lt;div&gt;Wind: &#123;windSpeed&#125; km/h&lt;/div&gt;&lt;/div&gt;
159
+ );
160
+ &#125;
161
+ </code></pre>
162
+ <p>让我们更改<code>&lt;WeatherInfo&gt;</code>，如不显示 <code>“wind:0 km/h”</code> 而是显示 <code>“wind:calm”</code>。这就是天气视觉显示发生变化的原因：</p>
163
+ <pre><code>// 改变原因: 无风时的显示functionWeatherInfo(&#123; temperature, windSpeed &#125;) &#123;
164
+ constwindInfo= windSpeed ===0?&#39;calm&#39;:`$&#123;windSpeed&#125; km/h`;
165
+ return (
166
+ &lt;div className=&quot;weather&quot;&gt;&lt;div&gt;Temperature: &#123;temperature&#125;°C&lt;/div&gt;&lt;div&gt;Wind: &#123;windInfo&#125;&lt;/div&gt;&lt;/div&gt;
167
+ );
168
+ &#125;
169
+ </code></pre>
170
+ <p>同样，对 <code>&lt;WeatherInfo&gt;</code> 的修改是隔离的，不会影响 <code>&lt;WeatherFetch&gt;</code> 组件。</p>
171
+ <p><code>&lt;WeatherFetch&gt;</code> 和 <code>&lt;WeatherInfo&gt;</code> 有各自的职责。一种组件的变化对另一种组件的影响很小。这就是单一职责原则的作用：修改隔离，对系统的其他组件产生影响很轻微并且可预测。</p>
172
+ <h4 id="1-3-案例研究：HOC-偏好单一责任原则"><a href="#1-3-案例研究：HOC-偏好单一责任原则" class="headerlink" title="1.3 案例研究：HOC 偏好单一责任原则"></a>1.3 案例研究：HOC 偏好单一责任原则</h4><p>按职责使用分块组件的组合并不总是有助于遵循单一责任原则。另外一种有效实践是高阶组件(缩写为 <code>HOC</code>)</p>
173
+ <blockquote>
174
+ <p>高阶组件是一个接受一个组件并返回一个新组件的函数。</p>
175
+ </blockquote>
176
+ <p><code>HOC</code> 的一个常见用法是为封装的组件增加新属性或修改现有的属性值。这种技术称为属性代理：</p>
177
+ <pre><code>functionwithNewFunctionality(WrappedComponent) &#123;
178
+ returnclassNewFunctionalityextendsComponent &#123;
179
+ render() &#123;
180
+ constnewProp=&#39;Value&#39;;
181
+ constpropsProxy= &#123;
182
+ ...this.props,
183
+ // 修改现有属性:
184
+ ownProp:this.props.ownProp+&#39; was modified&#39;,
185
+ // 增加新属性:
186
+ newProp
187
+ &#125;;
188
+ return&lt;WrappedComponent &#123;...propsProxy&#125; /&gt;;
189
+ &#125;
190
+ &#125;
191
+ &#125;
192
+ constMyNewComponent=withNewFunctionality(MyComponent);
193
+ </code></pre>
194
+ <p>你还可以通过控制输入组件的渲染过程从而控制渲染结果。这种 <code>HOC</code> 技术被称为渲染劫持：</p>
195
+ <pre><code>functionwithModifiedChildren(WrappedComponent) &#123;
196
+ returnclassModifiedChildrenextendsWrappedComponent &#123;
197
+ render() &#123;
198
+ constrootElement=super.render();
199
+ constnewChildren= [
200
+ ...rootElement.props.children,
201
+ // 插入一个元素&lt;div&gt;New child&lt;/div&gt;
202
+ ];
203
+ returncloneElement(
204
+ rootElement,
205
+ rootElement.props,
206
+ newChildren
207
+ );
208
+ &#125;
209
+ &#125;
210
+ &#125;
211
+ constMyNewComponent=withModifiedChildren(MyComponent);
212
+ </code></pre>
213
+ <p>如果您想深入了解HOCS实践，我建议您阅读“深入响应高阶组件”。</p>
214
+ <p>让我们通过一个例子来看看HOC的属性代理技术如何帮助分离职责。</p>
215
+ <p>组件 <code>&lt;PersistentForm&gt;</code> 由 <code>input</code> 输入框和按钮 <code>save to storage</code> 组成。更改输入值后，点击 <code>save to storage</code> 按钮将其写入到 <code>localStorage</code> 中。</p>
216
+ <p><a target="_blank" rel="noopener" href="https://camo.githubusercontent.com/eb3fae12442daf48d1e1d6efd42e73274ef798af/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031392f382f382f313663366364306337656537656333393f773d3134313026683d35323626663d6a70656726733d3536373432"><img src="https://camo.githubusercontent.com/eb3fae12442daf48d1e1d6efd42e73274ef798af/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031392f382f382f313663366364306337656537656333393f773d3134313026683d35323626663d6a70656726733d3536373432" alt="xuehuayu.cn"></a></p>
217
+ <p><code>input</code> 的状态在 <code>handlechange(event)</code> 方法中更新。点击按钮，值将保存到本地存储，在 <code>handleclick()</code> 中处理：</p>
218
+ <pre><code>classPersistentFormextendsComponent &#123;
219
+ constructor(props) &#123;
220
+ super(props);
221
+ this.state= &#123; inputValue:localStorage.getItem(&#39;inputValue&#39;) &#125;;
222
+ this.handleChange=this.handleChange.bind(this);
223
+ this.handleClick=this.handleClick.bind(this);
224
+ &#125;
225
+
226
+ render() &#123;
227
+ const &#123; inputValue &#125; =this.state;
228
+ return (
229
+ &lt;div className=&quot;persistent-form&quot;&gt;&lt;input type=&quot;text&quot; value=&#123;inputValue&#125;
230
+ onChange=&#123;this.handleChange&#125; /&gt;&lt;button onClick=&#123;this.handleClick&#125;&gt;Save to storage&lt;/button&gt;&lt;/div&gt;
231
+ );
232
+ &#125;
233
+
234
+ handleChange(event) &#123;
235
+ this.setState(&#123;
236
+ inputValue:event.target.value
237
+ &#125;);
238
+ &#125;
239
+
240
+ handleClick() &#123;
241
+ localStorage.setItem(&#39;inputValue&#39;, this.state.inputValue);
242
+ &#125;
243
+ &#125;
244
+ </code></pre>
245
+ <p>遗憾的是： <code>&lt;PersistentForm&gt;</code> 有2个职责：管理表单字段；将输入只保存中 <code>localStorage</code>。</p>
246
+ <p>让我们重构一下 <code>&lt;PersistentForm&gt;</code> 组件，使其只有一个职责：展示表单字段和附加的事件处理程序。它不应该知道如何直接使用存储：</p>
247
+ <pre><code>classPersistentFormextendsComponent &#123;
248
+ constructor(props) &#123;
249
+ super(props);
250
+ this.state= &#123; inputValue:props.initialValue &#125;;
251
+ this.handleChange=this.handleChange.bind(this);
252
+ this.handleClick=this.handleClick.bind(this);
253
+ &#125;
254
+
255
+ render() &#123;
256
+ const &#123; inputValue &#125; =this.state;
257
+ return (
258
+ &lt;div className=&quot;persistent-form&quot;&gt;&lt;input type=&quot;text&quot; value=&#123;inputValue&#125;
259
+ onChange=&#123;this.handleChange&#125; /&gt;&lt;button onClick=&#123;this.handleClick&#125;&gt;Save to storage&lt;/button&gt;&lt;/div&gt;
260
+ );
261
+ &#125;
262
+
263
+ handleChange(event) &#123;
264
+ this.setState(&#123;
265
+ inputValue:event.target.value
266
+ &#125;);
267
+ &#125;
268
+
269
+ handleClick() &#123;
270
+ this.props.saveValue(this.state.inputValue);
271
+ &#125;
272
+ &#125;
273
+ </code></pre>
274
+ <p>组件从属性初始值接收存储的输入值，并使用属性函数 <code>saveValue(newValue)</code> 来保存输入值。这些<code>props</code> 由使用属性代理技术的 <code>withpersistence()</code> HOC提供。</p>
275
+ <p>现在 <code>&lt;PersistentForm&gt;</code> 符合 <code>SRP</code>。更改的唯一原因是修改表单字段。</p>
276
+ <p>查询和保存到本地存储的职责由 <code>withPersistence()</code> HOC承担：</p>
277
+ <pre><code>functionwithPersistence(storageKey, storage) &#123;
278
+ returnfunction (WrappedComponent) &#123;
279
+ returnclassPersistentComponentextendsComponent &#123;
280
+ constructor(props) &#123;
281
+ super(props);
282
+ this.state= &#123; initialValue:storage.getItem(storageKey) &#125;;
283
+ &#125;
284
+
285
+ render() &#123;
286
+ return (
287
+ &lt;WrappedComponent
288
+ initialValue=&#123;this.state.initialValue&#125;
289
+ saveValue=&#123;this.saveValue&#125;
290
+ &#123;...this.props&#125;
291
+ /&gt;
292
+ );
293
+ &#125;
294
+
295
+ saveValue(value) &#123;
296
+ storage.setItem(storageKey, value);
297
+ &#125;
298
+ &#125;
299
+ &#125;
300
+ &#125;
301
+ </code></pre>
302
+ <p><code>withPersistence()</code>是一个 <code>HOC</code>，其职责是持久的。它不知道有关表单域的任何详细信息。它只聚焦一个工作：为传入的组件提供 <code>initialValue</code> 字符串和 <code>saveValue()</code> 函数。</p>
303
+ <p>将 <code>&lt;PersistentForm&gt;</code> 和 <code>withpersistence()</code> 一起使用可以创建一个新组件<code>&lt;LocalStoragePersistentForm&gt;</code>。它与本地存储相连，可以在应用程序中使用：</p>
304
+ <pre><code>constLocalStoragePersistentForm=withPersistence(&#39;key&#39;, localStorage)(PersistentForm);
305
+
306
+ constinstance=&lt;LocalStoragePersistentForm /&gt;;
307
+ </code></pre>
308
+ <p>只要 <code>&lt;PersistentForm&gt;</code> 正确使用 <code>initialValue</code> 和 <code>saveValue()</code>属性，对该组件的任何修改都不能破坏 <code>withPersistence()</code> 保存到存储的逻辑。</p>
309
+ <p>反之亦然：只要 <code>withPersistence()</code> 提供正确的 <code>initialValue</code> 和 <code>saveValue()</code>，对 <code>HOC</code> 的任何修改都不能破坏处理表单字段的方式。</p>
310
+ <p>SRP的效率再次显现出来：修改隔离，从而减少对系统其他部分的影响。</p>
311
+ <p>此外，代码的可重用性也会增加。你可以将任何其他表单 <code>&lt;MyOtherForm&gt;</code> 连接到本地存储：</p>
312
+ <pre><code>constLocalStorageMyOtherForm=withPersistence(&#39;key&#39;, localStorage)(MyOtherForm);
313
+
314
+ constinstance=&lt;LocalStorageMyOtherForm /&gt;;
315
+ </code></pre>
316
+ <p>你可以轻松地将存储类型更改为 <code>session storage</code>：</p>
317
+ <pre><code>constSessionStoragePersistentForm=withPersistence(&#39;key&#39;, sessionStorage)(PersistentForm);
318
+
319
+ constinstance=&lt;SessionStoragePersistentForm /&gt;;
320
+ </code></pre>
321
+ <p>初始版本 <code>&lt;PersistentForm&gt;</code> 没有隔离修改和可重用性好处，因为它错误地具有多个职责。</p>
322
+ <p>在不好分块组合的情况下，属性代理和渲染劫持的 <code>HOC</code> 技术可以使得组件只有一个职责。</p>
323
+ <blockquote>
324
+ <p><strong>谢谢各位小伙伴愿意花费宝贵的时间阅读本文，如果本文给了您一点帮助或者是启发，请不要吝啬你的赞和Star，您的肯定是我前进的最大动力。</strong><a target="_blank" rel="noopener" href="https://github.com/YvetteLau/Blog">https://github.com/YvetteLau/Blog</a></p>
325
+ </blockquote>
326
+ </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/18071.html">https://xuehuayu.cn/article/18071.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/38753.html">可靠React组件设计的7个准则之封装</a><a class="next" href="/article/23195.html">细说JS异步发展历程</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
327
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
328
+ const locale = {
329
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
330
+ sofa: '沙发空缺中，还不快抢~',
331
+ };
332
+ Waline.init({
333
+ el: '#vcomment',
334
+ serverURL: serverURL,
335
+ pageSize: '20',
336
+ visitor: true, // 阅读量统计
337
+ requiredMeta: ['nick', 'mail'],
338
+ emoji: [
339
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
340
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
341
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
342
+ ],
343
+ locale,
344
+ pageview: true
345
+ })
346
+ </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() {
347
+ var val = $(this).val()
348
+ 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>'
349
+ 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>'
350
+ 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>'
351
+
352
+ if (val === 'self') {
353
+ $('#search').html(self)
354
+ var search_path = 'search.xml';
355
+ if (search_path.length == 0) {
356
+ search_path = 'search.xml';
357
+ }
358
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
359
+ searchFunc(path, 'local-search-input', 'local-search-result');
360
+ } else if (val === 'baidu') {
361
+ $('#search').html(baidu)
362
+ } else if (val === 'google') {
363
+ $('#search').html(google)
364
+ }
365
+ })</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(){
366
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
367
+ if (cnb) {
368
+ var gxba =document.getElementById('gxba')
369
+ var gaba =document.getElementById('gaba')
370
+ var gabaLink =document.getElementById('gaba-link')
371
+ gxba.innerText ='京ICP备20007647号-1'
372
+ gaba.innerText ='京公网安备 11010802031254号'
373
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
374
+ }
375
+ })()</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/18142.html ADDED
@@ -0,0 +1,71 @@
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>uni-app无网络提示ajax拦截无网络提示 | 前端壹菜鸟</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">uni-app无网络提示ajax拦截无网络提示</h1><div class="post-meta"><span class="date">2021-11-14</span><span> | </span><span class="tag original"><a href="/tags/%E5%8E%9F%E5%88%9B/">原创 </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"> 123</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"> 1</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/18142.html#vcomment"><span class="waline-comment-count" data-path="/article/18142.html"></span><span> 条评论</span></a><div class="post-content"><p>uni-app无网络提示ajax拦截无网络提示</p>
20
+ <span id="more"></span>
21
+ <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 注册请求拦截器</span></span><br><span class="line">_ajax.<span class="property">interceptors</span>.<span class="property">request</span>.<span class="title function_">use</span>(</span><br><span class="line"> <span class="keyword">async</span> config =&gt; &#123;</span><br><span class="line"> <span class="keyword">const</span> res = <span class="keyword">await</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line"> uni.<span class="title function_">getNetworkType</span>(&#123;</span><br><span class="line"> <span class="title function_">success</span>(<span class="params">res</span>) &#123;</span><br><span class="line"> <span class="keyword">if</span> (res.<span class="property">networkType</span> === <span class="string">&#x27;none&#x27;</span>) &#123;</span><br><span class="line"> uni.<span class="title function_">hideLoading</span>()</span><br><span class="line"> uni.<span class="title function_">hideToast</span>()</span><br><span class="line"> uni.<span class="title function_">showToast</span>(&#123;</span><br><span class="line"> <span class="attr">title</span>: <span class="string">&#x27;没有网络&#x27;</span>,</span><br><span class="line"> <span class="attr">icon</span>: <span class="string">&#x27;error&#x27;</span>,</span><br><span class="line"> <span class="attr">duration</span>: <span class="number">3000</span></span><br><span class="line"> &#125;)</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;没有网络&#x27;</span>) <span class="comment">// 抛出错误</span></span><br><span class="line"> <span class="comment">// reject(&#x27;没有网络&#x27;)</span></span><br><span class="line"> &#125; <span class="keyword">else</span> &#123;</span><br><span class="line"> <span class="title function_">resolve</span>(<span class="literal">false</span>)</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;)</span><br><span class="line"> &#125;)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (!res) <span class="keyword">return</span> config</span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line"> <span class="comment">// 对请求错误做些什么</span></span><br><span class="line"> <span class="title function_">hideLoading</span>()</span><br><span class="line"> <span class="keyword">return</span> error</span><br><span class="line"> &#125;</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
22
+ </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/18142.html">https://xuehuayu.cn/article/18142.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/%E5%8E%9F%E5%88%9B/">原创</a></div><div class="post-nav"><a class="pre" href="/article/23864.html">浏览器和nodejs中setTimeout中的this指向问题</a><a class="next" href="/article/13823.html">vue3.x中vue4.x如何使用modules模块化</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
23
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
24
+ const locale = {
25
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
26
+ sofa: '沙发空缺中，还不快抢~',
27
+ };
28
+ Waline.init({
29
+ el: '#vcomment',
30
+ serverURL: serverURL,
31
+ pageSize: '20',
32
+ visitor: true, // 阅读量统计
33
+ requiredMeta: ['nick', 'mail'],
34
+ emoji: [
35
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
36
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
37
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
38
+ ],
39
+ locale,
40
+ pageview: true
41
+ })
42
+ </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() {
43
+ var val = $(this).val()
44
+ 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>'
45
+ 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>'
46
+ 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>'
47
+
48
+ if (val === 'self') {
49
+ $('#search').html(self)
50
+ var search_path = 'search.xml';
51
+ if (search_path.length == 0) {
52
+ search_path = 'search.xml';
53
+ }
54
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
55
+ searchFunc(path, 'local-search-input', 'local-search-result');
56
+ } else if (val === 'baidu') {
57
+ $('#search').html(baidu)
58
+ } else if (val === 'google') {
59
+ $('#search').html(google)
60
+ }
61
+ })</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(){
62
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
63
+ if (cnb) {
64
+ var gxba =document.getElementById('gxba')
65
+ var gaba =document.getElementById('gaba')
66
+ var gabaLink =document.getElementById('gaba-link')
67
+ gxba.innerText ='京ICP备20007647号-1'
68
+ gaba.innerText ='京公网安备 11010802031254号'
69
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
70
+ }
71
+ })()</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>