-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
1376 lines (1187 loc) · 282 KB
/
atom.xml
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
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>风的影子</title>
<subtitle>小站</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="https://muleimulei.github.io/"/>
<updated>2017-09-05T03:29:07.069Z</updated>
<id>https://muleimulei.github.io/</id>
<author>
<name>穆蕾</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>string常用函数</title>
<link href="https://muleimulei.github.io/2017/09/05/c%E4%B8%8Ec++/string%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0/"/>
<id>https://muleimulei.github.io/2017/09/05/c与c++/string常用函数/</id>
<published>2017-09-05T02:18:35.853Z</published>
<updated>2017-09-05T03:29:07.069Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>string常用函数</p>
</blockquote>
<a id="more"></a>
<h2 id="string类的构造函数"><a href="#string类的构造函数" class="headerlink" title="string类的构造函数"></a>string类的构造函数</h2><figure class="highlight c"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">string</span>(<span class="keyword">const</span> <span class="keyword">char</span> *s); <span class="comment">// 用s字符串初始化</span></div><div class="line"><span class="built_in">string</span>(<span class="keyword">int</span> n, <span class="keyword">char</span> c); <span class="comment">// 用c个字符c初始化</span></div></pre></td></tr></table></figure>
<h2 id="string类的字符操作"><a href="#string类的字符操作" class="headerlink" title="string类的字符操作"></a>string类的字符操作</h2><figure class="highlight c"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> <span class="keyword">char</span> &<span class="keyword">operator</span>[] (<span class="keyword">int</span> n) <span class="keyword">const</span>;</div><div class="line"><span class="function"><span class="keyword">const</span> <span class="keyword">char</span> &<span class="title">at</span><span class="params">(<span class="keyword">int</span> n)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="comment">// []和at()均会返回字符串中第n个字符的位置，但at函数提供范围检查，当越界时会抛出out_of_range异常，下标运算符[]不提供检查访问</span></div><div class="line"><span class="function"><span class="keyword">const</span> <span class="keyword">char</span> *<span class="title">data</span><span class="params">()</span> <span class="keyword">const</span></span>; <span class="comment">//返回一个以非null终止的c字符数组</span></div><div class="line"><span class="function"><span class="keyword">const</span> <span class="keyword">char</span> *<span class="title">c_str</span><span class="params">()</span> <span class="keyword">const</span></span>; <span class="comment">//返回一个以null终止的c字符串</span></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">copy</span><span class="params">(<span class="keyword">char</span> *s, <span class="keyword">int</span> n, <span class="keyword">int</span> pos = <span class="number">0</span>)</span> <span class="keyword">const</span></span>; <span class="comment">// 把当前串中以pos开始的n个字符拷贝到以s开始位置的字符数组中，返回实际拷贝的数目</span></div></pre></td></tr></table></figure>
<h2 id="string的特性描述"><a href="#string的特性描述" class="headerlink" title="string的特性描述"></a>string的特性描述</h2><figure class="highlight c"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">capacity</span><span class="params">()</span> <span class="keyword">const</span></span>; <span class="comment">//返回当前容量（即string中不必增加内存即可存放的元素个数）</span></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">max_size</span><span class="params">()</span> <span class="keyword">const</span></span>; <span class="comment">//返回string对象中可存放的最大字符串的长度</span></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">size</span><span class="params">()</span> <span class="keyword">const</span></span>; <span class="comment">//返回字符串大小</span></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">length</span><span class="params">()</span> <span class="keyword">const</span></span>; <span class="comment">//返回当前字符串的长度</span></div><div class="line"><span class="function"><span class="keyword">bool</span> <span class="title">empty</span><span class="params">()</span> <span class="keyword">const</span></span>; <span class="comment">//返回字符串是否为空</span></div><div class="line"><span class="function"><span class="keyword">void</span> <span class="title">resize</span><span class="params">(<span class="keyword">int</span> len, <span class="keyword">char</span> c)</span></span>; <span class="comment">//把字符串当前大小置为len，并用字符c填充不足的部分</span></div></pre></td></tr></table></figure>
<h2 id="string的子串"><a href="#string的子串" class="headerlink" title="string的子串"></a>string的子串</h2><figure class="highlight c"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="built_in">string</span> <span class="title">substr</span><span class="params">(<span class="keyword">int</span> pos = <span class="number">0</span>, <span class="keyword">int</span> n = npos)</span> <span class="keyword">const</span></span>; <span class="comment">//返回pos开始的n个字符组成的字符串</span></div></pre></td></tr></table></figure>
<h2 id="string的交换"><a href="#string的交换" class="headerlink" title="string的交换"></a>string的交换</h2><figure class="highlight c"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">void</span> <span class="title">swap</span><span class="params">(<span class="built_in">string</span> &s2)</span></span>; <span class="comment">// 交换当前字符串与s2的值</span></div></pre></td></tr></table></figure>
<h2 id="string类的查找函数"><a href="#string类的查找函数" class="headerlink" title="string类的查找函数"></a>string类的查找函数</h2><figure class="highlight c"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find</span><span class="params">(<span class="keyword">char</span> c, <span class="keyword">int</span> pos = <span class="number">0</span>)</span> <span class="keyword">const</span></span>; <span class="comment">//从pos开始查找字符c在当前字符串的位置</span></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find</span><span class="params">(<span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> pos = <span class="number">0</span>)</span> <span class="keyword">const</span></span>; <span class="comment">//从pos开始查找字符串s在当前串中的位置</span></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find</span><span class="params">(<span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> pos, <span class="keyword">int</span> n)</span> <span class="keyword">const</span></span>; <span class="comment">//从pos开始查找字符串s中前n个字符在当前串中的位置</span></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find</span><span class="params">(<span class="keyword">const</span> <span class="built_in">string</span> &s, <span class="keyword">int</span> pos = <span class="number">0</span>)</span> <span class="keyword">const</span></span>; <span class="comment">//从pos开始查找字符串s在当前串中的位置</span></div><div class="line"><span class="comment">// 查找成功时返回当前所在位置，失败返回string::npos的值</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">rfind</span><span class="params">(<span class="keyword">char</span> c, <span class="keyword">int</span> pos = npos)</span> <span class="keyword">const</span></span>;<span class="comment">//从pos开始从后向前查找字符c在当前串中的位置</span></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">rfind</span><span class="params">(<span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> pos = npos)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">rfind</span><span class="params">(<span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> pos, <span class="keyword">int</span> n = npos)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">rfind</span><span class="params">(<span class="keyword">const</span> <span class="built_in">string</span> &s,<span class="keyword">int</span> pos = npos)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="comment">//从pos开始从后向前查找字符串s中前n个字符组成的字符串在当前串中的位置，成功返回所在位置，失败时返回string::npos的值</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_first_of</span><span class="params">(<span class="keyword">char</span> c, <span class="keyword">int</span> pos = <span class="number">0</span>)</span> <span class="keyword">const</span></span>;<span class="comment">//从pos开始查找字符c第一次出现的位置</span></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_first_of</span><span class="params">(<span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> pos = <span class="number">0</span>)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_first_of</span><span class="params">(<span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> pos, <span class="keyword">int</span> n)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_first_of</span><span class="params">(<span class="keyword">const</span> <span class="built_in">string</span> &s,<span class="keyword">int</span> pos = <span class="number">0</span>)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="comment">//从pos开始查找当前串中第一个在s的前n个字符组成的数组里的字符的位置。查找失败返回string::npos</span></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_first_not_of</span><span class="params">(<span class="keyword">char</span> c, <span class="keyword">int</span> pos = <span class="number">0</span>)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_first_not_of</span><span class="params">(<span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> pos = <span class="number">0</span>)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_first_not_of</span><span class="params">(<span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> pos,<span class="keyword">int</span> n)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_first_not_of</span><span class="params">(<span class="keyword">const</span> <span class="built_in">string</span> &s,<span class="keyword">int</span> pos = <span class="number">0</span>)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="comment">//从当前串中查找第一个不在串s中的字符出现的位置，失败返回string::npos</span></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_last_of</span><span class="params">(<span class="keyword">char</span> c, <span class="keyword">int</span> pos = npos)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_last_of</span><span class="params">(<span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> pos = npos)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_last_of</span><span class="params">(<span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> pos, <span class="keyword">int</span> n = npos)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_last_of</span><span class="params">(<span class="keyword">const</span> <span class="built_in">string</span> &s,<span class="keyword">int</span> pos = npos)</span> <span class="keyword">const</span></span>;</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_last_not_of</span><span class="params">(<span class="keyword">char</span> c, <span class="keyword">int</span> pos = npos)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_last_not_of</span><span class="params">(<span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> pos = npos)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_last_not_of</span><span class="params">(<span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> pos, <span class="keyword">int</span> n)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">find_last_not_of</span><span class="params">(<span class="keyword">const</span> <span class="built_in">string</span> &s,<span class="keyword">int</span> pos = npos)</span> <span class="keyword">const</span></span>;</div><div class="line"><span class="comment">//find_last_of和find_last_not_of与find_first_of和find_first_not_of相似，只不过是从后向前查找</span></div></pre></td></tr></table></figure>
<h2 id="string类的替换函数"><a href="#string类的替换函数" class="headerlink" title="string类的替换函数"></a>string类的替换函数</h2><figure class="highlight c"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">replace</span><span class="params">(<span class="keyword">int</span> p0, <span class="keyword">int</span> n0, <span class="keyword">const</span> <span class="keyword">char</span> *s)</span></span>; <span class="comment">// 删除从p0开始的n0个字符，然后在p0处插入串s</span></div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">replace</span><span class="params">(<span class="keyword">int</span> p0, <span class="keyword">int</span> n0, <span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> n)</span></span>; <span class="comment">// 删除p0开始的n0个字符，然后在p0处插入字符串s的前n个字符</span></div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">replace</span><span class="params">(<span class="keyword">int</span> p0, <span class="keyword">int</span> n0,<span class="keyword">const</span> <span class="built_in">string</span> &s)</span></span>;<span class="comment">//删除从p0开始的n0个字符，然后在p0处插入串s</span></div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">replace</span><span class="params">(<span class="keyword">int</span> p0, <span class="keyword">int</span> n0,<span class="keyword">const</span> <span class="built_in">string</span> &s, <span class="keyword">int</span> pos, <span class="keyword">int</span> n)</span></span>;<span class="comment">//删除p0开始的n0个字符，然后在p0处插入串s中从pos开始的n个字符</span></div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">replace</span><span class="params">(<span class="keyword">int</span> p0, <span class="keyword">int</span> n0,<span class="keyword">int</span> n, <span class="keyword">char</span> c)</span></span>;<span class="comment">//删除p0开始的n0个字符，然后在p0处插入n个字符c</span></div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">replace</span><span class="params">(iterator first0, iterator last0,<span class="keyword">const</span> <span class="keyword">char</span> *s)</span></span>;<span class="comment">//把[first0，last0）之间的部分替换为字符串s</span></div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">replace</span><span class="params">(iterator first0, iterator last0,<span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> n)</span></span>;<span class="comment">//把[first0，last0）之间的部分替换为s的前n个字符</span></div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">replace</span><span class="params">(iterator first0, iterator last0,<span class="keyword">const</span> <span class="built_in">string</span> &s)</span></span>;<span class="comment">//把[first0，last0）之间的部分替换为串s</span></div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">replace</span><span class="params">(iterator first0, iterator last0,<span class="keyword">int</span> n, <span class="keyword">char</span> c)</span></span>;<span class="comment">//把[first0，last0）之间的部分替换为n个字符c</span></div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">replace</span><span class="params">(iterator first0, iterator last0,const_iterator first, const_iterator last)</span></span>;<span class="comment">//把[first0，last0）之间的部分替换成[first，last）之间的字符串</span></div></pre></td></tr></table></figure>
<h2 id="string类的插入函数"><a href="#string类的插入函数" class="headerlink" title="string类的插入函数"></a>string类的插入函数</h2><figure class="highlight c"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">insert</span><span class="params">(<span class="keyword">int</span> p0, <span class="keyword">const</span> <span class="keyword">char</span> *s)</span></span>;</div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">insert</span><span class="params">(<span class="keyword">int</span> p0, <span class="keyword">const</span> <span class="keyword">char</span> *s, <span class="keyword">int</span> n)</span></span>;</div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">insert</span><span class="params">(<span class="keyword">int</span> p0,<span class="keyword">const</span> <span class="built_in">string</span> &s)</span></span>;</div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">insert</span><span class="params">(<span class="keyword">int</span> p0,<span class="keyword">const</span> <span class="built_in">string</span> &s, <span class="keyword">int</span> pos, <span class="keyword">int</span> n)</span></span>;</div><div class="line"><span class="comment">//前4个函数在p0位置插入字符串s中pos开始的前n个字符</span></div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">insert</span><span class="params">(<span class="keyword">int</span> p0, <span class="keyword">int</span> n, <span class="keyword">char</span> c)</span></span>;<span class="comment">//此函数在p0处插入n个字符c</span></div><div class="line"><span class="function">iterator <span class="title">insert</span><span class="params">(iterator it, <span class="keyword">char</span> c)</span></span>;<span class="comment">//在it处插入字符c，返回插入后迭代器的位置</span></div><div class="line"><span class="function"><span class="keyword">void</span> <span class="title">insert</span><span class="params">(iterator it, const_iterator first, const_iterator last)</span></span>;<span class="comment">//在it处插入[first，last）之间的字符</span></div><div class="line"><span class="function"><span class="keyword">void</span> <span class="title">insert</span><span class="params">(iterator it, <span class="keyword">int</span> n, <span class="keyword">char</span> c)</span></span>;<span class="comment">//在it处插入n个字符c</span></div></pre></td></tr></table></figure>
<h2 id="string类的删除函数"><a href="#string类的删除函数" class="headerlink" title="string类的删除函数"></a>string类的删除函数</h2><figure class="highlight c"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="function">iterator <span class="title">erase</span><span class="params">(iterator first, iterator last)</span></span>;<span class="comment">//删除[first，last）之间的所有字符，返回删除后迭代器的位置</span></div><div class="line"><span class="function">iterator <span class="title">erase</span><span class="params">(iterator it)</span></span>;<span class="comment">//删除it指向的字符，返回删除后迭代器的位置</span></div><div class="line"><span class="function"><span class="built_in">string</span> &<span class="title">erase</span><span class="params">(<span class="keyword">int</span> pos = <span class="number">0</span>, <span class="keyword">int</span> n = npos)</span></span>;<span class="comment">//删除pos开始的n个字符，返回修改后的字符串</span></div></pre></td></tr></table></figure>
]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>string常用函数</p>
</blockquote>
</summary>
<category term="C++" scheme="https://muleimulei.github.io/categories/C/"/>
<category term="string常用函数" scheme="https://muleimulei.github.io/tags/string%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0/"/>
</entry>
<entry>
<title>CSS实现滚动的球</title>
<link href="https://muleimulei.github.io/2017/09/04/CSS3/%E6%BB%9A%E5%8A%A8%E7%9A%84%E7%90%83/"/>
<id>https://muleimulei.github.io/2017/09/04/CSS3/滚动的球/</id>
<published>2017-09-04T14:46:38.933Z</published>
<updated>2017-09-04T15:11:33.926Z</updated>
<content type="html"><![CDATA[<iframe src="/assets/ball.html" width="600px" height="600px" frameborder="0" allowfullscreen></iframe>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div></pre></td><td class="code"><pre><div class="line"><span class="meta"><!DOCTYPE html></span></div><div class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></div><div class="line"><span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></div><div class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></div><div class="line"><span class="tag"></<span class="name">head</span>></span></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span>{</div><div class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid black;</div><div class="line"> <span class="attribute">width</span>: <span class="number">300px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">300px</span>;</div><div class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span>;</div><div class="line"> <span class="attribute">margin</span>: <span class="number">90px</span> auto;</div><div class="line"> <span class="comment">/* animation: ballRotate 2s linear 0s infinite; */</span></div><div class="line"> <span class="attribute">perspective</span>: <span class="number">3000px</span>;</div><div class="line"> <span class="attribute">transform-style</span>: preserve-<span class="number">3</span>d;</div><div class="line"> <span class="attribute">position</span>: relative;</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateX</span>(-30deg) <span class="built_in">rotateZ</span>(-30deg);</div><div class="line"> <span class="attribute">background</span>: chocolate;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.wrapper</span><span class="selector-pseudo">::after</span>{</div><div class="line"> <span class="attribute">content</span>: <span class="string">''</span>;</div><div class="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> <span class="attribute">width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">500px</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">149px</span>;</div><div class="line"> <span class="attribute">background</span>: <span class="number">#a94c4c</span>;</div><div class="line"> <span class="attribute">top</span>: -<span class="number">100px</span>;</div><div class="line"> <span class="attribute">border-radius</span>: <span class="number">5px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.inner1</span>{</div><div class="line"> <span class="attribute">width</span>: <span class="number">300px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">300px</span>;</div><div class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</div><div class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span>;</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(36deg);</div><div class="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">background</span>: antiquewhite;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.f1</span>{</div><div class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid blue;</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(72deg);</div><div class="line"> <span class="attribute">background</span>: aqua;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.f2</span>{</div><div class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid green;</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(108deg);</div><div class="line"> <span class="attribute">background</span>: brown;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.f3</span>{</div><div class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#464646</span>;</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(144deg);</div><div class="line"> <span class="attribute">background</span>: blueviolet;</div><div class="line"> }</div><div class="line"> @<span class="keyword">keyframes</span> ballRotate{</div><div class="line"> <span class="selector-tag">from</span> {</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateX</span>(-30deg) <span class="built_in">rotateZ</span>(-30deg) <span class="built_in">rotateY</span>(0);</div><div class="line"> }</div><div class="line"> <span class="selector-tag">to</span>{</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateX</span>(-30deg) <span class="built_in">rotateZ</span>(-30deg) <span class="built_in">rotateY</span>(360deg);</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"><span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner1"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner1 f1"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner1 f2"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner1 f3"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">body</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>]]></content>
<summary type="html">
<iframe src="/assets/ball.html" width="600px" height="600px" frameborder="0" allowfullscreen></iframe>
<figure class="highlight html"><table
</summary>
<category term="CSS3" scheme="https://muleimulei.github.io/categories/CSS3/"/>
</entry>
<entry>
<title>CSS中的单位</title>
<link href="https://muleimulei.github.io/2017/08/26/CSS3/CSS%E4%B8%AD%E7%9A%84%E5%8D%95%E4%BD%8D/"/>
<id>https://muleimulei.github.io/2017/08/26/CSS3/CSS中的单位/</id>
<published>2017-08-26T12:31:04.181Z</published>
<updated>2017-08-26T14:59:44.640Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>CSS中的单位</p>
</blockquote>
<a id="more"></a>
<h2 id="em"><a href="#em" class="headerlink" title="em"></a>em</h2><p>em被定义为相对于当前对象内文本的字体大小。如果你给body元素设置了一个字体大小，那么body的任何子元素的em值都等于body设置的font-size。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"test"</span>></span>Test<span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">body</span>></span></div><div class="line">body {</div><div class="line"> font-size: 14px;</div><div class="line">}</div><div class="line">div {</div><div class="line"> font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px</div><div class="line">}</div></pre></td></tr></table></figure>
<p>div中的字体大小是1.2em，也就是div从父类元素继承的字体大小的1.2倍。在这里，body的字体是14px，那么div的字体大小是1.2*14 = 16.8px</p>
<p>但是，如果你用em一层一层级联地定义嵌套元素的字体大小又会发生什么事情呢？<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> Test <span class="comment"><!-- 14 * 1.2 = 16.8px --></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> Test <span class="comment"><!-- 16.8 * 1.2 = 20.16px --></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> Test <span class="comment"><!-- 20.16 * 1.2 = 24.192px --></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">body</span>></span></div></pre></td></tr></table></figure></p>
<p>虽然在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时，就因该用rem了，rem中的r代表根元素，它的值就是根元素设置的字体大小。在大多数情况下根元素就是html了。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">html {</div><div class="line"> font-size: 14px;</div><div class="line">}</div><div class="line">div {</div><div class="line"> font-size: 1.2rem;</div><div class="line">}</div></pre></td></tr></table></figure>
<p>这样在上面的那三个嵌套的div的字体大小都是1.2 * 14px = 16.8px了。</p>
<h2 id="适用于网格布局"><a href="#适用于网格布局" class="headerlink" title="适用于网格布局"></a>适用于网格布局</h2><p>rem不仅适用于字体大小，也用于网格布局。例如，你可以用基于HTML根元素字体大小的rem作为整个网络布局或者UI库的大小单位，然后在其它特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.container {</div><div class="line"> width: 70rem; // 70 * 14px = 980px</div><div class="line">}</div></pre></td></tr></table></figure>
<h2 id="vh和vw"><a href="#vh和vw" class="headerlink" title="vh和vw"></a>vh和vw</h2><p>响应式web设计对百分比规则有很大的依赖性。然而，对于每一个问题，css百分比并不是最好的解决方案。CSS宽度是相对于包含它的最近的父元素的宽度的。如果你想使用的是视口的高度与宽度，而不是父元素的，那么vh和vw就能满足需求了。</p>
<p>1vh等于1%的视口高度。例如，浏览器高度是900px，那么1vh = 900* 1% = 9px，同理，若视口宽度是750px，则1vw是7.5px。<br>它的用途很广泛。比如，我们用很简单的方法只用一行css代码就实现同屏幕等高的框。<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.slide{</div><div class="line"> height: 100vh;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>假如你要来一个和屏幕同宽的标题，你只要设置这个标题的font-size的单位为vw，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果。</p>
<h2 id="vmin和vmax"><a href="#vmin和vmax" class="headerlink" title="vmin和vmax"></a>vmin和vmax</h2><p>vh和vw是相对于视口的宽度和高度，而vmin和vmax则关于视口高度和宽度两者的最小或者最大值。例如，如果浏览器的高宽分别为700px和1100px，则1vmin=7px, 1vmax=11px；如果高宽分别是1080px和800px，则1vmin=8px，1vmax = 10.8px。</p>
<p>那么什么时候需要这些值呢？<br>假设有一个元素，你需要让他始终在屏幕上可见。只要对其高度和宽度使用vmin单位，并赋予其低于100的值就可以做到。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.box</span> {</div><div class="line"> <span class="attribute">height</span>: <span class="number">100vmin</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">100vmin</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
<p>如果你要让这个方框始终铺满整个视口的可见区域（四边始终触摸到屏幕的四边）：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.box</span>{</div><div class="line"> <span class="attribute">height</span>: <span class="number">100vmax</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">100vmax</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>CSS中的单位</p>
</blockquote>
</summary>
<category term="CSS3" scheme="https://muleimulei.github.io/categories/CSS3/"/>
</entry>
<entry>
<title>JavaScript工作机制（二）</title>
<link href="https://muleimulei.github.io/2017/08/26/JavaScript/JavaScript%E5%B7%A5%E4%BD%9C%E6%9C%BA%E5%88%B62/"/>
<id>https://muleimulei.github.io/2017/08/26/JavaScript/JavaScript工作机制2/</id>
<published>2017-08-26T01:35:13.391Z</published>
<updated>2017-08-26T12:22:43.385Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>JavaScript工作机制（二）</p>
</blockquote>
<h2 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h2><p>JavaScript引擎是一个执行JavaScript代码的程序或解释器。JavaScript引擎可以被实现为标准解释器，或者实现为以某种形式将JavaScript编译为字节码的即时编译器。</p>
<p>下面是实现了JavaScript引擎的一个热门项目列表：</p>
<blockquote>
<p>V8 — 开源，由Google开发，用C++编写的<br>Rhino — 由Mozilla基金所管理，开源，完全用Java开发<br>SpiderMonkey —第一个JavaScript引擎，最早用在Netscape Navigator上，现在用在Firefox上。<br>JavaScriptCore — 开源，以Nitro销售，由苹果公司为Safari开发<br>KJS —KDE的引擎最初由Harri Porten开发，用于KDE项目的Konqueror浏览器<br>Chakra (JScript9) — Internet Explorer<br>Chakra (JavaScript) — Microsoft Edge<br>Nashorn— 开源为OpenJDK的一部分，由Oracle的Java语言和工具组开发<br>JerryScript — 是用于物联网的轻量级引擎</p>
</blockquote>
<h2 id="创建V8引擎的由来"><a href="#创建V8引擎的由来" class="headerlink" title="创建V8引擎的由来"></a>创建V8引擎的由来</h2><p>Google构建的V8引擎是开源的，是用C++编写的。该引擎被用在Google Chrome中。不过，与其它引擎不同的是，V8还被用作Node.js的运行时。V8最初是设计用来提升Web浏览器中JavaScript执行的性能。为了获得速度，V8将JavaScript代码转化为更高效的机器码，而不是使用解释器。它通过实现像很多现代JavaScript引擎（spiderMonkey或Rhino）所用的JIT编译器，从而将JavaScript代码编译成机器码。<strong>这里主要区别在于V8不会产生字节码或任何中间代码</strong></p>
<h2 id="V8曾经有两个编译器"><a href="#V8曾经有两个编译器" class="headerlink" title="V8曾经有两个编译器"></a>V8曾经有两个编译器</h2><p>在V8的5.9版出现之前，V8引擎用了两个编译器：</p>
<ul>
<li>full-codegen：一个简单而超快的编译器，可以生成简单而相对较慢的机器码</li>
<li>Crankshaft：一个更复杂（即时）的优化的编译器，可以生成高度优化的代码</li>
</ul>
<p>V8引擎还在内部使用多个线程：</p>
<ul>
<li>主线程执行我们想让他干的活：获取代码，编译然后执行它</li>
<li>还有一个单独的线程用于编译，这样在主线程继续执行的同时，单独的线程能同时在优化代码</li>
<li>一个Profiler线程，用于让运行时知道哪些方法花了大量时间，这样Crankshaft就可以对它进行优化</li>
<li>几个线程用于处理垃圾收集器扫描</li>
</ul>
<p>第一次执行JavaScript代码时，V8会利用<strong>full-codegen</strong>直接将解析的JavaScript翻译为机器码，而无需任何转换。这就让它能非常快的开始执行机器码。<strong>请注意，由于V8不会使用中间字节码表示，这就无需解释器。</strong></p>
<p>代码运行了一段时间后，Profiler线程已经收集了足够多的数据来判断应该优化哪个方法。</p>
<p>接下来，Crankshaft优化从另一个线程开始。它将JavaScript抽象语法树翻译为称为<strong>Hydrogen</strong>的高级静态单赋值（SSA）表示，并尝试优化Hydrogen图。大多数优化都在这一级完成的。</p>
<h2 id="内联"><a href="#内联" class="headerlink" title="内联"></a>内联</h2><p>第一个优化是提前内联尽可能多的代码。内联是被调用的函数体替换调用位置（调用函数所在的代码行）的过程。这个简单的步骤让以下优化变得更有意义。</p>
<img src="/assets/segment/JavaScript引擎2.jpg">
<h2 id="隐藏类"><a href="#隐藏类" class="headerlink" title="隐藏类"></a>隐藏类</h2><p>JavaScript是一种基于原型的语言：它没有类，对象是用一种克隆过程创建的。<br>JavaScript也是一种动态编程语言，就是说在对象实例化之后，可以随意给对象添加或删除属性。</p>
<p>大多数JavaScript解释器都使用类似字典的结构（基于哈希函数），将对象属性值的位置存储在内存中。这种结构使得在JavaScript中获取属性的值比在Java或C#这样的非动态编程语言中更昂贵。在Java中，所有对象属性都是由编译前的固定对象布局确定的，并且不能在运行时动态添加或删除。因此，属性的值（或指向这些属性的指针）可以在内存中存为连续缓冲区，每个缓冲区之间有固定偏移量。偏移量的长度可以很容易根据属性类型来确定。而在JavaScript中，这是不可能的，因为属性类型可能会在运行期间发生变化。</p>
<p>由于用字典来查找内存中对象属性的位置是非常低效的，所以V8使用了不同的方法来替代：<strong>隐藏类</strong>。隐藏类的工作机制类似于像Java这样的语言中使用的固定对象布局（类），只不过隐藏类是在运行时创建的。</p>
<p>例子：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Point</span>(<span class="params">x, y</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.x = x;</div><div class="line"> <span class="keyword">this</span>.y = y;</div><div class="line">}</div><div class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> Point(<span class="number">1</span>, <span class="number">2</span>)</div></pre></td></tr></table></figure></p>
<p>一旦<code>new Point(1, 2)</code>调用发生了，V8就会创建一个称为C0的隐藏类。</p>
<img src="/assets/segment/JavaScript引擎3.jpg">
<p>因为还没有给Point定义属性，所以CO为空。</p>
<p>一旦执行了第一条语句<code>this.x = x </code>(在Point函数中)，V8就会创建一个基于C0的第二个隐藏类C1。C1描述了内存中的位置（相对于对象指针），属性X在这个位置可以找到。此时，x存储在偏移0处，就是说，当将内存中的point对象作为连续缓存器来查看时，第一个偏移就对应属性x。V8也会用“类转换”来更新C0，指出如果将一个属性X添加到点对象，那么隐藏类应该从C0切换到C1。下面的point对象的隐藏类现在是C1</p>
<img src="/assets/segment/JavaScript引擎4.jpg">
<p>每当向对象添加一个新属性时，旧的隐藏类就被用一个转换路径更新为新的隐藏类。隐藏类转换很重要，因为它们可以让隐藏类在以相同方式创建的对象之间共享。如果两个对象共享一个隐藏类，并且将相同的属性添加到这两个对象中，那么转换会确保两个对象都收到相同的新隐藏类和它附带的所以优化过的代码。</p>
<p>当执行语句this.y = y时，会重复此过程。<br>这时，又创建一个名为C2的新隐藏类，类转换被添加到C1，表示如果将属性y添加到Point对象（已包含属性x）,那么隐藏类应更改为C2，同时point对象的隐藏类被更新为C2。</p>
<img src="/assets/segment/JavaScript引擎5.jpg">
<p>隐藏类转化取决于将属性添加到对象的顺序。如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Point</span> (<span class="params">x, y</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.x = x;</div><div class="line"> <span class="keyword">this</span>.y = y;</div><div class="line">}</div><div class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> Point(<span class="number">1</span>, <span class="number">2</span>);</div><div class="line">p1.a = <span class="number">5</span>;</div><div class="line">p1.b = <span class="number">6</span>;</div><div class="line"></div><div class="line"><span class="keyword">var</span> p2 = <span class="keyword">new</span> Point(<span class="number">3</span>, <span class="number">4</span>);</div><div class="line">p2.a = <span class="number">7</span>;</div><div class="line">p2.b = <span class="number">8</span>;</div></pre></td></tr></table></figure>
<p>现在，你可能会认为p1和p2会使用相同的隐藏类和转换。但这是错的。对于p1，首先是添加属性a，然后是属性b。不过，对于p2，先是给b赋值，然后才是a。因此，由于转换路径不同，p1和p2最终会有不同的隐藏类。在这种情况下，以相同的顺序初始化动态属性要更好，这样隐藏类才可以被重用。</p>
<h2 id="内联缓存"><a href="#内联缓存" class="headerlink" title="内联缓存"></a>内联缓存</h2><p>V8利用另一种称为内联缓存的技术来优化动态类型语言。内联缓存来自于观察的结果：<strong>对同一方法的重复调用往往发生在同一类型的对象上。</strong></p>
<p>下面我们打算谈谈内联缓存的一般概念:</p>
<p>V8维护在最近的方法调用中作为参数传递的对象类型的缓存，并使用该信息对将来作为参数传递的对象类型做出假设。如果V8能够对传递给方法的对象类型做出一个很好的假设，那么它可以绕过算出如何访问对象的属性的过程，转而使用先前查找对象的隐藏类时所存储的信息。</p>
<p>那么隐藏类和内联缓存的概念是如何关联的呢？无论何时在特定对象上调用方法，V8引擎必须对该对象的隐藏类执行查找，以确定访问特定属性的偏移量。在对同一个隐藏类的同一方法进行了两次成功的调用之后，V8就省略掉了隐藏类的查找，只将属性的偏移量添加到对象指针本身上。对于所以将来对该方法的调用，V8引擎都会假设隐藏类没有改变，并使用先前查找中存储的偏移量直接转到特定属性的内存地址。这会大大提高执行速度。</p>
<p>内联缓存也是为什么同一类型的对象共享隐藏类非常重要的原因。如果您创建相同类型的两个对象，但是用的是不同的隐藏类，那么V8将无法使用内联缓存，因为即使两个对象的类型相同，但是它们的对应隐藏类也会为其属性分配不同的偏移量。</p>
<h2 id="编译到机器码"><a href="#编译到机器码" class="headerlink" title="编译到机器码"></a>编译到机器码</h2><p>一旦Hydrogen图被优化，Crankshaft将其降低到一个称为Lithium的较低级别表示。大多数Lithium实现都是针对架构的。寄存器分配发生在这一级。</p>
<p>最后，Lithium被编译成机器码。然后其它事情，也就是OSR发生了。在我们开始编译和优化一个明显要长期运行的方法之前，我们可能会运行它。V8不会蠢到忘记它刚刚慢慢执行的代码，所以它不会再用优化版本又执行一遍，而是将转换所有已有的上下文（栈，寄存器），以便我们可以在执行过程中间就切换到优化版本。这是一个非常复杂的任务，请记住，除了其它优化之外，V8最开始时已经内联了代码。V8并非唯一能做到这一点的引擎。<br>有一种称为去优化的保护措施，会做出相反的转换，并恢复为非优化的代码，以防止引擎的假设不在成立。</p>
<h2 id="垃圾回收"><a href="#垃圾回收" class="headerlink" title="垃圾回收"></a>垃圾回收</h2><p>对于垃圾回收来说，V8采用的是标记，清扫这种传统方式来清除旧一代。标记阶段应该停止执行JavaScript。为了控制GC成本，并使执行更加稳定，V8使用增量式标记：不是遍历整个堆，尝试标记每一个可能的对象，而是只遍历一部分堆，然后恢复正常执行。下一个GC停止会从之前的堆遍历停止的地方继续。这就允许在正常执行期间有非常短的暂停。如前所述，清扫阶段是由单独的线程处理。</p>
<h2 id="如何编写优化的JavaScript"><a href="#如何编写优化的JavaScript" class="headerlink" title="如何编写优化的JavaScript"></a>如何编写优化的JavaScript</h2><ol>
<li><strong>对象属性的顺序</strong>：始终以相同的顺序实例化对象属性，以便可以共享隐藏类和随后的优化的代码。</li>
<li><strong>动态属性</strong>：在实例化后向对象添加属性会强制修改隐藏类，减慢为之前的隐藏类优化了的方法。所以应该在构造函数中指定对象的所以属性。</li>
<li><strong>方法</strong>：重复执行相同方法的代码将比只执行一次的代码（由于内联缓存）运行的快。</li>
<li><strong>数组</strong>：避免键不是增量数字的稀疏数组。元素不全的稀疏数组是一个<strong>哈希表</strong>，而访问这种数组中的元素更昂贵。另外，尽量避免预分配大数组。最好随着发展而增长。最后，不要删除数组中的元素。它会让键变得稀疏。</li>
<li><strong>标记值</strong>：V8用32位表示对象和数字。它用一位来判断是对象（flag=1）还是整数（flag=0）。然后，如果一个数值大于31位，V8将会对数字装箱，将其转化为double，并创建为一个新对象将该数字放到里面。所以要尽可能使用31有符号数字，从而避免昂贵的转化为js对象的装箱操作。</li>
</ol>
]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>JavaScript工作机制（二）</p>
</blockquote>
<h2 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述<
</summary>
<category term="JavaScript" scheme="https://muleimulei.github.io/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://muleimulei.github.io/tags/JavaScript/"/>
</entry>
<entry>
<title>JavaScript工作机制（一）</title>
<link href="https://muleimulei.github.io/2017/08/26/JavaScript/JavaScript%E5%B7%A5%E4%BD%9C%E6%9C%BA%E5%88%B6/"/>
<id>https://muleimulei.github.io/2017/08/26/JavaScript/JavaScript工作机制/</id>
<published>2017-08-26T00:52:35.369Z</published>
<updated>2017-08-26T01:31:57.996Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>JavaScript工作机制（一）</p>
</blockquote>
<blockquote>
<p>本文转载:<a href="http://www.zcfy.cc/article/3965" target="_blank" rel="external">原文链接：http://www.zcfy.cc/article/3965</a></p>
</blockquote>
<h2 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h2><p>几乎所有人都已经听说过V8引擎的概念，大多数人都知道JavaScript是单线程的，或者是使用回调队列。<br>在这篇文章中，我们将详细介绍这些概念，并解释JavaScript的工作机制。通过了解这些细节，您将能正确利用提供的API，编写更好的非阻塞应用程序。</p>
<h2 id="JavaScript引擎"><a href="#JavaScript引擎" class="headerlink" title="JavaScript引擎"></a>JavaScript引擎</h2><p>JavaScript引擎的一个流行示例是Google的V8引擎。例如，V8引擎在Chrome和Node.js中使用。如下所示：</p>
<img src="/assets/segment/JavaScript引擎.jpg">
<p>引擎由两个主要部分组成：</p>
<ul>
<li>内存堆：这是内存分配发生的地方</li>
<li>调用栈：代码执行所在的栈帧</li>
</ul>
<h2 id="运行时"><a href="#运行时" class="headerlink" title="运行时"></a>运行时</h2><p>浏览器中已经有几个巨虎JavaScript开发人员都会使用的API（比如：<code>setTimeout</code>）。不过，这些API不是由引擎提供的。<br>事实证明，现实有点复杂：</p>
<img src="/assets/segment/JavaScript引擎1.jpg">
<p>所以，除了引擎以外，实际上还有更多东西。有一些由浏览器提供的，称为Web API的东西，比如DOM，Ajax，setTimeout等等。还有<strong>事件循环</strong>和<strong>回调队列</strong></p>
<h2 id="调用栈"><a href="#调用栈" class="headerlink" title="调用栈"></a>调用栈</h2><p>JavaScript是一种单线程编程语言，这意味着他只有一个调用栈。因此，它一次只能做一个事。</p>
<p>调用栈是一种数据结构，它基本上记录了我们处于程序中哪个地方。如果单步执行一个函数，就把该函数放到栈顶如果从函数返回，就把它从栈顶弹出。这就是栈所做的事情。</p>
<h2 id="并发和事件循环"><a href="#并发和事件循环" class="headerlink" title="并发和事件循环"></a>并发和事件循环</h2><p>当在调用栈中有函数调用需要大量时间才能处理完时，会发生什么？例如，假如想在浏览器中使用JavaScript进行一些复杂的图像转换。</p>
<p>你可能会问-这怎么就成了一个问题呢？原因是，在调用堆有函数要执行的同时，浏览器实际上不能做任何事情–他被阻塞了。这意味着浏览器无法渲染，他不能运行任何其它代码，它只是卡住了。如果想在应用中有流畅的UI，则会出现问题。</p>
<p>而这不是唯一的问题。一旦浏览器开始处理调用栈中的许多任务，他可能会停止响应很长时间。</p>
<p>那么，如何执行繁重的代码，而不阻塞UI并且不会使浏览器无响应呢？解决的方案是<strong>异步回调</strong></p>
]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>JavaScript工作机制（一）</p>
</blockquote>
<blockquote>
<p>本文转载:<a href="http://www.zcfy.cc/article/3965"
</summary>
<category term="JavaScript" scheme="https://muleimulei.github.io/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://muleimulei.github.io/tags/JavaScript/"/>
</entry>
<entry>
<title>JavaScript的深拷贝与浅拷贝</title>
<link href="https://muleimulei.github.io/2017/08/24/JavaScript/JavaScript%E9%87%8C%E7%9A%84%E6%B7%B1%E6%8B%B7%E8%B4%9D%E4%B8%8E%E6%B5%85%E6%8B%B7%E8%B4%9D/"/>
<id>https://muleimulei.github.io/2017/08/24/JavaScript/JavaScript里的深拷贝与浅拷贝/</id>
<published>2017-08-24T08:05:34.834Z</published>
<updated>2017-08-24T08:31:59.275Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>JavaScript的深拷贝与浅拷贝</p>
</blockquote>
<p>对于字符串类型，浅复制是对值的复制，对于对象来说，<strong>浅复制是对对象地址的复制</strong>，没有开辟新的内存，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象也会改变，而深复制是开辟新的地址，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> cloneObj = <span class="function"><span class="keyword">function</span> (<span class="params">obj</span>) </span>{</div><div class="line"> <span class="keyword">var</span> str, newobj = obj.constructor === <span class="built_in">Array</span> ? [] : {}</div><div class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> obj !== <span class="string">'object'</span>) {</div><div class="line"> <span class="keyword">return</span></div><div class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (<span class="built_in">window</span>.JSON) {</div><div class="line"> str = <span class="built_in">JSON</span>.stringify(obj) </div><div class="line"> newobj = <span class="built_in">JSON</span>.parse(str)</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i <span class="keyword">in</span> obj) {</div><div class="line"> newobj[i] = <span class="keyword">typeof</span> obj[i] === <span class="string">'object'</span>? cloneObj(obj[i]) : obj[i]</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> newobj</div><div class="line">}</div></pre></td></tr></table></figure>
]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>JavaScript的深拷贝与浅拷贝</p>
</blockquote>
<p>对于字符串类型，浅复制是对值的复制，对于对象来说，<strong>浅复制是对对象地址的复制</strong>，没有开辟
</summary>
<category term="JavaScript" scheme="https://muleimulei.github.io/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://muleimulei.github.io/tags/JavaScript/"/>
</entry>
<entry>
<title>html重绘与重排</title>
<link href="https://muleimulei.github.io/2017/08/23/HTML5/html%E9%87%8D%E7%BB%98%E4%B8%8E%E9%87%8D%E6%8E%92/"/>
<id>https://muleimulei.github.io/2017/08/23/HTML5/html重绘与重排/</id>
<published>2017-08-23T11:31:32.986Z</published>
<updated>2017-08-24T08:04:37.036Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>html重绘与重排</p>
</blockquote>
<a id="more"></a>
<p>浏览器从下载文档到显示文档的过程是个复杂的过程，这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别，但也有一定规则。文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树，之后根据DOM元素的几何属性构建一颗用于渲染的树。渲染树的每个节点都有大小和边距属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树并不包含隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置，再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局，对渲染树的计算通常只需要一次遍历就可以完成。但table及其内部元素除外，他可能需要多次计算才能确定好其在渲染树的属性，通常要花3倍于同等元素时的时间。这也就是为什么我们需要避免使用table做布局的一个原因。</p>
<p>重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility，outline，背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现出新的外观。重绘不会带来重新布局，并不一定伴随重排。</p>
<p>重排是更明显的一种改变，可以理解为渲染树需要重新计算。下面是常见的触发重排的操作：</p>
<ol>
<li><p>DOM元素的几何属性变化<br>当DOM元素的几何属性变化时，渲染树中的相关节点就会失效，浏览器会根据DOM元素的变化重新构建渲染树中失效的节点。之后，会根据新的渲染树重新绘制这部分页面。而且，当前元素的重排也会带来相关元素的重排。例如，容器节点的渲染树改变时，会触发子节点的重新计算，也会触发其后续兄弟节点的重排，祖先节点需要重新计算子节点的尺寸也会产生重排。最后，每个元素都将发生重绘。可见，重排一定会引起浏览器的重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。</p>
</li>
<li><p>DOM树的结构变化<br>当DOM树的结果变化时，例如节点的增减，移动等，也会触发重排。浏览器引擎布局的过程，类似于树的前序遍历，是一个从上到下从左到右的过程。通常在这个过程中，当前元素不会再影响其前面已经遍历过的元素。所以，如果在body最前面插入一个元素，会导致整个文档的重新渲染，而在其后插入一个元素，则不会影响到前面的元素。</p>
</li>
<li><p>获取某些属性<br> 浏览器引擎可能会针对重排做了优化，比如Opera，它会等到有足够的数量变化发生，或者等到一定的时间，或者等一个线程结束，再一起处理，这样就只发生一次重排。但除了渲染树的直接变化，当获取一些属性时，浏览器为取得正确的值会触发重排。这样就使得浏览器的优化失效了。这些属性包括：<code>offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, getComputedStyle() 。</code>所以，在多次使用这些值时应进行缓存。<br> 此外，改变元素的一些样式，调整浏览器窗口大小等等也将会触发重排。</p>
<p> 开发中，比较好的实践是尽量减少重排次数和缩小重排的影响范围。例如：<br> 1. 将多次改变样式属性的操作合并成一次操作。例如，</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"> JS:</div><div class="line">var changeDiv = document.getElementById(‘changeDiv’);</div><div class="line">changeDiv.style.color = ‘#093′;</div><div class="line">changeDiv.style.background = ‘#eee’;</div><div class="line">changeDiv.style.height = ’200px’;</div></pre></td></tr></table></figure>
</li>
</ol>
<p> 可以合并为：<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">div.changeDiv {</div><div class="line"> background: #eee;</div><div class="line"> color: #093;</div><div class="line"> height: 200px;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<pre><code><code> document.getElementById(‘changeDiv’).className = ‘changeDiv’;</code>
</code></pre><p> 2. 将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。<br> 3. 在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性添加到文档中去，而不是循环添加每一行。<br> 4. 由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。<br> 5. 在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量。</p>
]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>html重绘与重排</p>
</blockquote>
</summary>
<category term="HTML5" scheme="https://muleimulei.github.io/categories/HTML5/"/>
</entry>
<entry>
<title>JavaScript中的top，clientTop，scrollTop，offsetTop的讲解</title>
<link href="https://muleimulei.github.io/2017/08/23/JavaScript/JavaScript%E7%9A%84top%E5%92%8CclientTop%E5%92%8CscrollTop%E5%92%8CoffsetTop%E7%9A%84%E8%AE%B2%E8%A7%A3/"/>
<id>https://muleimulei.github.io/2017/08/23/JavaScript/JavaScript的top和clientTop和scrollTop和offsetTop的讲解/</id>
<published>2017-08-23T08:49:23.306Z</published>
<updated>2017-08-23T11:29:42.961Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>JavaScript中的top，clientTop，scrollTop，offsetTop的讲解</p>
</blockquote>
<a id="more"></a>
<p><img src="/assets/segment/layout.jpg" alt=""></p>
<p>scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大<br>clientWidth: 对象内容的可视区的宽度，不包括滚动条等边线，会随对象显示大小的变化而变化<br>offsetWidth: 对象整体的实际宽度，包含滚动条等边线，会随对象显示大小的变化而变化<br>offsetHeight：clientHeight + 滚动条 + 边框<br>clientHeight: 内容可视区域的高度，不包含滚动条 toppadding + bottompadding + height<br>scrollHeight: 元素padding加上元素内容的高度，这个高度与滚动条无关，是元素的实际高度：toppadding + bottompadding + 内容height<br>offsetLeft：获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置<br>offsetTop：获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置<br>event.clientX：相对于文档的水平坐标<br>event.clientY：相对于文档的垂直坐标<br>event.offsetX：相对容器的水平坐标<br>event.offsetY：相对容器的垂直坐标</p>
]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>JavaScript中的top，clientTop，scrollTop，offsetTop的讲解</p>
</blockquote>
</summary>
<category term="JavaScript" scheme="https://muleimulei.github.io/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://muleimulei.github.io/tags/JavaScript/"/>
</entry>
<entry>
<title>getBoundingClientRect用法</title>
<link href="https://muleimulei.github.io/2017/08/23/JavaScript/getBoundingClientRect%E7%94%A8%E6%B3%95/"/>
<id>https://muleimulei.github.io/2017/08/23/JavaScript/getBoundingClientRect用法/</id>
<published>2017-08-23T07:38:27.128Z</published>
<updated>2017-08-23T07:59:41.897Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>getBoundingClientRect用法</p>
</blockquote>
<a id="more"></a>
<p>getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top，right，bottom，left等属性。</p>
<ol>
<li>语法：rectObject = object.getBoundingClientRect()</li>
<li><p>返回值类型：TextRectangle对象，每个矩形具有整数性质表示的矩形，以像素为单位。</p>
<ul>
<li>rectObject.top：元素上边到视窗上边的距离</li>
<li>rectObject.right：元素右边到视窗左边的距离</li>
<li>rectObject.bottom：元素下边到视窗上边的距离</li>
<li><p>rectObject.left：元素左边到视窗左边的距离</p>
<p><img src="data:image/jpeg;base64,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ZwAAAAAAOEJJTQPtAAAAAAAQAGADEgABAAIAYAMSAAEAAjhCSU0EJgAAAAAADgAAAAAAAAAAAAA/gAAAOEJJTQQNAAAAAAAEAAAAHjhCSU0EGQAAAAAABAAAAB44QklNA/MAAAAAAAkAAAAAAAAAAAEAOEJJTScQAAAAAAAKAAEAAAAAAAAAAjhCSU0D9QAAAAAASAAvZmYAAQBsZmYABgAAAAAAAQAvZmYAAQChmZoABgAAAAAAAQAyAAAAAQBaAAAABgAAAAAAAQA1AAAAAQAtAAAABgAAAAAAAThCSU0D+AAAAAAAcAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAA4QklNBAAAAAAAAAIAADhCSU0EAgAAAAAACgAAAAAAAAAAAAA4QklNBDAAAAAAAAUBAQEBAQA4QklNBC0AAAAAAAYAAQAAAAY4QklNBAgAAAAAABAAAAABAAACQAAAAkAAAAAAOEJJTQQeAAAAAAAEAAAAADhCSU0EGgAAAAADWQAAAAYAAAAAAAAAAAAAAO4AAADwAAAAEgBRAFFiKlb+ADIAMAAxADUAMAA0ADIANgAyADEAMQA5ADAAOQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAA8AAAAO4AAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAQAAAAAAAG51bGwAAAACAAAABmJvdW5kc09iamMAAAABAAAAAAAAUmN0MQAAAAQAAAAAVG9wIGxvbmcAAAAAAAAAAExlZnRsb25nAAAAAAAAAABCdG9tbG9uZwAAAO4AAAAAUmdodGxvbmcAAADwAAAABnNsaWNlc1ZsTHMAAAABT2JqYwAAAAEAAAAAAAVzbGljZQAAABIAAAAHc2xpY2VJRGxvbmcAAAAAAAAAB2dyb3VwSURsb25nAAAAAAAAAAZvcmlnaW5lbnVtAAAADEVTbGljZU9yaWdpbgAAAA1hdXRvR2VuZXJhdGVkAAAAAFR5cGVlbnVtAAAACkVTbGljZVR5cGUAAAAASW1nIAAAAAZib3VuZHNPYmpjAAAA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UmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE1LTA0LTI2VDIxOjE5OjExKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxNS0wNC0yNlQyMTozMTo1OSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxNS0wNC0yNlQyMTozMTo1OSswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9qcGVnIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0NBN0E5MDExOEVDRTQxMThDNDI4M0NDQzg2REVENjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0JBN0E5MDExOEVDRTQxMThDNDI4M0NDQzg2REVENjkiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpDQkE3QTkwMTE4RUNFNDExOEM0MjgzQ0NDODZERUQ2OSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6Q0JBN0E5MDExOEVDRTQxMThDNDI4M0NDQzg2REVENjkiIHN0RXZ0OndoZW49IjIwMTUtMDQtMjZUMjE6MTk6MTErMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjb252ZXJ0ZWQiIHN0RXZ0OnBhcmFtZXRlcnM9ImZyb20gaW1hZ2UvcG5nIHRvIGltYWdlL2pwZWciLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOkNDQTdBOTAxMThFQ0U0MTE4QzQyODNDQ0M4NkRFRDY5IiBzdEV2dDp3aGVuPSIyMDE1LTA0LTI2VDIxOjMxOjU5KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD94cGFja2V0IGVuZD0idyI/Pv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAAAAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA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" alt=""></p>
</li>
</ul>
</li>
<li><p>width和height</p>
</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> rectWidth = rectObject.right - rectObject.left,</div><div class="line"> rectHeight = rectObject.bottom - rectObject.top</div></pre></td></tr></table></figure>]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>getBoundingClientRect用法</p>
</blockquote>
</summary>
<category term="JavaScript" scheme="https://muleimulei.github.io/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://muleimulei.github.io/tags/JavaScript/"/>
</entry>
<entry>
<title>CSS3的display:table</title>
<link href="https://muleimulei.github.io/2017/08/20/CSS3/css%E7%9A%84display%E4%B8%BAtable/"/>
<id>https://muleimulei.github.io/2017/08/20/CSS3/css的display为table/</id>
<published>2017-08-20T06:37:56.681Z</published>
<updated>2017-09-04T14:53:07.170Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>CSS3的display:table</p>
</blockquote>
<a id="more"></a>
<h2 id="两种类型的表格布局"><a href="#两种类型的表格布局" class="headerlink" title="两种类型的表格布局"></a>两种类型的表格布局</h2><ol>
<li><p>HTML Table:HTML Table是指使用原生的table标签。</p>
</li>
<li><p>CSS Table:CSS Table是指用CSS属性模仿HTML 表格的模型。</p>
</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">table { display: table }</div><div class="line">tr { display: table-row }</div><div class="line">thead { display: table-header-group }</div><div class="line">tbody { display: table-row-group }</div><div class="line">tfoot { display: table-footer-group }</div><div class="line">col { display: table-column }</div><div class="line">colgroup { display: table-column-group }</div><div class="line">td, th { display: table-cell }</div><div class="line">caption { display: table-caption }</div></pre></td></tr></table></figure>
<p>显而易见HTML Table使用标签table，tr、td等标签，就是使用CSS Table的相关属性来实现的。</p>
<p>table：指定对象作为块元素级的表格。</p>
<p>inline-table：指定对象作为内联元素级的表格。</p>
<p>table-caption：指定对象作为表格标题。</p>
<p>table-cell：指定对象作为表格单元格。</p>
<p>table-row：指定对象作为表格行。</p>
<p>table-row-group：指定对象作为表格行组。</p>
<p>table-column：指定对象作为表格列。</p>
<p>table-column-group：指定对象作为表格列组显示。</p>
<p>table-header-group：指定对象作为表格标题组。</p>
<p>table-footer-group：指定对象作为表格脚注组。</p>
<h2 id="动态垂直居中对齐"><a href="#动态垂直居中对齐" class="headerlink" title="动态垂直居中对齐"></a>动态垂直居中对齐</h2><div class="wrapper"><br> <button>添加</button><br> <div class="box"><br> <p>Hello World</p><br> <p>Hello World</p><br> </div><br></div>
<style>
.wrapper{
height: 300px;
width: 100%;
background: #105B63;
display: table;
position: relative;
color: white;
}
.wrapper > button{
position: absolute;
top: 20px;
left: 20px;
padding: 5px 10px;
display: inline-block;
background: #BD4932;
outline: none;
border: 2px solid #db9e36;
color: #FFD34E;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
cursor: pointer;
}
.wrapper > button:active{
border-color: #FFFAD5;
color: #FFFAD5;
}
.wrapper div.box{
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
<h2 id="动态水平居中对齐"><a href="#动态水平居中对齐" class="headerlink" title="动态水平居中对齐"></a>动态水平居中对齐</h2><p>为了让元素动态水平居中对齐，可以设置元素为<code>display: inline-block</code>。然后在该元素的外面包裹层设置<code>text-align: center</code>。这里的文本对齐缺点是有副作用的。外层包裹层的所有子元素继承了<code>text-align: center</code>，造成潜在的覆盖。</p>
<div id="wrapper2"><br> <h1>动态水平居中对齐</h1><br> <h2>使用<span class="orange">display: table</span></h2><br> <nav role="navigation" class="nav-table"><br> <ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Client</a></li><li><a href="#">Contact Us</a></li></ul><br> </nav><br> <h2>使用 <span class="orange">display: inline-block</span></h2><br> <nav role="navigation" class="nav-inline-block"><br> <ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Clients</a></li><li><a href="#">Contact Us</a></li></ul><br> </nav><br></div>
<style>
#wrapper2{
width: 100%;
text-align: center;
color: #FFFAD5;
background: #FFD34E;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}
#wrapper2 .orange{
color: #BD4932;
}
#wrapper2 .nav-table{
display: table;
margin: auto;
}
#wrapper2 .nav-inline-block{
display: inline-block;
}
#wrapper2 ul{
margin: 0;
padding: 0;
}
#wrapper2 ul li{
float: left;
background: #bd4932;
list-style: none;
}
#wrapper2 ul li a{
display: block;
padding: .5em 1em;
color: #FFFAD5;
}
</style>
<h2 id="响应式布局"><a href="#响应式布局" class="headerlink" title="响应式布局"></a>响应式布局</h2><p>css Table布局可以让一个元素表现上不像一个表格。只要将元素的display属性从table-cell切换到block，我们就能够将元素堆叠起来，你可以根据屏幕的可视区域改变元素的堆叠的顺序。</p>
<div id="wrapper3"><div class="box box1"></div><div class="box box2"></div><div class="box box3"></div></div>
<style>
#wrapper3{
width: 100%;
display: table;
min-height: 300px;
}
#wrapper3 .box{
display: table-cell;
text-align: center;
vertical-align:middle;
line-height: 13em;
}
#wrapper3 .box1{
background: #BD4932;
}
#wrapper3 .box2{
background: #105B63;
}
#wrapper3 .box3{
background: #FFFAD5;
}
</style>
<h2 id="动态高度的页脚贴在页面底部"><a href="#动态高度的页脚贴在页面底部" class="headerlink" title="动态高度的页脚贴在页面底部"></a>动态高度的页脚贴在页面底部</h2><p>页脚动态贴在底部需要满足以下两个条件：</p>
<ul>
<li>当主体的内容高度不超过可视区域高度的时候，页脚贴在页面底部。</li>
<li>当主体的内容高度超过可视区域高度的时候，页脚将按正常布局。</li>
</ul>
<div id="wrapper4"><button class="btn1">添加内容到主体区域</button><button class="btn2">添加内容到底部</button><div class="maincontent">这里是主体区域</div><div class="foot">这里是底部</div></div>
<style>
#wrapper4{
width: 100%;
height: 400px;
background: #FFFAD5;
display: table;
color: #BD4932;
position: relative;
}
#wrapper4 .maincontent{
height: 100%;
text-align: center;
}
#wrapper4 button{
position: absolute;
padding: 5px 10px;
display: inline-block;
background: #BD4932;
outline: none;
border: 2px solid #db9e36;
color: #FFD34E;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
cursor: pointer;
}
#wrapper4 button:active{
border-color: #FFFAD5;
color: #FFFAD5;
}
#wrapper4 .btn2{
top: 60px;
}
#wrapper4 .foot{
height: 1px;
display: table-row;
background: #105B63;
color: #FFFAD5;
}
</style>
<script>
document.querySelector("#wrapper4 .btn1").addEventListener("click", function(){
var element = document.createElement("div");
element.innerHTML = "<p>额外添加的行</p><p>额外添加的行</p><p>额外添加的行</p>";
document.querySelector(".maincontent").appendChild(element);
});
document.querySelector("#wrapper4 .btn2").addEventListener("click", function(){
var element = document.createElement("div");
element.innerHTML = "<p>额外添加到底部的行</p><p>额外添加到底部的行</p><p>额外添加到底部的行</p>";
document.querySelector(".foot").appendChild(element);
});
</script>
<h2 id="圣杯布局"><a href="#圣杯布局" class="headerlink" title="圣杯布局"></a>圣杯布局</h2><ul>
<li>具有中心内容主体和固定宽度的侧边栏</li>
<li>在源代码中，允许中心内容主体列出现在第一个节点位置</li>
<li>允许任何一列的高度最高</li>
</ul>
<div id="wrapper5"><div class="header">头部</div><div class="maincontent"><div class="box sidebarr">左边栏</div><div class="box content">主体内容</div><div class="box sidebarr">右侧栏</div></div><div class="foot">页脚底部</div></div>
<style>
#wrapper5{
width: 100%;
height: 300px;
background: #FFFAD5;
display: table;
text-align: center;
position: relative;
}
#wrapper5 button{
position: absolute;
padding: 5px 10px;
display: inline-block;
background: #BD4932;
outline: none;
border: 2px solid #db9e36;
color: #FFD34E;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
cursor: pointer;
}
#wrapper5 .header{
display: table-row;
height: 2px;
background: #FFD34E;
}
#wrapper5 .maincontent{
display: table;
height: 100%;
width: 100%;
}
#wrapper5 .maincontent .box{
display: table-cell;
}
#wrapper5 .maincontent .sidebarr{
width: 100px;
background: #BD4932;
}
#wrapper5 .foot{
display: table-row;
height: 1px;
background: #105B63;
color: #FFFAD5;
}
</style>
]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>CSS3的display:table</p>
</blockquote>
</summary>
<category term="CSS3" scheme="https://muleimulei.github.io/categories/CSS3/"/>
</entry>
<entry>
<title>javascript控制伪元素的方法汇总</title>
<link href="https://muleimulei.github.io/2017/08/15/JavaScript/JavaScript%E6%8E%A7%E5%88%B6%E4%BC%AA%E5%85%83%E7%B4%A0%E7%9A%84%E6%96%B9%E6%B3%95%E6%B1%87%E6%80%BB/"/>
<id>https://muleimulei.github.io/2017/08/15/JavaScript/JavaScript控制伪元素的方法汇总/</id>
<published>2017-08-15T11:09:50.598Z</published>
<updated>2017-08-15T12:11:31.907Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>javascript控制伪元素的方法汇总</p>
</blockquote>
<a id="more"></a>
<h2 id="为什么不能用JavaScript直接获取伪元素？"><a href="#为什么不能用JavaScript直接获取伪元素？" class="headerlink" title="为什么不能用JavaScript直接获取伪元素？"></a>为什么不能用JavaScript直接获取伪元素？</h2><p>比如::before和::after伪元素，用于在css渲染中向元素的头部或尾部插入内容，它们不受文档约束，也不影响文档本身，只影响最终样式。这些添加的内容不会出现在DOM中，仅仅是在css渲染层加入。事实上，伪元素可以被浏览器渲染，但本身并不是DOM元素。它不存在于文档中，所以JavaScript无法直接操作它。而Jquery的选择器都是基于DOM元素的，因此也并不能直接操作伪元素。</p>
<h2 id="伪元素有哪些？"><a href="#伪元素有哪些？" class="headerlink" title="伪元素有哪些？"></a>伪元素有哪些？</h2><p>伪元素有六个，分别为<code>::after, ::before, ::first-line, ::first-letter, ::selection, ::backdrop</code>。在各大网页中最常用的伪元素：<code>::after, ::before</code>。</p>
<h2 id="获取伪元素的属性值"><a href="#获取伪元素的属性值" class="headerlink" title="获取伪元素的属性值"></a>获取伪元素的属性值</h2><p>获取伪元素的属性值可以使用<code>window.getComputedStyle()</code>方法，获取伪元素的css样式声明对象，然后利用<code>getPropertyValue</code>方法或直接使用键值访问都可以获取对应的属性值。</p>
<p><code>window.getComputedStyle(element, [,[pseudoElement]])</code></p>
<p>参数如下：</p>
<ul>
<li>element:Object : 伪元素的所在DOM元素</li>
<li>pseudoElement:String :伪元素类型。可选值有：<code>::after, ::before, ::first-line, ::selection, ::backdrop</code></li>
</ul>
<p>例子<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">// CSS代码</div><div class="line">#myId:before {</div><div class="line"> content: "hello world!";</div><div class="line"> display: block;</div><div class="line"> width: 100px;</div><div class="line"> height: 100px;</div><div class="line"> background: red;</div><div class="line">}</div><div class="line">// HTML代码</div><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"myId"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line">// JS代码</div><div class="line">var myIdElement = document.getElementById("myId");</div><div class="line">var beforeStyle = window.getComputedStyle(myIdElement, ":before");</div><div class="line">console.log(beforeStyle); // [CSSStyleDeclaration Object]</div><div class="line">console.log(beforeStyle.width); // 100px</div><div class="line">console.log(beforeStyle.getPropertyValue("width")); // 100px</div><div class="line">console.log(beforeStyle.content); // "hello world!"</div></pre></td></tr></table></figure></p>
<p>备注：</p>
<blockquote>
<ol>
<li>getPropertyValue()和直接使用键值访问，都可以访问CSSStyleDeclaration Object。它们两者的区别有：<ul>
<li>对于float属性，如果使用键值访问，则不能直接使用getComputedStyle(ele, null).float，而应该使用cssFloat与styleFloat</li>
<li>直接使用键值访问，则属性的键需要使用驼峰写法，如<code>style.backgroundColor</code></li>
<li>使用getPropertyValue()方法不必以驼峰书写形式，例如：<code>style.getPropertyValue(‘border-top-color’)</code></li>
</ul>
</li>
<li>伪元素默认是<code>display: inline</code>。如果没有定义display属性，即使在css中显示设置了width的属性值为固定的大小如“100px”,但是最后获取的width值仍为”quto“。这是因为行内元素不能自定义设置宽度。解决办法是给伪元素修改display属性为”block”,”inline-block”或其它。</li>
</ol>
</blockquote>
<h2 id="更改伪元素的格式"><a href="#更改伪元素的格式" class="headerlink" title="更改伪元素的格式"></a>更改伪元素的格式</h2><ol>
<li><p>更换class来实现伪元素属性的更改</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">// CSS代码</div><div class="line">.red::before { </div><div class="line"> content: "red"; </div><div class="line"> color: red; </div><div class="line">}</div><div class="line">.green::before { </div><div class="line"> content: "green"; </div><div class="line"> color: green;</div><div class="line">}</div><div class="line">// HTML代码</div><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"red"</span>></span>内容内容内容内容<span class="tag"></<span class="name">div</span>></span></div><div class="line">// jQuery代码</div><div class="line">$(".red").removeClass('red').addClass('green');</div></pre></td></tr></table></figure>
</li>
<li><p>使用CSSStyleSheet的insertRule来为伪元素修改样式：<br><code>document.styleSheets[0].addRule(‘.red::before’, ‘color: green’); //支持IE </code></p>
</li>
<li><p>在<head>标签中插入的内部样式：</head></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> style = <span class="built_in">document</span>.createElement(<span class="string">"style"</span>); </div><div class="line"><span class="built_in">document</span>.head.appendChild(style); </div><div class="line">sheet = style.sheet; </div><div class="line">sheet.addRule(<span class="string">'.red::before'</span>,<span class="string">'color: green'</span>); <span class="comment">// 兼容IE浏览器</span></div><div class="line">sheet.insertRule(<span class="string">'.red::before { color: green }'</span>, <span class="number">0</span>); <span class="comment">// 支持非IE的现代浏览器</span></div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="修改伪元素的content的属性值"><a href="#修改伪元素的content的属性值" class="headerlink" title="修改伪元素的content的属性值"></a>修改伪元素的content的属性值</h2><ol>
<li><p>使用CSSStyleSheet的insertRule来为伪元素修改样式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> latestContent = <span class="string">"修改过的内容"</span>;</div><div class="line"><span class="keyword">var</span> formerContent = <span class="built_in">window</span>.getComputedStyle($(<span class="string">'.red'</span>), <span class="string">'::before'</span>).getPropertyValue(<span class="string">'content'</span>); </div><div class="line"><span class="built_in">document</span>.styleSheets[<span class="number">0</span>].addRule(<span class="string">'.red::before'</span>,<span class="string">'content: "'</span> + latestContent + <span class="string">'"'</span>); </div><div class="line"><span class="built_in">document</span>.styleSheets[<span class="number">0</span>].insertRule(<span class="string">'.red::before { content: "'</span> + latestContent + <span class="string">'" }'</span>, <span class="number">0</span>);</div></pre></td></tr></table></figure>
</li>
<li><p>使用DOM元素的data-*属性来更改content的值</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">// CSS代码</div><div class="line">.red::before {</div><div class="line">content: attr(data-attr);</div><div class="line">color: red;</div><div class="line">}</div><div class="line">// HTML代码</div><div class="line"><div class="red" data-attr="red">内容内容内容内容</div></div><div class="line">// JacaScript代码</div><div class="line">$('.red').attr('data-attr', 'green');</div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="before和-after伪元素的常用用法总结"><a href="#before和-after伪元素的常用用法总结" class="headerlink" title="::before和::after伪元素的常用用法总结"></a>::before和::after伪元素的常用用法总结</h2><ol>
<li><p>添加字符串：<br>使用引号包括一段字符串，将会向元素内容中添加字符串。<br><code>a:after { content: “after content”; }</code></p>
</li>
<li><p>使用attr()方法，调用当前元素的属性的值</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">a:after { content: attr(href); }</div><div class="line">a:after { content: attr(data-attr); }</div></pre></td></tr></table></figure>
</li>
<li><p>使用url方法，引用多媒体文件：<br><code>a::before { content: url(logo.png); }</code></p>
</li>
<li><p>清除浮动</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">.clear-fix { *overflow: hidden; *zoom: 1; }</div><div class="line">.clear-fix:after { display: table; content: ""; width: 0; clear: both; }</div></pre></td></tr></table></figure>
</li>
</ol>
]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>javascript控制伪元素的方法汇总</p>
</blockquote>
</summary>
<category term="JavaScript" scheme="https://muleimulei.github.io/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://muleimulei.github.io/tags/JavaScript/"/>
</entry>
<entry>
<title>什么是机器学习</title>
<link href="https://muleimulei.github.io/2017/08/15/machinelearnng/%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/"/>
<id>https://muleimulei.github.io/2017/08/15/machinelearnng/什么是机器学习/</id>
<published>2017-08-15T00:26:42.328Z</published>
<updated>2017-08-15T02:48:20.828Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>什么是机器学习</p>
</blockquote>
<a id="more"></a>
<h2 id="什么是机器学习"><a href="#什么是机器学习" class="headerlink" title="什么是机器学习"></a>什么是机器学习</h2><p>利用计算机从历史数据中找出规律，并把这些规律用到对未来不确定场景的决策</p>
<p>基础知识：</p>
<ol>
<li>概率论</li>
<li>数理统计</li>
</ol>
<h2 id="机器学习的原动力"><a href="#机器学习的原动力" class="headerlink" title="机器学习的原动力"></a>机器学习的原动力</h2><ol>
<li>从历史数据中找出规律，把这些规律用到对未来自动做出决定</li>
<li>用数据代替expert</li>
<li>经济驱动，数据变现</li>
</ol>
<h2 id="机器学习的典型应用"><a href="#机器学习的典型应用" class="headerlink" title="机器学习的典型应用"></a>机器学习的典型应用</h2><p>购物篮分析</p>
<ul>
<li>关联规则<br>用户细分精准营销</li>
<li>聚类<br>信用卡欺诈</li>
<li>决策树<br>互联网广告</li>
<li>ctr预估<br>推荐系统</li>
<li>协同过滤<br>自然语言处理</li>
<li>情感分析</li>
<li>实体识别</li>
</ul>
<p>更多应用</p>
<ul>
<li>语音识别</li>
<li>智慧机器人</li>
<li>个性化医疗</li>
<li>私人虚拟助理</li>
<li>情感分析</li>
<li>手势控制</li>
<li>人脸识别</li>
<li>视频内容自动识别</li>
<li>自动驾驶</li>
<li>机器实时翻译</li>
</ul>
<p>机器学习算法分类</p>
<p>算法分类1：</p>
<ul>
<li>有监督学习：分类算法，回归算法</li>
<li>无监督学习：聚类</li>
<li>半监督学习：强化学习</li>
</ul>
<p>算法分类2：</p>
<ul>
<li>分类与回归</li>
<li>聚类</li>
<li>标注</li>
</ul>
<p>算法分类：</p>
<ul>
<li>生成模型：属于哪一类的概率</li>
<li>判别模型：属于哪一类</li>
</ul>
]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>什么是机器学习</p>
</blockquote>
</summary>
<category term="machinelearning" scheme="https://muleimulei.github.io/categories/machinelearning/"/>
</entry>
<entry>
<title>CSS3线性渐变</title>
<link href="https://muleimulei.github.io/2017/08/13/CSS3/CSS3%E7%BA%BF%E6%80%A7%E6%B8%90%E5%8F%98/"/>
<id>https://muleimulei.github.io/2017/08/13/CSS3/CSS3线性渐变/</id>
<published>2017-08-13T14:56:30.933Z</published>
<updated>2017-08-14T08:21:06.914Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>CSS3线性渐变</p>
</blockquote>
<a id="more"></a>
<p>渐变是从一种颜色逐渐蜕变到另一种颜色。线性渐变就是沿着一根轴线（水平，垂直或某个角度）改变颜色，从起点到终点颜色进行颜色渐变。</p>
<h2 id="线性渐变"><a href="#线性渐变" class="headerlink" title="线性渐变"></a>线性渐变</h2><p>创建线性渐变你需要指定渐变的轴线和沿轴线变化的多种颜色，颜色将按与轴线垂直的方向被绘制，多种颜色间将实现渐变平滑过渡。具体语法如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">linear-gradient(gradient_line, color1, color2, ...);</div></pre></td></tr></table></figure></p>
<p>gradient_line指定了渐变线，后面跟随多种沿轴线变化的颜色</p>
<h1 id="轴线"><a href="#轴线" class="headerlink" title="轴线"></a>轴线</h1><p>轴线可以省略，这时，它使用默认值”to bottom”，指定轴线可以使用两种方式：</p>
<ul>
<li>使用角度<br> “0 deg”表示垂直向上，然后按顺时针方向增加角度，“90deg”指向右边。</li>
<li>使用常量<br> to top： 向上 0deg<br> to right： 向右 90deg<br> to bottom： 向下 180deg<br> to left： 向右 270deg</li>
</ul>
<blockquote>
<p>常量可以组合使用，如”to top left”就是到左上角。</p>
</blockquote>
<h1 id="线性渐变的例子"><a href="#线性渐变的例子" class="headerlink" title="线性渐变的例子"></a>线性渐变的例子</h1><ol>
<li><p>垂直渐变<br> <div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(#cd6600, #0067cd)"></div><br> css代码：<code>background-image: linear-gradient(#cd6600, #0067cd)</code><br> 你也可以指定轴线，下面的几种方式都可以达到和上面一样的效果</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">background: linear-gradient(to top, #0067cd, #cd6600);</div><div class="line">background: linear-gradient(to bottom, #cd6600, #0067cd);</div><div class="line">background: linear-gradient(180deg, #cd6600, #0067cd);</div><div class="line">background: linear-gradient(to bottom, #cd6600 0%, #0067cd 100%);</div></pre></td></tr></table></figure>
</li>
<li><p>斜角渐变<br> <div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(135deg, #cd6600, #0067cd)"></div><br> css代码：<code>background-image: linear-gradient(135deg, #cd6600, #0067cd)</code><br> 也可以指定负角度，如下：<br> <code>background: linear-gradient(-45deg, #0067cd, #cd6600);</code></p>
</li>
<li><p>多色渐变<br> <div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(#6600cd, #cd6600 20%, #00cd66)"></div><br> css代码：<code>background-image: linear-gradient(#6600cd, #cd6600 20%, #00cd66)</code></p>
</li>
<li><p>多色斜角渐变<br> <div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(to top right, #cd6600, white, #0067cd)"></div><br> css代码：<code>linear-gradient(to top right, #cd6600, white, #0067cd)</code></p>
</li>
</ol>
<h2 id="重复线性渐变"><a href="#重复线性渐变" class="headerlink" title="重复线性渐变"></a>重复线性渐变</h2><p>重复线性渐变就是线性渐变的重复版本<strong> repeating-linear-gradient </strong>，当你定义好了你的线性渐变方式后，重复线性渐变会基于轴线不断的重复你的渐变方式，直到占满整个背景。使用重复线性渐变的关键是你需要定义好颜色节点，需要注意的是你定义的最后一种颜色将和第一种颜色相接在一起，处理不当将导致颜色的急剧变化。</p>
<h1 id="重复线性渐变的例子"><a href="#重复线性渐变的例子" class="headerlink" title="重复线性渐变的例子"></a>重复线性渐变的例子</h1><p><div style="margin: 0 auto;width: 200px; height:200px; background-image: repeating-linear-gradient(#cd6600, #0067cd 20%, #cd6600 40%)"></div><br>css代码：<code>background-image: repeating-linear-gradient(#cd6600, #0067cd 20%, #cd6600 40%)</code></p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: repeating-linear-gradient(90deg, #cd6600, #0067cd 20%, #cd6600 40%)"></div><br>css代码：<code>background-image: repeating-linear-gradient(90deg, #cd6600, #0067cd 20%, #cd6600 40%)</code></p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: repeating-linear-gradient(135deg, #cd6600, #0067cd 20%, #cd6600 40%)"></div><br>css代码：<code>background-image: repeating-linear-gradient(135deg, #cd6600, #0067cd 20%, #cd6600 40%)</code></p>
<h1 id="颜色节点"><a href="#颜色节点" class="headerlink" title="颜色节点"></a>颜色节点</h1><p>颜色节点是沿着渐变轴线被放置的点，定义格式如下：<br><code> <color-stop> = <color> [<percentage> | <length>] </length></percentage></color></color-stop></code><br>首先指定颜色，然后指定位置，使用百分比值或者长度值表示。百分比值对应轴线长度的百分比，0%表示起始点，而100%表示结束点；长度值指从轴线的起始点向结束点方向计算的数值。<strong>颜色节点通常放置在起始点和结束点之间，但不是必须的，轴线可以在两个方向上无限扩展，而颜色节点可以放置在线上的任何位置 </strong>。<br>在每个颜色节点，线呈现为颜色节点的颜色。在两个颜色节点之间，线呈现为从一种颜色过渡到另一种颜色过度过程。在第一个颜色节点之前，线呈现为第一个颜色节点的颜色，而在最后一个节点，线呈现为最后一个颜色节点的颜色。</p>
<p>以下步骤定义了处理颜色节点列表的行为，应用这些规则后，所有颜色节点都将有一个明确的位置</p>
<ul>
<li>如果第一个颜色节点没有指定位置，设置它的位置为0%，如果最后一个节点没有指定位置，设置其为100%</li>
<li>如果一个颜色节点的位置小于了在它之前的任意一个颜色节点的位置，设置其位置等于它之前所有的颜色节点位置的最大的位置</li>
<li>如果存在一些颜色节点没有指定位置，那么，为那些相邻的没有指定颜色节点，设置它们的位置使他们平均占据空间。<ul>
<li>如果多个颜色节点有相同的位置，它们产生一个从一个颜色到另一个颜色的急剧的转换。从效果来看，就是从一种颜色突然改变到另一种颜色。</li>
</ul>
</li>
</ul>
<p>例子：</p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(red, white 20%, blue)"></div><br> css代码：<br> <code><br> background-image: linear-gradient(red, white 20%, blue)<br> 相当于<br> background-image: linear-gradient(red 0%, white 20%, blue 100%)<br> </code></p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(red 40%, white, black, blue)"></div><br> css代码：<br> <code><br> background-image: linear-gradient(red 40%, white, black, blue)<br> 相当于<br> background-image: linear-gradient(red 40%, white 60%, black 80%, blue 100%)<br> </code></p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(red -50%, white, blue)"></div><br> css代码：<br> <code><br> background-image: linear-gradient(red -50%, white, blue)<br> 相当于<br> background-image: linear-gradient(red -50%, white 25%, blue 100%)<br> </code></p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(red 80px, white 0px, black, blue 100px)"></div><br> css代码：<br> <code><br> background-image: linear-gradient(red 80px, white 0px, black, blue 100px)<br> 相当于<br> background-image: linear-gradient(red 80px, white 80px, black 90px, blue 100px)<br> </code></p>
<h2 id="条纹背景"><a href="#条纹背景" class="headerlink" title="条纹背景"></a>条纹背景</h2><p>在讲解颜色节点时，我们提到“如果多个颜色节点有相同的位置，它们产生一个从一种颜色到另一种颜色的急剧的转换。从效果来看，就是从一种颜色突然改变到另一种颜色。”根据这个定义，我们只需要将多个颜色节点设置到同一个位置，就可以轻易的得到条纹背景效果。</p>
<h1 id="水平条纹背景"><a href="#水平条纹背景" class="headerlink" title="水平条纹背景"></a>水平条纹背景</h1><p>将两种颜色的颜色节点位置设置成一样就可以产生条纹背景，如下：</p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(#cd6600 50%, #0067cd 50%)"></div><br> css代码：<br> <code><br> background-image: linear-gradient(#cd6600 50%, #0067cd 50%)<br> </code><br>利用背景的重复机制，我们可以创造出更多的条纹</p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(#cd6600 50%, #0067cd 50%);background-size: 100% 20%"></div><br> css代码：<br> <code><br> background-image: linear-gradient(#cd6600 50%, #0067cd 50%);<br> background-size: 100% 20%;<br> </code><br>这样我们就把整个背景划分为了10个条纹，但每个条纹的高度并不一定要一样，只要改变比例就可以做到：</p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(#cd6600 80%, #0067cd 80%);background-size: 100% 20%"></div><br> css代码：<br> <code><br> background-image: linear-gradient(#cd6600 80%, #0067cd 80%);<br> background-size: 100% 20%;<br> </code></p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(#cd6600 33.3%, #0067cd 0, #0067cd 66.7%, #00cd66 0);background-size: 100% 20%"></div><br> css代码：<br> <code><br> background-image: linear-gradient(#cd6600 33.3%, #0067cd 0, #0067cd 66.7%, #00cd66 0);<br> background-size: 100% 20%;<br> </code></p>
<p>或者创建分割线效果：</p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(rgba(0, 0, 0, .5) 1px , #fff 1px);background-size: 100% 3px"></div><br> css代码：<br> <code><br> background-image: linear-gradient(rgba(0, 0, 0, .5) 1px , #fff 1px);<br> background-size: 100% 3px;<br> </code></p>
<h1 id="垂直条纹背景"><a href="#垂直条纹背景" class="headerlink" title="垂直条纹背景"></a>垂直条纹背景</h1><p>垂直条纹背景类似，只是需要转化一下宽和高的设置方式</p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: linear-gradient(to right, #cd6600 50%, #0067cd 0);background-size: 20% 100%"></div><br> css代码：<br> <code><br> background-image: linear-gradient(to right, #cd6600 50%, #0067cd 0);<br> background-size: 20% 100%;<br> </code></p>
<p>对角条纹背景</p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: repeating-linear-gradient(60deg, #cd6600, #cd6600 10%, #0067cd 0, #0067cd 20%);"></div><br> css代码：<br> <code><br> background-image: repeating-linear-gradient(60deg, #cd6600, #0067cd 10%, #0067cd 0, #0067cd 20%);<br> </code></p>
<p>可以指定多种颜色:</p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: repeating-linear-gradient(60deg, #cd6600, #cd6600 10%, #0067cd 0, #0067cd 0, #0067cd 20%, #00cd66 0, #00cd66 30%);"></div><br> css代码：<br> <code><br> background-image: repeating-linear-gradient(60deg, #cd6600, #cd6600 10%, #0067cd 0, #0067cd 0, #0067cd 20%, #00cd66 0, #00cd66 30%);<br> </code></p>
<p><div style="margin: 0 auto;width: 200px; height:200px; background-image: repeating-linear-gradient(45deg, rgba(0, 103, 205, .5), rgba(0, 103, 205, .5) 10%, rgba(0, 103, 205, .3) 0, rgba(0, 103, 205, .3) 20%);"></div><br> css代码：<br> <code><br> background-image: repeating-linear-gradient(60deg, #cd6600, #cd6600 10%, #0067cd 0, #0067cd 0, #0067cd 20%, #00cd66 0, #00cd66 30%);<br> </code></p>
]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>CSS3线性渐变</p>
</blockquote>
</summary>
<category term="CSS3" scheme="https://muleimulei.github.io/categories/CSS3/"/>
</entry>
<entry>
<title>CSS实现单行，多行文本溢出显示省略号</title>
<link href="https://muleimulei.github.io/2017/08/13/CSS3/css%E6%8E%A7%E5%88%B6%E6%96%87%E5%AD%97/"/>
<id>https://muleimulei.github.io/2017/08/13/CSS3/css控制文字/</id>
<published>2017-08-13T02:52:15.745Z</published>
<updated>2017-08-13T03:31:39.846Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>CSS实现单行，多行文本溢出显示省略号</p>
</blockquote>
<a id="more"></a>
<p>实现单行文本的溢出显示省略号使用<code>text-overflow: ellipsis</code>，当然还需要加宽度width属性来兼容部分浏览。</p>
<p>实现方法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">overflow: hidden;</div><div class="line">text-overflow: ellipsis;</div><div class="line">white-space: nowrap;</div></pre></td></tr></table></figure>
<p>但是这个属性只支持单行文本的溢出显示省略号。多行文本溢出显示省略号方法如下：<br>实现方法：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">display: -webkit-box;</div><div class="line">-webkit-box-orient: vertical;</div><div class="line">-webkit-line-clamp: 3;</div><div class="line">overflow: hidden;</div></pre></td></tr></table></figure></p>
<p>适用范围：<br>因为使用了webkit的css扩展属性，该方法适用于webkit浏览器及移动端；</p>
<p>注：</p>
<ol>
<li>-webkit-line-clamp: 用来限制在一个块元素显示的文本的行数。为了实现该效果，他需要组合其它的webkit属性。常用结合属性;</li>
<li>display: -webkit-box: 必须结合的属性，将对象作为弹性伸缩盒子模型</li>
<li>-webkit-box-orient: 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}</div><div class="line">p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;</div><div class="line">background: -webkit-linear-gradient(left, transparent, #fff 55%);</div><div class="line">background: -o-linear-gradient(right, transparent, #fff 55%);</div><div class="line">background: -moz-linear-gradient(right, transparent, #fff 55%);</div><div class="line">background: linear-gradient(to right, transparent, #fff 55%);</div><div class="line">}</div></pre></td></tr></table></figure>
<p>注：</p>
<ol>
<li>将height设置为line-height的整数倍，防止超出的文字露出</li>
<li>给p::after添加渐变背景可避免文字只显示一半。</li>
<li>由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span></span>）；兼容ie8需要将<code>::after</code>替换成<code>:afetr</code>。</li>
</ol>
]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>CSS实现单行，多行文本溢出显示省略号</p>
</blockquote>
</summary>
<category term="CSS3" scheme="https://muleimulei.github.io/categories/CSS3/"/>
</entry>
<entry>
<title>STL的map常用操作</title>
<link href="https://muleimulei.github.io/2017/08/12/c%E4%B8%8Ec++/STL%E7%9A%84map%E5%87%BD%E6%95%B0/"/>
<id>https://muleimulei.github.io/2017/08/12/c与c++/STL的map函数/</id>
<published>2017-08-12T09:06:56.447Z</published>
<updated>2017-09-05T02:18:00.485Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>STL的map常用操作</p>
</blockquote>
<a id="more"></a>
<ol>
<li><p>map中的构造函数</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">map</span>(); <span class="comment">// 默认构造函数</span></div><div class="line"></div><div class="line"><span class="built_in">map</span>(<span class="keyword">const</span> <span class="built_in">map</span>& m) <span class="comment">// 拷贝构造函数</span></div><div class="line"></div><div class="line"><span class="built_in">map</span>(iterator begin, iterator end ); <span class="comment">//区间构造函数</span></div><div class="line"></div><div class="line"><span class="built_in">map</span>(iterator begin, iterator end, <span class="keyword">const</span> traits& _compare) <span class="comment">//带比较谓词的构造函数</span></div><div class="line"></div><div class="line"><span class="built_in">map</span>(iterator begin, iterator end, <span class="keyword">const</span> traits& _compare, <span class="keyword">const</span> allocator& all) <span class="comment">//带分配器</span></div></pre></td></tr></table></figure>
</li>
<li><p>数据的插入</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><map></span></span></div><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><string></span></span></div><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><iostream></span></span></div><div class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> <span class="built_in">std</span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">main</span><span class="params">()</span></span></div><div class="line">{</div><div class="line"> <span class="built_in">map</span><<span class="keyword">int</span>, <span class="built_in">string</span>> mapStudent;</div><div class="line"> mapStudent.insert(pair<<span class="keyword">int</span>, <span class="built_in">string</span>>(<span class="number">1</span>, <span class="string">"student_one"</span>));</div><div class="line"> mapStudent.insert(pair<<span class="keyword">int</span>, <span class="built_in">string</span>>(<span class="number">2</span>, <span class="string">"student_two"</span>));</div><div class="line"> mapStudent.insert(pair<<span class="keyword">int</span>, <span class="built_in">string</span>>(<span class="number">3</span>, <span class="string">"student_three"</span>));</div><div class="line"> <span class="built_in">map</span><<span class="keyword">int</span>, <span class="built_in">string</span>>::iterator iter;</div><div class="line"> <span class="keyword">for</span>(iter = mapStudent.begin(); iter != mapStudent.end(); iter++)</div><div class="line"> {</div><div class="line"> <span class="built_in">cout</span><<iter->first<<” ”<<iter->second<<end;</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ol>
<p>第二种插入value_type数据<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><map></span></span></div><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><string></span></span></div><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><iostream></span></span></div><div class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> <span class="built_in">std</span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">main</span><span class="params">()</span></span></div><div class="line">{</div><div class="line"> Map<<span class="keyword">int</span>, <span class="built_in">string</span>> mapStudent;</div><div class="line"> mapStudent.insert(<span class="built_in">map</span><<span class="keyword">int</span>, <span class="built_in">string</span>>::value_type (<span class="number">1</span>, <span class="string">"student_one"</span>));</div><div class="line"> mapStudent.insert(<span class="built_in">map</span><<span class="keyword">int</span>, <span class="built_in">string</span>>::value_type (<span class="number">2</span>, <span class="string">"student_two"</span>));</div><div class="line"> mapStudent.insert(<span class="built_in">map</span><<span class="keyword">int</span>, <span class="built_in">string</span>>::value_type (<span class="number">3</span>, <span class="string">"student_three"</span>));</div><div class="line"> <span class="built_in">map</span><<span class="keyword">int</span>, <span class="built_in">string</span>>::iterator iter;</div><div class="line"> <span class="keyword">for</span>(iter = mapStudent.begin(); iter != mapStudent.end(); iter++)</div><div class="line"> {</div><div class="line"> <span class="built_in">cout</span><<iter->first<<” ”<<iter->second<<end;</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>第三种：用数组方式插入数据，下面举例说明<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><map></span></span></div><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><string></span></span></div><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><iostream></span></span></div><div class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> <span class="built_in">std</span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">main</span><span class="params">()</span></span></div><div class="line">{</div><div class="line"> Map<<span class="keyword">int</span>, <span class="built_in">string</span>> mapStudent;</div><div class="line"> mapStudent[<span class="number">1</span>] = “student_one”;</div><div class="line"> mapStudent[<span class="number">2</span>] = “student_two”;</div><div class="line"> mapStudent[<span class="number">3</span>] = “student_three”;</div><div class="line"> <span class="built_in">map</span><<span class="keyword">int</span>, <span class="built_in">string</span>>::iterator iter;</div><div class="line"> <span class="keyword">for</span>(iter = mapStudent.begin(); iter != mapStudent.end(); iter++)</div><div class="line"> {</div><div class="line"> <span class="built_in">cout</span><<iter->first<<” ”<<iter->second<<end;</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>我们可以用pair来获得是否插入成功：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div></pre></td><td class="code"><pre><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><map></span></span></div><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><string></span></span></div><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><iostream></span></span></div><div class="line">Using <span class="keyword">namespace</span> <span class="built_in">std</span>;</div><div class="line"><span class="function">Int <span class="title">main</span><span class="params">()</span></span></div><div class="line">{</div><div class="line"> Map<<span class="keyword">int</span>, <span class="built_in">string</span>> mapStudent;</div><div class="line"> Pair<<span class="built_in">map</span><<span class="keyword">int</span>, <span class="built_in">string</span>>::iterator, <span class="keyword">bool</span>> Insert_Pair;</div><div class="line"> Insert_Pair＝mapStudent.insert(pair<<span class="keyword">int</span>, <span class="built_in">string</span>>(<span class="number">1</span>, “student_one”));</div><div class="line"> If(Insert_Pair.second == <span class="literal">true</span>)</div><div class="line"> {</div><div class="line"> Cout<<”Insert Successfully”<<<span class="built_in">endl</span>;</div><div class="line"> }</div><div class="line"> Else</div><div class="line"> {</div><div class="line"> Cout<<”Insert Failure”<<<span class="built_in">endl</span>;</div><div class="line"> }</div><div class="line"> Insert_Pair＝mapStudent.insert(pair<<span class="keyword">int</span>, <span class="built_in">string</span>>(<span class="number">1</span>, “student_two”));</div><div class="line"> If(Insert_Pair.second == <span class="literal">true</span>)</div><div class="line"> {</div><div class="line"> Cout<<”Insert Successfully”<<<span class="built_in">endl</span>;</div><div class="line"> }</div><div class="line"> Else</div><div class="line"> {</div><div class="line"> Cout<<”Insert Failure”<<<span class="built_in">endl</span>;</div><div class="line"> }</div><div class="line"> <span class="built_in">map</span><<span class="keyword">int</span>, <span class="built_in">string</span>>::iterator iter;</div><div class="line"> <span class="keyword">for</span>(iter = mapStudent.begin(); iter != mapStudent.end(); iter++)</div><div class="line">{</div><div class="line"> Cout<<iter->first<<” ”<<iter->second<<end;</div><div class="line">}</div><div class="line">}</div></pre></td></tr></table></figure></p>
<ol>
<li><p>数据的查找（包括判定这个关键字是否在map中出现）<br>在这里我们将体会，map在数据插入时保证有序的好处。<br>要判定一个数据（关键字）是否在map中出现的方法比较多，这里标题虽然是数据的查找，在这里将穿插着大量的<br>map基本用法。<br>这里给出两种数据查找方法<br>第一种：用count函数来判定关键字是否出现，其缺点是无法定位数据出现位置,由于map的特性，一对一的映射关系<br>，就决定了count函数的返回值只有两个，要么是0，要么是1，出现的情况，当然是返回1了<br>第二种：用find函数来定位数据出现位置，它返回的一个迭代器，当数据出现时，它返回数据所在位置的迭代器，<br>如果map中没有要查找的数据，它返回的迭代器等于end函数返回的迭代器，程序说明</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><map></span></span></div><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><string></span></span></div><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><iostream></span></span></div><div class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> <span class="built_in">std</span>;</div><div class="line"><span class="function"><span class="keyword">int</span> <span class="title">main</span><span class="params">()</span></span></div><div class="line">{</div><div class="line"> <span class="built_in">map</span><<span class="keyword">int</span>, <span class="built_in">string</span>> mapStudent;</div><div class="line"> mapStudent.insert(pair<<span class="keyword">int</span>, <span class="built_in">string</span>>(<span class="number">1</span>, “student_one”));</div><div class="line"> mapStudent.insert(pair<<span class="keyword">int</span>, <span class="built_in">string</span>>(<span class="number">2</span>, “student_two”));</div><div class="line"> mapStudent.insert(pair<<span class="keyword">int</span>, <span class="built_in">string</span>>(<span class="number">3</span>, “student_three”));</div><div class="line"> <span class="built_in">map</span><<span class="keyword">int</span>, <span class="built_in">string</span>>::iterator iter;</div><div class="line"> iter = mapStudent.find(<span class="number">1</span>);</div><div class="line"> <span class="keyword">if</span>(iter != mapStudent.end())</div><div class="line"> {</div><div class="line"> Cout<<”Find, the value is ”<<iter->second<<<span class="built_in">endl</span>;</div><div class="line"> }</div><div class="line"> <span class="keyword">else</span></div><div class="line"> {</div><div class="line"> Cout<<”Do not Find”<<<span class="built_in">endl</span>;</div><div class="line"> }</div><div class="line"> }</div></pre></td></tr></table></figure>
</li>
<li><p>数据的删除</p>
</li>
</ol>
<p>这里要用到erase函数，它有三个重载了的函数，下面在例子中详细说明它们的用法<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><map></span></span></div><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><string></span></span></div><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><iostream></span></span></div><div class="line">Using <span class="keyword">namespace</span> <span class="built_in">std</span>;</div><div class="line"><span class="function">Int <span class="title">main</span><span class="params">()</span></span></div><div class="line">{</div><div class="line"> Map<<span class="keyword">int</span>, <span class="built_in">string</span>> mapStudent;</div><div class="line"> mapStudent.insert(pair<<span class="keyword">int</span>, <span class="built_in">string</span>>(<span class="number">1</span>, “student_one”));</div><div class="line"> mapStudent.insert(pair<<span class="keyword">int</span>, <span class="built_in">string</span>>(<span class="number">2</span>, “student_two”));</div><div class="line"> mapStudent.insert(pair<<span class="keyword">int</span>, <span class="built_in">string</span>>(<span class="number">3</span>, “student_three”));</div><div class="line"><span class="comment">//如果你要演示输出效果，请选择以下的一种，你看到的效果会比较好</span></div><div class="line"> <span class="comment">//如果要删除1,用迭代器删除</span></div><div class="line"> <span class="built_in">map</span><<span class="keyword">int</span>, <span class="built_in">string</span>>::iterator iter;</div><div class="line"> iter = mapStudent.find(<span class="number">1</span>);</div><div class="line"> mapStudent.erase(iter);</div><div class="line"> <span class="comment">//如果要删除1，用关键字删除</span></div><div class="line"> Int n = mapStudent.erase(<span class="number">1</span>);<span class="comment">//如果删除了会返回1，否则返回0</span></div><div class="line"> <span class="comment">//用迭代器，成片的删除</span></div><div class="line"> <span class="comment">//一下代码把整个map清空</span></div><div class="line"> mapStudent.earse(mapStudent.begin(), mapStudent.end());</div><div class="line"> <span class="comment">//成片删除要注意的是，也是STL的特性，删除区间是一个前闭后开的集合</span></div><div class="line"> <span class="comment">//自个加上遍历代码，打印输出吧</span></div><div class="line">}</div></pre></td></tr></table></figure></p>
<ol>
<li>排序<br>这里要讲的是一点比较高深的用法了,排序问题，STL中默认是采用小于号来排序的，以上代码在排序上是不存在任<br>何问题的，因为上面的关键字是int型，它本身支持小于号运算，在一些特殊情况，比如关键字是一个结构体，涉及<br>到排序就会出现问题，因为它没有小于号操作，insert等函数在编译的时候过不去。<br>第一种：小于号重载，程序举例<figure class="highlight c++"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div></pre></td><td class="code"><pre><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><map></span></span></div><div class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><string></span></span></div><div class="line">Using <span class="keyword">namespace</span> <span class="built_in">std</span>;</div><div class="line">Typedef <span class="keyword">struct</span> tagStudentInfo</div><div class="line">{</div><div class="line"> Int nID;</div><div class="line"> String strName;</div><div class="line"> Bool <span class="keyword">operator</span> < (tagStudentInfo <span class="keyword">const</span>& _A) <span class="keyword">const</span></div><div class="line"> {</div><div class="line"> <span class="comment">//这个函数指定排序策略，按nID排序，如果nID相等的话，按strName排序</span></div><div class="line"> If(nID < _A.nID) <span class="keyword">return</span> <span class="literal">true</span>;</div><div class="line"> If(nID == _A.nID) <span class="keyword">return</span> strName.compare(_A.strName) < <span class="number">0</span>;</div><div class="line"> Return <span class="literal">false</span>;</div><div class="line"> }</div><div class="line">}StudentInfo, *PStudentInfo; <span class="comment">//学生信息</span></div><div class="line"><span class="function">Int <span class="title">main</span><span class="params">()</span></span></div><div class="line">{</div><div class="line"> <span class="keyword">int</span> nSize;</div><div class="line"> <span class="comment">//用学生信息映射分数</span></div><div class="line"> <span class="built_in">map</span><StudentInfo, <span class="keyword">int</span>>mapStudent;</div><div class="line"> <span class="built_in">map</span><StudentInfo, <span class="keyword">int</span>>::iterator iter;</div><div class="line"> StudentInfo studentInfo;</div><div class="line"> studentInfo.nID = <span class="number">1</span>;</div><div class="line"> studentInfo.strName = “student_one”;</div><div class="line"> mapStudent.insert(pair<StudentInfo, <span class="keyword">int</span>>(studentInfo, <span class="number">90</span>));</div><div class="line"> studentInfo.nID = <span class="number">2</span>;</div><div class="line"> studentInfo.strName = “student_two”;</div><div class="line">mapStudent.insert(pair<StudentInfo, <span class="keyword">int</span>>(studentInfo, <span class="number">80</span>));</div><div class="line"><span class="keyword">for</span> (iter=mapStudent.begin(); iter!=mapStudent.end(); iter++)</div><div class="line"> <span class="built_in">cout</span><<iter->first.nID<<<span class="built_in">endl</span><<iter->first.strName<<<span class="built_in">endl</span><<iter->second<<<span class="built_in">endl</span>;</div><div class="line">}</div></pre></td></tr></table></figure></li>
</ol>
]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>STL的map常用操作</p>
</blockquote>
</summary>
<category term="C++" scheme="https://muleimulei.github.io/categories/C/"/>
<category term="STL的map常用操作" scheme="https://muleimulei.github.io/tags/STL%E7%9A%84map%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C/"/>
</entry>
<entry>
<title>STL的vector初始化</title>
<link href="https://muleimulei.github.io/2017/08/12/c%E4%B8%8Ec++/STL%E7%9A%84vector%E5%88%9D%E5%A7%8B%E5%8C%96/"/>
<id>https://muleimulei.github.io/2017/08/12/c与c++/STL的vector初始化/</id>
<published>2017-08-12T07:47:20.239Z</published>
<updated>2017-08-12T08:58:32.365Z</updated>
<content type="html"><![CDATA[<blockquote class="blockquote-center"><p>STL的vector初始化</p>
</blockquote>
<a id="more"></a>
<p>vector是连续内存容器，所以对于插入与删除的时间复杂度是很高的，因为删除或者插入的时候，需要元素的移动，即元素复制拷贝。</p>
<h1 id="使用原则："><a href="#使用原则：" class="headerlink" title="使用原则："></a>使用原则：</h1><ol>
<li>尽量使用vector代替C风格的数组或者CArray；</li>
<li>尽量使用算法代替手工写的循环；</li>
<li>尽量使用vector本身的函数代替其它泛型算法；</li>
</ol>
<h1 id="初始化vector"><a href="#初始化vector" class="headerlink" title="初始化vector"></a>初始化vector</h1><p>填充vector，如果我们想使用原始数组的内容填充vector，例如我们有数组<code>int v[10] = {0,1,1,10,0,0,0,0,3,5}</code></p>
<ul>
<li><p>初始化方式1：</p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">vector</span><<span class="keyword">int</span>> v2(<span class="number">10</span>); <span class="comment">// 初始化size为10可以避免数组动态增长的时候不断的分配内存</span></div><div class="line"><span class="keyword">for</span>(<span class="keyword">int</span> i = <span class="number">0</span>; i<<span class="number">10</span>; i++) {</div><div class="line"> v2.push_back(v2[i]); <span class="comment">// 增加一个元素</span></div><div class="line">}</div></pre></td></tr></table></figure>
</li>
<li><p>初始化方式2：</p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">vector</span><<span class="keyword">int</span>> v3(&v[<span class="number">0</span>], &v[<span class="number">9</span>]); <span class="comment">// 原始数组的元素指针可以作为迭代器来使用</span></div></pre></td></tr></table></figure>
</li>
<li><p>初始化方式3</p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">vector</span><<span class="keyword">int</span>> v4;</div><div class="line">v4.resize(<span class="number">10</span>);</div><div class="line">v4.insert(v4.begin(), &v[<span class="number">0</span>], &v[<span class="number">9</span>]);</div></pre></td></tr></table></figure>
</li>
<li><p>初始化方式4</p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">vector</span><<span class="keyword">int</span>> v5(<span class="number">10</span>);</div><div class="line">copy(&v[<span class="number">0</span>], &v[<span class="number">9</span>], v5.begin());</div></pre></td></tr></table></figure>
</li>
</ul>
<blockquote>
<p>原始数组的元素指针可以作为迭代器来使用,</p>
</blockquote>
<ul>
<li>原则：尽量使用resize来减少不必要的内存分配次数。</li>
<li>原则：尽量使用empty而不是size()==0来判断容器是否为空</li>
</ul>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">int</span> a[] = {<span class="number">23</span>,<span class="number">23</span>,<span class="number">12</span>,<span class="number">23</span>,<span class="number">546</span>,<span class="number">76</span>};</div><div class="line"><span class="built_in">vector</span><<span class="keyword">int</span>> v;</div><div class="line">v.resize(<span class="number">6</span>);</div><div class="line">copy(&a[<span class="number">0</span>], &a[<span class="number">6</span>], v.begin()); <span class="comment">// 将a数组复制到v</span></div><div class="line">v.insert(v.begin(), <span class="number">4</span>);</div><div class="line"></div><div class="line"><span class="comment">// 找到所有的23</span></div><div class="line"><span class="built_in">vector</span><<span class="keyword">int</span>>::iterator pos = find(v.begin(), v.end(), <span class="number">23</span>);</div><div class="line"><span class="keyword">while</span>(pos!=v.end()){</div><div class="line"> <span class="built_in">cout</span><<<span class="string">"**"</span><<*pos<<<span class="built_in">endl</span>;</div><div class="line"> pos = find(pos+<span class="number">1</span>, v.end(), <span class="number">23</span>);</div><div class="line">}</div><div class="line"><span class="keyword">for</span>(<span class="keyword">int</span> i = <span class="number">0</span>;i< v.size();i++){</div><div class="line"> <span class="built_in">cout</span><< v[i]<<<span class="string">" "</span>;</div><div class="line">}</div><div class="line"><span class="keyword">return</span> <span class="number">0</span>;</div></pre></td></tr></table></figure>
]]></content>
<summary type="html">