-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1572 lines (635 loc) · 81.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
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 class="theme-next muse use-motion" lang>
<head><meta name="generator" content="Hexo 3.8.0">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">
<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">
<link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">
<meta name="keywords" content="Hexo, NexT">
<meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Muse',
version: '5.1.4',
sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
fancybox: true,
tabs: true,
motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
duoshuo: {
userId: '0',
author: 'Author'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="http://yoursite.com/">
<title>Hexo</title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="default">
<div class="container sidebar-position-left
page-home">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">Hexo</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle"></p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br>
Home
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
Archives
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/10/06/正则表达式/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="John Doe">
<meta itemprop="description" content>
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Hexo">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2019/10/06/正则表达式/" itemprop="url">正则表达式</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Post created" itemprop="dateCreated datePublished" datetime="2019-10-06T23:36:41+08:00">
2019-10-06
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h5 id="一-前言"><a href="#一-前言" class="headerlink" title="一.前言"></a>一.前言</h5><p>对于正则表达式，相信很多人都知道，但是很多人的第一感觉就是难学，因为看第一眼时，觉得完全没有规律可寻，而且全是一堆各种各样的特殊符号，完全不知所云。</p>
<p>其实只是对正则不了解而以，了解了你就会发现，原来就这样啊正则所用的相关字符其实不多，也不难记，更不难懂，唯一难的就是组合起来之后，可读性比较差，而且不容易理解，本文旨在让大家对正则有一个基本的了解，能看得懂简单的正则表达式，写得出简单的正则表达式，用以满足日常开发中的需求即可。</p>
<h5 id="二-什么是正则表达式"><a href="#二-什么是正则表达式" class="headerlink" title="二.什么是正则表达式"></a>二.什么是正则表达式</h5><ul>
<li>正则表达式是一种特殊的字符串模式，用于匹配一组字符串，就好比用模具做产品，而正则就是这个模具，定义一种规则去匹配符合规则的字符。 </li>
</ul>
<h5 id="三-正则元字符"><a href="#三-正则元字符" class="headerlink" title="三.正则元字符"></a>三.正则元字符</h5><p>元字符是表示其在正则表达式上下文中的行为，下面介绍常用的元字符以及作用</p>
<ul>
<li>“^”：匹配输入字符串的开始位置</li>
<li>“$”：匹配输入字符串的结束位置</li>
<li>“*“：匹配前面的子表达式(字符)零次或多次。例如，zo* 能匹配 “z” 以及 “zooooooo”。 </li>
<li>“+”：匹配前面的子表达式一次或多次。例如，’zo+’ 能匹配 “zo” 以及 “zoo”，但不能匹配 “z”。 </li>
<li>“?”：匹配前面的子表达式零次或一次。例如，”do(es)?” 可以匹配 “do” 或 “does” 。</li>
<li>“\”：将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符</li>
<li>[ ] 中括号表示匹配括号中一个字符 范围描述 如[0-9 a-z A-Z]</li>
<li>{ } 大括号用于限定匹配次数 如 {n}表示匹配n个字符 {n,}表示至少匹配n个字符 {n,m}表示至少n,最多m</li>
<li>点字符（.）可以匹配出换行符外的任意一个字符。例如 ^s.t$，匹配的单词包括：sat、set、sit等。<br> 注意：假如要匹配一个ip地址127.0.0.1，就不能写成[0-9]{1,3}(.[0-9]{1,3}){3}，因为.能匹配除换行符任意字符，应写为 [0-9]{1,3}(\.[0-9]{1,3}){3}</li>
</ul>
<ul>
<li>“\b” :匹配一个单词边界，也就是指单词和空格间的位置</li>
<li>“\d”：匹配一个数字字符。</li>
<li>“\f”： 匹配一个换页符。等价于 \x0c 和 \cL</li>
<li>“\n”： 匹配一个换行符。等价于 \x0a 和 \cJ </li>
<li>“\r”：匹配一个回车符。等价于 \x0d 和 \cM</li>
<li>“\w”：匹配字母，数字，下划线 </li>
</ul>
<h5 id="四-正则反义"><a href="#四-正则反义" class="headerlink" title="四.正则反义"></a>四.正则反义</h5><ul>
<li>“\B”：匹配不是单词开头或结束的位置</li>
<li>“\S”：匹配任意不是空白符的字符</li>
<li>“\W” ：匹配任意不是字母，数字，下划线 的字符</li>
<li>“\D”：匹配任意非数字的字符</li>
<li>“[^abc]” ：匹配除了abc以外的任意字符 </li>
</ul>
<h5 id="五-正则量词"><a href="#五-正则量词" class="headerlink" title="五.正则量词"></a>五.正则量词</h5><p>量词记住三个就行了：贪婪(*)、懒惰/勉强(?)、占有(+)</p>
<ul>
<li>“*”，重复零次或更多，字符会首先会尽可能多的匹配整个字符串，如果失败，则回退一个字符，例如“a*”会匹配a后面的所有的a</li>
<li>“?” ，重复零次或一次， 是从目标的起始位置开始尝试匹配，每次检查一个字符并且判断是否是要找的字符，直到字符串结尾处，例如：”bbbbbb” 匹配字符串中的b,”b?” 只会匹配一次，也就是结果只是单个字符b</li>
<li>“+” ，重复一次或更多次，它会覆盖整个目标字符串，然后尝试寻找匹配内容 ，但它只尝试一次，例如：”cccccc” 匹配字符串中所有的c 正则： “c+” 会取到字符中所有的c字符</li>
</ul>
<h5 id="六-例子"><a href="#六-例子" class="headerlink" title="六.例子"></a>六.例子</h5><p>匹配邮箱地址：var pattern = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+.([A-Za-z]{2,8})$/;<br><a href="mailto:[email protected]" target="_blank" rel="noopener">[email protected]</a> true;<br>啦啦啦@42du.cn true;<br>假设规定邮箱只能是163或者qq<br>var pattern = /^([A-Za-z0-9_\-\.])+\@(163.com|qq.com)$/;</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/10/06/css变量/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="John Doe">
<meta itemprop="description" content>
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Hexo">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2019/10/06/css变量/" itemprop="url">css变量</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Post created" itemprop="dateCreated datePublished" datetime="2019-10-06T21:32:53+08:00">
2019-10-06
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h5 id="一-什么css变量"><a href="#一-什么css变量" class="headerlink" title="一.什么css变量"></a>一.什么css变量</h5><p>简单来说，类似于通常的变量，可以进行赋值和读取。<br>CSS 变量当前有两种形式：</p>
<ul>
<li>变量，就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如：var(–example)会返回–example所对应的值</li>
<li>自定义属性。这些属性使用–where的特殊格式作为名字。例如–example: 20px;即使一个css声明语句。意思是将20px赋值给–example变量。</li>
</ul>
<h5 id="二-为什么要了解css变量"><a href="#二-为什么要了解css变量" class="headerlink" title="二.为什么要了解css变量"></a>二.为什么要了解css变量</h5><p>关于为什么在 CSS 中使用变量有很多理由，其中最主要的一点就是它减少了样式代码的重复<br>这样一来你的代码不仅仅是变得更加可读，而且也为你将来想要做出改变提供了更多的灵活性。<br>除此之外 CSS 变量还有很多亮点：</p>
<ul>
<li>它不需要经过任何转译步骤，因为它是浏览器原生支持的。所以你不需要像使用 SASS 和 LESS 那样，你不需要任何设置就能直接书写这样的代码。</li>
<li>它是 DOM 的一部分，JavaScript可以直接访问</li>
</ul>
<p>具体的稍后文章会讲到</p>
<h5 id="三-变量的声明"><a href="#三-变量的声明" class="headerlink" title="三.变量的声明"></a>三.变量的声明</h5><p>声明变量的时候，变量名前面要加两根连词线(–）。</p>
<pre><code>body {
--a: #7F583F;
--b: #F7EFD2;
}
.content {
--c: #F7EFD2;
}
:root {
--main-color: #06c;
}
</code></pre><p>1.上面代码中，body选择器里面声明了两个变量：–a和–b,他们其实与常规的color，height等正式属性没什么不同，只是他们没有默认值，而这个默认值由你自己给出，所以 css 变量叫自定义属性。<br>2.body，content，root表示变量的作用域，root中放置全局变量，保证任何选择器都可以读取他们。</p>
<h5 id="四-变量的读取"><a href="#四-变量的读取" class="headerlink" title="四.变量的读取"></a>四.变量的读取</h5><p>通过 var() 获取，例如</p>
<pre><code>a {
color: var(--a);
text-decoration-color: var(--b);
}
</code></pre><h5 id="五-JavaScript如何访问css变量"><a href="#五-JavaScript如何访问css变量" class="headerlink" title="五.JavaScript如何访问css变量"></a>五.JavaScript如何访问css变量</h5><pre><code>// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// 删除变量
document.body.style.removeProperty('--primary');
</code></pre><p>通过JavaScript对css变量的操作，就可以实现用户自定义网页样式，或者一些十分炫酷的渐变效果<br>下面是一个利用 css 变量实现悬浮动画效果<br>css部分</p>
<pre><code>.button {
position: relative;
appearance: none;
background: #f72359;
padding: 1em 2em;
border: none;
color: white;
font-size: 1.2em;
cursor: pointer;
outline: none;
overflow: hidden;
border-radius: 100px;
}
span {
position: relative;
}
.button::before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #4405f7, transparent);
transform: translate(-50%, -50%);
transition: width .2s ease, height .2s ease;
}
.button:hover::before {
--size: 400px;
}
</code></pre><p>1.radial-gradient：由原点(渐变中心)辐射开的颜色渐变</p>
<p>js部分：得到鼠标的位置</p>
<pre><code>document.querySelector('.button').onmousemove = (e) => {
const x = e.pageX - e.target.offsetLeft
const y = e.pageY - e.target.offsetTop
e.target.style.setProperty('--x', `${ x }px`)
e.target.style.setProperty('--y', `${ y }px`)
}
</code></pre><p>1.pageX、pageY：:对于整个页面来说，包括了被卷去的body部分的长度<br>2.offsetLeft、offsetTop：相对于带有定位的父盒子的左边和上面的坐标</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/06/08/学年总结/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="John Doe">
<meta itemprop="description" content>
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Hexo">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2019/06/08/学年总结/" itemprop="url">学年总结</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Post created" itemprop="dateCreated datePublished" datetime="2019-06-08T23:27:06+08:00">
2019-06-08
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="学年总结"><a href="#学年总结" class="headerlink" title="学年总结"></a>学年总结</h3><p> 做了什么： </p>
<ul>
<li>写了一个小项目（还算比较大）</li>
</ul>
<ol start="2">
<li>学了一些phaser，参加hackathon的时候写了个小游戏</li>
<li>掌握了taro</li>
<li>学了一点hyperapp，一点也不熟 </li>
</ol>
<p>不足之处：</p>
<ul>
<li>PAT落下了，基本没动过了</li>
</ul>
<ol start="2">
<li>时间被项目占据，学的东西有限</li>
<li>博客啊总结啊之类的写的很少</li>
<li>内驱力实属不够，一直是项目驱动 <h2 id="总结与展望："><a href="#总结与展望：" class="headerlink" title="总结与展望："></a>总结与展望：</h2> 进木犀确实是件很幸运的事情，学到了许多在学校不能交给我的东西，还认识了许多大佬。大一整个学年从html，css学起，慢慢学到JavaScript，学到phaser，taro，hyperapp，react这些框架，刷了很多PAT，这些都让我变得好<br> 但还是有特别多的不足之处，特别是c语言的学习落下了很多，PAT就只刷到了这个学期刚开头，就没动过了，指针，结构体这些应用都还很不熟悉，这一门基础的语言，我并没有学到很深入，这会对我学其他高级语言造成很大的影响。<br> 然后在学习的时候并不喜欢问问题，都喜欢自己去死磕，造成学习效率很低，要很久才能搞明白一个简单的东西，这个必须得改，不问问题，自己难受，效率也低。<br> 可能收获最大的还是自己真正去写一个项目，完整得用一个框架写出产品想要的东西，这个过程无疑是痛苦的，但结果还是很好的，在完成的那一刻，成就感爆棚，写拼拼，不仅让我对taro很熟悉，也大大增进了我对一个团队写项目的经验，还结识了一群小伙伴。<br> 大一下学期，其实自己是比较懒惰的，没有很主动的去补足自己的缺点，一些js上面的基础知识也不是很扎实，就单纯的写项目，学习稍微落下了，没有认识到基础的重要性，对react还是不是很熟练，有点薄弱。<br> 感觉自己对学的东西都没有学到深入，都是一些浅层的应用，并没有很深刻的理解，没有把一个东西学得特别精。<br> 希望自己还是能慢慢进步，一定要自觉，不要再浪费时间了！！！加油！！！ </li>
</ol>
<ul>
<li>多更博客！！！多写总结！！！要及时复习新学的，不然学了就忘</li>
<li>要真正静下心来，补自己在基础上面的一些薄弱之处</li>
<li>刷题一定要跟着进度，不要半途而废</li>
</ul>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/05/29/css3d/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="John Doe">
<meta itemprop="description" content>
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Hexo">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2019/05/29/css3d/" itemprop="url">css3d效果实现</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Post created" itemprop="dateCreated datePublished" datetime="2019-05-29T19:46:19+08:00">
2019-05-29
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>如何利用html和css实现炫酷的3d效果呢？3d正方形，3d翻书动画O(∩_∩)O</p>
<ul>
<li>首先，我们来了解一下3d的坐标系，x轴在屏幕上为水平方向，y轴为垂直方向，而z轴为垂直于屏幕的方向。如图所示<br><img src="../../img/3d.png" alt><br>在介绍3d之前先看一下2d的旋转：<a href="http://www.w3school.com.cn/example/css3/demo_css3_transform.html" target="_blank" rel="noopener">2d</a></li>
</ul>
<h2 id="知识储备："><a href="#知识储备：" class="headerlink" title="知识储备："></a>知识储备：</h2><ul>
<li>perspective :头饰，形成3d效果的关键，在css里面他是有数值的，我们可以这样理解，如果我们直接眼睛靠着物体看，物体就超大占满我们的视线，我们离它距离越来越大，它在变小，立体感也就出来了是不是，其实这个数值构造了一个我们眼睛离屏幕的距离，也就构造了一个虚拟3D假象。</li>
<li>transform-style：perspective又来了，没错，它是css中3D的关键，transform-style默认是flat，如果你要在元素上视线3D效果的话，就必须用上transform-style: preserve-3d,否则就只是平面的变换，而不是3D的变换 </li>
<li>transform: rotateY(90deg)[绕y轴旋转90度] rotateX(90deg)[绕x轴旋转90度] rotateZ(90deg)[绕z轴旋转90度]</li>
</ul>
<h2 id="第一个例子：可以旋转的图片"><a href="#第一个例子：可以旋转的图片" class="headerlink" title="第一个例子：可以旋转的图片"></a>第一个例子：可以旋转的图片</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"> <style></span><br><span class="line"> body{</span><br><span class="line"> perspective: 800px;</span><br><span class="line"> transform-style: preserve-3d;</span><br><span class="line"> }</span><br><span class="line"> #box{</span><br><span class="line"> width: 300px;</span><br><span class="line"> height: 300px;</span><br><span class="line"> margin: 0 auto;</span><br><span class="line"> transform-style: preserve-3d;</span><br><span class="line"> position: relative;</span><br><span class="line"> transition: 4s;</span><br><span class="line"> }</span><br><span class="line"> #box:hover{</span><br><span class="line"> transform:rotateY(180deg); //旋转动画180度</span><br><span class="line"> }</span><br><span class="line"> #box .bian{</span><br><span class="line"> width: 300px;</span><br><span class="line"> height: 300px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> line-height: 300px;</span><br><span class="line"> font-size: 100px;</span><br><span class="line"> position: absolute; </span><br><span class="line"> }</span><br><span class="line"> .zhi1{</span><br><span class="line"> background-color: red;</span><br><span class="line"> transform:rotateY(180deg);</span><br><span class="line"> }</span><br><span class="line"> .zhi2{</span><br><span class="line"> background-color: yellow;</span><br><span class="line"> backface-visibility: hidden;</span><br><span class="line"> }</span><br><span class="line"></style></span><br><span class="line"></span><br><span class="line"><body style="background-color:#23d19d"></span><br><span class="line"> <div id="box"></span><br><span class="line"> <div class="bian zhi1"></div></span><br><span class="line"> <div class="bian zhi2"></div></span><br><span class="line"> </div></span><br><span class="line"></body></span><br></pre></td></tr></table></figure>
<h2 id="第二个：一个正方体3d旋转动画demo"><a href="#第二个：一个正方体3d旋转动画demo" class="headerlink" title="第二个：一个正方体3d旋转动画demo"></a>第二个：一个正方体3d旋转动画demo</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><span class="line"> <style></span><br><span class="line"></span><br><span class="line"> *{</span><br><span class="line"> margin: 0;</span><br><span class="line"> padding: 0;</span><br><span class="line"> /*去除默认边距*/</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> ul{</span><br><span class="line"> width: 200px;</span><br><span class="line"> height: 200px;</span><br><span class="line"> border: 1px solid #000;</span><br><span class="line"> box-sizing: border-box;</span><br><span class="line"> margin: 100px auto;</span><br><span class="line"> position: relative;</span><br><span class="line"> transform-style: preserve-3d; /*将父元素设置为3d空间*/</span><br><span class="line"> transition: 50s;</span><br><span class="line"> transform:rotateX(0deg)rotateY(0deg);</span><br><span class="line"> }</span><br><span class="line"> ul:hover{</span><br><span class="line"> transform: rotateY(360deg) rotateX(360deg);</span><br><span class="line"> }</span><br><span class="line"> ul li{</span><br><span class="line"> list-style: none;</span><br><span class="line"> width: 200px;</span><br><span class="line"> height: 200px;</span><br><span class="line"> font-size: 60px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> line-height: 200px;</span><br><span class="line"> position: absolute;</span><br><span class="line"> left: 0;</span><br><span class="line"> top: 0;</span><br><span class="line"> /*修改基本样式*/</span><br><span class="line"> }</span><br><span class="line"> ul li:nth-child(1){</span><br><span class="line"> background-color: red;</span><br><span class="line"> transform: translateX(-100px) rotateY(90deg);</span><br><span class="line"> /*将第一个l向左移动100像素，然后绕y轴旋转90度，形成左边的面*/</span><br><span class="line"> }</span><br><span class="line"> ul li:nth-child(2){</span><br><span class="line"> background-color: green;</span><br><span class="line"> transform: translateX(100px) rotateY(90deg);</span><br><span class="line"> /*将第一个2向右移动100像素，然后绕y轴旋转90度*，形成右边的面*/</span><br><span class="line"> }</span><br><span class="line"> ul li:nth-child(3){</span><br><span class="line"> background-color: blue;</span><br><span class="line"> transform: translateY(-100px) rotateX(90deg);</span><br><span class="line"> /*将第一个3向上移动100像素，然后绕x轴旋转90度，形成上面的面*/</span><br><span class="line"> }</span><br><span class="line"> ul li:nth-child(4){</span><br><span class="line"> background-color: yellow;</span><br><span class="line"> transform: translateY(100px) rotateX(90deg);</span><br><span class="line"> /*将第一个4向下移动100像素，然后绕x轴旋转90度*/</span><br><span class="line"> }</span><br><span class="line"> ul li:nth-child(5){</span><br><span class="line"> background-color: purple;</span><br><span class="line"> transform: translateZ(-100px);</span><br><span class="line"> /*将第一个5向后移动100像素，形成后面的面*/</span><br><span class="line"> }</span><br><span class="line"> ul li:nth-child(6){</span><br><span class="line"> background-color: pink;</span><br><span class="line"> transform: translateZ(100px);</span><br><span class="line"> /*将第一个l向前移动100像素，形成前面的面*/</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><body></span><br><span class="line"><ul></span><br><span class="line"> <!--首先做好html布局，正方体有6个面，所以写了6个li--></span><br><span class="line"> <li>1</li></span><br><span class="line"> <li>2</li></span><br><span class="line"> <li>3</li></span><br><span class="line"> <li>4</li></span><br><span class="line"> <li>5</li></span><br><span class="line"> <li>6</li></span><br><span class="line"></ul></span><br><span class="line"></body></span><br></pre></td></tr></table></figure>
<ul>
<li>总结：要用css实现3d效果，重要的有transform， transform-style: preserve-3d; transition: 50s;这三个属性，通过让它围绕x，y轴旋转进而实现3d旋转效果</li>
</ul>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/05/28/js/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="John Doe">
<meta itemprop="description" content>
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Hexo">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2019/05/28/js/" itemprop="url">js继承封装多态</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Post created" itemprop="dateCreated datePublished" datetime="2019-05-28T10:08:00+08:00">
2019-05-28
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>前言：从几个月前接触到 js 以来，感觉学的不明不白，一些 js 的基础理论知识不是很清楚，现在决定痛定思痛，把这些写下来，以此巩固和分享</p>
<h2 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h2><p>主要讲es6和es5的继承方式</p>
<h3 id="es6"><a href="#es6" class="headerlink" title="es6"></a>es6</h3><ul>
<li>es6引入了class、extends、super、static<br>super:第一种情况，super作为函数调用时，代表父类的构造函数。<br> 第二种情况，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。<br>static:类相当于实例的原型， 所有在类中定义的方法， 都会被实例继承。 如果在一个方法前， 加上static关键字， 就表示该方法不会被实例继承， 而是直接通过类来调用， 这就称为“ 静态方法”。静态方法调用直接在类上进行，而在类的实例上不可被调用。<br>下面是一个继承实例子 </li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">class Person{</span><br><span class="line"> //static sCount=0 //1</span><br><span class="line"> constructor(name){</span><br><span class="line"> this.name=name; </span><br><span class="line"> this.sCount++;</span><br><span class="line"> }</span><br><span class="line"> //实例方法 //2</span><br><span class="line"> getName(){</span><br><span class="line"> console.log(this.name)</span><br><span class="line"> }</span><br><span class="line"> static sTest(){</span><br><span class="line"> console.log("static method test")</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">class Man extends Person{</span><br><span class="line"> constructor(name){</span><br><span class="line"> super(name)//3</span><br><span class="line"> this.sex="male"</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">var man=new Man("Davin")</span><br><span class="line">man.getName()</span><br><span class="line">//man.sTest()</span><br><span class="line">Man.sTest()//4</span><br><span class="line">输出结果：</span><br><span class="line">Davin</span><br><span class="line">static method test</span><br></pre></td></tr></table></figure>
<ul>
<li>class相当于一个语法糖，class内定义的所有函数都会置于该类的原型当中。</li>
<li>constructor为构造函数，一个类有一个，相当于es5中构造函数标准化，负责一些初始化工作。</li>
<li>静态方法，在类定义的外部只能通过类名调用，内部可以通过this调用，并且静态函数是会被继承的。<h3 id="es5"><a href="#es5" class="headerlink" title="es5"></a>es5</h3></li>
<li>es5继承有原型继承，构造函数继承，组合式继承，原型式继承，寄生式继承，寄生式组合继承六种方式，这里原型继承，构造函数继承，寄生式继承</li>
<li>一.原型继承<br>简而言之，就是直接将父类的一个实例赋给子类的原型。示例如下 </li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">function Person(name){</span><br><span class="line"> this.name=name;</span><br><span class="line"> this.className="person" </span><br><span class="line">}</span><br><span class="line">Person.prototype.getClassName=function(){</span><br><span class="line"> console.log(this.className)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">function Man(){</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">Man.prototype=new Person();//1</span><br><span class="line">//Man.prototype=new Person("Davin");//2</span><br><span class="line">var man=new Man();</span><br><span class="line">>man.getClassName()</span><br><span class="line">>"person"</span><br></pre></td></tr></table></figure>
<p>这种继承方式下，所有的子类实例会共享一个父类对象的实例，这种方案最大问题就是子类无法通过父类创建私有属性。比如每一个Person都有一个名字，我们在初始化每个Man的时候要指定一个不同名字，然后子类将这个名字传递给父类，对于每个man来说，保存在相应person中的name应该是不同的，但是这种方式根本做不到。 </p>
<ul>
<li>二.构造函数继承 </li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><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">//声明父类</span><br><span class="line">function Person(name){</span><br><span class="line"> this.name=name;</span><br><span class="line"> this.className="person" </span><br><span class="line">}</span><br><span class="line">Person.prototype.getName=function(){ //父类声明原型方法</span><br><span class="line"> console.log(this.name)</span><br><span class="line">}</span><br><span class="line">//声明子类</span><br><span class="line">function Man(name){</span><br><span class="line"> Person.apply(this,arguments) //继承父类</span><br><span class="line">}</span><br><span class="line">var man1=new Man("Davin"); //声明第一个子类实例</span><br><span class="line">var man2=new Man("Jack"); //声明第二个子类实例</span><br><span class="line">>man1.name</span><br><span class="line">>"Davin"</span><br><span class="line">>man2.name</span><br><span class="line">>"Jack"</span><br><span class="line">>man1.getName() //1 报错</span><br></pre></td></tr></table></figure>
<p>这种用call，apply只能继承父类构造函数中声明的实例属性，并没有继承父类原型的属性和方法，所以就找不到getName方法，所以1处会报错。（这都不能叫做继承，只是简单的调用了call or apply方法将实例属性写如Man）</p>
<ul>
<li>三.组合继承<br>组合继承就是：类式继承+构造函数继承 </li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">function Person(name){</span><br><span class="line"> this.name=name||"default name"; //1</span><br><span class="line"> this.className="person" </span><br><span class="line">}</span><br><span class="line">Person.prototype.getName=function(){</span><br><span class="line"> console.log(this.name)</span><br><span class="line">}</span><br><span class="line">function Man(name){</span><br><span class="line"> Person.apply(this,arguments)</span><br><span class="line">}</span><br><span class="line">//继承原型</span><br><span class="line">Man.prototype = new Person();</span><br><span class="line">var man1=new Man("Davin");</span><br><span class="line">> man1.name</span><br><span class="line">>"Davin"</span><br><span class="line">> man1.getName()</span><br><span class="line">>"Davin"</span><br></pre></td></tr></table></figure>
<p>解决了只继承实例对象而不继承方法，和子类无法创建私有属性的问题</p>
<ul>
<li>四.寄生组合式继承 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">function Person(name){</span><br><span class="line"> this.name=name; //1</span><br><span class="line"> this.className="person" </span><br><span class="line">}</span><br><span class="line">Person.prototype.getName=function(){</span><br><span class="line"> console.log(this.name)</span><br><span class="line">}</span><br><span class="line">function Man(name){</span><br><span class="line"> Person.apply(this,arguments)</span><br><span class="line">}</span><br><span class="line">//注意此处</span><br><span class="line">Man.prototype = Object.create(Person.prototype); </span><br><span class="line">var man1=new Man("Davin");</span><br><span class="line">> man1.name</span><br><span class="line">>"Davin"</span><br><span class="line">> man1.getName()</span><br><span class="line">>"Davin"</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>这里用到了Object.creat(obj)方法，该方法会对传入的obj对象进行浅拷贝。和上面组合继承的主要区别就是：将父类的原型复制给了子类原型。这种做法很清晰：<br> 1.构造函数中继承父类属性／方法，并初始化父类。<br> 2.子类原型和父类原型建立联系。<br>es5最常用的还是寄生式组合继承方式继承<br>但这时还有一个问题，那就是Man.prototype.constructor是指向person的，所以为了避免很恐怖的错误，还需要修正指向：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Man.prototype.constructor = Man;</span><br></pre></td></tr></table></figure></p>
<h2 id="封装"><a href="#封装" class="headerlink" title="封装"></a>封装</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><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></pre></td><td class="code"><pre><span class="line">function Person(name , age , gender){</span><br><span class="line"> this.name = name ; //共有变量 </span><br><span class="line"> var age = age ; //私有变量</span><br><span class="line"> var gender = gender ; //私有变量</span><br><span class="line"> this.show = function (){</span><br><span class="line"> console.log(age+"===="+gender);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">var person = new Person('Sunshine',18,'女');</span><br><span class="line">console.log(person.age); // undefined</span><br><span class="line">console.log(person.name); // Sunshine</span><br><span class="line">console.log(person.show()); // 18====女</span><br></pre></td></tr></table></figure>
<p>封装：把客观事物封装成抽象的类，隐藏属性和方法的实现细节，仅对外公开接口。<br>意思就是外部只能访问到this后的东西，其余的var定义的是私有的不可访问。<br>优点：第一便于到处重复使用，第二对内部部件有一个完整性的包括，第三，把所有的东西封装起来，只留下若干个接口，便于使用维护。 </p>
<h2 id="多态"><a href="#多态" class="headerlink" title="多态"></a>多态</h2><p>定义：同一操作作用于不同的对象，可以有不同的解释，产生不同的执行结果。换句话说，给不同的对象发送同一个消息的时候，这些对象会根据这个消息分别给出不同的反馈。<br>本质上也就是“将‘做什么’和‘谁去做以及怎样去做’分开”，归根结底就是先消除不同对象的耦合关系。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">var makeSound = function(animal) {</span><br><span class="line"> animal.sound();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var Duck = function(){}</span><br><span class="line">Duck.prototype.sound = function() {</span><br><span class="line"> console.log('嘎嘎嘎')</span><br><span class="line">}</span><br><span class="line">var Chiken = function() {};</span><br><span class="line">Chiken.prototype.sound = function() {</span><br><span class="line"> console.log('咯咯咯')</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">makeSound(new Chicken());</span><br><span class="line">makeSound(new Duck());</span><br></pre></td></tr></table></figure></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>