-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1573 lines (1114 loc) · 84 KB
/
index.html
File metadata and controls
1573 lines (1114 loc) · 84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
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
<!DOCTYPE HTML>
<html lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
<meta charset="UTF-8">
<title>MyNotes</title>
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<meta name="author" content="YUAN">
<meta name="description" content="温故而知新下">
<meta property="og:type" content="website">
<meta property="og:title" content="MyNotes">
<meta property="og:url" content="https://yuanjinxiugithub.github.io/index.html">
<meta property="og:site_name" content="MyNotes">
<meta property="og:description" content="温故而知新下">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="MyNotes">
<meta name="twitter:description" content="温故而知新下">
<link rel="alternative" href="/atom.xml" title="MyNotes" type="application/atom+xml">
<link rel="icon" href="/img/favicon.ico">
<link rel="apple-touch-icon" href="/img/jacman.jpg">
<link rel="apple-touch-icon-precomposed" href="/img/jacman.jpg">
<link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
<header>
<div>
<div id="imglogo">
<a href="/"><img src="/img/logo.png" alt="MyNotes" title="MyNotes"></a>
</div>
<div id="textlogo">
<h1 class="site-name"><a href="/" title="MyNotes">MyNotes</a></h1>
<h2 class="blog-motto">温故而知新</h2>
</div>
<div class="navbar"><a class="navbutton navmobile" href="#" title="Menu">
</a></div>
<nav class="animated">
<ul>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archives">Archives</a></li>
<li><a href="/about">About</a></li>
<li>
<form class="search" action="//google.com/search" method="get" accept-charset="utf-8">
<label>Search</label>
<input type="search" id="search" name="q" autocomplete="off" maxlength="20" placeholder="Search">
<input type="hidden" name="q" value="site:yuanjinxiugithub.github.io">
</form>
</li>
</ul>
</ul></nav>
</div>
</header>
<div id="container">
<div id="main">
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/05/03/“React进阶/" title="“React进阶" itemprop="url">“React进阶</a>
</h1>
<p class="article-author">By
<a href="/about" title="YUAN" target="_blank" itemprop="author">YUAN</a>
</p><p class="article-time">
<time datetime="2019-05-03T03:55:10.000Z" itemprop="datePublished"> Published 2019-05-03</time>
</p>
</header>
<div class="article-content">
<h2 id="React"><a href="#React" class="headerlink" title="React"></a>React</h2><h3 id="1-React简介"><a href="#1-React简介" class="headerlink" title="1.React简介"></a>1.React简介</h3><p>React 起源于FackBook的内部项目，用于架设Instagram的网站。react拥有较高的性能，代码逻辑非常简单，越来越多的人开始关注和使用它。</p>
<p>特性：</p>
<p>1.声明式设计：React声明范式，可以轻松描述应用。</p>
<p>2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。</p>
<p>3.灵活：React可以与已知的库或者框架很好的配合。</p>
<p>优点：</p>
<ol>
<li><p>速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。</p>
</li>
<li><p>跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。</p>
</li>
<li><p>模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。</p>
</li>
<li><p>单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。</p>
</li>
<li><p>同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。</p>
<p>6.兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。</p>
</li>
</ol>
<p>缺点：</p>
<p>React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。</p>
<h3 id="2-Vue简介："><a href="#2-Vue简介：" class="headerlink" title="2.Vue简介："></a>2.Vue简介：</h3><p>vue是一个构建数据驱动的web界面的库，准确来说不是一个框架，聚焦在V(view)视图层。</p>
<p>有以下特性：</p>
<p>1.轻量级框架</p>
<p>2.双向数据绑定</p>
<p>3.自定义指定</p>
<p>4.插件化</p>
<p>优点：</p>
<ol>
<li><p>简单：官方文档很清晰，比 Angular 简单易学。</p>
</li>
<li><p>快速：异步批处理方式更新 DOM。</p>
</li>
<li><p>组合：用解耦的、可复用的组件组合你的应用程序。</p>
</li>
<li><p>紧凑：~18kb min+gzip，且无依赖。</p>
</li>
<li><p>强大：表达式 无需声明依赖的可推导属性 (computed properties)。</p>
</li>
<li><p>对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。</p>
</li>
</ol>
<p>缺点：</p>
<ol>
<li><p>新生儿：Vue.js是一个新的项目，没有angular那么成熟。</p>
</li>
<li><p>影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。</p>
</li>
<li><p>不支持IE8</p>
</li>
</ol>
<h3 id="3-Angular-简介"><a href="#3-Angular-简介" class="headerlink" title="3.Angular 简介"></a>3.Angular 简介</h3><p>angular是一款优秀的前端js框架，已经被用于Google多款产品当中。</p>
<p>特性：</p>
<p>1.良好的应用程序架构。</p>
<p>2.双向数据绑定。</p>
<p>3.指定。</p>
<p>4.HTML模板。</p>
<p>5.可嵌入，注入和测试。</p>
<p>优点：</p>
<ol>
<li><p>模板功能强大丰富，自带了极其丰富的angular指令。</p>
</li>
<li><p>是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；</p>
</li>
<li><p>自定义指令，自定义指令后可以在项目中多次使用。</p>
</li>
<li><p>ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。</p>
</li>
<li><p>angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。</p>
</li>
</ol>
<p>缺点：</p>
<ol>
<li><p>angular 入门很容易 但深入后概念很多, 学习中较难理解.</p>
</li>
<li><p>文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.</p>
</li>
<li><p>对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.</p>
</li>
<li><p>指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.</p>
</li>
<li><p>DI 依赖注入 如果代码压缩需要显示声明.</p>
</li>
</ol>
<h3 id="4-React-JSX简介"><a href="#4-React-JSX简介" class="headerlink" title="4.React JSX简介"></a>4.React JSX简介</h3><p>jsx javascript的语法扩展。推荐在React 中使用JSX来描述用户界面。JSX咋看可能比较像是模板语言，但事实上它完全是在JavaScript内部实现的。</p>
<h4 id="在jsx中使用表达式"><a href="#在jsx中使用表达式" class="headerlink" title="在jsx中使用表达式"></a>在jsx中使用表达式</h4><p>可以任意的在Jsx当中使用JavaScript表达式，在JSX当中的表达式要包含在大括号里。</p>
<h4 id="jsx本身其实也是一种表达式"><a href="#jsx本身其实也是一种表达式" class="headerlink" title="jsx本身其实也是一种表达式"></a>jsx本身其实也是一种表达式</h4><p>在编译之后，jsx其实会被编译成普通的javascript对象。</p>
<h4 id="jsx属性"><a href="#jsx属性" class="headerlink" title="jsx属性"></a>jsx属性</h4><p> 可以使用引号来定义以字符串为值得属性。</p>
<h4 id="jsx嵌套"><a href="#jsx嵌套" class="headerlink" title="jsx嵌套"></a>jsx嵌套</h4><p>如果jsx标签是闭合的，那么需要在结尾处 /> ,就好像xml/html一样。</p>
<p><strong>警告:</strong></p>
<p>因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 <code>camelCase</code> 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。</p>
<h4 id="Jsx-防注入攻击"><a href="#Jsx-防注入攻击" class="headerlink" title="Jsx 防注入攻击"></a>Jsx 防注入攻击</h4><p>React Dom在渲染之前默认会过滤所传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 <a href="https://en.wikipedia.org/wiki/Cross-site_scripting" target="_blank" rel="noopener">XSS(跨站脚本)</a> 攻击。</p>
<h4 id="Jsx-代表Objects"><a href="#Jsx-代表Objects" class="headerlink" title="Jsx 代表Objects"></a>Jsx 代表Objects</h4><p>babel 转义器会把Jsx转换成一个名为React.createElement()的方法调用。</p>
<h4 id="React对象，读取DOC并保持数据内容一致"><a href="#React对象，读取DOC并保持数据内容一致" class="headerlink" title="React对象，读取DOC并保持数据内容一致"></a>React对象，读取DOC并保持数据内容一致</h4><h4 id="JSX-优势："><a href="#JSX-优势：" class="headerlink" title="JSX 优势："></a>JSX 优势：</h4><p>1.执行更快，在编译javascript后进行了优化。</p>
<p>2.类型安全，在编译过程中能发现错误。</p>
<p>3.使用jsx编写模板更加简单快速。</p>
<p>jsx推荐使用内联样式，camelStyle语法来设置内联样式</p>
<h3 id="5-react-demo-工程创建"><a href="#5-react-demo-工程创建" class="headerlink" title="5.react demo 工程创建"></a>5.react demo 工程创建</h3><p>如何使用react 命令搭建脚手架</p>
<p>安装全局的react的脚手架：npm install -g create-react-app /cnpm isntall -g create-react-app</p>
<p>安装react项目：创建项目文件夹 使用cmd命令 create-react-app project-name</p>
<p>启动项目命令：npm start </p>
<p>项目发布：npm run build</p>
<h3 id="6-安装antd工程-antd-基于react开发ui框架"><a href="#6-安装antd工程-antd-基于react开发ui框架" class="headerlink" title="6.安装antd工程(antd 基于react开发ui框架)"></a>6.安装antd工程(antd 基于react开发ui框架)</h3><p>全局安装antdesign命令： npm install antd-init -g </p>
<p>创建工程文件夹：antd-init </p>
<p>运行demo：npm start </p>
<h3 id="7-react-进阶"><a href="#7-react-进阶" class="headerlink" title="7.react 进阶"></a>7.react 进阶</h3><p>react 采用声明式组件，高效而且灵活的用来构建用户界面的框架。</p>
<p>组件的好处：重复利用。</p>
<p>组件创建</p>
<p>props 属性传递 在组件属性中传递。</p>
<h3 id="8-元素渲染"><a href="#8-元素渲染" class="headerlink" title="8.元素渲染"></a>8.元素渲染</h3><p>元素是构成react的最小单位i。</p>
<p>将元素渲染到DOM中</p>
<p>React开发应用中一般只会定义一个根节点。但是如果是在一个已有的项目中引入React的话，可能需要在不同的部分单独定义React根节点。</p>
<h3 id="9-state-amp-生命周期"><a href="#9-state-amp-生命周期" class="headerlink" title="9.state &生命周期"></a>9.state &生命周期</h3><p>react 的生命周期<br><img src="https://upload-images.jianshu.io/upload_images/5287253-bd799f87556b5ecc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp" alt="img"></p>
<p>属性：基本不会被更改</p>
<p>状态：可以被更改</p>
<p>this.setState(); 更改状态</p>
<h3 id="10-事件处理"><a href="#10-事件处理" class="headerlink" title="10.事件处理"></a>10.事件处理</h3><p>参数传递方式</p>
<p>1.箭头函数</p>
<p>2.传递事件 定义函数</p>
<p>React元素的事件处理和DOM元素很相似，但是语法是有所不同：</p>
<p>1 react 事件绑定属性的命名采用驼峰命名，而不是小写。</p>
<p>2 <strong>如果采用jsx的语法需要传入一个函数作为函数作为事件处理函数，而不是一个字符串json(DOM元素的写法)</strong></p>
<h3 id="11-列表-amp-amp-key"><a href="#11-列表-amp-amp-key" class="headerlink" title="11.列表&& key"></a>11.列表&& key</h3><p>渲染多个组件</p>
<p>可以通过使用{}在jsx内构建一个元素集合</p>
<p>key 用于识别DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。给数组中的每一个元素赋予一个确定的标识。</p>
<p>元素的key 只有放在其环绕数组的上下文中才有意义。</p>
<h3 id="12-表单"><a href="#12-表单" class="headerlink" title="12.表单"></a>12.表单</h3><p>HTML表单元素与React中的其他DOM元素有所不同，因为表单元素生来就保留一些内部状态。</p>
<h3 id="13-如何引入css样式"><a href="#13-如何引入css样式" class="headerlink" title="13.如何引入css样式"></a>13.如何引入css样式</h3><p>import ‘css文件名’</p>
<p>两种方式：</p>
<p>1.内联</p>
<p>在js文件中引入css样式 import ‘./App.css’</p>
<p>在css文件中引入css样式 @import ‘绝对路径’</p>
<p>2.直接引用</p>
<h3 id="14-如何使用for循环进行遍历"><a href="#14-如何使用for循环进行遍历" class="headerlink" title="14.如何使用for循环进行遍历"></a>14.如何使用for循环进行遍历</h3><p>使用ES6中 的map 方法进行遍历 filter 方法遍历 foreach 遍历</p>
<h3 id="15-状态提升"><a href="#15-状态提升" class="headerlink" title="15 状态提升"></a>15 状态提升</h3><p>几个组件需要共用状态数据的情况，将共享数据进行状态提升到最近的父级组件当中进行管理。</p>
<h2 id="Redux"><a href="#Redux" class="headerlink" title="Redux"></a>Redux</h2><p>快速入门-demo</p>
<p>简介：javascript 状态容器 可以存储数据的状态 统一管理和维护组件</p>
<p>使用原因： react 在一些问题上处理不好，如： 两个组件之间的通信—解决方案 提升state，通过父级进行分发。</p>
<p>react 的数据只能向下分发。</p>
<p>某个状态需要在任务状态下都要拿到的时候，如token。</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/前端/">前端</a><a href="/tags/react/">react</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/04/25/Vue进阶/" title="Vue进阶" itemprop="url">Vue进阶</a>
</h1>
<p class="article-author">By
<a href="/about" title="YUAN" target="_blank" itemprop="author">YUAN</a>
</p><p class="article-time">
<time datetime="2019-04-25T14:24:34.000Z" itemprop="datePublished"> Published 2019-04-25</time>
</p>
</header>
<div class="article-content">
<h3 id="Vue进阶："><a href="#Vue进阶：" class="headerlink" title="Vue进阶："></a>Vue进阶：</h3><p>vue的初始化的选项中用了data,methods,el,computed。</p>
<h4 id="vue实例的data对象"><a href="#vue实例的data对象" class="headerlink" title="vue实例的data对象"></a>vue实例的data对象</h4><p>数据绑定离不开data里面的数据，也是vue的核心属性，vue绑定数据到html标签的数据源泉，另外Vue框架会自动监视data里面的数据变化，自动更新到HTML标签上。本质原理是：<strong>Vue自动将data里面的数据进行递归抓取换成getter和setter,然后就可以自动转化成HTML标签，当然用getter和setter所以老的浏览器Vue支持的不够友好</strong>。</p>
<p>data的数据类型：</p>
<p>1.类型是Object或者Function</p>
<p>2.如果是组件对象中，data必须是Function类型。</p>
<h4 id="vue实例的computed"><a href="#vue实例的computed" class="headerlink" title="vue实例的computed"></a>vue实例的computed</h4><p>vue的计算属性会自动混入vue的实例中，所有的getter和setter的this上下文自动绑定为Vue实例，计算属性中定义的函数里面可以直接指向Vue实例的this;</p>
<h4 id="methods"><a href="#methods" class="headerlink" title="methods"></a>methods</h4><p>methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。</p>
<p><strong>注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。</strong></p>
<h4 id="watch"><a href="#watch" class="headerlink" title="watch"></a>watch</h4><p>一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。</p>
<h4 id="设置el的详解"><a href="#设置el的详解" class="headerlink" title="设置el的详解"></a>设置el的详解</h4><p>限制：只在new创建的实例中遵守。</p>
<p>提供页面上已存在的DOM元素作为Vue实例的挂载目标，也就是说Vue绑定的元素去哪里找，可以是CSS选择器，也可以是HTMLElemenet实例。</p>
<p>在实例挂载之后，元素可以用vm.$el访问。</p>
<p>如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显示调用vm.$mount()手动开启编译。</p>
<h4 id="Vue的生命周期"><a href="#Vue的生命周期" class="headerlink" title="Vue的生命周期"></a>Vue的生命周期</h4><p>Vue实例有一个完整的生命周期，<strong>开始创建，初始化创建，编译模板，挂载DOM，渲染，更新，渲染，卸载等一系列的过程</strong> 生命周期就是指Vue实例从创建到销毁的过程就是生命周期。</p>
<p>vue的整个生命周期提供了一系列的js事件。</p>
<p><img src="https://images.cnblogs.com/cnblogs_com/fly_dragon/276813/o_lifecycle-%E6%A0%87%E6%B3%A8%E7%89%88%E6%9C%AC.png" alt="vueçå½å¨æ"></p>
<p>ue提供的可以注册的钩子都在上图片的红色框标注。 他们是：</p>
<ul>
<li><code>beforeCreate</code></li>
</ul>
<p>在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。</p>
<ul>
<li><code>created</code></li>
</ul>
<p>实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。</p>
<ul>
<li><code>beforeMount</code></li>
</ul>
<p>在挂载开始之前被调用：相关的 render 函数首次被调用。</p>
<ul>
<li><code>mounted</code></li>
</ul>
<p>el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。</p>
<ul>
<li><code>beforeUpdate</code></li>
</ul>
<p>数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。</p>
<ul>
<li><code>updated</code></li>
</ul>
<p>由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。</p>
<p>当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。</p>
<p>该钩子在服务器端渲染期间不被调用。</p>
<ul>
<li><code>beforeDestroy</code></li>
</ul>
<p>实例销毁之前调用。在这一步，实例仍然完全可用。</p>
<ul>
<li><code>destroyed</code></li>
</ul>
<p>Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h4 id="Vue实例的全局配置"><a href="#Vue实例的全局配置" class="headerlink" title="Vue实例的全局配置"></a>Vue实例的全局配置</h4><p><a href="https://cn.vuejs.org/v2/api/#silent" target="_blank" rel="noopener">官网</a></p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/前端/">前端</a><a href="/tags/vue/">vue</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/04/24/npm常用命令/" title="npm常用命令" itemprop="url">npm常用命令</a>
</h1>
<p class="article-author">By
<a href="/about" title="YUAN" target="_blank" itemprop="author">YUAN</a>
</p><p class="article-time">
<time datetime="2019-04-24T03:24:31.000Z" itemprop="datePublished"> Published 2019-04-24</time>
</p>
</header>
<div class="article-content">
<p>命令</p>
<h3 id="Install作用"><a href="#Install作用" class="headerlink" title="Install作用"></a>Install作用</h3><p>npm install -g npm</p>
<p>升级npm</p>
<p>nmp init或者npm init -y</p>
<p>初始化package.json文件，若都用默认参数则用 npm init -y</p>
<p>npm -v</p>
<p>查看npm版本</p>
<p>npm config set registry <a href="https://registry.npm.taobao.org" target="_blank" rel="noopener">https://registry.npm.taobao.org</a></p>
<p>设置npm为淘宝镜像</p>
<p>npm config get registry</p>
<p>查看镜像</p>
<p>npm config edit</p>
<p>编辑npm 配置文件</p>
<p>npm help npm</p>
<p>打开本地的npm帮助文件，内容很详细</p>
<p>npm help config</p>
<p>查看config 命令的帮助文件，npm其他命令也可以用此方法看详细帮助</p>
<p>npm run start</p>
<p>运行package.json scripts节中名称为start的命令</p>
<p>例如：</p>
<p>{<br> // …<br> “scripts”: {<br> “start”: “node build.js”<br> }<br>}</p>
<p>npm view 模块名 versions</p>
<p>查看某个模块的所有版本，这个命令会联网，会有延迟。</p>
<p>(1)、npm install -g 模块名</p>
<p>(2)、npm install –save-dev 模块名</p>
<p>(3)、npm install –save 模块名</p>
<p>(4)、npm install</p>
<p>（1）全局安装</p>
<p> (2)自动把模块和版本号添加到dependencies部分，生产环境</p>
<p> (3)自动把模块和版本号添加到devdependencies部分，开发环境</p>
<p>(4)在带有package.json的文件夹中执行的作用是，按照package.json文件中的依赖包的配置安装所有依赖的包。</p>
<h3 id="webpack-的学习"><a href="#webpack-的学习" class="headerlink" title="webpack 的学习"></a>webpack 的学习</h3><p>webpack可以打包，编译js，还可以预处理css,使用style-loader css-loader 对css打包，主要从以下几点进行讲述：</p>
<ul>
<li><p>css的引入</p>
</li>
<li><p>使用style-loader和css-loader打包css</p>
</li>
<li><p>使用style-loader/url</p>
</li>
<li><p>使用style-loader/useable</p>
</li>
<li><p>使用style-loader的options配置</p>
</li>
<li><p>使用css-loader的options配置</p>
<p>loader的加载顺序是从右往左的。这里的编译顺序是先用css-loader将css代码编译，再交给style-loader插入到网页里面去。所以css-loader在右，style-loader在左。</p>
</li>
</ul>
<p>全局安装：</p>
<p>npm install –global webpack </p>
<p>不推荐全局安装，因为全局安装将会锁定指定版本，并且在使用不同的webpack版本的项目中，可能会导致构建失败。</p>
<p>lodash一个一致性，模块化，高性能的javascript实用工具库</p>
<p>在安装一个要打包到生产环境的安装包时，你应该使用 <code>npm install --save</code>，如果你在安装一个用于开发环境的安装包（例如，linter, 测试库等），你应该使用 <code>npm install --save-dev</code>。请在 <a href="https://docs.npmjs.com/cli/install" target="_blank" rel="noopener">npm 文档</a> 中查找更多信息。</p>
<p>npx npm包的一个执行器</p>
<p>ES5中的Import和Export </p>
<p>一个js文件代表一个模块，ES6 模块化使用到了import和export 在浏览器中导入和导出各个模块，</p>
<p>webpack 如何管理资源和图片？</p>
<p>webpack 打包思想：</p>
<p>webpack可以将网页所需要的js css 图片等资源整体打包压缩，用户只需要请求你打包后的文件，请求数量大大减少，节省浏览器响应时间，减少用户的等待时间。</p>
<p>webpack打包的思想：chunk思想；</p>
<p>webpack分析网页中的所需要的js文件，css文件，font文件，每个文件都是一块一块的，以及各自文件所依赖的文件，形成依赖树，然后 webpack根据文件类型，采用不同的loader进行处理加载， js文件用babel-loader将ES6转换，css根据post-loader做兼容处理，然后输入到html文件中。</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/前端/">前端</a><a href="/tags/webpack命令/">webpack命令</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/04/23/Vue-what-can-i-do-tocatch-you/" title="Vue(what can i do tocatch you)" itemprop="url">Vue(what can i do tocatch you)</a>
</h1>
<p class="article-author">By
<a href="/about" title="YUAN" target="_blank" itemprop="author">YUAN</a>
</p><p class="article-time">
<time datetime="2019-04-23T10:48:42.000Z" itemprop="datePublished"> Published 2019-04-23</time>
</p>
</header>
<div class="article-content">
<h3 id="简介："><a href="#简介：" class="headerlink" title="简介："></a>简介：</h3><p>今天突发奇想，虽然之前一直从事javaweb开发，一直想的是自己以后的工作方向也是java。其实现在想来自己在工作中前端和后端开发一半一半吧。而且这个个性化时代，页面的展示仿佛已经是重中之重了。但是现在的话自己没经历过一个完整的vue开发项目，所以只能从零开始学习了。</p>
<h3 id="Vue简介："><a href="#Vue简介：" class="headerlink" title="Vue简介："></a>Vue简介：</h3><p><a href="https://github.com/vuejs/vue" target="_blank" rel="noopener">Vue.js</a>是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API。</p>
<p>特点：</p>
<p>1.MVVM</p>
<p>2.组件化</p>
<p>npm —nodejs的包管理器</p>
<p>webpack — vue的组件都是通过.vue等自定义的组建都无法被用户端的各种浏览器解析，需要被翻译和打包生成.js文件。</p>
<p>vue-cli 用于生成模板的vue工程，脚手架。‘</p>
<p>vue-cli 脚手架的下载 npm install vue-cli -g</p>
<p>vue 模板下载 npm install –global vue-cli</p>
<p>npm install 下载依赖</p>
<p>npm run dev 启动项目</p>
<h3 id="vue-项目目录："><a href="#vue-项目目录：" class="headerlink" title="vue 项目目录："></a>vue 项目目录：</h3><table>
<thead>
<tr>
<th>目录/文件</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>build</td>
<td>项目构建(webpack)相关代码</td>
</tr>
<tr>
<td>config</td>
<td>配置目录，包括端口号等。我们初学可以使用默认的。</td>
</tr>
<tr>
<td>node_modules</td>
<td>npm 加载的项目依赖模块</td>
</tr>
<tr>
<td>src</td>
<td>这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。</td>
</tr>
<tr>
<td>static</td>
<td>静态资源目录，如图片、字体等。</td>
</tr>
<tr>
<td>test</td>
<td>初始测试目录，可删除</td>
</tr>
<tr>
<td>.xxxx文件</td>
<td>这些是一些配置文件，包括语法配置，git配置等。</td>
</tr>
<tr>
<td>index.html</td>
<td>首页入口文件，你可以添加一些 meta 信息或统计代码啥的。</td>
</tr>
<tr>
<td>package.json</td>
<td>项目配置文件。</td>
</tr>
<tr>
<td>README.md</td>
<td>项目的说明文档，markdown 格式</td>
</tr>
</tbody>
</table>
<p><img src="https://images2017.cnblogs.com/blog/916533/201801/916533-20180118181001443-1283702699.png" alt="img"></p>
<h3 id="axios简介"><a href="#axios简介" class="headerlink" title="axios简介:"></a>axios简介:</h3><p>axios 是基于Promise用于浏览器和nodejs的http客户端，本质上也是对原生XHR的封装，只不过它是对promise的实现版本，符合最新额ES6,本身具有的特性：</p>
<p>1.从浏览器中创建 XMLHttpRequest<br> 2.支持 Promise API<br> 3.客户端支持防止CSRF<br> 4.提供了一些并发请求的接口（重要，方便了很多的操作）<br> 5.从 node.js 创建 http 请求<br> 6.拦截请求和响应<br> 7.转换请求和响应数据<br> 8.取消请求<br> 9.自动转换JSON数据</p>
<p><strong>:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略</strong></p>
<p>axios 既提供了并发封装，也没有fetch的各种问题，而且体积较小，是当前最应该选用的请求方式。</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/前端/">前端</a><a href="/tags/vue/">vue</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/04/23/Spring的作用域/" title="Spring的作用域" itemprop="url">Spring的作用域</a>
</h1>
<p class="article-author">By
<a href="/about" title="YUAN" target="_blank" itemprop="author">YUAN</a>
</p><p class="article-time">
<time datetime="2019-04-23T09:03:28.000Z" itemprop="datePublished"> Published 2019-04-23</time>
</p>
</header>
<div class="article-content">
<p>scope 配置项有5个属性，用于描述不同的作用域：</p>
<p>1.singleton</p>
<p>2.pototype</p>
<p>3.request</p>
<p>4.session </p>
<p>5.global-session</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/Java/">Java</a><a href="/tags/Spring/">Spring</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand w" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/04/22/Java-集合框架总结/" title="Java 集合框架总结" itemprop="url">Java 集合框架总结</a>
</h1>
<p class="article-author">By
<a href="/about" title="YUAN" target="_blank" itemprop="author">YUAN</a>
</p><p class="article-time">
<time datetime="2019-04-22T11:02:11.000Z" itemprop="datePublished"> Published 2019-04-22</time>
</p>
</header>
<div class="article-content">
<h3 id="1-java中常用的集合类型"><a href="#1-java中常用的集合类型" class="headerlink" title="1.java中常用的集合类型"></a>1.java中常用的集合类型</h3><p><img src="http://www.runoob.com/wp-content/uploads/2014/01/2243690-9cd9c896e0d512ed.gif" alt="img"></p>
<p> java 集合位于java.util 包中，所以当使用集合框架时需要进行import</p>
<h3 id="2-集合接口"><a href="#2-集合接口" class="headerlink" title="2.集合接口"></a>2.集合接口</h3><p>集合框架定义了一些接口。本节提供了每个接口的概述：</p>
<table>
<thead>
<tr>
<th>序号</th>
<th>接口描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Collection 接口 Collection 是最基本的集合接口，一个 Collection 代表一组 Object，即 Collection 的元素, Java不提供直接继承自Collection的类，只提供继承于的子接口(如List和set)。Collection 接口存储一组不唯一，无序的对象。</td>
</tr>
<tr>
<td>2</td>
<td>List 接口 List接口是一个有序的 Collection，使用此接口能够精确的控制每个元素插入的位置，能够通过索引(元素在List中位置，类似于数组的下标)来访问List中的元素，第一个元素的索引为 0，而且允许有相同的元素。List 接口存储一组不唯一，有序（插入顺序）的对象。</td>
</tr>
<tr>
<td>3</td>
<td>Set Set 具有与 Collection 完全一样的接口，只是行为上不同，Set 不保存重复的元素。Set 接口存储一组唯一，无序的对象。</td>
</tr>
<tr>
<td>4</td>
<td>SortedSet 继承于Set保存有序的集合。</td>
</tr>
<tr>
<td>5</td>
<td>Map Map 接口存储一组键值对象，提供key（键）到value（值）的映射。</td>
</tr>
<tr>
<td>6</td>
<td>Map.Entry 描述在一个Map中的一个元素（键/值对）。是一个Map的内部类。</td>
</tr>
<tr>
<td>7</td>
<td>SortedMap 继承于 Map，使 Key 保持在升序排列。</td>
</tr>
<tr>
<td>8</td>
<td>Enumeration 这是一个传统的接口和定义的方法，通过它可以枚举（一次获得一个）对象集合中的元素。这个传统接口已被迭代器取代。</td>
</tr>
</tbody>
</table>
<h3 id="3-集合实现类"><a href="#3-集合实现类" class="headerlink" title="3.集合实现类"></a>3.集合实现类</h3><p> 标准集合类汇总于下表：</p>
<table>
<thead>
<tr>
<th>序号</th>
<th>类描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><strong>AbstractCollection</strong> 实现了大部分的集合接口。</td>
</tr>
<tr>
<td>2</td>
<td><strong>AbstractList</strong> 继承于AbstractCollection 并且实现了大部分List接口。</td>
</tr>
<tr>
<td>3</td>
<td><strong>AbstractSequentialList</strong> 继承于 AbstractList ，提供了对数据元素的链式访问而不是随机访问。</td>
</tr>
<tr>
<td>4</td>
<td>LinkedList 该类实现了List接口，允许有null（空）元素。主要用于创建链表数据结构，该类没有同步方法，如果多个线程同时访问一个List，则必须自己实现访问同步，解决方法就是在创建List时候构造一个同步的List。例如：<code>Listlist=Collections.synchronizedList(newLinkedList(...));</code>LinkedList 查找效率低。</td>
</tr>
<tr>
<td>5</td>
<td>ArrayList 该类也是实现了List的接口，实现了可变大小的数组，随机访问和遍历元素时，提供更好的性能。该类也是非同步的,在多线程的情况下不要使用。ArrayList 增长当前长度的50%，插入删除效率低。</td>
</tr>
<tr>
<td>6</td>
<td><strong>AbstractSet</strong> 继承于AbstractCollection 并且实现了大部分Set接口。</td>
</tr>
<tr>
<td>7</td>
<td>HashSet 该类实现了Set接口，不允许出现重复元素，不保证集合中元素的顺序，允许包含值为null的元素，但最多只能一个。</td>
</tr>
<tr>
<td>8</td>
<td>LinkedHashSet 具有可预知迭代顺序的 <code>Set</code> 接口的哈希表和链接列表实现。</td>
</tr>
<tr>
<td>9</td>
<td>TreeSet 该类实现了Set接口，可以实现排序等功能。</td>
</tr>
<tr>
<td>10</td>
<td><strong>AbstractMap</strong> 实现了大部分的Map接口。</td>
</tr>
<tr>
<td>11</td>
<td>HashMap HashMap 是一个散列表，它存储的内容是键值对(key-value)映射。 该类实现了Map接口，根据键的HashCode值存储数据，具有很快的访问速度，最多允许一条记录的键为null，不支持线程同步。</td>
</tr>
<tr>
<td>12</td>
<td>TreeMap 继承了AbstractMap，并且使用一颗树。</td>
</tr>
<tr>
<td>13</td>
<td>WeakHashMap 继承AbstractMap类，使用弱密钥的哈希表。</td>
</tr>
<tr>
<td>14</td>
<td>LinkedHashMap 继承于HashMap，使用元素的自然顺序对元素进行排序.</td>
</tr>
<tr>
<td>15</td>
<td>IdentityHashMap 继承AbstractMap类，比较文档时使用引用相等。</td>
</tr>
</tbody>
</table>
<p>在前面的教程中已经讨论通过java.util包中定义的类，如下所示：</p>
<table>
<thead>
<tr>
<th>序号</th>
<th>类描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Vector 该类和ArrayList非常相似，但是该类是同步的，可以用在多线程的情况，该类允许设置默认的增长长度，默认扩容方式为原来的2倍。</td>
</tr>
<tr>
<td>2</td>
<td>Stack 栈是Vector的一个子类，它实现了一个标准的后进先出的栈。</td>
</tr>
<tr>
<td>3</td>
<td>Dictionary Dictionary 类是一个抽象类，用来存储键/值对，作用和Map类相似。</td>
</tr>
<tr>
<td>4</td>
<td>Hashtable Hashtable 是 Dictionary(字典) 类的子类，位于 java.util 包中。</td>
</tr>
<tr>
<td>5</td>
<td>Properties Properties 继承于 Hashtable，表示一个持久的属性集，属性列表中每个键及其对应值都是一个字符串。</td>
</tr>
<tr>
<td>6</td>
<td>BitSet 一个Bitset类创建一种特殊类型的数组来保存位值。BitSet中数组大小会随需要增加。</td>
</tr>
</tbody>
</table>
<h3 id="4-set-和list的区别"><a href="#4-set-和list的区别" class="headerlink" title="4.set 和list的区别"></a>4.set 和list的区别</h3><p>1.都是实现Collection 接口。</p>
<p>2.set 不允许元素重复，不允许元素为空；list可以重复元素。</p>
<ol start="3">
<li>List和数组类似，可以动态增长，根据实际存储的数据的长度自动增长List的长度。查找元素效率高，插入删除效率低，因为会引起其他元素位置改变 <strong><实现类有ArrayList,LinkedList,Vector></strong> 。</li>
</ol>
<h3 id="5-Set的使用"><a href="#5-Set的使用" class="headerlink" title="5.Set的使用"></a>5.Set的使用</h3><p>set的两大实现类 TreeSet和HashSet </p>
<p>TreeSet 会将里面的元素默认排序。</p>
<p>HashSet :允许包含值为null的元素，但最多只能有一个null元素，不允许出现重复的元素。</p>
<h3 id="6-LinkedList和ArrayList的区别："><a href="#6-LinkedList和ArrayList的区别：" class="headerlink" title="6.LinkedList和ArrayList的区别："></a>6.LinkedList和ArrayList的区别：</h3><p>ArrayList内部是使用可増长数组实现的，所以是用get和set方法是花费常数时间的，但是如果插入元素和删除元素，除非插入和删除的位置都在表末尾，否则代码开销会很大，因为里面需要数组的移动。<br>LinkedList是使用双链表实现的，所以get会非常消耗资源，除非位置离头部很近。但是插入和删除元素花费常数时间。</p>
<h3 id="Vector"><a href="#Vector" class="headerlink" title="Vector"></a>Vector</h3><ol>
<li>Vector与ArrayList一样，也是通过数组实现的，不同的是它支持线程的同步，即某一时刻只有一个线程能够写Vector，避免多线程同时写而引起的不一致性，但实现同步需要很高的花费，因此，访问它比访问ArrayList慢。</li>
</ol>
<h3 id="7-java中循环删除list中元素的方法总结"><a href="#7-java中循环删除list中元素的方法总结" class="headerlink" title="7.java中循环删除list中元素的方法总结"></a>7.java中循环删除list中元素的方法总结</h3><p>1.使用for循环删除</p>
<p>删除某个元素后，list的大小发生了变化，索引也在变化，会导致遍历的时候漏掉一些元素，比如当你删除第1个元素后，继续根据索引访问第2个元素时，因为删除的关系后面的元素都往前移动了一位，所以实际访问的是第3个元素。因此，这种方式可以用在删除特定的一个元素时使用，但不适合循环删除多个元素时使用。</p>
<p>2.增强for循环</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(String str:list2){</span><br><span class="line"> <span class="keyword">if</span>(<span class="string">"abc2"</span>.equals(str)){</span><br><span class="line"> list2.remove(str);<span class="comment">//发生ConcurrentModificationException因为元素在使用的时候发生了并发的修改，导致异常抛出。但是删除完毕马上使用break跳出，则不会触发报错。</span></span><br><span class="line"> <span class="keyword">break</span>;<span class="comment">//使用 跳出 则不会出发报错</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>3.在list集合迭代元素中，对元素进行判断，一旦条件满足就添加一个新元素。代码如下</p>
<p><strong>public</strong> <strong>class</strong> IteratorDemo {</p>
<p>//在list集合迭代元素中，对元素进行判断，一旦条件满足就添加一个新元素</p>
<p><strong>public</strong> <strong>static</strong> <strong>void</strong> main(String[] args) {</p>
<p>//创建List集合</p>
<p>List<string> list = <strong>new</strong> ArrayList<string>();</string></string></p>
<p>//给集合中添加元素</p>
<p>list.add(“abc1”);</p>
<p>list.add(“abc2”);</p>
<p>list.add(“abc3”);</p>
<p>list.add(“abc4”);</p>
<p>//迭代集合，当有元素为”abc2”时，集合加入新元素”itcast”</p>
<p>Iterator<string> it = list.iterator();</string></p>
<p><strong>while</strong>(it.hasNext()){</p>
<p>String str = it.next();</p>
<p>//判断取出的元素是否是”abc2”，是就添加一个新元素</p>
<p><strong>if</strong>(“abc2”.equals(str)){</p>
<p>list.add(“itcast”);// 该操作会导致程序出错</p>
<p>}</p>
<p>}</p>
<p>//打印容器中的元素</p>
<p>System.<em>out</em>.println(list);</p>
<p>}</p>
<p>}</p>
<p>运行上述代码发生了错误 java.util.ConcurrentModificationException这是什么原因呢？</p>
<p>在迭代过程中，使用了集合的方法对元素进行操作。导致迭代器并不知道集合中的变化，容易引发数据的不确定性。</p>
<p>并发修改异常解决办法：在迭代时，不要使用集合的方法操作元素。</p>
<p>那么想要在迭代时对元素操作咋办？通过ListIterator迭代器操作元素是可以的，ListIterator的出现，解决了使用Iterator迭代过程中可能会发生的错误情况。</p>
<h3 id="8-map的遍历方式"><a href="#8-map的遍历方式" class="headerlink" title="8.map的遍历方式"></a>8.map的遍历方式</h3><p>1.Map.Entry keySet的方式</p>
<p>2.key value 的方式遍历 map.keySet获取所有的key 在获取value</p>
<p>3.Iterator的方式遍历，map.entrySet().iterator()获取所有的元素</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">Map<String,String> map = <span class="keyword">new</span> HashMap<>();</span><br><span class="line">map.put(<span class="string">"key1"</span>,<span class="string">"1"</span>);</span><br><span class="line">map.put(<span class="string">"key2"</span>,<span class="string">"2"</span>);</span><br><span class="line">map.put(<span class="string">"key3"</span>,<span class="string">"3"</span>);</span><br><span class="line"><span class="comment">//Entry 遍历 在容量大的时候推荐使用</span></span><br><span class="line"><span class="keyword">for</span>(Map.Entry<String,String> entry:map.entrySet()){</span><br><span class="line"> System.out.println(entry.getKey()+<span class="string">":"</span>+entry.getValue());</span><br><span class="line">}</span><br><span class="line"><span class="comment">//key value的方式遍历 通过Map.keySet 遍历所有的value和key 元素比较小的情况下推荐使用</span></span><br><span class="line"><span class="keyword">for</span>(String key:map.keySet()){</span><br><span class="line"> String value = map.get(key);</span><br><span class="line"> System.out.println(key+<span class="string">":"</span>+value);</span><br><span class="line">}</span><br><span class="line"><span class="comment">//Iterator 迭代器的方法 map.entrySet().iterator 方法遍历</span></span><br><span class="line">Iterator<Map.Entry<String,String>> iterator = map.entrySet().iterator();</span><br><span class="line"><span class="keyword">while</span>(iterator.hasNext()){</span><br><span class="line"> Map.Entry<String,String> entry = iterator.next();</span><br><span class="line"> System.out.println(entry.getKey()+<span class="string">":"</span>+entry.getValue());</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="9-collection-和collections的区别："><a href="#9-collection-和collections的区别：" class="headerlink" title="9.collection 和collections的区别："></a>9.collection 和collections的区别：</h3><p>collection是java.util下的接口，它是各种集合的父接口，继承于它的接口主要包含Set和List.Collections是java.util下的类，针对集合的帮助类。提供一些 静态方法实现以及对各种集合的搜索，排序，线程安全化等操作。</p>
<h3 id="10-HashMap和TreeMap的比较"><a href="#10-HashMap和TreeMap的比较" class="headerlink" title="10.HashMap和TreeMap的比较"></a>10.HashMap和TreeMap的比较</h3><p>HashMap通过hashcode对其内容进行快速查找，而 TreeMap中所有的元素都保持着某种固定的顺序。</p>
<p>HashMap：适用于在Map中插入、删除和定位元素。<br>Treemap：适用于按自然顺序或自定义顺序遍历键(key)。</p>
<p>HashMap通常比TreeMap快一点(树和哈希表的数据结构使然)，建议多使用HashMap，在需要排序的Map时候才用TreeMap。</p>
<h3 id="11-HashMap和HashTable的比较"><a href="#11-HashMap和HashTable的比较" class="headerlink" title="11.HashMap和HashTable的比较"></a>11.HashMap和HashTable的比较</h3><p>HashTable不允许有空值；</p>
<p>HashMap可允许有唯一的空值；</p>
<p>HashTable是线程安全的，HashMap非线程安全。</p>
<h3 id="12-Vector的同步性"><a href="#12-Vector的同步性" class="headerlink" title="12.Vector的同步性"></a>12.Vector的同步性</h3><p>同步容器中的所有自带方法都是线程安全的，因为方法都使用synchronized关键字标注。但是，对这些集合类的复合操作无法保证其线程安全性。需要客户端通过主动加锁来保证。</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/基础知识/">基础知识</a><a href="/tags/JAVA/">JAVA</a><a href="/tags/集合/">集合</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/04/08/mybatis缓存/" title="mybatis缓存" itemprop="url">mybatis缓存</a>
</h1>
<p class="article-author">By
<a href="/about" title="YUAN" target="_blank" itemprop="author">YUAN</a>
</p><p class="article-time">
<time datetime="2019-04-08T13:19:25.000Z" itemprop="datePublished"> Published 2019-04-08</time>
</p>
</header>
<div class="article-content">
<h3 id="1-mybatis的一级缓存总结"><a href="#1-mybatis的一级缓存总结" class="headerlink" title="1.mybatis的一级缓存总结"></a>1.mybatis的一级缓存总结</h3><p>1.在同一个 SqlSession 中, Mybatis 会把执行的方法和参数通过算法生成缓存的键值， 将键值和结果存放在一个 Map 中， 如果后续的键值一样， 则直接从 Map 中获取数据；</p>
<p>2.不同的 SqlSession 之间的缓存是相互隔离的；</p>
<p>3.用一个 SqlSession， 可以通过配置使得在查询前清空缓存；</p>
<p>4.任何的 UPDATE, INSERT, DELETE 语句都会清空缓存。</p>
<h3 id="2-mybatis的二级缓存总结"><a href="#2-mybatis的二级缓存总结" class="headerlink" title="2.mybatis的二级缓存总结"></a>2.mybatis的二级缓存总结</h3><p>二级缓存存在于 SqlSessionFactory 生命周期中。</p>
<p>2.1 配置二级缓存<br>2.1.1 全局开关<br>在 mybatis 中， 二级缓存有全局开关和分开关， 全局开关， 在 mybatis-config.xml 中如下配置:</p>
<p><settings><br> <!--全局地开启或关闭配置文件中的所有映射器已经配置的任何缓存。 --><br> <setting name="cacheEnabled" value="true"><br></setting></settings><br>默认是为 true， 即默认开启总开关。</p>
<p>2.1.2 分开关<br>分开关就是说在 *Mapper.xml 中开启或关闭二级缓存， 默认是不开启的。</p>
<p>2.1.3 entity 实现序列化接口<br>public class Student implements Serializable {</p>
<pre><code>private static final long serialVersionUID = -4852658907724408209L;
...
</code></pre><p>}</p>
<p>由于在更新时会刷新缓存， 因此需要注意使用场合：查询频率很高， 更新频率很低时使用， 即经常使用 select, 相对较少使用delete, insert, update。</p>
<p>缓存是以 namespace 为单位的，不同 namespace 下的操作互不影响。但刷新缓存是刷新整个 namespace 的缓存， 也就是你 update 了一个， 则整个缓存都刷新了。</p>
<p>最好在 「只有单表操作」 的表的 namespace 使用缓存， 而且对该表的操作都在这个 namespace 中。 否则可能会出现数据不一致的情况。</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/java/">java</a><a href="/tags/mybatis/">mybatis</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>