summary.html
36.6 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
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<meta content='width=device-width initial-scale=1' name='viewport'>
<title>前言</title>
<style type='text/css'>html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --text-color:#333333; --select-text-bg-color:#B5D6FC; --select-text-font-color:auto; --monospace:"Lucida Console",Consolas,"Courier",monospace; }
html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0px; padding: 0px; height: auto; bottom: 0px; top: 0px; left: 0px; right: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; tab-size: 4; }
iframe { margin: auto; }
a.url { word-break: break-all; }
a:active, a:hover { outline: 0px; }
.in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
#write { margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 40px; }
#write.first-line-indent p { text-indent: 2em; }
#write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0px; }
#write.first-line-indent li { margin-left: 2em; }
.for-image #write { padding-left: 8px; padding-right: 8px; }
body.typora-export { padding-left: 30px; padding-right: 30px; }
.typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap; }
@media screen and (max-width: 500px) {
body.typora-export { padding-left: 0px; padding-right: 0px; }
#write { padding-left: 20px; padding-right: 20px; }
.CodeMirror-sizer { margin-left: 0px !important; }
.CodeMirror-gutters { display: none !important; }
}
#write li > figure:last-child { margin-bottom: 0.5rem; }
#write ol, #write ul { position: relative; }
img { max-width: 100%; vertical-align: middle; }
button, input, select, textarea { color: inherit; font: inherit; }
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
*, ::after, ::before { box-sizing: border-box; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
p { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 2; }
p { orphans: 4; }
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
.hidden { display: none; }
.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
a { cursor: pointer; }
sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
figure > table { margin: 0px !important; }
tr { break-inside: avoid; break-after: auto; }
thead { display: table-header-group; }
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
table.md-table td { min-width: 32px; }
.CodeMirror-gutters { border-right: 0px; background-color: inherit; }
.CodeMirror-linenumber { user-select: none; }
.CodeMirror { text-align: left; }
.CodeMirror-placeholder { opacity: 0.3; }
.CodeMirror pre { padding: 0px 4px; }
.CodeMirror-lines { padding: 0px; }
div.hr:focus { cursor: none; }
#write pre { white-space: pre-wrap; }
#write.fences-no-line-wrapping pre { white-space: pre; }
#write pre.ty-contain-cm { white-space: normal; }
.CodeMirror-gutters { margin-right: 4px; }
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
.md-diagram-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
#write .md-fences.mock-cm { white-space: pre-wrap; }
.md-fences.md-fences-with-lineno { padding-left: 0px; }
#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
.CodeMirror-line, twitterwidget { break-inside: avoid; }
.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
.footnotes + .footnotes { margin-top: 0px; }
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
li div { padding-top: 0px; }
blockquote { margin: 1rem 0px; }
li .mathjax-block, li p { margin: 0.5rem 0px; }
li { margin: 0px; position: relative; }
blockquote > :last-child { margin-bottom: 0px; }
blockquote > :first-child, li > :first-child { margin-top: 0px; }
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
#write .footnote-line { white-space: pre-wrap; }
@media print {
body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; }
#write { margin-top: 0px; padding-top: 0px; border-color: transparent !important; }
.typora-export * { -webkit-print-color-adjust: exact; }
html.blink-to-pdf { font-size: 13px; }
.typora-export #write { padding-left: 32px; padding-right: 32px; padding-bottom: 0px; break-after: avoid; }
.typora-export #write::after { height: 0px; }
}
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
a img, img a { cursor: pointer; }
pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
p > .md-image:only-child { display: inline-block; width: 100%; }
#write .MathJax_Display { margin: 0.8em 0px 0px; }
.md-math-block { width: 100%; }
.md-math-block:not(:empty)::after { display: none; }
[contenteditable="true"]:active, [contenteditable="true"]:focus { outline: 0px; box-shadow: none; }
.md-task-list-item { position: relative; list-style-type: none; }
.task-list-item.md-task-list-item { padding-left: 0px; }
.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none; }
.math { font-size: 1rem; }
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
.md-toc-content { position: relative; margin-left: 0px; }
.md-toc-content::after, .md-toc::after { display: none; }
.md-toc-item { display: block; color: rgb(65, 131, 196); }
.md-toc-item a { text-decoration: none; }
.md-toc-inner:hover { text-decoration: underline; }
.md-toc-inner { display: inline-block; cursor: pointer; }
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
@media screen and (max-width: 48em) {
.md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
.md-toc-h4 .md-toc-inner { margin-left: 5em; }
.md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
.md-toc-h6 .md-toc-inner { margin-left: 8em; }
}
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
.footnote-line a:not(.reversefootnote) { color: inherit; }
.md-attr { display: none; }
.md-fn-count::after { content: "."; }
code, pre, samp, tt { font-family: var(--monospace); }
kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
.md-comment { color: rgb(162, 127, 3); opacity: 0.8; font-family: var(--monospace); }
code { text-align: left; vertical-align: initial; }
a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
.md-inline-math .MathJax_SVG .noError { display: none !important; }
.html-for-mac .inline-math-svg .MathJax_SVG { vertical-align: 0.2px; }
.md-math-block .MathJax_SVG_Display { text-align: center; margin: 0px; position: relative; text-indent: 0px; max-width: none; max-height: none; min-height: 0px; min-width: 100%; width: auto; overflow-y: hidden; display: block !important; }
.MathJax_SVG_Display, .md-inline-math .MathJax_SVG_Display { width: auto; margin: inherit; display: inline-block !important; }
.MathJax_SVG .MJX-monospace { font-family: var(--monospace); }
.MathJax_SVG .MJX-sans-serif { font-family: sans-serif; }
.MathJax_SVG { display: inline; font-style: normal; font-weight: 400; line-height: normal; zoom: 90%; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; }
.MathJax_SVG * { transition: none 0s ease 0s; }
.MathJax_SVG_Display svg { vertical-align: middle !important; margin-bottom: 0px !important; margin-top: 0px !important; }
.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
.md-diagram-panel > svg { max-width: 100%; }
[lang="mermaid"] svg, [lang="flow"] svg { max-width: 100%; height: auto; }
[lang="mermaid"] .node text { font-size: 1rem; }
table tr th { border-bottom: 0px; }
video { max-width: 100%; display: block; margin: 0px auto; }
iframe { max-width: 100%; width: 100%; border: none; }
.highlight td, .highlight tr { border: 0px; }
.CodeMirror { height: auto; }
.CodeMirror.cm-s-inner { background: inherit; }
.CodeMirror-scroll { overflow: auto hidden; z-index: 3; }
.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: rgb(255, 255, 255); }
.CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background: inherit; white-space: nowrap; }
.CodeMirror-linenumber { padding: 0px 3px 0px 5px; text-align: right; color: rgb(153, 153, 153); }
.cm-s-inner .cm-keyword { color: rgb(119, 0, 136); }
.cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgb(34, 17, 153); }
.cm-s-inner .cm-number { color: rgb(17, 102, 68); }
.cm-s-inner .cm-def { color: rgb(0, 0, 255); }
.cm-s-inner .cm-variable { color: rgb(0, 0, 0); }
.cm-s-inner .cm-variable-2 { color: rgb(0, 85, 170); }
.cm-s-inner .cm-variable-3 { color: rgb(0, 136, 85); }
.cm-s-inner .cm-string { color: rgb(170, 17, 17); }
.cm-s-inner .cm-property { color: rgb(0, 0, 0); }
.cm-s-inner .cm-operator { color: rgb(152, 26, 26); }
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgb(170, 85, 0); }
.cm-s-inner .cm-string-2 { color: rgb(255, 85, 0); }
.cm-s-inner .cm-meta { color: rgb(85, 85, 85); }
.cm-s-inner .cm-qualifier { color: rgb(85, 85, 85); }
.cm-s-inner .cm-builtin { color: rgb(51, 0, 170); }
.cm-s-inner .cm-bracket { color: rgb(153, 153, 119); }
.cm-s-inner .cm-tag { color: rgb(17, 119, 0); }
.cm-s-inner .cm-attribute { color: rgb(0, 0, 204); }
.cm-s-inner .cm-header, .cm-s-inner.cm-header { color: rgb(0, 0, 255); }
.cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgb(0, 153, 0); }
.cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgb(153, 153, 153); }
.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(0, 0, 204); }
.cm-negative { color: rgb(221, 68, 68); }
.cm-positive { color: rgb(34, 153, 34); }
.cm-header, .cm-strong { font-weight: 700; }
.cm-del { text-decoration: line-through; }
.cm-em { font-style: italic; }
.cm-link { text-decoration: underline; }
.cm-error { color: red; }
.cm-invalidchar { color: red; }
.cm-constant { color: rgb(38, 139, 210); }
.cm-defined { color: rgb(181, 137, 0); }
div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
.cm-s-inner .CodeMirror-activeline-background { background: inherit; }
.CodeMirror { position: relative; overflow: hidden; }
.CodeMirror-scroll { height: 100%; outline: 0px; position: relative; box-sizing: content-box; background: inherit; }
.CodeMirror-sizer { position: relative; }
.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; display: none; }
.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden; }
.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: hidden; }
.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; padding-bottom: 30px; z-index: 3; }
.CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block; }
.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: 0px 0px !important; border: none !important; }
.CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }
.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
.CodeMirror-lines { cursor: text; }
.CodeMirror pre { border-radius: 0px; border-width: 0px; background: 0px 0px; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible; }
.CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }
.CodeMirror-code pre { border-right: 30px solid transparent; width: fit-content; }
.CodeMirror-wrap .CodeMirror-code pre { border-right: none; width: auto; }
.CodeMirror-linebackground { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 0; }
.CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; }
.CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden; }
.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
.CodeMirror-measure pre { position: static; }
.CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right: none; width: 0px; }
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
.CodeMirror-focused div.CodeMirror-cursor { visibility: inherit; }
.cm-searching { background: rgba(255, 255, 0, 0.4); }
@media print {
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
}
:root { --side-bar-bg-color: #fafafa; --control-text-color: #777; }
html { font-size: 16px; }
body { font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(51, 51, 51); line-height: 1.6; }
#write { max-width: 860px; margin: 0px auto; padding: 30px 30px 100px; }
#write > ul:first-child, #write > ol:first-child { margin-top: 30px; }
a { color: rgb(65, 131, 196); }
h1, h2, h3, h4, h5, h6 { position: relative; margin-top: 1rem; margin-bottom: 1rem; font-weight: bold; line-height: 1.4; cursor: text; }
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { text-decoration: none; }
h1 tt, h1 code { font-size: inherit; }
h2 tt, h2 code { font-size: inherit; }
h3 tt, h3 code { font-size: inherit; }
h4 tt, h4 code { font-size: inherit; }
h5 tt, h5 code { font-size: inherit; }
h6 tt, h6 code { font-size: inherit; }
h1 { padding-bottom: 0.3em; font-size: 2.25em; line-height: 1.2; border-bottom: 1px solid rgb(238, 238, 238); }
h2 { padding-bottom: 0.3em; font-size: 1.75em; line-height: 1.225; border-bottom: 1px solid rgb(238, 238, 238); }
h3 { font-size: 1.5em; line-height: 1.43; }
h4 { font-size: 1.25em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; color: rgb(119, 119, 119); }
p, blockquote, ul, ol, dl, table { margin: 0.8em 0px; }
li > ol, li > ul { margin: 0px; }
hr { height: 2px; padding: 0px; margin: 16px 0px; background-color: rgb(231, 231, 231); border: 0px none; overflow: hidden; box-sizing: content-box; }
li p.first { display: inline-block; }
ul, ol { padding-left: 30px; }
ul:first-child, ol:first-child { margin-top: 0px; }
ul:last-child, ol:last-child { margin-bottom: 0px; }
blockquote { border-left: 4px solid rgb(223, 226, 229); padding: 0px 15px; color: rgb(119, 119, 119); }
blockquote blockquote { padding-right: 0px; }
table { padding: 0px; word-break: initial; }
table tr { border-top: 1px solid rgb(223, 226, 229); margin: 0px; padding: 0px; }
table tr:nth-child(2n), thead { background-color: rgb(248, 248, 248); }
table tr th { font-weight: bold; border-width: 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: rgb(223, 226, 229); border-right-color: rgb(223, 226, 229); border-left-color: rgb(223, 226, 229); border-image: initial; border-bottom-style: initial; border-bottom-color: initial; margin: 0px; padding: 6px 13px; }
table tr td { border: 1px solid rgb(223, 226, 229); margin: 0px; padding: 6px 13px; }
table tr th:first-child, table tr td:first-child { margin-top: 0px; }
table tr th:last-child, table tr td:last-child { margin-bottom: 0px; }
.CodeMirror-lines { padding-left: 4px; }
.code-tooltip { box-shadow: rgba(0, 28, 36, 0.3) 0px 1px 1px 0px; border-top: 1px solid rgb(238, 242, 242); }
.md-fences, code, tt { border: 1px solid rgb(231, 234, 237); background-color: rgb(248, 248, 248); border-radius: 3px; padding: 2px 4px 0px; font-size: 0.9em; }
code { background-color: rgb(243, 244, 244); padding: 0px 2px; }
.md-fences { margin-bottom: 15px; margin-top: 15px; padding-top: 8px; padding-bottom: 6px; }
.md-task-list-item > input { margin-left: -1.3em; }
@media print {
html { font-size: 13px; }
table, pre { break-inside: avoid; }
pre { overflow-wrap: break-word; }
}
.md-fences { background-color: rgb(248, 248, 248); }
#write pre.md-meta-block { padding: 1rem; font-size: 85%; line-height: 1.45; background-color: rgb(247, 247, 247); border: 0px; border-radius: 3px; color: rgb(119, 119, 119); margin-top: 0px !important; }
.mathjax-block > .code-tooltip { bottom: 0.375rem; }
.md-mathjax-midline { background: rgb(250, 250, 250); }
#write > h3.md-focus::before { left: -1.5625rem; top: 0.375rem; }
#write > h4.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
#write > h5.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
#write > h6.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
.md-image > .md-meta { border-radius: 3px; padding: 2px 0px 0px 4px; font-size: 0.9em; color: inherit; }
.md-tag { color: rgb(167, 167, 167); opacity: 1; }
.md-toc { margin-top: 20px; padding-bottom: 20px; }
.sidebar-tabs { border-bottom: none; }
#typora-quick-open { border: 1px solid rgb(221, 221, 221); background-color: rgb(248, 248, 248); }
#typora-quick-open-item { background-color: rgb(250, 250, 250); border-color: rgb(254, 254, 254) rgb(229, 229, 229) rgb(229, 229, 229) rgb(238, 238, 238); border-style: solid; border-width: 1px; }
.on-focus-mode blockquote { border-left-color: rgba(85, 85, 85, 0.12); }
header, .context-menu, .megamenu-content, footer { font-family: "Segoe UI", Arial, sans-serif; }
.file-node-content:hover .file-node-icon, .file-node-content:hover .file-node-open-state { visibility: visible; }
.mac-seamless-mode #typora-sidebar { background-color: var(--side-bar-bg-color); }
.md-lang { color: rgb(180, 101, 77); }
.html-for-mac .context-menu { --item-hover-bg-color: #E6F0FE; }
#md-notification .btn { border: 0px; }
.dropdown-menu .divider { border-color: rgb(229, 229, 229); }
.ty-preferences .window-content { background-color: rgb(250, 250, 250); }
.ty-preferences .nav-group-item.active { color: white; background: rgb(153, 153, 153); }
.typora-export li, .typora-export p, .typora-export, .footnote-line {white-space: normal;}
</style>
</head>
<body class='typora-export os-windows'>
<div class='is-node' id='write'><p><a
href='https://xiaozhuanlan.com/kunminx'><span>《重学安卓》</span></a><span>付费读者加微信进群：myatejx</span>
</p>
<p> </p>
<h2><a class="md-header-anchor" name="前言"></a><span>前言</span></h2>
<p><span>很高兴见到你！</span></p>
<p><span>上周我在 各大技术社区 发表了一篇 </span><a
href='https://juejin.im/post/5dafc49b6fb9a04e17209922'><span>《Jetpack MVVM 精讲》</span></a><span>，原以为在 知识网红 唱衰安卓 的 2019 会无人问津，没想到文章一经发布，从 国内知名公司 的架构师、技术经理，到 世界级公司 的 Android 开发 都在看。</span>
</p>
<p><img alt='reader_say.png'
referrerPolicy='no-referrer'
src='https://upload-images.jianshu.io/upload_images/57036-5445e7b4d66d97c7.png'/></p>
<p><span>并且从读者的反馈来看，近期大部分安卓开发 已跳出舒适圈，开始尝试认识和应用 Jetpack MVVM 到实际的项目开发中。</span></p>
<p><span>只可惜，关于 Jetpack MVVM，网上多是 </span><strong><span>东拼西凑、人云亦云、通篇贴代码</span></strong><span> 的文章，这不仅不能提供完整的视角 来帮助读者 首先明确背景状况，更是给还没入门 Jetpack 的读者 </span><strong><span>徒添困扰</span></strong><span>、起到 </span><strong><span>劝退</span></strong><span> 的作用。</span>
</p>
<p>
<span>好消息是，这一期，我们带着 </span><strong><span>精心打磨的 Jetpack MVVM 最佳实践案例</span></strong><span> 来了！</span>
</p>
<figure>
<table>
<thead>
<tr>
<th style='text-align:center;'><span>是让人 爱不释手 的 交互设计！</span></th>
<th style='text-align:center;'><span>是 连贯 的 用户体验</span></th>
<th style='text-align:center;'><span>唯一可信源 的 统一分发</span></th>
</tr>
</thead>
<tbody>
<tr>
<td style='text-align:center;'><img
alt='1231111323.gif'
referrerPolicy='no-referrer'
src='https://upload-images.jianshu.io/upload_images/57036-0a5cdc68f003211a.gif'/>
</td>
<td style='text-align:center;'><img
alt='222.gif'
referrerPolicy='no-referrer'
src='https://upload-images.jianshu.io/upload_images/57036-2b21db531e51ff03.gif'/>
</td>
<td style='text-align:center;'><img
alt='333.gif'
referrerPolicy='no-referrer'
src='https://upload-images.jianshu.io/upload_images/57036-9a541148ce5bed2e.gif'/>
</td>
</tr>
</tbody>
</table>
</figure>
<p> </p>
<figure>
<table>
<thead>
<tr>
<th style='text-align:center;'><span>横竖屏布局 的 无缝切换</span></th>
</tr>
</thead>
<tbody>
<tr>
<td style='text-align:center;'><img
alt='444.gif'
referrerPolicy='no-referrer'
src='https://upload-images.jianshu.io/upload_images/57036-688f3eafc76cfa27.gif'/>
</td>
</tr>
</tbody>
</table>
</figure>
<p> </p>
<h2><a class="md-header-anchor" name="项目简介"></a><span>项目简介</span></h2>
<p>
<span>本人拥有 3 年的 移动端架构 践行和设计经验，领导或参与团队重构的 中大型项目 多达十数个，对 Jetpack MVVM 架构在 确立规范化、标准化 开发模式 以 </span><strong><span>减少不可预期的错误</span></strong><span> 所作的努力，有着深入的理解。</span>
</p>
<p><span>在这个案例中，我将为你展示，Jetpack MVVM 是如何 </span><strong><span>以简驭繁</span></strong><span> 地 将原本十分容易出错、一出错就会耽搁半天时间的开发工作，通过 寥寥的几行代码 轻而易举地完成。</span>
</p>
<blockquote><p><span>👆👆👆 划重点！</span></p></blockquote>
<p> </p>
<p><span>在这个项目中，</span></p>
<blockquote><p>
<span>我们为 </span><strong><span>横、竖屏</span></strong><span> 的情况 分别安排了两套 </span><strong><span>截然不同的布局</span></strong><span>，并且在 </span><a
href='https://xiaozhuanlan.com/topic/0213584967'><span>生命周期</span></a><span>、</span><a
href='https://xiaozhuanlan.com/topic/7692814530'><span>重建机制</span></a><span>、</span><a
href='https://xiaozhuanlan.com/topic/7692814530'><span>状态管理</span></a><span>、</span><a
href='https://xiaozhuanlan.com/topic/9816742350'><span>DataBinding</span></a><span>、</span><a
href='https://xiaozhuanlan.com/topic/6257931840'><span>ViewModel</span></a><span>、</span><a
href='https://xiaozhuanlan.com/topic/0168753249'><span>LiveData</span></a><span> 、</span><a
href='https://xiaozhuanlan.com/topic/5860149732'><span>Navigation</span></a><span> 等知识点的帮助下，通过寥寥几行代码，轻松做到 </span><strong><span>在横竖屏两种布局间 无缝地切换，并且不产生任何 预期外的错误</span></strong><span>。</span>
</p></blockquote>
<p> </p>
<blockquote><p><span>我们在多个 Fragment 页面 分别安排了 </span><strong><span>播放状态 指示器</span></strong><span>（包括 播放暂停按钮状态、播放列表当前索引指示 等），并向你展示了 如何 以及为何 通过 </span><a
href='https://xiaozhuanlan.com/topic/0168753249'><span>LiveData</span></a><span> </span><strong><span>配合</span></strong><span> 作为唯一可信源 的 </span><a
href='https://xiaozhuanlan.com/topic/6257931840'><span>ViewModel</span></a><span> 或单例，来实现 </span><strong><span>全应用范围内 可追溯事件 的统一分发</span></strong><span>。</span>
</p></blockquote>
<p> </p>
<blockquote><p><span>我们在 Fragment 和 Activity 之间分别安排了 跨页面通信，从而向你展示 如何基于 </span><strong><span>迪米特原则</span></strong><span>（也称 最少知道原则）、通过 UnPeekLiveData 和 应用级 SharedViewModel 来实现 </span><strong><span>生命周期安全的、确保消息同步一致性和可靠性的 页面通信</span></strong><span>（事件回调）。</span>
</p></blockquote>
<p> </p>
<blockquote><p>
<span>我们在 </span><code>ui.page</code><span> 、</span><code>data.repository</code><span>、</span><code>bridge.request</code><span> 等目录下，分别安排了 视图控制器、</span><a
href='https://xiaozhuanlan.com/topic/6257931840'><span>ViewModel</span></a><span> 、DataRepository 等 内容，从而向你展示，</span><strong><span>单向依赖</span></strong><span> 的架构设计，是如何通过分层的 数据请求和响应，来 </span><strong><span>规避 内存泄漏</span></strong><span> 等问题。</span>
</p></blockquote>
<p> </p>
<blockquote><p>
<span>本项目的代码一律采用 经过 ISO 认证的 标准化工业级语言 Java 来编写。并且，在上述目录 所包含的 类中，我们大都 </span><strong><span>提供了丰富的注释</span></strong><span>，来帮助你理解 骨架代码 为何要如此设计、如此设计能够 </span><strong><span>在软件工程的背景下</span></strong><span> 避免哪些不可预期的错误。</span>
</p></blockquote>
<p>
</p>
<p><span>除了 </span><strong><span>在 以简驭繁 的代码中 掌握 MVVM 最佳实践</span></strong><span>，你还可以 从这个开源项目中 获得的内容 包括：</span>
</p>
<ol start=''>
<li><span>整洁的代码风格 和 标准的资源命名规范。</span></li>
<li><span>对 视图控制器 知识点的 深入理解 和 正确使用。</span></li>
<li><span>AndroidX 和 Material Design 2 的全面使用。</span></li>
<li><span>ConstraintLayout 约束布局的最佳实践。</span></li>
<li><strong><span>优秀的 用户体验 和 交互设计</span></strong><span>。</span></li>
<li><span>绝不使用 Dagger，绝不使用奇技淫巧、编写艰深晦涩的代码。</span></li>
<li><span>The one more thing is：</span></li>
</ol>
<p><span>即日起，可在 应用商店 下载体验！</span></p>
<p> </p>
<p><a href='https://www.coolapk.com/apk/247826'><img
alt='google-play1.png'
referrerPolicy='no-referrer'
src='https://upload-images.jianshu.io/upload_images/57036-f9dbd7810d38ae95.png'/></a><span> </span><a
href='https://www.coolapk.com/apk/247826'><img
alt='coolapk1.png'
referrerPolicy='no-referrer'
src='https://upload-images.jianshu.io/upload_images/57036-6cf24d0c9efe8362.png'/></a>
</p>
<p>
</p>
<h2><a class="md-header-anchor" name="thanks-to"></a><span>Thanks to</span></h2>
<p><a href='https://developer.android.google.cn/jetpack/androidx'><span>AndroidX</span></a></p>
<p><a href='https://developer.android.google.cn/jetpack/'><span>Jetpack</span></a></p>
<p><a href='https://github.com/material-components/material-components-android'><span>material-components-android</span></a>
</p>
<p><a href='https://play.google.com/store/apps/details?id=com.tencent.qqmusiclocalplayer'><span>轻听</span></a>
</p>
<p>
<a href='https://github.com/umano/AndroidSlidingUpPanel'><span>AndroidSlidingUpPanel</span></a>
</p>
<p><span>项目中使用的 图片素材 来自 </span><a href='https://unsplash.com/'><span>UnSplash</span></a><span> 提供的 </span><strong><span>无版权免费图片</span></strong><span>。</span>
</p>
<p><span>项目中使用的 音频素材 来自 </span><a
href='https://www.bensound.com/'><span>BenSound</span></a><span> 提供的 </span><strong><span>无版权免费音乐</span></strong><span>。</span>
</p>
<p>
</p>
<h2><a class="md-header-anchor" name="my-pages"></a><span>My Pages</span></h2>
<p><span>Email：</span><a href='mailto:kunminx@gmail.com'><span>kunminx@gmail.com</span></a></p>
<p><span>Home：</span><a href='https://www.kunminx.com/'><span>KunMinX 的个人博客</span></a></p>
<p><span>Juejin：</span><a href='https://juejin.im/user/58ab0de9ac502e006975d757/posts'><span>KunMinX 在掘金</span></a>
</p>
<p><a href='https://xiaozhuanlan.com/kunminx?rel=kunminx'><span>《重学安卓》 专栏</span></a></p>
<p><span>付费读者加微信进群：myatejx</span></p>
<p><a href='https://xiaozhuanlan.com/kunminx?rel=kunminx'><img
alt='重学安卓小专栏' referrerPolicy='no-referrer'
src='https://images.xiaozhuanlan.com/photo/2021/d493a54a32e38e7fbcfa68d424ebfd1e.png'/></a>
</p>
<h2><a class="md-header-anchor" name="license"></a><span>License</span></h2>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" spellcheck="false"><div
class="CodeMirror cm-s-inner CodeMirror-wrap" lang=""><div
style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea
autocapitalize="off" autocorrect="off" spellcheck="false"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
tabindex="0"></textarea></div><div
class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div
class="CodeMirror-gutter-filler" cm-not-content="true"></div><div
class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer"
style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div
style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div
role="presentation" style="position: relative; outline: none;"><div
class="CodeMirror-measure"><span><span></span>x</span></div><div
class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div
class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline"
style="position: relative;"><div
class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div
class="CodeMirror-gutter-background CodeMirror-activeline-gutter"
style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span
role="presentation"
style="padding-right: 0.1px;">Copyright 2018-present KunMinX</span></pre></div><pre
class=" CodeMirror-line " role="presentation"><span role="presentation"
style="padding-right: 0.1px;"><span
cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span
role="presentation" style="padding-right: 0.1px;">Licensed under the Apache License, Version 2.0 (the "License");</span></pre><pre
class=" CodeMirror-line " role="presentation"><span role="presentation"
style="padding-right: 0.1px;">you may not use this file except in compliance with the License.</span></pre><pre
class=" CodeMirror-line " role="presentation"><span role="presentation"
style="padding-right: 0.1px;">You may obtain a copy of the License at</span></pre><pre
class=" CodeMirror-line " role="presentation"><span role="presentation"
style="padding-right: 0.1px;"><span
cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span
role="presentation" style="padding-right: 0.1px;"> http://www.apache.org/licenses/LICENSE-2.0</span></pre><pre
class=" CodeMirror-line " role="presentation"><span role="presentation"
style="padding-right: 0.1px;"><span
cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span
role="presentation" style="padding-right: 0.1px;">Unless required by applicable law or agreed to in writing, software</span></pre><pre
class=" CodeMirror-line " role="presentation"><span role="presentation"
style="padding-right: 0.1px;">distributed under the License is distributed on an "AS IS" BASIS,</span></pre><pre
class=" CodeMirror-line " role="presentation"><span role="presentation"
style="padding-right: 0.1px;">WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.</span></pre><pre
class=" CodeMirror-line " role="presentation"><span role="presentation"
style="padding-right: 0.1px;">See the License for the specific language governing permissions and</span></pre><pre
class=" CodeMirror-line " role="presentation"><span role="presentation"
style="padding-right: 0.1px;">limitations under the License.</span></pre></div></div></div></div></div><div
style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 291px;"></div><div
class="CodeMirror-gutters"
style="display: none; height: 291px;"></div></div></div></pre>
<p> </p></div>
</body>
</html>