-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
316 lines (286 loc) · 53.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html><html class="theme-next muse use-motion" lang="zh-Hans"><head><meta name="generator" content="Hexo 3.9.0"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="theme-color" content="#222"><script src="/lib/pace/pace.min.js?v=1.0.2"></script><link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css"><link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.ico?v=5.1.4"><link rel="icon" type="image/png" sizes="16x16" href="/images/favicon.ico?v=5.1.4"><link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222"><meta name="keywords" content="Hexo, NexT"><meta name="description" content="Vue,Raect,js,博客,blog"><meta property="og:type" content="website"><meta property="og:title" content="明日之事 事事难求"><meta property="og:url" content="http://yoursite.com/index.html"><meta property="og:site_name" content="明日之事 事事难求"><meta property="og:description" content="Vue,Raect,js,博客,blog"><meta property="og:locale" content="zh-Hans"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="明日之事 事事难求"><meta name="twitter:description" content="Vue,Raect,js,博客,blog"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/",scheme:"Muse",version:"5.1.4",sidebar:{position:"left",display:"post",offset:12,b2t:!1,scrollpercent:!1,onmobile:!1},fancybox:!0,tabs:!0,motion:{enable:!0,async:!1,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideUpIn"}},duoshuo:{userId:"0",author:"博主"},algolia:{applicationID:"",apiKey:"",indexName:"",hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}}}</script><link rel="canonical" href="http://yoursite.com/"><title>明日之事 事事难求 - 打工是不可能打工的, 这辈子都不可能打工的!</title></head><body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans"><div class="container sidebar-position-left page-home"><div class="headband"><div class="eevee"><div class="body"><div class="head"><div class="ears"><div class="ear"><div class="lobe"></div></div><div class="ear"><div class="lobe"></div></div></div><div class="face"><div class="eyes"><div class="eye"><div class="eyelid"></div></div><div class="eye"><div class="eyelid"></div></div></div><div class="nose"></div><div class="mouth"></div></div></div><div class="chest"><div class="fur"><div class="patch"></div></div><div class="fur"><div class="patch"></div></div><div class="fur"><div class="patch"></div></div></div><div class="legs"><div class="leg"><div class="inner-leg"></div></div><div class="leg"><div class="inner-leg"></div></div><div class="leg"><div class="inner-leg"></div></div><div class="leg"><div class="inner-leg"></div></div></div><div class="tail"><div class="tail"><div class="tail"><div class="tail"><div class="tail"><div class="tail -end"></div></div></div></div></div></div></div></div></div><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div id="sky"><div id="background" class="container"><svg id="svgout" height="100%" width="100%" viewbox="0 0 550 400"><defs><g id="bottomShadow"><path fill="#000000" stroke="none" d="M270.5 225.95 127.35 316.65 266.8 400 409.6 309.25 270.5 225.95Z"/></g><g id="Layer52_0_FILL"><path class="topGrass" fill="#B9D668" stroke="none" d="M397.85 229.3 397.85 225.6 269.85 152 135.75 228.6 135.75 233.65 262.1 306.55 397.85 229.3Z"/></g><g id="Layer51_0_FILL"><path class="leftSideGrass" fill="#6E9E4F" stroke="none" d="M135.1 229.95 135.1 256.85 262.1 328.4 262.1 301.85 135.1 229.95Z"/></g><g id="Layer50_0_FILL"><path class="rightGrassTop" fill="#8CB154" stroke="none" d="M397.85 225.95 395.8 225.95 261.75 301.55 261.75 328.4 397.85 251.15 397.85 225.95Z"/></g><g id="Layer48_0_FILL"><path class="crustLeftTop" fill="#955541" stroke="none" d="M135.45 282.4 135.75 298.15 262.1 372.1 261.75 355.65 135.45 282.4Z"/></g><g id="Layer47_0_FILL"><path class="middleLeftCrust" fill="#C77E61" stroke="none" d="M135.1 270.3 135.1 283.05 275.9 364.35 271.85 348.9 135.1 270.3Z"/></g><g id="Layer46_0_FILL"><path class="crustLeftTop" fill="#955541" stroke="none" d="M135.1 255.15 135.1 270.3 262.1 343.55 262.1 328.05 135.1 255.15Z"/></g><g id="Layer45_0_FILL"><path class="topRightCrust" fill="#A47237" stroke="none" d="M397.5 294.5 397.5 277 261.75 355.3 261.75 372.75 397.5 294.5Z"/></g><g id="Layer44_0_FILL"><path class="middleRightCrust" fill="#C89451" stroke="none" d="M397.5 269.95 397.15 266.6 262.1 343.2 262.1 355.95 397.5 279.7 397.5 269.95Z"/></g><g id="Layer43_0_FILL"><path class="topRightCrust" fill="#A47237" stroke="none" d="M397.5 266.6 397.5 250.45 261.75 328.4 261.75 343.85 397.5 266.6Z"/></g><g id="Layer41_0_FILL"><path class="greyRoad" fill="#B2B2B1" stroke="none" d="M295.05 283.05Q299.05 280.35 308.45 275.3 317.85 269.95 323.6 266.9L268.8 233.65 338.05 191.35 309.15 174.55 177.75 254.5Q191.55 262.2 198.25 266.25 204.65 269.95 209.7 271.95L241.6 250.45 295.05 283.05Z"/></g><g id="Layer40_0_FILL"><path fill="#FFFFFF" stroke="none" d="M199.95 256.85Q194.55 261.2 191.9 262.2L194.9 263.9 200.95 259.2 199.95 256.85M225.8 243.75 224.8 241.75 211.05 250.8 212.05 252.8 225.8 243.75M308.15 275.65 296.7 266.6 295.35 268.6 306.8 277.7 308.15 275.65M275.9 253.5 274.55 255.5 285.95 264.55 287.3 262.55 275.9 253.5M251.7 227.3 250.7 225.25 236.9 234.35 237.9 236.35 251.7 227.3M257.05 240.7 254.05 240.7 268.8 249.8 269.5 247.75 257.05 240.7M277.2 207.8 263.45 216.85 264.45 218.9 278.25 209.8 277.2 207.8M305.1 192.65 304.1 190.65 290.3 199.75 291.35 201.75 305.1 192.65Z"/></g><g id="Layer38_0_FILL"><path class="frontFascia" fill="#ECB27B" stroke="none" d="M359.25 187.95 346.4 174.95 333.85 202.9 359.25 187.95Z"/></g><g id="Layer37_0_FILL"><path class="frontWall" fill="#EFA258" stroke="none" d="M334 201.05 334.35 232 359.2 217.55 359.25 187.95 334 201.05Z"/></g><g id="Layer36_0_FILL"><path class="leftWall" fill="#C57F42" stroke="none" d="M334.35 232.3 334.35 205.1 305.1 191.35 305.1 216.85 334.35 232.3Z"/></g><g id="Layer35_0_FILL"><path class="rightRoof" fill="#EF4427" stroke="none" d="M329.7 167.9 331.05 167.9 344.55 176.7 347.85 176.7 363 192.25 363.15 189.55 350.65 176.7 350.55 176.7 334.25 167.5 334.25 159.1 329.7 159.1 329.7 164.9 322.65 160.95 322.3 162.15 329.7 167 329.7 167.9Z"/></g><g id="Layer34_0_FILL"><path class="leftRoof" fill="#F2563B" stroke="none" d="M334.05 207.05 350.65 176.7 322.1 160.45 302.1 192.05 334.05 207.05Z"/></g><g id="Layer30_0_FILL"><path id="windowFour" class="windows" stroke="none" fill="#975A42" d="M341.35 203.3Q340.9 203.45 340.5 203.8 340.1 204.2 339.85 204.75 339.7 205 339.7 205.3 339.6 205.75 339.7 206.1 339.7 206.15 339.7 206.2 339.8 206.5 340 206.8 340.55 207.4 341.45 207.4 342.35 207.4 343 206.8 343.4 206.5 343.65 206.1 343.85 205.75 343.95 205.3 344.05 204.4 343.55 203.8 343.3 203.45 343 203.3 342.65 203.15 342.2 203.15 341.8 203.15 341.35 203.3M355.85 198.45Q355.8 198.2 355.6 198 355.1 197.4 354.2 197.4 353.35 197.4 352.6 198 351.85 198.65 351.7 199.55 351.7 199.7 351.7 199.85 351.6 200.5 352 201.05 352.55 201.65 353.45 201.65 354.3 201.65 355.05 201.05 355.45 200.7 355.7 200.25 355.8 200.05 355.9 199.85 355.95 199.7 355.95 199.55 356.05 198.95 355.85 198.45Z"/><path class="door" fill="#B65041" stroke="none" d="M351.95 211.2 351.8 211.2 346.05 215.1 346.05 225.2 351.95 221.6 351.95 211.2M351.2 211.2 351.35 211.2 351.35 211.1 351.2 211.2Z"/></g><g><path id="Layer30_0_FILL" fill="#000000" fill-opacity="1" stroke="none" d="M183.7 215.3 183.7 215.6Q187.25 231.75 212.25 234.35L183.7 215.3Z"/></g><g id="Layer29_0_FILL"><path fill="#000000" fill-opacity="0.4" stroke="none" d="M305.1 216.85 305.15 217.2Q309.45 233.2 334.35 232.3L305.1 216.85Z"/></g><g id="Layer27_0_FILL"><path class="vegetation" fill="#78A950" stroke="none" d="M177.45 231.65Q175.75 235.35 181.8 239.35 185.5 235.7 185.15 231.3 182.8 230.65 181.45 234 179.45 231.3 177.45 231.65M236.9 266.6Q235.2 270.3 241.25 274.3 244.95 270.6 244.65 266.25 242.3 265.6 240.95 268.95 238.9 266.25 236.9 266.6M254.7 277Q253.05 280.7 259.1 284.75 262.75 281.05 262.45 276.65 260.1 276 258.75 279.35 256.7 276.65 254.7 277M315.5 245.75Q313.5 243.05 311.5 243.4 309.8 247.1 315.85 251.15 319.55 247.45 319.2 243.05 316.85 242.4 315.5 245.75M295.35 232.65Q293.7 236.35 299.75 240.4 303.45 236.7 303.1 232.3 300.75 231.65 299.4 235 297.4 232.3 295.35 232.65M277.2 171.85Q275.55 175.55 281.6 179.55 285.3 175.85 284.95 171.5 282.6 170.85 281.25 174.2 279.25 171.5 277.2 171.85Z"/></g><g id="Layer26_0_FILL"><path class="treeWood" fill="#AE663D" stroke="none" d="M175.1 177.55 172.05 177.55 172.05 191.1 159.3 172.85Q154.6 171.5 172.05 195.7L172.05 212.5 175.1 212.5 175.1 177.55M252.7 151.35 249 151.35 249 176.9 252.7 176.9 252.7 151.35Z"/></g><g id="Layer25_0_FILL"><path class="vegetation" fill="#77A951" stroke="none" d="M192.55 179.55Q200.95 173.5 200.95 165.1 200.95 156.4 192.55 150 184.15 144.3 172.05 144.3 160.3 144.3 151.9 150 143.15 156.4 143.15 165.1 143.15 173.5 151.9 179.55 160.3 185.95 172.05 185.95 184.15 185.95 192.55 179.55M236.25 106.65Q230.2 116.05 230.2 129.15 230.2 142.25 236.25 151.35 242.3 160.75 250.7 160.75 258.75 160.75 264.8 151.35 270.85 142.25 270.85 129.15 270.85 116.05 264.8 106.65 258.75 97.6 250.7 97.6 242.3 97.6 236.25 106.65Z"/></g><g id="Layer24_0_FILL"><path class="vegetation" fill="#77A951" stroke="none" d="M158.3 221.9Q160.65 221.9 161.95 220.2 163 219.55 163.3 218.55 164.65 218.9 166.35 218.9 170.05 218.9 172.4 216.2 175.1 213.85 175.1 210.15 175.1 206.45 172.4 203.75 170.05 201.4 166.35 201.4 162.65 201.4 159.95 203.75 157.6 206.45 157.6 210.15 157.6 210.8 157.6 211.15 155.95 211.5 154.6 212.5 152.9 214.15 152.9 216.55 152.9 218.9 154.6 220.2 156.25 221.9 158.3 221.9M338.35 240.05Q341.05 237.7 341.05 234 341.05 230.3 338.35 227.6 336 225.25 332.3 225.25 328.65 225.25 325.95 227.6 323.6 230.3 323.6 234 323.6 237.7 325.95 240.05 328.65 242.75 332.3 242.75 336 242.75 338.35 240.05Z"/></g><g id="Layer22_0_FILL"><path class="rightRoof" fill="#D05041" stroke="none" d="M220 173.85 236.8 186.7 264.35 171.15 244.5 159.55 220 173.85Z"/></g><g id="Layer21_0_FILL"><path class="leftWall" fill="#C57F42" stroke="none" d="M212.25 191.35 183.35 172.3 183.7 215.3 212.25 234.35 212.25 191.35Z"/></g><g id="Layer20_0_FILL"><path class="rightRoof" fill="#EF4427" stroke="none" d="M192.1 149.85 236.45 174.8 243.1 171.4Q220.05 150.55 196.3 139.95L192.1 149.85Z"/></g><g id="Layer19_0_FILL"><path class="frontFascia" fill="#EBB17B" stroke="none" d="M226.85 160.95 212 190.6 229.75 192.6 239.75 172.85 226.85 160.95Z"/></g><g id="Layer18_0_FILL"><path class="frontWall" fill="#EFA258" stroke="none" d="M240.15 172.65 211.9 191.6 212.25 233.65 264.35 201.7 264.35 170.8 240.8 184.45 240.15 172.65Z"/></g><g id="Layer17_0_FILL"><path class="rightRoof" fill="#EF4427" stroke="none" d="M210.9 142.2 205.9 142.2 205.9 152.65 210.9 152.65 210.9 142.2Z"/></g><g><path id="Layer16_0_FILL" class="leftRoof" fill="#F2563B" stroke="none" d="M210.25 195.5 227.4 160.95 195.45 141.35 177.65 175.85 210.25 195.5Z"/></g><g><path id="sun" fill="#E3BD0E" stroke="none" d="M257.05 15.95Q251.7 15.95 248 19.65 244.3 23.35 244.3 28.7 244.3 34.1 248 37.8 251.7 41.5 257.05 41.5 262.45 41.5 266.15 37.8 269.85 34.1 269.85 28.7 269.85 23.35 266.15 19.65 262.45 15.95 257.05 15.95Z"/></g><g id="Layer8_0_FILL"><path fill="#975A42" stroke="none" d="M238.45 189.65Q238.295703125 189.362109375 238.05 189.1 237.35 188.3 236.2 188.3 235.05 188.3 234.15 189.1 233.3 189.9 233.2 191.05 233.1 192.2 233.8 193 234.55 193.8 235.7 193.8 236.85 193.8 237.7 193 238.1970703125 192.558203125 238.45 192 238.6552734375 191.56484375 238.7 191.05 238.7671875 190.276953125 238.45 189.65M220.55 197.55Q220 197.55 219.5 197.75 218.95 197.95 218.5 198.35 217.933203125 198.8833984375 217.7 199.55 217.5833984375 199.916796875 217.55 200.3 217.4923828125 200.96171875 217.7 201.5 217.852734375 201.9103515625 218.15 202.25 218.95 203.05 220.1 203.05 221.25 203.05 222.05 202.25 222.95 201.45 223.05 200.3 223.15 199.15 222.4 198.35 222.05 197.95 221.65 197.75 221.15 197.55 220.55 197.55Z"/></g><g id="Layer7_0_FILL"><path class="door" fill="#B65041" stroke="none" d="M233.55 206.75 225.9 211.95 226.25 225.5 233.95 220.35 233.55 206.75Z"/></g><g><path id="windowOne" class="windows" fill="#975A42" stroke="none" d="M188.65 198.4 188.8 204.1 198.65 210.45 198.55 204.75 188.65 198.4M208.45 216.8 208.35 211.1 198.55 204.75 198.65 210.45 208.45 216.8M188.8 204.1 188.95 209.8 198.8 216.15 198.65 210.45 188.8 204.1M208.6 222.5 208.45 216.8 198.65 210.45 198.8 216.15 208.6 222.5Z"/></g><g><path id="windowThree" class="windows" fill="#975A42" stroke="none" d="M311.7 214.1 318.55 217.55 318.45 211.9 311.6 208.45 311.7 214.1M325.4 221 325.25 215.35 318.45 211.9 318.55 217.55 325.4 221M318.4 206.2 311.5 202.75 311.6 208.45 318.45 211.9 318.4 206.2M325.25 215.35 325.2 209.7 318.4 206.2 318.45 211.9 325.25 215.35Z"/></g><g id="Layer2_0_FILL"><path class="door" fill="#B65041" stroke="none" d="M259.7 183.25 244.6 191.9 244.6 213.8 259.7 204.55 259.7 183.25Z"/></g><path id="windowTwo" fill="#975A42" class="windows" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" d="M223.05 200.3Q222.95 201.45 222.05 202.25 221.25 203.05 220.1 203.05 218.95 203.05 218.15 202.25 217.852734375 201.9103515625 217.7 201.5 217.4923828125 200.96171875 217.55 200.3 217.5833984375 199.916796875 217.7 199.575 217.933203125 198.8833984375 218.5 198.35 218.95 197.95 219.5 197.75 220 197.55 220.55 197.55 221.15 197.55 221.65 197.75 222.05 197.95 222.4 198.35 223.15 199.15 223.05 200.3ZM238.7 191.05Q238.6552734375 191.56484375 238.45 192 238.1970703125 192.558203125 237.7 193 236.85 193.8 235.7 193.8 234.55 193.8 233.8 193 233.1 192.2 233.2 191.05 233.3 189.9 234.15 189.1 235.05 188.3 236.2 188.3 237.35 188.3 238.05 189.1 238.295703125 189.362109375 238.45 189.65 238.7671875 190.276953125 238.7 191.05Z"/><path fill="#F2563B" stroke="none" d="M351.95 211.2 351.8 211.2 346.05 215.1 346.05 225.2 351.95 221.6 351.95 211.2Z"/><path id="Layer6_0_1_STROKES" class="windowRims" stroke="#AE663D" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M198.55 204.75 208.35 211.1 208.45 216.8 208.6 222.5 198.8 216.15 188.95 209.8 188.8 204.1 188.65 198.4 198.55 204.75 198.65 210.45 208.45 216.8M198.8 216.15 198.65 210.45 188.8 204.1"/><path id="Layer5_0_1_STROKES" class="windowRims" stroke="#AE663D" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M325.25 215.35 325.4 221 318.55 217.55 311.7 214.1 311.6 208.45 311.5 202.75 318.4 206.2 325.2 209.7 325.25 215.35 318.45 211.9 318.55 217.55M318.4 206.2 318.45 211.9 311.6 208.45"/></defs><g id="shadow"><g transform="matrix( 1, 0, 0, 1, 0,0) "><use xlink:href="#bottomShadow"/></g></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use xlink:href="#sun"/></g><g id="earth"><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer52_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer51_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer50_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer48_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer47_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer46_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer45_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer44_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer43_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer41_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer40_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer38_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer37_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer36_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer35_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer34_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#windowFour"/><use class="element" xlink:href="#Layer32_0_1_STROKES"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer30_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer27_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer26_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer25_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer24_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer22_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer21_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer20_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer19_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer18_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer17_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer16_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer8_0_FILL"/><use class="element" xlink:href="#windowTwo"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer7_0_FILL"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#windowOne"/><use class="element" xlink:href="#Layer6_0_1_STROKES"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#windowThree"/><use class="element" xlink:href="#Layer5_0_1_STROKES"/></g><g transform="matrix( 1, 0, 0, 1, 0,0) "><use class="element" xlink:href="#Layer2_0_FILL"/></g></g></svg><div id="toggleButton" class="day-toggle"><div class="sun-icon"></div> <label class="switch"><input id="toggleCheckbox" type="checkbox"><div class="slider"></div></label><div class="cloud-icon"></div></div></div></div><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">明日之事 事事难求</span><span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle">打工是不可能打工的, 这辈子都不可能打工的!</p></div><div class="site-nav-toggle"> <button><span class="btn-bar"></span><span class="btn-bar"></span><span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br> 首页</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br> 归档</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br> 标签</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i><br> 关于</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br> 搜索</a></li></ul><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"><span class="search-icon"><i class="fa fa-search"></i></span><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span><div class="local-search-input-wrapper"> <input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"></div></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><section id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/11/25/掌握JavaScript中的IoC/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="李斌"><meta itemprop="description" content><meta itemprop="image" content="/images/tx.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="明日之事 事事难求"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2020/11/25/掌握JavaScript中的IoC/" itemprop="url">掌握JavaScript中的IoC</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-11-25T22:40:42+08:00">2020-11-25</time></span></div></header><div class="post-body" itemprop="articleBody"> IoC,控制反转(Inversion of Control)。它是依赖倒置原则(Dependence Inversion Principle)的一种实现方式,也就是面向接口编程。IoC的实现借助于第三方容器,可以解耦具有依赖关系的对象,降低开发维护成本。 接下来我们一起通过一个完整的示例来进一步了解 ...<div class="post-button text-center"> <a class="btn" href="/2020/11/25/掌握JavaScript中的IoC/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/07/12/前端新玩具Vite/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="李斌"><meta itemprop="description" content><meta itemprop="image" content="/images/tx.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="明日之事 事事难求"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2020/07/12/前端新玩具Vite/" itemprop="url">前端新玩具Vite</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-07-12T14:44:53+08:00">2020-07-12</time></span></div></header><div class="post-body" itemprop="articleBody"> 知识储备 掌握ES Modules特性 了解HTTP 2标准 相关介绍Vite的定义面向现代浏览器的一个更轻、更快的Web应用开发工具,基于ECMAScript标准原生模块系统(ES Modules)实现 Vite的由来如果应用比较复杂,使用Webpack的开发过程相对没有那么丝滑。 Webp ...<div class="post-button text-center"> <a class="btn" href="/2020/07/12/前端新玩具Vite/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/06/20/Deno快速上手指北/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="李斌"><meta itemprop="description" content><meta itemprop="image" content="/images/tx.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="明日之事 事事难求"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2020/06/20/Deno快速上手指北/" itemprop="url">Deno快速上手指北</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-06-20T22:02:20+08:00">2020-06-20</time></span></div></header><div class="post-body" itemprop="articleBody"> Deno 是 V8 上的安全 TypeScript 运行时。 无 package.json (去中心化)、npm,不追求兼容 Node 采用Rust编写(最初使用Go) 支持 TypeScript 开箱即用,使用 V8 6.8.275.3 引擎 Modern JS, ES Modules , ...<div class="post-button text-center"> <a class="btn" href="/2020/06/20/Deno快速上手指北/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/05/23/一个极简的React-Hooks状态管理库的实现/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="李斌"><meta itemprop="description" content><meta itemprop="image" content="/images/tx.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="明日之事 事事难求"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2020/05/23/一个极简的React-Hooks状态管理库的实现/" itemprop="url">一个极简的React-Hooks状态管理库的实现</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-05-23T23:11:58+08:00">2020-05-23</time></span></div></header><div class="post-body" itemprop="articleBody"> 前端技术的发展日新月异,vue,react,angular等的兴起,为我们带来了新的开发体验。但随着技术的革新,以及前端页面复杂度的提升,对应有localStorage,eventBus,vuex,redux,mobx,rxjs等数据存储和管理的方案,所以觉得研究状态管理还是很有必要的。 当然,使用 ...<div class="post-button text-center"> <a class="btn" href="/2020/05/23/一个极简的React-Hooks状态管理库的实现/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/05/11/大前端时代下的微前端如何做/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="李斌"><meta itemprop="description" content><meta itemprop="image" content="/images/tx.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="明日之事 事事难求"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2020/05/11/大前端时代下的微前端如何做/" itemprop="url">大前端时代下的微前端如何做</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-05-11T23:43:24+08:00">2020-05-11</time></span></div></header><div class="post-body" itemprop="articleBody"> 微前端的定义微前端本质是是一种项目架构方案,是为了解决前端项目太过庞大,导致项目管理维护难、团队协作乱、升级迭代困难、技术栈不统一等等问题,有点类似微服务的概念,是将微服务理念扩展到前端开发的一种应用. 微前端出现在我们的视线的次数越来越多,因为to B 的发展越来越迅猛,导致中后台应用需求激增,如 ...<div class="post-button text-center"> <a class="btn" href="/2020/05/11/大前端时代下的微前端如何做/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/05/03/SSR踩坑集锦/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="李斌"><meta itemprop="description" content><meta itemprop="image" content="/images/tx.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="明日之事 事事难求"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2020/05/03/SSR踩坑集锦/" itemprop="url">SSR踩坑集锦</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-05-03T14:45:13+08:00">2020-05-03</time></span></div></header><div class="post-body" itemprop="articleBody"> 研究SSR距现在有些年头了了,这里总结我当时踩过的和看到的坑,为同样在研究SSR的小伙伴节省时间成本,最重要的是怕自己忘了。。。 直奔主题使用服务端渲染常见问题: 过滤CSS和图片文件12345678910111213141516171819202122// SSR环境对样式文件处理csshook( ...<div class="post-button text-center"> <a class="btn" href="/2020/05/03/SSR踩坑集锦/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/04/02/从ChromeV8源码看JS数组/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="李斌"><meta itemprop="description" content><meta itemprop="image" content="/images/tx.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="明日之事 事事难求"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2020/04/02/从ChromeV8源码看JS数组/" itemprop="url">从ChromeV8源码看JS数组</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-04-02T22:20:57+08:00">2020-04-02</time></span></div></header><div class="post-body" itemprop="articleBody"> 简介数组、链表、栈、队列都是线性表,它表示的结构都是一段线性的结构,与之对应的就是非线性表,例如树、图、堆等,它表示的结构都非线性。 本节主要介绍 JavaScript 数组,在开始本章节前,思考一个问题: 我们知道在 JavaScript 中,可以在数组中保存不同类型值,并且数组可以动态增长,不像 ...<div class="post-button text-center"> <a class="btn" href="/2020/04/02/从ChromeV8源码看JS数组/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/03/21/APP唤起那点破事/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="李斌"><meta itemprop="description" content><meta itemprop="image" content="/images/tx.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="明日之事 事事难求"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2020/03/21/APP唤起那点破事/" itemprop="url">APP唤起那点破事</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-03-21T22:16:39+08:00">2020-03-21</time></span></div></header><div class="post-body" itemprop="articleBody"> JavaScript 是运行在一个单独的 JS Context 中(例如,WebView 的 Webkit 引擎、JSCore)。由于这些 Context 与原生运行环境的天然隔离,我们可以将这种情况与 RPC(Remote Procedure Call,远程过程调用)通信进行类比,将 Native ...<div class="post-button text-center"> <a class="btn" href="/2020/03/21/APP唤起那点破事/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/03/04/你可能不知道的eval的妙用/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="李斌"><meta itemprop="description" content><meta itemprop="image" content="/images/tx.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="明日之事 事事难求"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2020/03/04/你可能不知道的eval的妙用/" itemprop="url">你可能不知道的eval的妙用</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-03-04T23:56:54+08:00">2020-03-04</time></span></div></header><div class="post-body" itemprop="articleBody"> 前言eval() 是 JavaScript 中一个非常有用的函数,它可以一段代码字符串动态执行。然而各种编码规范和最佳实践都强烈抵制 eval,几乎将 eval 打入了死牢,大牛 Douglas Crockford 也在《JavaScript 语言精粹》一书中将 eval 视为 JavaScript ...<div class="post-button text-center"> <a class="btn" href="/2020/03/04/你可能不知道的eval的妙用/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/03/02/浏览器和Node的Event-Loop/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="李斌"><meta itemprop="description" content><meta itemprop="image" content="/images/tx.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="明日之事 事事难求"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2020/03/02/浏览器和Node的Event-Loop/" itemprop="url">浏览器和Node的Event-Loop</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-03-02T21:40:29+08:00">2020-03-02</time></span></div></header><div class="post-body" itemprop="articleBody"> 浏览器中的事件循环JavaScript代码的执行过程中,除了依靠函数调用栈来搞定函数的执行顺序外,还依靠任务队列(task queue)来搞定另外一些代码的执行。整个执行过程,我们称为事件循环过程。一个线程中,事件循环是唯一的,但是任务队列可以拥有多个。任务队列又分为macro-task(宏任务)与 ...<div class="post-button text-center"> <a class="btn" href="/2020/03/02/浏览器和Node的Event-Loop/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article></section><nav class="pagination"> <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">…</span><a class="page-number" href="/page/22/">22</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right"></i></a></nav></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span><span class="sidebar-toggle-line sidebar-toggle-line-middle"></span><span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div class="sidebar-inner"><section class="site-overview-wrap sidebar-panel sidebar-panel-active"><div class="site-overview"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"> <img class="site-author-image" itemprop="image" src="/images/tx.jpg" alt="李斌"><p class="site-author-name" itemprop="name">李斌</p><p class="site-description motion-element" itemprop="description">人生如逆旅 我亦是行人</p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"> <a href="/archives/"><span class="site-state-item-count">213</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-tags"> <a href="/tags/index.html"><span class="site-state-item-count">121</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/libin1991" target="_blank" title="GitHub"><i class="fa fa-fw fa-github"></i> GitHub</a></span><span class="links-of-author-item"><a href="https://juejin.im/user/57e737f6c4c971005f6bcd8d" target="_blank" title="juejin"><i class="fa fa-fw fa-spinner"></i> juejin</a></span></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">© <span itemprop="copyrightYear">2020</span><span class="with-love"><i class="fa fa-user"></i></span> <span class="author" itemprop="copyrightHolder">李斌</span></div><div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div> <span class="post-meta-divider">|</span><div class="theme-info">主题 — <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script><script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script><script type="text/javascript">
// Popup Window;
var isfetched = false;
var isXml = true;
// Search DB path;
var search_path = "search.xml";
if (search_path.length === 0) {
search_path = "search.xml";
} else if (/json$/i.test(search_path)) {
isXml = false;
}
var path = "/" + search_path;
// monitor main search box;
var onPopupClose = function (e) {
$('.popup').hide();
$('#local-search-input').val('');
$('.search-result-list').remove();
$('#no-result').remove();
$(".local-search-pop-overlay").remove();
$('body').css('overflow', '');
}
function proceedsearch() {
$("body")
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
.css('overflow', 'hidden');
$('.search-popup-overlay').click(onPopupClose);
$('.popup').toggle();
var $localSearchInput = $('#local-search-input');
$localSearchInput.attr("autocapitalize", "none");
$localSearchInput.attr("autocorrect", "off");
$localSearchInput.focus();
}
// search function;
var searchFunc = function(path, search_id, content_id) {
'use strict';
// start loading animation
$("body")
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
'<div id="search-loading-icon">' +
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
'</div>' +
'</div>')
.css('overflow', 'hidden');
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
$.ajax({
url: path,
dataType: isXml ? "xml" : "json",
async: true,
success: function(res) {
// get the contents from search data
isfetched = true;
$('.popup').detach().appendTo('.header-inner');
var datas = isXml ? $("entry", res).map(function() {
return {
title: $("title", this).text(),
content: $("content",this).text(),
url: $("url" , this).text()
};
}).get() : res;
var input = document.getElementById(search_id);
var resultContent = document.getElementById(content_id);
var inputEventFunction = function() {
var searchText = input.value.trim().toLowerCase();
var keywords = searchText.split(/[\s\-]+/);
if (keywords.length > 1) {
keywords.push(searchText);
}
var resultItems = [];
if (searchText.length > 0) {
// perform local searching
datas.forEach(function(data) {
var isMatch = false;
var hitCount = 0;
var searchTextCount = 0;
var title = data.title.trim();
var titleInLowerCase = title.toLowerCase();
var content = data.content.trim().replace(/<[^>]+>/g,"");
var contentInLowerCase = content.toLowerCase();
var articleUrl = decodeURIComponent(data.url);
var indexOfTitle = [];
var indexOfContent = [];
// only match articles with not empty titles
if(title != '') {
keywords.forEach(function(keyword) {
function getIndexByWord(word, text, caseSensitive) {
var wordLen = word.length;
if (wordLen === 0) {
return [];
}
var startPosition = 0, position = [], index = [];
if (!caseSensitive) {
text = text.toLowerCase();
word = word.toLowerCase();
}
while ((position = text.indexOf(word, startPosition)) > -1) {
index.push({position: position, word: word});
startPosition = position + wordLen;
}
return index;
}
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
});
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
isMatch = true;
hitCount = indexOfTitle.length + indexOfContent.length;
}
}
// show search results
if (isMatch) {
// sort index by position of keyword
[indexOfTitle, indexOfContent].forEach(function (index) {
index.sort(function (itemLeft, itemRight) {
if (itemRight.position !== itemLeft.position) {
return itemRight.position - itemLeft.position;
} else {
return itemLeft.word.length - itemRight.word.length;
}
});
});
// merge hits into slices
function mergeIntoSlice(text, start, end, index) {
var item = index[index.length - 1];
var position = item.position;
var word = item.word;
var hits = [];
var searchTextCountInSlice = 0;
while (position + word.length <= end && index.length != 0) {
if (word === searchText) {
searchTextCountInSlice++;
}
hits.push({position: position, length: word.length});
var wordEnd = position + word.length;
// move to next position of hit
index.pop();
while (index.length != 0) {
item = index[index.length - 1];
position = item.position;
word = item.word;
if (wordEnd > position) {
index.pop();
} else {
break;
}
}
}
searchTextCount += searchTextCountInSlice;
return {
hits: hits,
start: start,
end: end,
searchTextCount: searchTextCountInSlice
};
}
var slicesOfTitle = [];
if (indexOfTitle.length != 0) {
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
}
var slicesOfContent = [];
while (indexOfContent.length != 0) {
var item = indexOfContent[indexOfContent.length - 1];
var position = item.position;
var word = item.word;
// cut out 100 characters
var start = position - 20;
var end = position + 80;
if(start < 0){
start = 0;
}
if (end < position + word.length) {
end = position + word.length;
}
if(end > content.length){
end = content.length;
}
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
}
// sort slices in content by search text's count and hits' count
slicesOfContent.sort(function (sliceLeft, sliceRight) {
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
return sliceRight.hits.length - sliceLeft.hits.length;
} else {
return sliceLeft.start - sliceRight.start;
}
});
// select top N slices in content
var upperBound = parseInt('1');
if (upperBound >= 0) {
slicesOfContent = slicesOfContent.slice(0, upperBound);
}
// highlight title and content
function highlightKeyword(text, slice) {
var result = '';
var prevEnd = slice.start;
slice.hits.forEach(function (hit) {
result += text.substring(prevEnd, hit.position);
var end = hit.position + hit.length;
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
prevEnd = end;
});
result += text.substring(prevEnd, slice.end);
return result;
}
var resultItem = '';
if (slicesOfTitle.length != 0) {
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
} else {
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
}
slicesOfContent.forEach(function (slice) {
resultItem += "<a href='" + articleUrl + "'>" +
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
"...</p>" + "</a>";
});
resultItem += "</li>";
resultItems.push({
item: resultItem,
searchTextCount: searchTextCount,
hitCount: hitCount,
id: resultItems.length
});
}
})
};
if (keywords.length === 1 && keywords[0] === "") {
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
} else if (resultItems.length === 0) {
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
} else {
resultItems.sort(function (resultLeft, resultRight) {
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
return resultRight.searchTextCount - resultLeft.searchTextCount;
} else if (resultLeft.hitCount !== resultRight.hitCount) {
return resultRight.hitCount - resultLeft.hitCount;
} else {
return resultRight.id - resultLeft.id;
}
});
var searchResultList = '<ul class=\"search-result-list\">';
resultItems.forEach(function (result) {
searchResultList += result.item;
})
searchResultList += "</ul>";
resultContent.innerHTML = searchResultList;
}
}
if ('auto' === 'auto') {
input.addEventListener('input', inputEventFunction);
} else {
$('.search-icon').click(inputEventFunction);
input.addEventListener('keypress', function (event) {
if (event.keyCode === 13) {
inputEventFunction();
}
});
}
// remove loading animation
$(".local-search-pop-overlay").remove();
$('body').css('overflow', '');
proceedsearch();
}
});
}
// handle and trigger popup window;
$('.popup-trigger').click(function(e) {
e.stopPropagation();
if (isfetched === false) {
searchFunc(path, 'local-search-input', 'local-search-result');
} else {
proceedsearch();
};
});
$('.popup-btn-close').click(onPopupClose);
$('.popup').click(function(e){
e.stopPropagation();
});
$(document).on('keyup', function (event) {
var shouldDismissSearchPopup = event.which === 27 &&
$('.search-popup').is(':visible');
if (shouldDismissSearchPopup) {
onPopupClose();
}
});
</script><script type="text/javascript" src="/js/src/clicklove.js"></script><script type="text/javascript" src="/js/src/clipboard.min.js"></script><script type="text/javascript" src="/js/src/clipboard-use.js"></script></body></html>