Repository navigation
Expand file tree
/
Copy pathatom.xml
More file actions
497 lines (269 loc) · 192 KB
/
Copy pathatom.xml
File metadata and controls
497 lines (269 loc) · 192 KB
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
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>1024子翔的程序人生</title>
<link href="/atom.xml" rel="self"/>
<link href="https://choicelin.github.io/"/>
<updated>2020-06-18T09:59:35.279Z</updated>
<id>https://choicelin.github.io/</id>
<author>
<name>Choicelin</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>Blockly设置预置块到代码区</title>
<link href="https://choicelin.github.io/2020/06/18/Blockly%E8%AE%BE%E7%BD%AE%E9%A2%84%E7%BD%AE%E5%9D%97%E5%88%B0%E4%BB%A3%E7%A0%81%E5%8C%BA/"/>
<id>https://choicelin.github.io/2020/06/18/Blockly设置预置块到代码区/</id>
<published>2020-06-18T09:52:19.000Z</published>
<updated>2020-06-18T09:59:35.279Z</updated>
<content type="html"><![CDATA[<figure class="highlight html"><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><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Blockly Demo: Generating JavaScript<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../../blockly_compressed.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../../blocks_compressed.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../../javascript_compressed.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../../msg/js/en.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></span><br><span class="line"><span class="undefined"> body {</span></span><br><span class="line"><span class="undefined"> background-color: #fff;</span></span><br><span class="line"><span class="undefined"> font-family: sans-serif;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> h1 {</span></span><br><span class="line"><span class="undefined"> font-weight: normal;</span></span><br><span class="line"><span class="undefined"> font-size: 140%;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://developers.google.com/blockly/"</span>></span>Blockly<span class="tag"></<span class="name">a</span>></span> &gt;</span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"../index.html"</span>></span>Demos<span class="tag"></<span class="name">a</span>></span> &gt; Generating JavaScript<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>This is a simple demo of generating code from blocks and running</span><br><span class="line"> the code in a sandboxed JavaScript interpreter.<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>&rarr; More info on <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://developers.google.com/blockly/guides/configure/web/code-generators"</span>></span>Code Generators<span class="tag"></<span class="name">a</span>></span> and <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://developers.google.com/blockly/guides/app-integration/running-javascript"</span>></span>Running JavaScript<span class="tag"></<span class="name">a</span>></span>.<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"showCode()"</span>></span>Show JavaScript<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"runCode()"</span>></span>Run JavaScript<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">p</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"blocklyDiv"</span> <span class="attr">style</span>=<span class="string">"height: 480px; width: 600px;"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">xml</span> <span class="attr">xmlns</span>=<span class="string">"https://developers.google.com/blockly/xml"</span> <span class="attr">id</span>=<span class="string">"toolbox"</span> <span class="attr">style</span>=<span class="string">"display: none"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">category</span> <span class="attr">name</span>=<span class="string">"Logic"</span> <span class="attr">colour</span>=<span class="string">"%{BKY_LOGIC_HUE}"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"controls_if"</span>></span><span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"logic_compare"</span>></span><span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"logic_operation"</span>></span><span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"logic_negate"</span>></span><span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"logic_boolean"</span>></span><span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">category</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">category</span> <span class="attr">name</span>=<span class="string">"Loops"</span> <span class="attr">colour</span>=<span class="string">"%{BKY_LOOPS_HUE}"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"controls_repeat_ext"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">value</span> <span class="attr">name</span>=<span class="string">"TIMES"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"math_number"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">field</span> <span class="attr">name</span>=<span class="string">"NUM"</span>></span>10<span class="tag"></<span class="name">field</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">value</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"controls_whileUntil"</span>></span><span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">category</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">category</span> <span class="attr">name</span>=<span class="string">"Math"</span> <span class="attr">colour</span>=<span class="string">"%{BKY_MATH_HUE}"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"math_number"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">field</span> <span class="attr">name</span>=<span class="string">"NUM"</span>></span>123<span class="tag"></<span class="name">field</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"math_arithmetic"</span>></span><span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"math_single"</span>></span><span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">category</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">category</span> <span class="attr">name</span>=<span class="string">"Text"</span> <span class="attr">colour</span>=<span class="string">"%{BKY_TEXTS_HUE}"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"text"</span>></span><span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"text_length"</span>></span><span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"text_print"</span>></span><span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">category</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">xml</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">xml</span> <span class="attr">xmlns</span>=<span class="string">"https://developers.google.com/blockly/xml"</span> <span class="attr">id</span>=<span class="string">"startBlocks"</span> <span class="attr">style</span>=<span class="string">"display: none"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"controls_if"</span> <span class="attr">inline</span>=<span class="string">"false"</span> <span class="attr">x</span>=<span class="string">"20"</span> <span class="attr">y</span>=<span class="string">"20"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">mutation</span> <span class="attr">else</span>=<span class="string">"1"</span>></span><span class="tag"></<span class="name">mutation</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">value</span> <span class="attr">name</span>=<span class="string">"IF0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"logic_compare"</span> <span class="attr">inline</span>=<span class="string">"true"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">field</span> <span class="attr">name</span>=<span class="string">"OP"</span>></span>EQ<span class="tag"></<span class="name">field</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">value</span> <span class="attr">name</span>=<span class="string">"A"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"math_arithmetic"</span> <span class="attr">inline</span>=<span class="string">"true"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">field</span> <span class="attr">name</span>=<span class="string">"OP"</span>></span>MULTIPLY<span class="tag"></<span class="name">field</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">value</span> <span class="attr">name</span>=<span class="string">"A"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"math_number"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">field</span> <span class="attr">name</span>=<span class="string">"NUM"</span>></span>6<span class="tag"></<span class="name">field</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">value</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">value</span> <span class="attr">name</span>=<span class="string">"B"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"math_number"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">field</span> <span class="attr">name</span>=<span class="string">"NUM"</span>></span>7<span class="tag"></<span class="name">field</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">value</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">value</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">value</span> <span class="attr">name</span>=<span class="string">"B"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"math_number"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">field</span> <span class="attr">name</span>=<span class="string">"NUM"</span>></span>42<span class="tag"></<span class="name">field</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">value</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">value</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">statement</span> <span class="attr">name</span>=<span class="string">"DO0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"text_print"</span> <span class="attr">inline</span>=<span class="string">"false"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">value</span> <span class="attr">name</span>=<span class="string">"TEXT"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"text"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">field</span> <span class="attr">name</span>=<span class="string">"TEXT"</span>></span>Don't panic<span class="tag"></<span class="name">field</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">value</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">statement</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">statement</span> <span class="attr">name</span>=<span class="string">"ELSE"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"text_print"</span> <span class="attr">inline</span>=<span class="string">"false"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">value</span> <span class="attr">name</span>=<span class="string">"TEXT"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">block</span> <span class="attr">type</span>=<span class="string">"text"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">field</span> <span class="attr">name</span>=<span class="string">"TEXT"</span>></span>Panic<span class="tag"></<span class="name">field</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">value</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">statement</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">block</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">xml</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span><br><span class="line"><span class="undefined"> var demoWorkspace = Blockly.inject('blocklyDiv',</span></span><br><span class="line"><span class="undefined"> {media: '../../media/',</span></span><br><span class="line"><span class="undefined"> toolbox: document.getElementById('toolbox')});</span></span><br><span class="line"><span class="undefined"> Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'),</span></span><br><span class="line"><span class="undefined"> demoWorkspace);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"> function showCode() {</span></span><br><span class="line"><span class="undefined"> // Generate JavaScript code and display it.</span></span><br><span class="line"><span class="undefined"> Blockly.JavaScript.INFINITE_LOOP_TRAP = null;</span></span><br><span class="line"><span class="undefined"> var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);</span></span><br><span class="line"><span class="undefined"> alert(code);</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"> function runCode() {</span></span><br><span class="line"><span class="undefined"> // Generate JavaScript code and run it.</span></span><br><span class="line"><span class="undefined"> window.LoopTrap = 1000;</span></span><br><span class="line"><span class="undefined"> Blockly.JavaScript.INFINITE_LOOP_TRAP =</span></span><br><span class="line"><span class="undefined"> 'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';</span></span><br><span class="line"><span class="undefined"> var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);</span></span><br><span class="line"><span class="undefined"> Blockly.JavaScript.INFINITE_LOOP_TRAP = null;</span></span><br><span class="line"><span class="undefined"> try {</span></span><br><span class="line"><span class="undefined"> eval(code);</span></span><br><span class="line"><span class="undefined"> } catch (e) {</span></span><br><span class="line"><span class="undefined"> alert(e);</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure><blockquote><p> Blockly.Xml.domToWorkspace(document.getElementById(‘startBlocks’),<br> demoWorkspace); 这个就是设置默认块显示在代码区域</p></blockquote><p>如果需要用xml字符串可以使用Blockly.Xml.textToDom将xml string转化为dom,再传入Blockly.Xml.domToWorkspace第一个参数</p>]]></content>
<summary type="html">
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class=
</summary>
<category term="Google Blockly" scheme="https://choicelin.github.io/tags/Google-Blockly/"/>
</entry>
<entry>
<title>mac安装ishowu audio capture后无法开机解决</title>
<link href="https://choicelin.github.io/2019/12/14/mac%E5%AE%89%E8%A3%85ishowu-audio-capture%E5%90%8E%E6%97%A0%E6%B3%95%E5%BC%80%E6%9C%BA%E8%A7%A3%E5%86%B3/"/>
<id>https://choicelin.github.io/2019/12/14/mac安装ishowu-audio-capture后无法开机解决/</id>
<published>2019-12-14T02:59:54.000Z</published>
<updated>2019-12-14T03:01:22.889Z</updated>
<content type="html"><![CDATA[<p>删除Volume目录下的用户目录下的 Library/Extension 里面的ishowu开头的一个ketx文件即可</p><p>如有不懂，请联系413807584（qq）</p>]]></content>
<summary type="html">
<p>删除Volume目录下的用户目录下的 Library/Extension 里面的ishowu开头的一个ketx文件即可</p>
<p>如有不懂，请联系413807584（qq）</p>
</summary>
<category term="mac" scheme="https://choicelin.github.io/tags/mac/"/>
</entry>
<entry>
<title>mapbox做画多边形来进行地理位置信息查询</title>
<link href="https://choicelin.github.io/2019/09/16/mapbox%E5%81%9A%E7%94%BB%E5%A4%9A%E8%BE%B9%E5%BD%A2%E6%9D%A5%E8%BF%9B%E8%A1%8C%E5%9C%B0%E7%90%86%E4%BD%8D%E7%BD%AE%E4%BF%A1%E6%81%AF%E6%9F%A5%E8%AF%A2/"/>
<id>https://choicelin.github.io/2019/09/16/mapbox做画多边形来进行地理位置信息查询/</id>
<published>2019-09-16T03:49:47.000Z</published>
<updated>2019-09-16T04:07:04.000Z</updated>
<content type="html"><![CDATA[<h1 id="mapbox介绍"><a href="#mapbox介绍" class="headerlink" title="mapbox介绍"></a>mapbox介绍</h1><p>mapbox是一款国外的地图工具，这里介绍的是mapbox gl js api。是在浏览器中显示地图信息。</p><h1 id="mapbox画多边形"><a href="#mapbox画多边形" class="headerlink" title="mapbox画多边形"></a>mapbox画多边形</h1><p>mapbox画多边形是使用了mapbox-gl-draw这个配套的库，这个库的api在初始化加上defaultMode为simple_select即可。可以禁用自定义控件，自己通过changeMode的方式来自定义控件。这里具体说一下，比如你要画图，你就按自己定义的按钮，调changeMode到画图模式上去，画完会自动回到默认的simple_select模式。</p><h1 id="多变形地理位置信息查询的原理"><a href="#多变形地理位置信息查询的原理" class="headerlink" title="多变形地理位置信息查询的原理"></a>多变形地理位置信息查询的原理</h1><p>原理上是这样的，在通过mapbox-gl-draw的draw.create事件中能过获取到多边形的点的经纬度，这几个点的排列是能够绕出一块地理区域的，后端可以根据这个来把数据中的经纬度做一个对比，比如，有一种算法可以是获取最大的经度和最小的经度，最大的纬度和最小的纬度，然后在同时这两个范围内的数据返回给前端做展示即可。这个算法的精度还不够精确，这里只是举例。</p><h1 id="授人以渔"><a href="#授人以渔" class="headerlink" title="授人以渔"></a>授人以渔</h1><p>相信大家看了上面的思路，应该心中有底了吧。</p><h1 id="warning"><a href="#warning" class="headerlink" title="warning"></a>warning</h1><p>注意，拉框查询可以使用官方的示例，拉框查询就是画矩形，是一比一还原上述算法，拉框查询无需使用mapbox-gl-draw这个库，详见官方示例。</p>]]></content>
<summary type="html">
<h1 id="mapbox介绍"><a href="#mapbox介绍" class="headerlink" title="mapbox介绍"></a>mapbox介绍</h1><p>mapbox是一款国外的地图工具，这里介绍的是mapbox gl js api。是在浏览器中
</summary>
<category term="地图" scheme="https://choicelin.github.io/tags/%E5%9C%B0%E5%9B%BE/"/>
</entry>
<entry>
<title>Node.js异步演进过程</title>
<link href="https://choicelin.github.io/2019/07/28/Node-js%E5%BC%82%E6%AD%A5%E6%BC%94%E8%BF%9B%E8%BF%87%E7%A8%8B/"/>
<id>https://choicelin.github.io/2019/07/28/Node-js异步演进过程/</id>
<published>2019-07-28T03:24:12.000Z</published>
<updated>2019-07-28T04:19:30.000Z</updated>
<content type="html"><![CDATA[<p>Node.js是事件机制地处理请求中的io调用，这时就有了异步的概念出现，也就是说先去做其他事情，等io处理好了，再接受通知，并执行后续操作。下面我们来聊聊，Node.js里面怎么写异步的代码，异步流程控制概念。</p><p>首先异步的第一重境界是回调函数。Node常见的异步api都会接受一个函数参数，叫回调函数，也就是上面提到的接受通知后的后续操作都在这个回调函数中执行。对几个连续的异步操作的同步化就是异步流程控制。</p><p>回调函数示例</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line">fs.rename(<span class="string">'/tmp/hello'</span>, <span class="string">'/tmp/world'</span>, (err) => {</span><br><span class="line"> <span class="keyword">if</span> (err) <span class="keyword">throw</span> err;</span><br><span class="line"> fs.stat(<span class="string">'/tmp/world'</span>, (err, stats) => {</span><br><span class="line"> <span class="keyword">if</span> (err) <span class="keyword">throw</span> err;</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`stats: <span class="subst">${<span class="built_in">JSON</span>.stringify(stats)}</span>`</span>);</span><br><span class="line"> });</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>上面rename的第三个参数以及stat的第二个参数均为回调函数。</p><p>express框架早期风格就是以回调的方式处理异步。</p><p>这种方式不太好的地方是当同步化的时候，就会导致代码嵌套层级过深，形成回调地狱。</p><p>回调地狱举例：</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line">fs.rename(<span class="string">'/tmp/hello'</span>, <span class="string">'/tmp/world'</span>, (err) => {</span><br><span class="line"> <span class="keyword">if</span> (err) <span class="keyword">throw</span> err;</span><br><span class="line"> fs.rename(<span class="string">'/tmp/world'</span>, <span class="string">'/tmp/hello'</span>, (err, stats) => {</span><br><span class="line"> <span class="keyword">if</span> (err) <span class="keyword">throw</span> err;</span><br><span class="line"> fs.rename(<span class="string">'/tmp/hello'</span>, <span class="string">'/tmp/world'</span>, (err) => {</span><br><span class="line"> <span class="keyword">if</span> (err) <span class="keyword">throw</span> err;</span><br><span class="line"> fs.rename(<span class="string">'/tmp/world'</span>, <span class="string">'/tmp/hello'</span>, (err, stats) => {</span><br><span class="line"> <span class="keyword">if</span> (err) <span class="keyword">throw</span> err;</span><br><span class="line"> fs.rename(<span class="string">'/tmp/hello'</span>, <span class="string">'/tmp/world'</span>, (err) => {</span><br><span class="line"> <span class="keyword">if</span> (err) <span class="keyword">throw</span> err;</span><br><span class="line"> fs.rename(<span class="string">'/tmp/world'</span>, <span class="string">'/tmp/hello'</span>, (err, stats) => {</span><br><span class="line"> <span class="keyword">if</span> (err) <span class="keyword">throw</span> err;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'end'</span>)</span><br><span class="line"> });</span><br><span class="line"> });</span><br><span class="line"> });</span><br><span class="line">});</span><br><span class="line"> });</span><br><span class="line">});</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>这样写的原因是保证每个执行流程是顺序的。然而造成了代码的可读性差。</p><p>这个时候Node.js出现了一个库叫co，这个库实现了一个叫generator的操作。让我们可以更好的控制异步的流程。这个库最后被应用于koa第一代中。</p><p>co库写法示例：</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line">co(<span class="function"><span class="keyword">function</span>* (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> result = <span class="keyword">yield</span> <span class="built_in">Promise</span>.resolve(<span class="literal">true</span>);</span><br><span class="line"> <span class="keyword">return</span> result;</span><br><span class="line">}).then(<span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(value);</span><br><span class="line">}, <span class="function"><span class="keyword">function</span> (<span class="params">err</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.error(err.stack);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>这种写法有两个地方值得注意，一是function关键字后面有一个*，同时使用了yield关键字，这个*代表了这是个generator方法，有了这个*就可以方法体内使用yield关键字。yield关键字代表等待后面的操作执行完了以后才返回值，此时会造成挂起，这也是generator最初设计的本意(并不是完全为了解决异步的问题而产生，只是刚好能解决这个问题)。</p><p>提完了generator，顺便提一下现在真正使用的比较多的async方法，这个方法和generator在形式上的不同就是把*变成了async并放在function关键字的前面，然后yield变成了await，对代码的构成和产生的效果类似。</p><p>async方法示例：</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line">router.post(<span class="string">'/delete_topic'</span>, <span class="keyword">async</span> (req, res, next) => {</span><br><span class="line"> <span class="keyword">const</span> { id } = req.body</span><br><span class="line"> <span class="keyword">const</span> result = <span class="keyword">await</span> forumManager.deleteTopic({ id })</span><br><span class="line"> res.json(result)</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>await后面跟的是一个Promise对象，也就是说forumManager.deleteTopic({ id })执行后会返回一个Promise对象。</p><p>什么是Promise对象呢，Promise有个A+规范，只要实现了这个规范的对象就是Promise对象。Promise也是用来做异步流程控制的。如果想知道Promise的应用可以看看相关的资料。</p><p>由于本人知识有限，可能有所疏漏之处，欢迎指正。</p>]]></content>
<summary type="html">
<p>Node.js是事件机制地处理请求中的io调用，这时就有了异步的概念出现，也就是说先去做其他事情，等io处理好了，再接受通知，并执行后续操作。下面我们来聊聊，Node.js里面怎么写异步的代码，异步流程控制概念。</p>
<p>首先异步的第一重境界是回调函数。Node常见的
</summary>
<category term="异步" scheme="https://choicelin.github.io/tags/%E5%BC%82%E6%AD%A5/"/>
</entry>
<entry>
<title>近况</title>
<link href="https://choicelin.github.io/2019/07/20/%E8%BF%91%E5%86%B5/"/>
<id>https://choicelin.github.io/2019/07/20/近况/</id>
<published>2019-07-20T10:00:36.000Z</published>
<updated>2019-07-20T11:48:04.000Z</updated>
<content type="html"><![CDATA[<p>Node诞生已经10年了，可以说是和go同期的语言，18年我在狼叔的群里，大家都兴致勃勃的讨论着Node，感觉那个时候是我个人对Node最有冲动的一年，后面也陆续用express写了一些简单的api，觉得Node还是很有趣的。那一年，狼叔在写书，群友都三番五次的催稿，慢慢的我都觉得成了一个笑话。今年，他的书总算出来了，我很欣慰，虽然说实话，从目录上看，虽然很多讲的都是比较基础，但是还是下单了一本，想看看狼叔写的内容和其他作者写的是不是会不一样。</p><p>回顾接近3年的职业生涯，现在写前端代码的速度明显感到有所提升，这是唯一感觉渐入佳境的地方。3年我走了4家公司，在第三家公司武汉花卷科技有限公司，这里我认识了一个我职业生涯以来最大方和爽快的老板(包子赵长军)，低调有内涵的且也为人爽快项目经理面窝，技术极客鱼丸，技术多面手栗子，还有很有阅历的豆丝，以及其他一群很有实力和头脑的同事。栗子和豆丝现在和我一起在啊哈编程，为青少年教育平台做自己的一份贡献。在这里我遇到另一个极客领导，技术总监张总。张总说他是007，从早上写代码到晚上12点，然后一周7天。当然我们是965工作制。其实我觉得张总是对技术有一种痴迷，他喜欢这个东西，很好玩。是的，确实有点好玩。张总那爆炸的开发的速度和解决实际技术问题的能力我就不多阐述了。</p><p>如果没有花卷，我是不会遇到这些人，和后面的故事的。我很感谢花卷的所有人，特别谢谢栗子，在花卷和啊哈都很照顾我，告诉了我很多网络和后端的知识甚至一些人生经验（蛙声一片），让我也能分清什么路由是走了前端怎么配nginx让它走后端等等。</p><p>离开花卷做了3份私活，也是花卷的一位同事介绍给我的，这位同事是一位设计，西瓜。西瓜的设计很独到，处理问题也是能从设计上解决技术上的问题，同时也很讲信用。和他合作还挺放心。</p><p>说了那么多其他人，现在再回到我自己，我自己在公司的业务开发中，扩展了一个开源的包的功能，发布了自己第一个，一个比较正式的开源npm包，虽然从最初的每周6百多下载量，跌到现在的30多，但是也见证了自己的开源的一小步。然后就是这个开源项目也成功申请了Jetbrain的开源许可证。本来职业生涯的前一年多都在做小程序和React，然而我现在敢说我自己的Vue比React用的好。这也是件很意料之外的事，React大部分是从别人那里学的，而Vue的全家桶，全是自己自学的。所以对知识在文档的哪个位置还是很有数的。在啊哈给自己的技术栈带来的收获，有Electron，Vue和Codorva，感觉也还挺简单的。唯一有些遗憾的是啊哈经历了一次裁员，很多熟悉的面孔再也看不到了。</p><p>9102下半年，准备把自己的全栈工坊小程序的后端由Java转Node，之所以这么做，是方便我个人维护。上半年开启了自己的直播生涯，会偶尔在b站上直播自己的代码周常，挺有意思的。B站搜索学酥兔即可找到我的直播间。</p><p>就到这里吧，人生不求大富大贵，只求能够平平安安，希望9102年下半年能够平平安安就好！</p>]]></content>
<summary type="html">
<p>Node诞生已经10年了，可以说是和go同期的语言，18年我在狼叔的群里，大家都兴致勃勃的讨论着Node，感觉那个时候是我个人对Node最有冲动的一年，后面也陆续用express写了一些简单的api，觉得Node还是很有趣的。那一年，狼叔在写书，群友都三番五次的催稿，慢慢的
</summary>
<category term="程序心情" scheme="https://choicelin.github.io/tags/%E7%A8%8B%E5%BA%8F%E5%BF%83%E6%83%85/"/>
</entry>
<entry>
<title>unmanaged hostwind设置ssh远程登录</title>
<link href="https://choicelin.github.io/2019/05/02/unmanaged-hostwind%E8%AE%BE%E7%BD%AEssh%E8%BF%9C%E7%A8%8B%E7%99%BB%E5%BD%95/"/>
<id>https://choicelin.github.io/2019/05/02/unmanaged-hostwind设置ssh远程登录/</id>
<published>2019-05-02T02:04:49.000Z</published>
<updated>2019-05-02T02:47:36.000Z</updated>
<content type="html"><![CDATA[<h3 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h3><p>笔者最近想做一个node技术分享网站，使用了国外的hostwind服务器，这个网站准备使用php开发，虽然是node技术分享，然而使用php是不是有点搞人，不过没事，这不是这篇文章的关键，本文介绍了如何开启ssh远程登录功能及笔者踩到的一些坑。</p><h3 id="Hostwind-unmanged-vps"><a href="#Hostwind-unmanged-vps" class="headerlink" title="Hostwind unmanged vps"></a>Hostwind unmanged vps</h3><p>这个是我买的一款虚拟主机，问过客服后，unmanged的意思就是什么准备工作都得自己上，不是开箱即用的，这样正好符合了笔者的需求，毕竟也可以学习一波如何自己配置服务器和搭建php开发环境。于是支付订单后，笔者准备在命令行中使用ssh命令来连服务器。</p><h3 id="第一个问题"><a href="#第一个问题" class="headerlink" title="第一个问题"></a>第一个问题</h3><p>笔者遇到的第一个问题就是连接超时，第一个反应是会不会ip被屏蔽了，于是ping了一下ip，发现是可以的ping通的</p><p>命令入如下</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ping 192.39.21.251</span><br></pre></td></tr></table></figure><p>这个ip是乱输的，实际输入的是我服务器的ip。</p><p>既然可以ping通，那么这个服务器是可以访问的，没有被屏蔽。</p><p>第二个反应是是不是没有安装ssh服务，于是在官网使用vnc登录服务器，检查了一下，发现是安装了的。</p><p>接着我修改了一下/etc/ssh/sshd_config文件，将端口修改为我想要的端口并开启javaboy这个用户登录</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Port 6666</span><br><span class="line">AllowUsers javaboy</span><br></pre></td></tr></table></figure><p>然后在防火墙里添加该端口</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">firewall-cmd --zone=public --add-port=6666/tcp --permanent</span><br></pre></td></tr></table></figure><p>防火墙firewall需要安装</p><p>添加用户并设置密码</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">adduser -m javaboy</span><br><span class="line">passwd javaboy</span><br></pre></td></tr></table></figure><p>重启ssh服务</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">systemctl restart sshd.service</span><br></pre></td></tr></table></figure><h3 id="第二个问题"><a href="#第二个问题" class="headerlink" title="第二个问题"></a>第二个问题</h3><p>connection closed by foreign host</p><p>修改sshd_config</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ClientAliveInterval 60</span><br><span class="line">ClientAliveCountMax 3</span><br></pre></td></tr></table></figure><h3 id="第三个问题"><a href="#第三个问题" class="headerlink" title="第三个问题"></a>第三个问题</h3><p>port 6666 conection closed</p><p>这个问题解决方式是重载firewall让其修改生效</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">firewall-cmd --reload</span><br></pre></td></tr></table></figure><h3 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h3><p>在本地</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -p 6666 javaboy@192.39.21.251</span><br></pre></td></tr></table></figure><p>如果需要访问root用户</p><p>将sshd_config中PermitRootLogin设置如下</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">PermitRootLogin yes</span><br></pre></td></tr></table></figure><p>再使用</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -p 6666 root@192.39.21.251</span><br></pre></td></tr></table></figure><p>即可</p>]]></content>
<summary type="html">
<h3 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h3><p>笔者最近想做一个node技术分享网站，使用了国外的hostwind服务器，这个网站准备使用php开发，虽然是node技术分享，然而使用php
</summary>
<category term="centos7" scheme="https://choicelin.github.io/tags/centos7/"/>
</entry>
<entry>
<title>React Native填坑系列2---react navigation</title>
<link href="https://choicelin.github.io/2019/04/14/React-Native%E5%A1%AB%E5%9D%91%E7%B3%BB%E5%88%972-react-navigation/"/>
<id>https://choicelin.github.io/2019/04/14/React-Native填坑系列2-react-navigation/</id>
<published>2019-04-14T03:59:08.000Z</published>
<updated>2019-04-14T05:59:30.000Z</updated>
<content type="html"><![CDATA[<h2 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h2><p>继上期填坑后，笔者继续推进安卓app的开发，web上都有导航路由的功能，app要实现这个，需要模拟类似web导航的特性，目前有一个静态路由的库比较好，叫react-navigation，于是笔者开启了第二段填坑之旅。</p><h2 id="关于要实现的路由形式"><a href="#关于要实现的路由形式" class="headerlink" title="关于要实现的路由形式"></a>关于要实现的路由形式</h2><p>在准备阶段，我们大多数都会想尽可能的覆盖很多情况，所以笔者也是，关于路由的构成，首先有鉴权，然后有底部导航，接着每层导航对应的页面组件有内页，同时内页不会有底部导航。这是笔者目前的一个形式。</p><h3 id="React-Navigation简介"><a href="#React-Navigation简介" class="headerlink" title="React Navigation简介"></a>React Navigation简介</h3><p>就像引言提到的这是在app中模拟的一个导航历史功能的库。浏览器的导航历史维持在一个堆栈中，每次的后退就是出栈，前进就是进栈，栈顶就是当前显示的页面。React Navigation除了提供了这些基础的功能以外，还提供了手势和动画的效果。</p><h2 id="如何实现这种路由形式"><a href="#如何实现这种路由形式" class="headerlink" title="如何实现这种路由形式"></a>如何实现这种路由形式</h2><p>首先React Native和web中的单页应用(Vue SPA和React SPA等)有些相似，都会有一个根视图，然后向下包含内容。比如在Vue中的</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> router,</span><br><span class="line"> store,</span><br><span class="line"> render: <span class="function"><span class="params">h</span> =></span> h(App)</span><br><span class="line">}).$mount(<span class="string">'#app'</span>)</span><br></pre></td></tr></table></figure><p>这里的根就是id为app的节点。</p><p>而在React Native中也有类似的行为。</p><p>所以第一件事情就是确定这个根视图。根据react-navigation官方推荐的鉴权是使用createSwitchNavigator。由于用户进来第一件事情对开发者来说，笔者认为是鉴权，也就是确定用户是否有权限进入一些页面，同时确定用户会进哪里，所以笔者将该组件作为app的根视图。</p><h3 id="createSwitchNavigator是什么？"><a href="#createSwitchNavigator是什么？" class="headerlink" title="createSwitchNavigator是什么？"></a>createSwitchNavigator是什么？</h3><p>下面引用官方的一段介绍：</p><blockquote><p>The purpose of SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away.</p></blockquote><p>笔者翻译：SwitchNavigator的目的在于在同一时间下仅显示一个页面。它的默认行为：</p><ol><li>不处理返回动作，可以理解为点不了返回，无需担心还会返回到了之前的页面</li><li>其正在显示的页面会重置为其最初的设置，也就是重新加载了对应的页面，会重头初始化</li></ol><p>SwitchNavigator如其名称一样，是在多个视图之间切换（switch），那么我们的根视图下面就会有子视图的显示切换，这些切换的视图如何定义呢？</p><h3 id="定义根视图的子切换视图"><a href="#定义根视图的子切换视图" class="headerlink" title="定义根视图的子切换视图"></a>定义根视图的子切换视图</h3><p>talk is cheap，show me the code.好，那么就上代码。</p><blockquote><p>/ 指代项目根目录，本项目由react-native-cli搭建</p></blockquote><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * /routes/AppNavigator.js</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">import</span> {createSwitchNavigator} <span class="keyword">from</span> <span class="string">'react-navigation'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// ....省略部分代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> createSwitchNavigator(</span><br><span class="line"> {</span><br><span class="line"> AuthPage: Auth,</span><br><span class="line"> Pages: PageStack</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> initialRouteName: <span class="string">'AuthPage'</span>,</span><br><span class="line"> }</span><br><span class="line">)</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * /App.js</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> React, {Component} <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> {createAppContainer} <span class="keyword">from</span> <span class="string">'react-navigation'</span></span><br><span class="line"><span class="keyword">import</span> AppNavigator <span class="keyword">from</span> <span class="string">'./routes/AppNavigator'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> createAppContainer(AppNavigator)</span><br></pre></td></tr></table></figure><p>在AppNavigator.js中可以看到createSwitchNavigator中有两个参数，第二个参数里面的initialRouteName是指默认显示的视图(已切换上的视图)，第一个参数里面配置的是可供切换的视图，AuthPage和Pages是指的切换的视图的名字，后面跟的值是实际的Navigator对象或者Component，说人话就是实际的视图对象，目前笔者用到的视图对象是上述提到的两种，Navigator对象是createStackNavigator和createBottomTabNavigator等创建出来的，而Compnenent则是指React创建的视图组件。当然，现在这段有点奇怪，因为Auth和PageStack都还没创建和引入，它们在省略的代码里，所以莫慌，我们接下来，慢慢实现省略的代码。</p><h3 id="Auth-Component"><a href="#Auth-Component" class="headerlink" title="Auth Component"></a>Auth Component</h3><p>下面笔者将会定义上文提到Auth，它是一个React Component，由本文仅介绍路由的实现形式，具体鉴权代码是没有的。但是鉴权的逻辑会放在这个组件里。</p><figure class="highlight javascript"><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"><span class="comment"> * /views/Auth.js</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> React, {Component} <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> {View, Text, StyleSheet} <span class="keyword">from</span> <span class="string">'react-native'</span></span><br><span class="line"><span class="keyword">import</span> Icon <span class="keyword">from</span> <span class="string">'react-native-vector-icons/AntDesign'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">Auth</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>{</span><br><span class="line"> render () {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <View style={[styles.fc, styles.flex1]}></span><br><span class="line"> <Text style={styles.f38}>auth<<span class="regexp">/Text></span></span><br><span class="line"><span class="regexp"> <Icon name="yuque" size={30} color="#004aff"/</span>></span><br><span class="line"> <<span class="regexp">/View></span></span><br><span class="line"><span class="regexp"> )</span></span><br><span class="line"><span class="regexp"> }</span></span><br><span class="line"><span class="regexp">}</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">const styles = StyleSheet.create({</span></span><br><span class="line"><span class="regexp"> fc: {</span></span><br><span class="line"><span class="regexp"> alignItems: 'center',</span></span><br><span class="line"><span class="regexp"> justifyContent: 'center'</span></span><br><span class="line"><span class="regexp"> },</span></span><br><span class="line"><span class="regexp"> flex1: {</span></span><br><span class="line"><span class="regexp"> flex: 1</span></span><br><span class="line"><span class="regexp"> },</span></span><br><span class="line"><span class="regexp"> f38: {</span></span><br><span class="line"><span class="regexp"> fontSize: 38</span></span><br><span class="line"><span class="regexp"> }</span></span><br><span class="line"><span class="regexp">})</span></span><br></pre></td></tr></table></figure><p>这就是Auth的一个静态的壳，下面笔者在/routes/AppNavigator.js中引入该组件</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * /routes/AppNavigator.js</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">import</span> {createSwitchNavigator} <span class="keyword">from</span> <span class="string">'react-navigation'</span></span><br><span class="line"><span class="keyword">import</span> Auth <span class="keyword">from</span> <span class="string">'../views/Auth'</span> <span class="comment">// 新增的代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// ....省略部分代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> createSwitchNavigator(</span><br><span class="line"> {</span><br><span class="line"> AuthPage: Auth,</span><br><span class="line"> Pages: PageStack</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> initialRouteName: <span class="string">'AuthPage'</span>,</span><br><span class="line"> }</span><br><span class="line">)</span><br></pre></td></tr></table></figure><h3 id="PageStack-Navigator"><a href="#PageStack-Navigator" class="headerlink" title="PageStack Navigator"></a>PageStack Navigator</h3><p>上文中引入了Auth组件，笔者的路由又进了一步。那么现在来看下这个PageStack怎么做。还记得最初想的路由形式吗？</p><p>有鉴权和底部导航还有内页。这里AuthPage就是鉴权，所以逻辑可以梳理一下，首先用户进来会显示initialRouteName提供的AuthPage视图，即/views/Auth.js组件展示的内容；接着通过Auth内的判断是否有后端的token后，如果有token，会跳转到Pages视图，显示PageStack的内容，如果没有token，那么我们可以再加一个视图，跳转过去。但是目前笔者准备暂时将其停留在原地。需要注意的是，跳转的代码和判断的逻辑还木有加上，笔者需要先完成现在路由的构建。当我们进入PageStack后，底部导航就需要显示出来，然后显示对应的页面，并备好内页(即当前导航的页面的深层页面)。下面笔者来添加点代码：</p><figure class="highlight javascript"><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><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * /routes/AppNavigator.js</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">import</span> {</span><br><span class="line"> createSwitchNavigator, </span><br><span class="line"> createStackNavigator</span><br><span class="line">} <span class="keyword">from</span> <span class="string">'react-navigation'</span></span><br><span class="line"><span class="keyword">import</span> Auth <span class="keyword">from</span> <span class="string">'../views/Auth'</span> </span><br><span class="line"><span class="keyword">import</span> MyTests <span class="keyword">from</span> <span class="string">'../views/MyTests'</span> <span class="comment">// 新增的代码</span></span><br><span class="line"><span class="keyword">import</span> TestDetail <span class="keyword">from</span> <span class="string">'../views/TestDetail'</span> <span class="comment">// 新增的代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// ....省略部分代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 新增的代码</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> PageStack = createStackNavigator({</span><br><span class="line"> MyTests: {</span><br><span class="line"> screen: MyTests <span class="comment">// Component</span></span><br><span class="line"> },</span><br><span class="line"> TestDetail: {</span><br><span class="line"> screen: TestDetail<span class="comment">// Component</span></span><br><span class="line"> },</span><br><span class="line"> Bottom: {</span><br><span class="line"> screen: BottomNavigator</span><br><span class="line"> }</span><br><span class="line">}, {</span><br><span class="line"> initialRouteName: <span class="string">'Bottom'</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> createSwitchNavigator(</span><br><span class="line"> {</span><br><span class="line"> AuthPage: Auth,</span><br><span class="line"> Pages: PageStack</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> initialRouteName: <span class="string">'AuthPage'</span>,</span><br><span class="line"> }</span><br><span class="line">)</span><br></pre></td></tr></table></figure><p>上述代码注明Component的都是指和Auth类似的React组件，它们的定义可以仿照Auth的定义来实现，只是没有了鉴权逻辑。同时这里的两个Component指的就是上文中的内页。</p><h4 id="createStackNavigator"><a href="#createStackNavigator" class="headerlink" title="createStackNavigator"></a>createStackNavigator</h4><p>上面的代码用到了一个方法叫createStackNavigator，这个方法即创建页面路由栈的方法，第一个参数是包含的路由，第二参数里面的initialRouteName指定这个Navigator视图激活后的默认显示的Navigator或者Component(激活是指当前视图显示的是该Navigator)</p><h3 id="BottomNavigator"><a href="#BottomNavigator" class="headerlink" title="BottomNavigator"></a>BottomNavigator</h3><p>下面我们来定义底部导航，在前端里有个专业术语叫tabBar，指的就是这个。这个是一个Navigator对象，通过createBottomTabNavigator方法来创建</p><figure class="highlight javascript"><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><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * /routes/AppNavigator.js</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> {Platform} <span class="keyword">from</span> <span class="string">'react-native'</span></span><br><span class="line"><span class="keyword">import</span> {createBottomTabNavigator, createStackNavigator, createSwitchNavigator} <span class="keyword">from</span> <span class="string">'react-navigation'</span></span><br><span class="line"><span class="keyword">import</span> Icon <span class="keyword">from</span> <span class="string">'react-native-vector-icons/AntDesign'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> Home <span class="keyword">from</span> <span class="string">'../views/Home'</span> <span class="comment">// Component</span></span><br><span class="line"><span class="keyword">import</span> User <span class="keyword">from</span> <span class="string">'../views/User'</span> <span class="comment">// Component</span></span><br><span class="line"><span class="keyword">import</span> Auth <span class="keyword">from</span> <span class="string">'../views/Auth'</span> <span class="comment">// Component</span></span><br><span class="line"><span class="keyword">import</span> MyTests <span class="keyword">from</span> <span class="string">'../views/MyTests'</span> <span class="comment">// Component</span></span><br><span class="line"><span class="keyword">import</span> TestDetail <span class="keyword">from</span> <span class="string">'../views/TestDetail'</span> <span class="comment">// Component</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> BottomNavigator = createBottomTabNavigator({</span><br><span class="line"> Home: {</span><br><span class="line"> screen: Home,</span><br><span class="line"> navigationOptions: {</span><br><span class="line"> tabBarLabel: <span class="string">'测验'</span>,</span><br><span class="line"> tabBarIcon: <span class="function">(<span class="params">{tintColor, focused}</span>) =></span> (</span><br><span class="line"> <Icon</span><br><span class="line"> name=<span class="string">"calculator"</span></span><br><span class="line"> color={tintColor}</span><br><span class="line"> size={<span class="number">26</span>}</span><br><span class="line"> /></span><br><span class="line"> )</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> User: {</span><br><span class="line"> screen: User,</span><br><span class="line"> navigationOptions: {</span><br><span class="line"> tabBarLabel: <span class="string">'个人'</span>,</span><br><span class="line"> tabBarIcon: <span class="function">(<span class="params">{tintColor, focused}</span>) =></span></span><br><span class="line"> (</span><br><span class="line"> <Icon</span><br><span class="line"> name=<span class="string">"user"</span></span><br><span class="line"> color={tintColor}</span><br><span class="line"> size={<span class="number">26</span>}</span><br><span class="line"> /></span><br><span class="line"> )</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}, {</span><br><span class="line"> tabBarOptions: {</span><br><span class="line"> activeTintColor: Platform.OS === <span class="string">'ios'</span> ? <span class="string">'#e91e63'</span> : <span class="string">'#004aff'</span>,</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"><span class="keyword">const</span> PageStack = createStackNavigator({</span><br><span class="line"> MyTests: {</span><br><span class="line"> screen: MyTests</span><br><span class="line"> },</span><br><span class="line"> TestDetail: {</span><br><span class="line"> screen: TestDetail</span><br><span class="line"> },</span><br><span class="line"> Bottom: {</span><br><span class="line"> screen: BottomNavigator</span><br><span class="line"> }</span><br><span class="line">}, {</span><br><span class="line"> initialRouteName: <span class="string">'Bottom'</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> createSwitchNavigator(</span><br><span class="line"> {</span><br><span class="line"> Auth,</span><br><span class="line"> Pages: PageStack</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> initialRouteName: <span class="string">'Pages'</span>,</span><br><span class="line"> }</span><br><span class="line">)</span><br></pre></td></tr></table></figure><p>上述代码中的Component跟PageStack Navigator提到的Component注释是同一个意思。</p><h4 id="createBottomTabNavigator"><a href="#createBottomTabNavigator" class="headerlink" title="createBottomTabNavigator"></a>createBottomTabNavigator</h4><p>这个方法用来创建一个底部导航，显示效果如下图：</p><p><img src="./tabBar.png" alt="tabbar"></p><p>(用长方形圈起来的部分是tabbar，用椭圆圈起来的部分是tabbar激活的部分承载的视图)</p><p>createBottomTabNavigator有两个参数，第一个参数是配置视图有多少个，即承载的视图和下方的tabbar文字和图标，第二个参数时是对第一个参数里的视图，配置公共的属性，比如这里用到的activeTintColor是指的tabbar激活(即被选中)时的颜色，这里的#004aff是蓝色，Platform.OS是用来是区分是iOS平台还是安卓平台，笔者展示的图片是安卓平台，所以读者看到的激活状态是蓝色的。</p><h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2><p>到这里，其实整个路由的形式已经做好了，接下来就是对它进行添砖加瓦，或者进行更进一步的扩展，目前笔者的需求暂时只会用到这些，后期会根据新的需求做调整。</p><p>最后，感谢大家的观看，欢迎使用全栈工坊微信小程序并关注java技术大本营微信公众号。</p>]]></content>
<summary type="html">
<h2 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h2><p>继上期填坑后，笔者继续推进安卓app的开发，web上都有导航路由的功能，app要实现这个，需要模拟类似web导航的特性，目前有一个静态路由的
</summary>
<category term="React Native" scheme="https://choicelin.github.io/tags/React-Native/"/>
</entry>
<entry>
<title>React Native填坑系列之一（Could not GET 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.2.1/gradle-3.2.1.pom'. > Connect to 127.0.0.1:1089 [/127.0.0.1] failed: Connection refused (Connection refused)）</title>
<link href="https://choicelin.github.io/2019/04/08/React-Native%E5%A1%AB%E5%9D%91%E7%B3%BB%E5%88%97%E4%B9%8B%E4%B8%80%EF%BC%88lCould-not-GET-https-dl-google-com-dl-android-maven2-com-android-tools-build-gradle-2-2-2-gradle-2-2-2-pom-Connect-to-127-0-0-1-1089-127-0-0-1-failed-Connection-refused-Connection-refused-%EF%BC%89/"/>
<id>https://choicelin.github.io/2019/04/08/React-Native填坑系列之一（lCould-not-GET-https-dl-google-com-dl-android-maven2-com-android-tools-build-gradle-2-2-2-gradle-2-2-2-pom-Connect-to-127-0-0-1-1089-127-0-0-1-failed-Connection-refused-Connection-refused-）/</id>
<published>2019-04-08T05:16:32.000Z</published>
<updated>2019-04-08T08:05:20.000Z</updated>
<content type="html"><![CDATA[<h1 id="为什么开始React-Native开发"><a href="#为什么开始React-Native开发" class="headerlink" title="为什么开始React Native开发"></a>为什么开始React Native开发</h1><p>和朋友一起准备给网站配套做一款android app。经过宋小菜的scott老师在他文章中对宋小菜架构的介绍，其中提到了对React Native的使用，让我重拾信心，再加上之前有过相关经验，于是决定使用它来进行app的开发。</p><h1 id="第一个bug"><a href="#第一个bug" class="headerlink" title="第一个bug"></a>第一个bug</h1><p>当我装好android studio并把项目初始化好了以后，我自信满满的运行react-native run-android,扎心的错误铺面而来</p><figure class="highlight shell"><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><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">JS server already running.</span><br><span class="line">Building and installing the app on the device (cd android && ./gradlew installDebug)...</span><br><span class="line"></span><br><span class="line">FAILURE: Build failed with an exception.</span><br><span class="line"></span><br><span class="line">* What went wrong:</span><br><span class="line">A problem occurred configuring root project 'idea_app'.</span><br><span class="line"><span class="meta">></span> Could not resolve all artifacts for configuration ':classpath'.</span><br><span class="line"><span class="meta"> ></span> Could not resolve com.android.tools.build:gradle:3.2.1.</span><br><span class="line"> Required by:</span><br><span class="line"> project :</span><br><span class="line"> > Could not resolve com.android.tools.build:gradle:3.2.1.</span><br><span class="line"> > Could not get resource 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.2.1/gradle-3.2.1.pom'.</span><br><span class="line"> > Could not GET 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.2.1/gradle-3.2.1.pom'.</span><br><span class="line"> > Connect to 127.0.0.1:1089 [/127.0.0.1] failed: Connection refused (Connection refused)</span><br><span class="line"> > Could not resolve com.android.tools.build:gradle:3.2.1.</span><br><span class="line"> > Could not get resource 'https://jcenter.bintray.com/com/android/tools/build/gradle/3.2.1/gradle-3.2.1.pom'.</span><br><span class="line"> > Could not GET 'https://jcenter.bintray.com/com/android/tools/build/gradle/3.2.1/gradle-3.2.1.pom'.</span><br><span class="line"> > Connect to 127.0.0.1:1089 [/127.0.0.1] failed: Connection refused (Connection refused)</span><br><span class="line"></span><br><span class="line">* Try:</span><br><span class="line">Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.</span><br><span class="line"></span><br><span class="line">* Get more help at https://help.gradle.org</span><br><span class="line"></span><br><span class="line">BUILD FAILED in 0s</span><br><span class="line">Could not install the app on the device, read the error above for details.</span><br><span class="line">Make sure you have an Android emulator running or a device connected and have</span><br><span class="line">set up your Android development environment:</span><br><span class="line">https://facebook.github.io/react-native/docs/getting-started.html</span><br><span class="line"></span><br><span class="line">Command failed: ./gradlew installDebug</span><br><span class="line"></span><br><span class="line">Error: Command failed: ./gradlew installDebug</span><br><span class="line"> at checkExecSyncError (child_process.js:616:11)</span><br><span class="line"> at Object.execFileSync (child_process.js:634:13)</span><br><span class="line"> at runOnAllDevices (/Users/kiralin/lixiang/idea_app/node_modules/react-native/local-cli/runAndroid/runAndroid.js:299:19)</span><br><span class="line"> at buildAndRun (/Users/kiralin/lixiang/idea_app/node_modules/react-native/local-cli/runAndroid/runAndroid.js:135:12)</span><br><span class="line"> at isPackagerRunning.then.result (/Users/kiralin/lixiang/idea_app/node_modules/react-native/local-cli/runAndroid/runAndroid.js:65:12)</span><br><span class="line"> at process._tickCallback (internal/process/next_tick.js:68:7)</span><br></pre></td></tr></table></figure><p>注明一下，我使用的RN版本是0.58.6是58系列最后一个版本。于是想到的第一件事情就是谷歌。最早我搜索的是Could not resolve com.android.tools.build:gradle:3.2.1.,结果发现谷歌到的第一个就是在build.gradle中加入google()方法，然而当我打开我的build.gradle文件，我发现RN官方已经加入了该方法，我顿时感到很诧异，这一招怕是行不通了。其他回答里面还有加入maven配置的，基本上也都行不通。</p><h1 id="转机"><a href="#转机" class="headerlink" title="转机"></a>转机</h1><p>通过仔细观察报错的栈，发现最底层的才是核心的错误，于是我搜索127.0.01:1089相关的RN回答，于是找到了一个方法，那就是将RN里的android文件夹在android studio里面打开，让android studio来帮你把依赖安好，我一看内心就觉得靠谱。</p><p>But，在AS中connection refused。于是我分析是代理的问题，恰巧吃饭了，询问了一下同事代理方面的问题，提到了端口占用，我回来检测了一下，并没有该情况，不过还好，我基本也有把握，因为这种问题应该是安卓常见问题， 接着谷歌，AS中connection refused，果然第二个答案就solve了我的problem。</p><p>下面贴一下链接<a href="https://www.jianshu.com/p/dc12c965abbc" target="_blank" rel="noopener">解决studio Connection refused (Connection refused)</a></p><p>解决这个问题后，于是我react-native run-android，成功build，然后在avd中出现欢迎界面。</p><h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>这是RN填坑第一弹，后期有坑会继续填满</p>]]></content>
<summary type="html">
<h1 id="为什么开始React-Native开发"><a href="#为什么开始React-Native开发" class="headerlink" title="为什么开始React Native开发"></a>为什么开始React Native开发</h1><p>和朋
</summary>
<category term="React Native" scheme="https://choicelin.github.io/tags/React-Native/"/>
</entry>
<entry>
<title>2019前端windows环境搭建指南</title>
<link href="https://choicelin.github.io/2019/02/21/2019%E5%89%8D%E7%AB%AFwindows%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA%E6%8C%87%E5%8D%97/"/>
<id>https://choicelin.github.io/2019/02/21/2019前端windows环境搭建指南/</id>
<published>2019-02-21T07:45:42.000Z</published>
<updated>2019-02-21T08:11:08.000Z</updated>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>2019年写的这篇开发环境搭建指南，本文旨在说明最基础的环境，关于项目搭建将不做涉及。</p><h3 id="Node-js"><a href="#Node-js" class="headerlink" title="Node.js"></a>Node.js</h3><p><a href="https://nodejs.org/en/" target="_blank" rel="noopener">官网</a> 下载LTS版本安装即可。</p><p>安装成功后会默认安装上npm，npm是node的包管理工具，npm的源连接的是国外，国内使用会比较慢，所以需要替换一下源，打开cmd（windows命令行提示），输入下列命令回车即可</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm config set registry http://registry.npm.taobao.org/</span><br></pre></td></tr></table></figure><h3 id="Yarn"><a href="#Yarn" class="headerlink" title="Yarn"></a>Yarn</h3><p>Yarn是可以代替npm作为包的管理,使用方式跟npm有点像，包安装问题上会少一点</p><p>下载安装地址：<a href="https://yarnpkg.com/zh-Hans/" target="_blank" rel="noopener">Yarn官网</a></p><h3 id="Python环境"><a href="#Python环境" class="headerlink" title="Python环境"></a>Python环境</h3><p>sass可能会依赖到</p><p><a href="https://www.python.org/getit/" target="_blank" rel="noopener">官网</a></p><p>3.7和2.7都下载安装吧</p><h3 id="Git"><a href="#Git" class="headerlink" title="Git"></a>Git</h3><p><a href="https://git-scm.com/downloads" target="_blank" rel="noopener">官网</a> 下载安装即可</p><p>安装以后可以使用右键开启git bash，这是一个命令行窗口，以后就可以用这个替代cmd</p><blockquote><p> 配置ssh key</p><p>找到git安装的目录，比如D:\Program Files\Git\usr\bin</p><p>在命令行中cd到这个目录下，运行下面命令</p><p>下面的引号内，填你的邮箱，然后一路回车即可完成</p></blockquote><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C "youremail@example.com"</span><br></pre></td></tr></table></figure><h3 id="IDE和编辑器"><a href="#IDE和编辑器" class="headerlink" title="IDE和编辑器"></a>IDE和编辑器</h3><p>编辑器百度VSCode</p><p>IDE百度WebStorm（请支持正版，一个月$5.9，约40RMB，支持微信支付宝，按年买有优惠）</p><p>免费才是最贵的</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>ok，就到这里了，大家加油！</p>]]></content>
<summary type="html">
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>2019年写的这篇开发环境搭建指南，本文旨在说明最基础的环境，关于项目搭建将不做涉及。</p>
<h3 id="Node-js"><a hr
</summary>
<category term="开发环境" scheme="https://choicelin.github.io/tags/%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/"/>
</entry>
<entry>
<title>加油，小林</title>
<link href="https://choicelin.github.io/2019/01/23/%E5%8A%A0%E6%B2%B9%EF%BC%8C%E5%B0%8F%E6%9E%97/"/>
<id>https://choicelin.github.io/2019/01/23/加油，小林/</id>
<published>2019-01-23T12:16:09.000Z</published>
<updated>2019-01-23T12:38:10.000Z</updated>
<content type="html"><![CDATA[<p>最近频繁感到成年人的生活不易，晚上吃饭看到央视节目越战越勇，一个在网上被广泛传播的外卖哥痛哭的视频的主角参加了这个节目。看到那个痛哭流涕的视频，我觉得很难受，杨帆问他，“你为什么哭了？”。他说晚上1点送外卖，孩子发烧了，回去给孩子买药，耽误了送外卖，一天几单都白费了，一时控制不住，就哭了。这个男人描述得轻描淡写，实际情况是，他的小孩染上了白血病，为了照顾儿子，只好选择做外卖，这样既可以照顾家人，又可以补贴家用。他从6点起来，一直送到晚上1点。杨帆送了他的孩子们一人一个奥特曼，杨帆说：“奥特曼是超人，其实有时候超人不一定是奥特曼，爸爸也是你们的超人。”</p><p>还有一位29岁的女选手，得了白塞病，身材一度胖到150斤，被迫离开了文工团。白塞病是一种眼疾，症状是眼睛内有大量絮状和黑色物体，严重情况甚至会失明。她在治疗的过程中，遇到了一位大哥，那位大哥说：“你看过夜晚石景山的星星吗？”。她非常疑惑，后来她得知白塞病在夜晚时，眼睛的黑色物体会和夜晚的夜色融为一体就好像自己没有得过这个病一样。于是，她和她的男友一起去看了石景山的夜空，当星星出来的那一刹那，她泪流满面。她曾经问她的男友，自己变得又胖又丑，你还会喜欢我吗。很幸运的是，她的男友用行动告诉她，yes。她的男友在节目中对她求婚成功。</p><p>今天我爸对我说，你晚上说梦话，说的很清楚，你还记得吗？我说不记得了，怎么了。他说，你现在是不是有压力。我本来没想这个问题，突然这么一说，浑身都不自在，真的好像有点压力一样。</p><p>不过，这就成年人的世界，大家都承受着自己的压力和难受，坚强地向前进步。无论如何，艰难的日子都会过去，我们要看到光明的明天。想到这里，我觉得即使有点压力，也能够承受。并且我要像豆丝的钉钉签名一样，好好工作，好好做人才是王道。</p><p>与大家共勉，加油，小林！</p>]]></content>
<summary type="html">
<p>最近频繁感到成年人的生活不易，晚上吃饭看到央视节目越战越勇，一个在网上被广泛传播的外卖哥痛哭的视频的主角参加了这个节目。看到那个痛哭流涕的视频，我觉得很难受，杨帆问他，“你为什么哭了？”。他说晚上1点送外卖，孩子发烧了，回去给孩子买药，耽误了送外卖，一天几单都白费了，一时控
</summary>
<category term="心情" scheme="https://choicelin.github.io/tags/%E5%BF%83%E6%83%85/"/>
</entry>
<entry>
<title>CSS布局</title>
<link href="https://choicelin.github.io/2019/01/12/CSS%E5%B8%83%E5%B1%80/"/>
<id>https://choicelin.github.io/2019/01/12/CSS布局/</id>
<published>2019-01-12T04:18:30.000Z</published>
<updated>2019-01-12T06:41:36.000Z</updated>
<content type="html"><![CDATA[<ul><li><p>左右布局</p><ol><li>使用浮动</li></ol><figure class="highlight html"><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><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Title<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></span><br><span class="line"><span class="undefined"> * {</span></span><br><span class="line"><span class="undefined"> margin: 0;</span></span><br><span class="line"><span class="undefined"> padding: 0;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .clearfix::after,</span></span><br><span class="line"><span class="undefined"> .clearfix::before {</span></span><br><span class="line"><span class="undefined"> content: "";</span></span><br><span class="line"><span class="undefined"> display: table;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .clearfix::after {</span></span><br><span class="line"><span class="undefined"> clear: both;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .left {</span></span><br><span class="line"><span class="undefined"> width: 20%;</span></span><br><span class="line"><span class="undefined"> float: left;</span></span><br><span class="line"><span class="undefined"> background: red;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"> .right {</span></span><br><span class="line"><span class="undefined"> margin-left: 20%;</span></span><br><span class="line"><span class="undefined"> background: blue;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .footer {</span></span><br><span class="line"><span class="undefined"> border: 1px solid red;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">main</span> <span class="attr">class</span>=<span class="string">"container clearfix"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">section</span> <span class="attr">class</span>=<span class="string">"left"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>lzx<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">section</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">section</span> <span class="attr">class</span>=<span class="string">"right"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>hello<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>world<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">section</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">main</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">footer</span> <span class="attr">class</span>=<span class="string">"footer"</span>></span>test<span class="tag"></<span class="name">footer</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure><p>2.使用flex</p><figure class="highlight html"><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><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Title<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></span><br><span class="line"><span class="undefined"> * {</span></span><br><span class="line"><span class="undefined"> margin: 0;</span></span><br><span class="line"><span class="undefined"> padding: 0;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .container {</span></span><br><span class="line"><span class="undefined"> display: flex;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .left {</span></span><br><span class="line"><span class="undefined"> width: 20%;</span></span><br><span class="line"><span class="undefined"> float: left;</span></span><br><span class="line"><span class="undefined"> background: red;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"> .right {</span></span><br><span class="line"><span class="undefined"> flex: 1;</span></span><br><span class="line"><span class="undefined"> background: blue;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .footer {</span></span><br><span class="line"><span class="undefined"> border: 1px solid red;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">main</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">section</span> <span class="attr">class</span>=<span class="string">"left"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>lzx<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">section</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">section</span> <span class="attr">class</span>=<span class="string">"right"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>hello<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>world<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">section</span>></span></span><br><span class="line"><span class="tag"></<span class="name">main</span>></span></span><br><span class="line"><span class="tag"><<span class="name">footer</span> <span class="attr">class</span>=<span class="string">"footer"</span>></span>test<span class="tag"></<span class="name">footer</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></li></ul><blockquote><p>跑一下上述两段代码。会发现flex的方式是两栏等高布局，而float的这种不是。</p></blockquote><ol><li><p>左中右布局</p><p>1.浮动</p><figure class="highlight html"><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><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Title<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></span><br><span class="line"><span class="undefined"> * {</span></span><br><span class="line"><span class="undefined"> margin: 0;</span></span><br><span class="line"><span class="undefined"> padding: 0;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .clearfix::after,</span></span><br><span class="line"><span class="undefined"> .clearfix::before {</span></span><br><span class="line"><span class="undefined"> content: "";</span></span><br><span class="line"><span class="undefined"> display: table;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .clearfix::after {</span></span><br><span class="line"><span class="undefined"> clear: both;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .left {</span></span><br><span class="line"><span class="undefined"> width: 20%;</span></span><br><span class="line"><span class="undefined"> float: left;</span></span><br><span class="line"><span class="undefined"> background: red;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"> .center {</span></span><br><span class="line"><span class="undefined"> margin: 0 20%;</span></span><br><span class="line"><span class="undefined"> background: deeppink;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"> .right {</span></span><br><span class="line"><span class="undefined"> width: 20%;</span></span><br><span class="line"><span class="undefined"> float: right;</span></span><br><span class="line"><span class="undefined"> background: blue;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .footer {</span></span><br><span class="line"><span class="undefined"> border: 1px solid red;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">main</span> <span class="attr">class</span>=<span class="string">"container clearfix"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">section</span> <span class="attr">class</span>=<span class="string">"left"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>lzx<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">section</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">article</span> <span class="attr">class</span>=<span class="string">"center"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>I love you, looking for my be'shirt<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">article</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">section</span> <span class="attr">class</span>=<span class="string">"right"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>hello<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>world<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">section</span>></span></span><br><span class="line"><span class="tag"></<span class="name">main</span>></span></span><br><span class="line"><span class="tag"><<span class="name">footer</span> <span class="attr">class</span>=<span class="string">"footer"</span>></span>test<span class="tag"></<span class="name">footer</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure><blockquote><p>这时候会发现一个问题，蓝色的会在下面，解决方式是将蓝色节点放在粉红节点的前面。引申原理会到BFC，会再开一篇博客介绍。</p></blockquote><p>2.flex</p><figure class="highlight html"><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><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Title<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></span><br><span class="line"><span class="undefined"> * {</span></span><br><span class="line"><span class="undefined"> margin: 0;</span></span><br><span class="line"><span class="undefined"> padding: 0;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"> .container {</span></span><br><span class="line"><span class="undefined"> display: flex;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"> .left {</span></span><br><span class="line"><span class="undefined"> width: 20%;</span></span><br><span class="line"><span class="undefined"> float: left;</span></span><br><span class="line"><span class="undefined"> background: red;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"> .center {</span></span><br><span class="line"><span class="undefined"> flex: 1;</span></span><br><span class="line"><span class="undefined"> background: deeppink;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"> .right {</span></span><br><span class="line"><span class="undefined"> width: 20%;</span></span><br><span class="line"><span class="undefined"> background: blue;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"> .footer {</span></span><br><span class="line"><span class="undefined"> border: 1px solid red;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">main</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">section</span> <span class="attr">class</span>=<span class="string">"left"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>lzx<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">section</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">section</span> <span class="attr">class</span>=<span class="string">"center"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>I love you, looking for my be'shirt<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">section</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">section</span> <span class="attr">class</span>=<span class="string">"right"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>hello<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>world<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">section</span>></span></span><br><span class="line"><span class="tag"></<span class="name">main</span>></span></span><br><span class="line"><span class="tag"><<span class="name">footer</span> <span class="attr">class</span>=<span class="string">"footer"</span>></span>test<span class="tag"></<span class="name">footer</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></li></ol><ul><li><p>水平居中</p><figure class="highlight html"><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><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Title<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></span><br><span class="line"><span class="undefined"> * {</span></span><br><span class="line"><span class="undefined"> margin: 0;</span></span><br><span class="line"><span class="undefined"> padding: 0;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .tc {</span></span><br><span class="line"><span class="undefined"> text-align: center;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .draw {</span></span><br><span class="line"><span class="undefined"> width: 30px;</span></span><br><span class="line"><span class="undefined"> height: 30px;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .container {</span></span><br><span class="line"><span class="undefined"> position: relative;</span></span><br><span class="line"><span class="undefined"> padding-bottom: 30px;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .plc {</span></span><br><span class="line"><span class="undefined"> position: absolute;</span></span><br><span class="line"><span class="undefined"> left: 0;</span></span><br><span class="line"><span class="undefined"> right: 0;</span></span><br><span class="line"><span class="undefined"> margin: auto;</span></span><br><span class="line"><span class="undefined"> width: 120px;</span></span><br><span class="line"><span class="undefined"> text-align: center;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .plc2 {</span></span><br><span class="line"><span class="undefined"> position: absolute;</span></span><br><span class="line"><span class="undefined"> left: 50%;</span></span><br><span class="line"><span class="undefined"> transform: translate3d(-50%, 0, 0);</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .fcc {</span></span><br><span class="line"><span class="undefined"> display: flex;</span></span><br><span class="line"><span class="undefined"> justify-content: center;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .fighting {</span></span><br><span class="line"><span class="undefined"> width: 120px;</span></span><br><span class="line"><span class="undefined"> margin: 0 auto;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="comment"><!-- inline inline-block --></span></span><br><span class="line"> <span class="tag"><<span class="name">article</span> <span class="attr">class</span>=<span class="string">"tc"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span>center<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">article</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tc"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">class</span>=<span class="string">"draw"</span> <span class="attr">src</span>=<span class="string">"./yourjobthecentralpark.png"</span> <span class="attr">alt</span>=<span class="string">""</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="comment"><!-- position --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"plc"</span>></span>我是水平的中心<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"plc2"</span>></span>我是水平的中心<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="comment"><!-- flex --></span></span><br><span class="line"> <span class="tag"><<span class="name">article</span> <span class="attr">class</span>=<span class="string">"fcc"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>你们好，我是篮球少年，小林同学<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">article</span>></span></span><br><span class="line"> <span class="comment"><!-- margin --></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"fighting tc"</span>></span>加油，小林<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></li><li><p>垂直居中</p><figure class="highlight html"><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><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Title<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></span><br><span class="line"><span class="undefined"> * {</span></span><br><span class="line"><span class="undefined"> margin: 0;</span></span><br><span class="line"><span class="undefined"> padding: 0;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .lh {</span></span><br><span class="line"><span class="undefined"> height: 30px;</span></span><br><span class="line"><span class="undefined"> line-height: 30px;</span></span><br><span class="line"><span class="undefined"> border: 1px solid red;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .fac {</span></span><br><span class="line"><span class="undefined"> display: flex;</span></span><br><span class="line"><span class="undefined"> align-items: center;</span></span><br><span class="line"><span class="undefined"> height: 30px;</span></span><br><span class="line"><span class="undefined"> border: 1px solid blue;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .container {</span></span><br><span class="line"><span class="undefined"> position: relative;</span></span><br><span class="line"><span class="undefined"> height: 30px;</span></span><br><span class="line"><span class="undefined"> border: 1px solid deeppink;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .ptc {</span></span><br><span class="line"><span class="undefined"> position: absolute;</span></span><br><span class="line"><span class="undefined"> top: 50%;</span></span><br><span class="line"><span class="undefined"> transform: translate3d(0, -50%, 0);</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="comment"><!-- text line-height --></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"lh"</span>></span>没事看看后端，说不定以后会用上<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="comment"><!-- flex --></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"fac"</span>></span>php是最好的语言，鸟哥是最强的php程序员<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="comment"><!-- position --></span></span><br><span class="line"> <span class="tag"><<span class="name">article</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"ptc"</span>></span>java收费，未来难说<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">article</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></li></ul><blockquote><p>代码仓库：<a href="https://github.com/Choicelin/css_structure" target="_blank" rel="noopener">https://github.com/Choicelin/css_structure</a></p></blockquote>]]></content>
<summary type="html">
<ul>
<li><p>左右布局</p>
<ol>
<li>使用浮动</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><
</summary>
<category term="CSS" scheme="https://choicelin.github.io/tags/CSS/"/>
</entry>
<entry>
<title>升级React:Redux</title>
<link href="https://choicelin.github.io/2018/11/17/%E5%8D%87%E7%BA%A7React-Redux/"/>
<id>https://choicelin.github.io/2018/11/17/升级React-Redux/</id>
<published>2018-11-17T02:33:59.000Z</published>
<updated>2018-11-17T10:34:18.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>本文翻译于<a href="https://css-tricks.com/learning-react-redux/" target="_blank" rel="noopener">原文链接</a></p></blockquote><p>Redux是一个在javascript应用中同时管理数据和UI视图状态的工具。它被认为是完美管理单页应用复杂状态的杰作。同时它不是一定要用于一个特定的框架上（比如React），虽然它的作者心中是想解决React的复杂状态管理，但是它依然可以用在Angular，甚至jQuery应用之上。</p><p>告诉大家更多的是，它是经过一项“time travel”的实验而想出来的——这是它被开发出来的真实的原因，我们将在后面讨论。</p><p>就像我们之前的教程中看到的一样，React在组件间流动数据，更具体的说，这被叫做单向数据流——数据流向是从父到子一个方向的。对于这个单向数据流特征，React没有明显表示如何处理两个没有父子关系的组件的通信：</p><p><img src="https://css-tricks.com/wp-content/uploads/2016/03/redux-article-3-01.svg" alt="很low的方式来处理没有父子关系的组件通信"></p><p>React不推荐直接像上图那样组件与组件间通信。即使它特性支持上面的通信，也不要这样做。因为这种实践被认为是不好，极易导致代码写得像面条一样混乱。</p><p>React确实提供了一种解决上述问题的方案，但是它并没有在框架层面实现，而是需要开发者，也就是你，自己去实现它。下面是一段React文档的原文：</p><blockquote><p>For communication between two components that don’t have a parent-child relationship, you can set up your own global event system. … Flux pattern is one of the possible ways to arrange this.</p></blockquote><p>翻译为：对于无父子关系的两个组件间的通信，你可以搭建你自己的全局事件系统。…Flux模式是可能处理这个问题的多种方式之一。</p><p>这就是Redux出来的原因。Redux提供了一种方案把你所有的应用状态保存在一个地方，叫做”store“。然后组件把状态的变化通知到store，同时组件订阅store，就可以察觉到状态的变化，从而不直接在组件间通信。</p><p><img src="https://css-tricks.com/wp-content/uploads/2016/03/redux-article-3-02.svg" alt="dispatch and subscribe"></p><p>store在整个应用中可以看做所有状态变化的中间人。引入Redux，组件之间不直接交流，而是遵循”single source of truth“（译：单真理之源)，也就是store这个真理之源。这和其他方式中，应用的各部分直接互相交流有很大不同。有时，那些方式被认为是错误的或者令人混淆的：</p><p><img src="https://css-tricks.com/wp-content/uploads/2016/03/redux-article-3-03.svg" alt="without redux or with redux"></p><p>引入redux,很清晰地知道组件获取它们的状态通过唯一的store。同时也清晰地知道，组件在何处通知状态的改变，也是store。一个组件的通知状态改变只聚焦在dispatch（译：派遣）一个改变到store上，而不需要关心其他的组件是否需要这个状态的变化。所以Redux使数据流容易去推测。</p><p>使用store去协调一个应用的状态实际上是一种模式，也就是上文提到的Flux 模式。它是一个设计模式赞扬了像React那样的单向数据流的工程。Redux与Flux相似，但是它们怎样相似呢？</p><h3 id="Redux-is-“Flux-like”（译：Redux是”像Flux的“）"><a href="#Redux-is-“Flux-like”（译：Redux是”像Flux的“）" class="headerlink" title="Redux is “Flux-like”（译：Redux是”像Flux的“）"></a>Redux is “Flux-like”（译：Redux是”像Flux的“）</h3><p>Flux是一种模式，而不是像Redux是个工具，因此不是一个你可以下载的东西。尽管Redux是一个在其它东西像Elm,被Flux影响的工具。有很多指导文章在那里去比较Redux和Flux。它们大多数总结Redux是Flux或者像Flux，取决于一个人定义Flux规则有多严格。最终，这都不重要。Facebook非常喜欢和支持Redux，以至于最后聘请了Redux的核心开发者Dan Abramov。</p><p>这篇文章假设你一点也不熟悉Flux模式。但是如果你很熟悉，你会发现一些小的不同，特别是考虑Redux的三大指导法则：</p><ol><li><p>Single source of truth(译者注：单真理之源)</p><p>Redux对于整个应用的状态仅仅使用一个store。因为所有的状态放在一个地方，Redux把这个叫做Single source of truth。</p><p>store的数据结构最终取决于你，但是它对于一个真实的应用，是一个典型的深度嵌套的对象。</p><p>Redux一个store的方式是与多个store的Flux众多的不同之一。</p></li><li><p>状态（state）是只读的</p><p>根据Redux文档，”改变状态的唯一方式是发出一个action，一个描述发生了什么的对象。“</p><p>这意味着这个应用不能直接改变状态，而是通过action来表达一种去改变store里面的状态的意图。</p><p>store对象本身只有一个非常小的API对应4个方法：</p><ul><li>store.dispatch(action)</li><li>store.subscribe(listener)</li><li>store.getState()</li><li>replaceReducer(nextReducer)</li></ul><p>因此你可以看到，没有一个方法是设置状态的。因此，对于一个应用来说，发出一个action是唯一可以反映一个状态变化的方式：</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> action = {</span><br><span class="line"> type: <span class="string">'ADD_USER'</span>,</span><br><span class="line"> user: {<span class="attr">name</span>: <span class="string">'Dan'</span>}</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="comment">// 假设一个store对象已经被创建了</span></span><br><span class="line">store.dispatch(action);</span><br></pre></td></tr></table></figure><p>dispatch()方法发送一个对象到Redux，这个对象被我们称为action。这个action被描述为一个”payload(译：载荷，承载着状态修改时要用到的信息)“持有一个type和其他修改状态时要用到的数据——这个例子里面是一个user对象。记住，除了type这个属性，其他的载荷数据就看你如何去设计，不是固定的，比如这里使用一个user对象，用在reducer中。</p></li><li><p>修改由纯函数组成</p><p>就像刚才描述的那样，Redux不允许应用直接修改状态，而是用传递的action表明状态的变化，并意图去修改状态。Reducers是一些函数可以接收发送过来的action，并真正的去操作状态的修改。</p><p>一个reducer接收当前的状态作为一个参数，并能够通过构造出一个新状态来修改原来状态：</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// Reducer 函数</span></span><br><span class="line"><span class="keyword">var</span> someReducer = <span class="function"><span class="keyword">function</span>(<span class="params">state, action</span>) </span>{</span><br><span class="line"> ...</span><br><span class="line"> <span class="keyword">return</span> state;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>Reducer应该使用纯函数来编写。纯函数描述了一个函数具有下述四个特点：</p><ul><li>它不调用外部网络和数据库</li><li>它的返回值仅仅依赖于它的参数</li><li>它的参数应该是不能改变的</li><li>用同样的实参调用一个纯函数将总是返回相同的结果</li></ul><p>这些被称作”纯“，因为它什么也不做但是返回的值基于它的参数。它对系统其它部分没有任何副作用。</p></li></ol><h3 id="我们的第一个Redux-Store"><a href="#我们的第一个Redux-Store" class="headerlink" title="我们的第一个Redux Store"></a>我们的第一个Redux Store</h3><p>首先，用Redux.createStore()创建一个store并且传递所有的reducer作为它的参数。让我们看看一个仅有一个reducer的简单例子：</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 注意使用.push()不是一个最好的方式。这里只是为了简单的示例。</span></span><br><span class="line"><span class="comment">// 我们将在后面的章节讲述为什么</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// reducer函数</span></span><br><span class="line"><span class="keyword">var</span> userReducer = <span class="function"><span class="keyword">function</span>(<span class="params">state, action</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (state === <span class="literal">undefined</span>) {</span><br><span class="line"> state = [];</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (action.type === <span class="string">'ADD_USER'</span>) {</span><br><span class="line"> state.push(action.user);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> state;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过传入一个reducer创建一个store</span></span><br><span class="line"><span class="keyword">var</span> store = Redux.createStore(userReducer);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 传递我们第一个action来传达一个改变状态的意图</span></span><br><span class="line">store.dispatch({</span><br><span class="line"> type: <span class="string">'ADD_USER'</span>,</span><br><span class="line"> user: {<span class="attr">name</span>: <span class="string">'Dan'</span>}</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>简单的总结一下上面发生了什么：</p><ol><li>store通过一个reducer创建；</li><li>reducer创建了这个应用的初始状态为一个空的数组；</li><li>store.dispatch()用一个新的user对象派遣了action</li><li>reducer将新的user对象加入到状态里并且返回了它，这个返回的过程更新了store</li></ol><p><code>reducer实际上被调用了两次在这个例子里面</code>——一次是当store创建的时候，而另一次则是派遣action的时候。</p><p>当store被创建，Redux立即调用了reducers并且使用了它们返回的值作为初始的状态。第一次调用reducer时state是undefined。reducer的代码预期到这种情况，于是返回了一个空的数组来作用store的初始状态。</p><p>Reducers也在actions被派遣的时候被调用。因为从reducer返回的状态总是变成一个store的新的状态，所以Redux总是期望reducers返回一个状态。</p><p>在这个例子中，对我们reducer的第二个调用来自于我们的对action的派遣（译者注：store.dispatch()）。记住，一个派遣的action描述了修改状态的意图，并且经常每次都承载着数据用于新状态。我们这次，Redux传递一个当前的状态（译者注：state）和一个action对象给reducer函数。这个action对象，现在有一个type属性叫做”ADD_USER“，允许了这个reducer来知道如何去改变状态。</p><p>(未完待续)</p>]]></content>
<summary type="html">
<blockquote>
<p>本文翻译于<a href="https://css-tricks.com/learning-react-redux/" target="_blank" rel="noopener">原文链接</a></p>
</blockquote>
<p>Red
</summary>
<category term="react" scheme="https://choicelin.github.io/tags/react/"/>
</entry>
<entry>
<title>NODE_ENV作用知多少</title>
<link href="https://choicelin.github.io/2018/11/08/NODE-ENV%E4%BD%9C%E7%94%A8%E7%9F%A5%E5%A4%9A%E5%B0%91/"/>
<id>https://choicelin.github.io/2018/11/08/NODE-ENV作用知多少/</id>
<published>2018-11-08T08:13:58.000Z</published>
<updated>2018-11-08T08:20:40.000Z</updated>
<content type="html"><![CDATA[<h1 id="场景"><a href="#场景" class="headerlink" title="场景"></a>场景</h1><p>我们在开发的时候经常会有生产环境和开发环境，这两种环境中可能用到不同的配置，比如本地域名和线上域名，如何去区别它们，是我今天要谈到的一个问题。</p><h1 id="process对象与NODE-ENV"><a href="#process对象与NODE-ENV" class="headerlink" title="process对象与NODE_ENV"></a>process对象与NODE_ENV</h1><p>Node.js中有一个全局的对象process，这个对象无需require(),它控制着Node.js的进程的信息。</p><p>它有一个属性，叫做env。我下面将会使用这个属性，在它里面挂载一个NODE_ENV属性，我们通过这个NODE_ENV来判断开发环境和生产环境。</p><h2 id="获取NODE-ENV"><a href="#获取NODE-ENV" class="headerlink" title="获取NODE_ENV"></a>获取NODE_ENV</h2><p>由于我们有process对象，所以可以直接在任意代码处获取到NODE_ENV，并根据该对象的值判断环境，新建一个index.js，如下</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Creator: JIZHUA<413807584@qq.com></span></span><br><span class="line"><span class="comment"> * Date: 2018/11/8</span></span><br><span class="line"><span class="comment"> * Time: 3:37 PM</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> url = <span class="string">''</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (process.env.NODE_ENV == <span class="string">'dev'</span>) {</span><br><span class="line"> url = <span class="string">`http://localhost:3000`</span></span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"> url = <span class="string">`http://www.fenxiangtech.com`</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(url)</span><br></pre></td></tr></table></figure><h2 id="设置NODE-ENV"><a href="#设置NODE-ENV" class="headerlink" title="设置NODE_ENV"></a>设置NODE_ENV</h2><p>我们既然能够获取到NODE_ENV，那么我们如何设置这个NODE_ENV。即我们要在生产环境设置NODE_ENV值为production，在开发环境设置NODE_ENV的值为dev。</p><p>首先开起你的命令行，在windows下是CMD，在mac下是terminal。</p><p>windows下：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">set NODE_ENV=dev node index.js</span><br></pre></td></tr></table></figure><p>mac下：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">export NODE_ENV=dev node index.js</span><br></pre></td></tr></table></figure><p>现在在当前窗口下，输出的url就是<a href="http://localhost:3000，关闭窗口后需要重新设置" target="_blank" rel="noopener">http://localhost:3000，关闭窗口后需要重新设置</a></p><h2 id="在webstorm中设置NODE-ENV"><a href="#在webstorm中设置NODE-ENV" class="headerlink" title="在webstorm中设置NODE_ENV"></a>在webstorm中设置NODE_ENV</h2><ol><li><p>点击右上角的edit configuration</p><p><img src="./NODE_ENV_1.png" alt="1"></p></li><li><p>找到environment variables</p><p><img src="./NODE_ENV_2.png" alt="2"></p></li><li><p>设置NODE_ENV</p><p><img src="./NODE_ENV_3.png" alt="3"></p></li></ol><h2 id="使用cross-env实现跨平台设置NODE-ENV"><a href="#使用cross-env实现跨平台设置NODE-ENV" class="headerlink" title="使用cross-env实现跨平台设置NODE_ENV"></a>使用cross-env实现跨平台设置NODE_ENV</h2><p>首先初始化一个package.json</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init -y</span><br></pre></td></tr></table></figure><p>然后安装cross-env</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i cross-env -D</span><br></pre></td></tr></table></figure><p>接着在package.json的scripts中加入下面的代码</p><figure class="highlight json"><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></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">"name"</span>: <span class="string">"node-test"</span>,</span><br><span class="line"> <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line"> <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line"> <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line"> <span class="attr">"scripts"</span>: {</span><br><span class="line"> <span class="attr">"test"</span>: <span class="string">"cross-env NODE_ENV=dev node index.js"</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line"> <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line"> <span class="attr">"dependencies"</span>: {},</span><br><span class="line"> <span class="attr">"devDependencies"</span>: {</span><br><span class="line"> <span class="attr">"cross-env"</span>: <span class="string">"^5.2.0"</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>接着在命令行中运行npm run test既可看到结果</p><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>这就是NODE_ENV的作用，这个变量是自定义的名字，但是env这个属性不是哦。大家了解了吗？欢迎指正，交流！</p>]]></content>
<summary type="html">
<h1 id="场景"><a href="#场景" class="headerlink" title="场景"></a>场景</h1><p>我们在开发的时候经常会有生产环境和开发环境，这两种环境中可能用到不同的配置，比如本地域名和线上域名，如何去区别它们，是我今天要谈到的一个问题
</summary>
<category term="node" scheme="https://choicelin.github.io/tags/node/"/>
</entry>
<entry>
<title>ESLIN配置airbnb标准</title>
<link href="https://choicelin.github.io/2018/08/25/ESLIN%E9%85%8D%E7%BD%AEairbnb%E6%A0%87%E5%87%86/"/>
<id>https://choicelin.github.io/2018/08/25/ESLIN配置airbnb标准/</id>
<published>2018-08-25T01:20:18.000Z</published>
<updated>2018-08-25T01:36:32.000Z</updated>
<content type="html"><![CDATA[<h2 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h2><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">(</span><br><span class="line"> export PKG=eslint-config-airbnb;</span><br><span class="line"> npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"</span><br><span class="line">)</span><br></pre></td></tr></table></figure><p>(linux || mac osx)</p><h2 id="命令行操作"><a href="#命令行操作" class="headerlink" title="命令行操作"></a>命令行操作</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">eslint --init</span><br></pre></td></tr></table></figure><p>选use popular style guide ->接着选airbnb->根据需要选择是否要react->config格式选json</p><p>这样会创建一个.eslintrc.json</p><h2 id="IDE举例"><a href="#IDE举例" class="headerlink" title="IDE举例"></a>IDE举例</h2><ul><li>webstorm中Preference中搜索eslint然后选择automatic search，这样ide会自动寻找eslintrc</li><li>你会发现格式化的时候与eslint的配置的检查相冲突，那么需要单独配置，具体方法是根据格式化以后的报错信息在Code Style -> javascript中修改格式化方式</li></ul><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>最可操作，最简单的方式就是这样，欢迎尝试</p>]]></content>
<summary type="html">
<h2 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h2><figure class="highlight plain"><table><tr><td class="gutter"><pr
</summary>
<category term="笔记" scheme="https://choicelin.github.io/tags/%E7%AC%94%E8%AE%B0/"/>
</entry>
<entry>
<title>css积累一</title>
<link href="https://choicelin.github.io/2018/08/24/css%E7%A7%AF%E7%B4%AF%E4%B8%80/"/>
<id>https://choicelin.github.io/2018/08/24/css积累一/</id>
<published>2018-08-24T11:03:59.000Z</published>
<updated>2018-08-24T11:13:12.000Z</updated>
<content type="html"><![CDATA[<ul><li>span,text之间的换行会导致空格的出现，引出一些样式bug</li><li>border写了下方要在上方补一个透明的，同适用于padding，为了垂直居中，水平方向也是</li><li>div高度由其内部文档流元素的高度总和决定</li><li>文档流是文档内元素的流动方向</li><li>内联元素从左往右遇到宽度不够换行，英文是以单词为整体换行如果要字母截断使用word-break: break-all;否则是break-word</li><li>块级元素每一个块占一行，从上往下</li><li>span高度与字体的各种因素决定，无法确定</li><li>字体font-size大小指字最高到最低处的高度，每个字体都有建议行高，是由设计师确定的</li><li>遇到div中有内联元素要确定高度必须写height</li></ul>]]></content>
<summary type="html">
<ul>
<li>span,text之间的换行会导致空格的出现，引出一些样式bug</li>
<li>border写了下方要在上方补一个透明的，同适用于padding，为了垂直居中，水平方向也是</li>
<li>div高度由其内部文档流元素的高度总和决定</li>
<li>文档
</summary>
<category term="css" scheme="https://choicelin.github.io/tags/css/"/>
</entry>
<entry>
<title>微信小程序一次性事件实现</title>
<link href="https://choicelin.github.io/2018/08/24/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%80%E6%AC%A1%E6%80%A7%E4%BA%8B%E4%BB%B6%E5%AE%9E%E7%8E%B0/"/>
<id>https://choicelin.github.io/2018/08/24/微信小程序一次性事件实现/</id>
<published>2018-08-24T08:14:56.000Z</published>
<updated>2018-08-24T08:17:46.000Z</updated>
<content type="html"><![CDATA[<h2 id="场景"><a href="#场景" class="headerlink" title="场景"></a>场景</h2><p>在开发原生小程序时，可能会一种场景，比如我对某一个点击事件，多次点击只触发一次，这是常见的once函数做的事情，但是如何用在小程序里面呢，下面给大家看看我的处理方法。</p><h2 id="once函数"><a href="#once函数" class="headerlink" title="once函数"></a>once函数</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">once</span>(<span class="params">fn, context</span>) </span>{</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (fn) {</span><br><span class="line"></span><br><span class="line"> fn.apply(context || <span class="keyword">this</span>, <span class="built_in">arguments</span>)</span><br><span class="line"></span><br><span class="line"> fn = <span class="literal">null</span></span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="小程序代码示例"><a href="#小程序代码示例" class="headerlink" title="小程序代码示例"></a>小程序代码示例</h2><ul><li>wxml</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">view</span> <span class="attr">bindtap</span>=<span class="string">"click"</span>></span>点我<span class="tag"></<span class="name">view</span>></span></span><br></pre></td></tr></table></figure><ul><li>js</li></ul><figure class="highlight javascript"><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><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">Page({</span><br><span class="line"></span><br><span class="line"> data: {},</span><br><span class="line"></span><br><span class="line"> result: <span class="literal">null</span>,</span><br><span class="line"></span><br><span class="line"> onLoad: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.result = once(<span class="keyword">this</span>.actualClick, <span class="keyword">this</span>)</span><br><span class="line"></span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"> actualClick() {</span><br><span class="line"></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> click() {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.result()</span><br><span class="line"></span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">once</span>(<span class="params">fn, context</span>) </span>{</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (fn) {</span><br><span class="line"></span><br><span class="line"> fn.apply(context || <span class="keyword">this</span>, <span class="built_in">arguments</span>)</span><br><span class="line"></span><br><span class="line"> fn = <span class="literal">null</span></span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>once返回的函数要存起来，而且只存一次，并且要获取到page实例，所以需要在onload里面初始化。</p>]]></content>
<summary type="html">
<h2 id="场景"><a href="#场景" class="headerlink" title="场景"></a>场景</h2><p>在开发原生小程序时，可能会一种场景，比如我对某一个点击事件，多次点击只触发一次，这是常见的once函数做的事情，但是如何用在小程序里面呢，下
</summary>
<category term="记录" scheme="https://choicelin.github.io/tags/%E8%AE%B0%E5%BD%95/"/>
</entry>
<entry>
<title>谈谈引用和求值策略</title>
<link href="https://choicelin.github.io/2018/07/23/%E8%B0%88%E8%B0%88%E5%BC%95%E7%94%A8%E5%92%8C%E6%B1%82%E5%80%BC%E7%AD%96%E7%95%A5/"/>
<id>https://choicelin.github.io/2018/07/23/谈谈引用和求值策略/</id>
<published>2018-07-23T02:32:25.000Z</published>
<updated>2018-08-05T11:35:32.000Z</updated>
<content type="html"><![CDATA[<h1 id="说说引用"><a href="#说说引用" class="headerlink" title="说说引用"></a>说说引用</h1><h2 id="值"><a href="#值" class="headerlink" title="值"></a>值</h2><p>搞清楚引用之前先看看值是什么。在计算机科学中，一个值代表了一个程序可操作控制的实体。某种数据类型的一些成员就是这种类型的一些值。</p><h2 id="指针"><a href="#指针" class="headerlink" title="指针"></a>指针</h2><p>在计算机科学中，指针是一个对象，它存储了另一个在内存中值的内存地址。一个指针引用了内存中的一个位置。</p><h2 id="地址"><a href="#地址" class="headerlink" title="地址"></a>地址</h2><p>在计算机中，一个内存地址是一个对一块特定内存位置的引用。</p><h2 id="引用"><a href="#引用" class="headerlink" title="引用"></a>引用</h2><p>在计算机科学中，引用是一个值，它能够让程序在内存或其他设备存储中间接获取到特定的数据，比如变量的值或者一个记录。对一个给定系统中存储在内存中的引用，它的实现是数据存储在内存或其他设备存储空间中的物理地址。但是正是由于刚才这种说法导致了大家对指针和地址的错误的混淆，并说一个引用是指向了这个数据。然而，引用的可能以其他的方式来实现。</p><h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>引用不是指针，因为它可能实现方式是保存了一个物理地址，也可能是别的方式，比存的一个相对的地址偏移，而指针则是保存一个物理地址，显得更加狭义一点。同时，引用是一个值。</p><h1 id="说说求值策略"><a href="#说说求值策略" class="headerlink" title="说说求值策略"></a>说说求值策略</h1><p>求值策略是程序语言决定什么时候来求一个函数调用的实参的值，同时计算什么类型的值来传递给一个函数。</p><h2 id="通过值调用"><a href="#通过值调用" class="headerlink" title="通过值调用"></a>通过值调用</h2><p>通过值调用也被说是传递值。在这种方式中，实参表达式被计算的结果会绑定到调用后相匹配的变量上（对应于形参的位置），并且将这个值复制后放到一个新的内存区域。这种方式的特点是，函数作用域外的被传递的变量是不变的。</p><h2 id="通过引用调用"><a href="#通过引用调用" class="headerlink" title="通过引用调用"></a>通过引用调用</h2><p>通过引用调用也被说是传递引用。在这种方式中，函数接受一个变量的隐式引用作为实参，而不是它的值的拷贝。这种方式的特点是，函数作用域外被传递的变量也会被改变。</p><h2 id="通过共享调用"><a href="#通过共享调用" class="headerlink" title="通过共享调用"></a>通过共享调用</h2><p>通过共享调用也被说是通过对象或通过对象共享调用，Java，Python，JavaScript中都存在这中求值策略。关键在于传递的是一个对象，这个对象并没有被复制放到一个新的内存区域，而是在调用者和被调用者的作用域中共享着。和通过值调用的不同是，这个对象在调用者作用域中被修改了。和通过引用调用的不同是，获取值的权限并不在调用者，因为传递的不是一个引用，而是一个对象。</p>]]></content>
<summary type="html">
<h1 id="说说引用"><a href="#说说引用" class="headerlink" title="说说引用"></a>说说引用</h1><h2 id="值"><a href="#值" class="headerlink" title="值"></a>值</h2><p
</summary>
<category term="计算机科学" scheme="https://choicelin.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A7%91%E5%AD%A6/"/>
</entry>
<entry>
<title>在vue中配置使用SCSS预编译</title>
<link href="https://choicelin.github.io/2018/07/18/%E5%9C%A8vue%E4%B8%AD%E9%85%8D%E7%BD%AE%E4%BD%BF%E7%94%A8SCSS%E9%A2%84%E7%BC%96%E8%AF%91/"/>
<id>https://choicelin.github.io/2018/07/18/在vue中配置使用SCSS预编译/</id>
<published>2018-07-18T11:12:15.000Z</published>
<updated>2018-08-05T11:35:32.000Z</updated>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote><p>vue-cli 使用webpack模板生成的项目需要引入scss预处理器，网上散人教程不够官方，这里参照官方文档写一个简化步骤</p></blockquote><h2 id="步骤"><a href="#步骤" class="headerlink" title="步骤"></a>步骤</h2><ol><li><figure class="highlight shell"><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></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span> use npm</span><br><span class="line">npm install sass-loader node-sass --save-dev</span><br><span class="line"><span class="meta">#</span> use yarn</span><br><span class="line">yarn add -D sass-loader node-sass</span><br></pre></td></tr></table></figure></li><li><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// bulid文件夹下的webpack base配置中的module的rules数组加入以下对象</span></span><br><span class="line">{</span><br><span class="line"> test: <span class="regexp">/\.vue$/</span>,</span><br><span class="line"> loader: <span class="string">'vue-loader'</span>,</span><br><span class="line"> options: {</span><br><span class="line"> loaders: {</span><br><span class="line"> scss: <span class="string">'vue-style-loader!css-loader!sass-loader'</span>, <span class="comment">// <style lang="scss"></span></span><br><span class="line"> sass: <span class="string">'vue-style-loader!css-loader!sass-loader?indentedSyntax'</span> <span class="comment">// <style lang="sass"></span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>style中lang改为scss即可 </p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><style lang="scss"></span><br><span class="line"></style></span><br></pre></td></tr></table></figure></li></ol><p>需要的同学可以收藏</p><p>（逃）</p>]]></content>
<summary type="html">
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote>
<p>vue-cli 使用webpack模板生成的项目需要引入scss预处理器，网上散人教程不够官方，这里参照官方文档写
</summary>
<category term="vue" scheme="https://choicelin.github.io/tags/vue/"/>
</entry>
<entry>
<title>在mpvue中使用图表插件wx-charts</title>
<link href="https://choicelin.github.io/2018/07/06/%E5%9C%A8mpvue%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%9B%BE%E8%A1%A8%E6%8F%92%E4%BB%B6wx-charts/"/>
<id>https://choicelin.github.io/2018/07/06/在mpvue中使用图表插件wx-charts/</id>
<published>2018-07-06T02:00:43.000Z</published>
<updated>2018-08-05T11:35:32.000Z</updated>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p> 大家在原生小程序中需要用到图表插件时，可能会选择echarts或者由xiaolin3303开发的一款wx-charts插件，<br>本文为大家剖析一下如何在开源小程序框架mpvue中使用wx-charts插件</p><h2 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h2><p> mpvue编译后的代码是原生的小程序代码，它把页面的wxml内容全部封成了template引入到page中。既然是最后会转为原生代码，就支持使用原生的canvas组件，这一点也是官方明确肯定的。所以在mpvue中使用wx-charts就跟在原生中使用一样，除了注意事件的绑定使用mpvue的方式即可。</p><h2 id="步骤"><a href="#步骤" class="headerlink" title="步骤"></a>步骤</h2><p>1.<br> <figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone git@github.com:xiaolin3303/wx-charts.git</span><br></pre></td></tr></table></figure></p><p> 在clone下来的dist文件夹获得wxcharts-min.js（混淆版本）,如果需要进行二次开发，可以使用wxcharts.js然后修改<br> 内容，达到定制化的目的，修改完后可以利用在线混淆进行重新混淆使用。</p><ol><li><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--/src/pages/bar/bar.vue template中内容 --></span></span><br><span class="line"><span class="tag"><<span class="name">canvas</span> <span class="attr">canvas-id</span>=<span class="string">"areaCanvas"</span> <span class="attr">class</span>=<span class="string">"canvas"</span> @<span class="attr">touchstart</span>=<span class="string">"touchHandler"</span>></span><span class="tag"></<span class="name">canvas</span>></span></span><br></pre></td></tr></table></figure></li></ol><p>3.<br><figure class="highlight javascript"><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><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// /src/pages/bar/bar.vue script中内容</span></span><br><span class="line"><span class="keyword">var</span> wxCharts = <span class="built_in">require</span>(<span class="string">'@/lib/wxcharts-min.js'</span>); <span class="comment">//该路径为该js文件在你项目中的路径</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line">name: <span class="string">"bar"</span>,</span><br><span class="line">data() {</span><br><span class="line"><span class="keyword">return</span> {</span><br><span class="line">bar: <span class="literal">null</span></span><br><span class="line">}</span><br><span class="line">},</span><br><span class="line"></span><br><span class="line">mounted: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"><span class="keyword">var</span> windowWidth = <span class="number">320</span>;</span><br><span class="line"><span class="keyword">try</span> {</span><br><span class="line"><span class="keyword">var</span> res = wx.getSystemInfoSync();</span><br><span class="line">windowWidth = res.windowWidth;</span><br><span class="line">} <span class="keyword">catch</span> (e) {</span><br><span class="line"><span class="built_in">console</span>.error(<span class="string">'getSystemInfoSync failed!'</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.bar = <span class="keyword">new</span> wxCharts({</span><br><span class="line">canvasId: <span class="string">'areaCanvas'</span>,</span><br><span class="line">type: <span class="string">'area'</span>,</span><br><span class="line">categories: [<span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>, <span class="string">'4'</span>, <span class="string">'5'</span>, <span class="string">'6'</span>],</span><br><span class="line">animation: <span class="literal">true</span>,</span><br><span class="line">series: [{</span><br><span class="line">name: <span class="string">'成交量1'</span>,</span><br><span class="line">data: [<span class="number">32</span>, <span class="number">45</span>, <span class="literal">null</span>, <span class="number">56</span>, <span class="number">33</span>, <span class="number">34</span>],</span><br><span class="line">format: <span class="function"><span class="keyword">function</span> (<span class="params">val</span>) </span>{</span><br><span class="line"><span class="keyword">return</span> val.toFixed(<span class="number">2</span>) + <span class="string">'万'</span>;</span><br><span class="line">}</span><br><span class="line">}],</span><br><span class="line">yAxis: {</span><br><span class="line">title: <span class="string">'成交金额 (万元)'</span>,</span><br><span class="line">format: <span class="function"><span class="keyword">function</span> (<span class="params">val</span>) </span>{</span><br><span class="line"><span class="keyword">return</span> val.toFixed(<span class="number">2</span>);</span><br><span class="line">},</span><br><span class="line">min: <span class="number">0</span>,</span><br><span class="line">fontColor: <span class="string">'#8085e9'</span>,</span><br><span class="line">gridColor: <span class="string">'#8085e9'</span>,</span><br><span class="line">titleFontColor: <span class="string">'#f7a35c'</span></span><br><span class="line">},</span><br><span class="line">xAxis: {</span><br><span class="line">fontColor: <span class="string">'#7cb5ec'</span>,</span><br><span class="line">gridColor: <span class="string">'#7cb5ec'</span></span><br><span class="line">},</span><br><span class="line">extra: {</span><br><span class="line">legendTextColor: <span class="string">'#cb2431'</span></span><br><span class="line">},</span><br><span class="line">width: windowWidth,</span><br><span class="line">height: <span class="number">200</span></span><br><span class="line">});</span><br><span class="line">},</span><br><span class="line">methods: {</span><br><span class="line">touchHandler: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">this</span>.bar.getCurrentDataIndex(e));</span><br><span class="line"><span class="keyword">this</span>.bar.showToolTip(e);</span><br><span class="line">} </span><br><span class="line">}</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p> 该图表支持tooltip，这个功能比较实用，目前mpvue-echarts是不支持这一点的，但是echarts会更加美观，<br>可以根据需求取舍</p>]]></content>
<summary type="html">
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p> 大家在原生小程序中需要用到图表插件时，可能会选择echarts或者由xiaolin3303开发的一款wx-charts插件，<br>本文
</summary>
<category term="心得体会" scheme="https://choicelin.github.io/tags/%E5%BF%83%E5%BE%97%E4%BD%93%E4%BC%9A/"/>
</entry>
<entry>
<title>异步流程控制的两种思路</title>
<link href="https://choicelin.github.io/2018/05/15/%E5%BC%82%E6%AD%A5%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6%E7%9A%84%E4%B8%A4%E7%A7%8D%E6%80%9D%E8%B7%AF/"/>
<id>https://choicelin.github.io/2018/05/15/异步流程控制的两种思路/</id>
<published>2018-05-15T15:13:49.000Z</published>
<updated>2018-05-15T15:14:34.000Z</updated>
<content type="html"><![CDATA[<h1 id="异步流程控制的两种思路"><a href="#异步流程控制的两种思路" class="headerlink" title="异步流程控制的两种思路"></a>异步流程控制的两种思路</h1><ul><li>第一种在异步回调里面执行操作，这是最为常见的，扩展一下可以在回调参数里面再传回调，然后这个传入的回调里面执行可以保证异步逻辑走完了</li><li>思路二，我称之为赛跑回调，跟第一种有点类似，但是有细微的区别，有一个赛跑的感觉，也是在异步回调里面注册一个回调，把数据放到回调形参，这个回调可以在其他地方调用，在其他地方使用时，判断一下数据是否到位，如果到位了执行你的逻辑，如果没到位，执行回调，接受实参，设置数据，然后再执行你的逻辑。这就好比如果接口跑的快就不用调回调，跑得慢就调，所以好像赛跑一样。</li></ul>]]></content>
<summary type="html">
<h1 id="异步流程控制的两种思路"><a href="#异步流程控制的两种思路" class="headerlink" title="异步流程控制的两种思路"></a>异步流程控制的两种思路</h1><ul>
<li>第一种在异步回调里面执行操作，这是最为常见的，扩展一下可
</summary>
<category term="ajax" scheme="https://choicelin.github.io/tags/ajax/"/>
</entry>
</feed>