-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path命名规范.html
1500 lines (1434 loc) · 101 KB
/
命名规范.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
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="never">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>闲时间前端开发规范</title>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>
<body class="no-navbar">
<div id="home">
<div id="main">
<div id="mainContent">
<div class="forFlow">
<div id="post_detail">
<!--done-->
<div id="topics">
<div class="post">
<h1 class="postTitle">
<a id="cb_post_title_url" class="postTitle2 vertical-middle">
<span>闲时间前端开发规范</span>
</a>
</h1>
<div class="clear"></div>
<div class="postBody">
<div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown">
<p></p>
<div class="toc"
style="width:400px;position: fixed;top: 0;background-color: #FDFDFD;z-index: 9999;padding-left: 12px;
height: 100%;overflow-y: scroll">
<div class="toc-container-header">目录</div>
<ul>
<li><a href="#声明">声明</a></li>
<li><a href="#前端代码规范">前端代码规范</a></li>
<li><a href="#前端-js-项目开发规范">前端 JS 项目开发规范</a></li>
<li><a href="#一、编程规约">一、编程规约</a>
<ul>
<li><a href="#一命名规范">(一)命名规范</a>
<ul>
<li><a href="#111-项目命名">1.1.1 项目命名</a></li>
<li><a href="#112-目录命名">1.1.2 目录命名</a></li>
<li><a href="#113-js、css、scss、html、png-文件命名">1.1.3
JS、CSS、SCSS、HTML、PNG 文件命名</a></li>
<li><a href="#114-命名严谨性">1.1.4 命名严谨性</a></li>
</ul>
</li>
<li><a href="#二html-规范-（vue-template-同样适用）">(二)HTML 规范 （Vue Template
同样适用）</a>
<ul>
<li><a href="#121-html-类型">1.2.1 HTML 类型</a></li>
<li><a href="#122-缩进">1.2.2 缩进</a></li>
<li><a href="#123-分块注释">1.2.3 分块注释</a></li>
</ul>
</li>
<li><a href="#124-语义化标签">1.2.4 语义化标签</a>
<ul>
<li><a href="#125-引号">1.2.5 引号</a></li>
</ul>
</li>
<li><a href="#三-css-规范">(三) CSS 规范</a>
<ul>
<li><a href="#131-命名">1.3.1 命名</a></li>
<li><a href="#132-选择器">1.3.2 选择器</a></li>
<li><a href="#133-尽量使用缩写属性">1.3.3 尽量使用缩写属性</a></li>
<li><a href="#134-每个选择器及属性独占一行">1.3.4 每个选择器及属性独占一行</a></li>
<li><a href="#135-省略0后面的单位">1.3.5 省略0后面的单位</a></li>
<li><a href="#136-避免使用id选择器及全局标签选择器防止污染全局样式">1.3.6
避免使用ID选择器及全局标签选择器防止污染全局样式</a></li>
</ul>
</li>
<li><a href="#四-less-规范">(四) LESS 规范</a>
<ul>
<li><a href="#141-代码组织">1.4.1 代码组织</a>
<ul>
<li><a href="#1将公共less文件放置在stylelesscommon文件夹">1)将公共less文件放置在style/less/common文件夹</a>
</li>
<li><a href="#2按以下顺序组织">2)按以下顺序组织</a></li>
</ul>
</li>
<li><a href="#142-避免嵌套层级过多">1.4.2 避免嵌套层级过多</a></li>
</ul>
</li>
<li><a href="#五-javascript-规范">(五) Javascript 规范</a>
<ul>
<li><a href="#151-命名">1.5.1 命名</a>
<ul>
<li>
<a href="#1-采用小写驼峰命名-lowercamelcase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束">1)
采用小写驼峰命名
lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束</a>
</li>
<li>
<a href="#2-方法名、参数名、成员变量、局部变量都统一使用-lowercamelcase-风格，必须遵从驼峰形式。">2)
方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase
风格，必须遵从驼峰形式。</a></li>
<li>
<a href="#3-常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。">3)
常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。</a>
</li>
</ul>
</li>
<li><a href="#152-代码格式">1.5.2 代码格式</a>
<ul>
<li><a href="#1-使用-2-个空格进行缩进">1) 使用 2 个空格进行缩进</a>
</li>
<li>
<a href="#2-不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。">2)
不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。</a>
</li>
</ul>
</li>
<li><a href="#153-字符串">1.5.3 字符串</a></li>
<li><a href="#154-对象声明">1.5.4 对象声明</a>
<ul>
<li><a href="#1使用字面值创建对象">1)使用字面值创建对象</a></li>
<li><a href="#2-使用字面量来代替对象构造器">2) 使用字面量来代替对象构造器</a>
</li>
</ul>
</li>
<li><a href="#155-使用-es67">1.5.5 使用 ES6,7</a></li>
<li><a href="#156-括号">1.5.6 括号</a></li>
<li><a href="#157-undefined-判断">1.5.7 undefined 判断</a></li>
<li><a href="#158-条件判断和循环最多三层">1.5.8 条件判断和循环最多三层</a></li>
<li><a href="#159-this-的转换命名">1.5.9 this 的转换命名</a></li>
<li><a href="#1510-慎用-consolelog">1.5.10 慎用 console.log</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#二、vue-项目规范">二、Vue 项目规范</a>
<ul>
<li><a href="#一-vue-编码基础">(一) Vue 编码基础</a>
<ul>
<li><a href="#211-组件规范">2.1.1. 组件规范</a>
<ul>
<li><a href="#1-组件名为多个单词。">1) 组件名为多个单词。</a></li>
<li><a href="#2-组件文件名为-pascal-case-格式">2) 组件文件名为
pascal-case 格式</a></li>
<li><a href="#3-基础组件文件名为-base-开头，使用完整单词而不是缩写。">3)
基础组件文件名为 base 开头，使用完整单词而不是缩写。</a></li>
<li><a href="#4-和父组件紧密耦合的子组件应该以父组件名作为前缀命名">4)
和父组件紧密耦合的子组件应该以父组件名作为前缀命名</a></li>
<li>
<a href="#5-在-template-模版中使用组件，应使用-pascalcase-模式，并且使用自闭合组件。">5)
在 Template 模版中使用组件，应使用 PascalCase
模式，并且使用自闭合组件。</a></li>
<li><a href="#6-组件的-data-必须是一个函数">6) 组件的 data
必须是一个函数</a></li>
<li><a href="#7-prop-定义应该尽量详细">7) Prop 定义应该尽量详细</a>
</li>
<li><a href="#8-为组件样式设置作用域">8) 为组件样式设置作用域</a></li>
<li><a href="#9-如果特性元素较多，应该主动换行。">9)
如果特性元素较多，应该主动换行。</a></li>
</ul>
</li>
<li><a href="#212-模板中使用简单的表达式">2.1.2. 模板中使用简单的表达式</a></li>
<li><a href="#213-指令都使用缩写形式">2.1.3 指令都使用缩写形式</a></li>
<li><a href="#214-标签顺序保持一致">2.1.4 标签顺序保持一致</a></li>
<li><a href="#215-必须为-v-for-设置键值-key">2.1.5 必须为 v-for 设置键值
key</a></li>
<li><a href="#216-v-show-与-v-if-选择">2.1.6 v-show 与 v-if
选择</a></li>
<li><a href="#217-script-标签内部结构顺序">2.1.7 script 标签内部结构顺序</a>
</li>
<li><a href="#218-vue-router-规范">2.1.8 Vue Router 规范</a>
<ul>
<li><a href="#1-页面跳转数据传递使用路由参数">1)
页面跳转数据传递使用路由参数</a></li>
<li><a href="#2-使用路由懒加载（延迟加载）机制">2)
使用路由懒加载（延迟加载）机制</a></li>
<li><a href="#3-router-中的命名规范">3) router 中的命名规范</a>
</li>
<li><a href="#4-router-中的-path-命名规范">4) router 中的
path 命名规范</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#二-vue-项目目录规范">(二) Vue 项目目录规范</a>
<ul>
<li><a href="#221-基础">2.2.1 基础</a></li>
<li><a href="#222-使用-vue-cli-脚手架">2.2.2 使用 Vue-cli 脚手架</a>
</li>
<li><a href="#223-目录说明">2.2.3 目录说明</a>
<ul>
<li><a href="#1-api-目录">1) api 目录</a></li>
<li><a href="#2-assets-目录">2) assets 目录</a></li>
<li><a href="#3-components-目录">3) components 目录</a>
</li>
<li><a href="#4-constants-目录">4) constants 目录</a>
</li>
<li><a href="#5-router-与-store-目录">5) router 与 store
目录</a></li>
<li><a href="#6-views-目录">6) views 目录</a></li>
</ul>
</li>
<li><a href="#224-注释说明">2.2.4 注释说明</a></li>
<li><a href="#225-其他">2.2.5 其他</a>
<ul>
<li><a href="#1-尽量不要手动操作-dom">1) 尽量不要手动操作 DOM</a>
</li>
<li><a href="#2-删除无用代码">2) 删除无用代码</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div style="padding-left: 430px;">
<p></p>
<h1 id="前端代码规范">前端代码规范</h1>
<p>Front Standard Guide</p>
<h1 id="前端-js-项目开发规范">前端 JS 项目开发规范</h1>
<p>规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。</p>
<p>引自《闲时间规约》的开头片段：</p>
<p><em>----现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。</em>
</p>
<h1 id="一、编程规约">一、编程规约</h1>
<h3 id="一命名规范">(一)命名规范</h3>
<h4 id="111-项目命名">1.1.1 项目命名</h4>
<p>全部采用小写方式， 以中划线分隔。</p>
<p>正例：<code>mall-management-system</code></p>
<p>反例：<code>mall_management-system / mallManagementSystem</code></p>
<h4 id="112-目录命名">1.1.2 目录命名</h4>
<p>全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数</p>
<p>正例： <code>scripts / styles / components / images / utils / layouts /
demo-styles
/ demo-scripts / img / doc</code></p>
<p>反例： <code>script / style / demo_scripts / demoStyles / imgs / docs</code></p>
<p>【特殊】VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名</p>
<p>正例： <code>head-search / page-loading / authorized / notice-icon</code></p>
<p>反例： <code>HeadSearch / PageLoading</code></p>
<p>【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名<br>
正例： <code>page-one / shopping-car / user-management</code></p>
<p>反例： <code>ShoppingCar / UserManagement</code></p>
<h4 id="113-js、css、scss、html、png-文件命名">1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名</h4>
<p>全部采用小写方式， 以中划线分隔</p>
<p>正例： <code>render-dom.js / signup.css / index.html / company-logo.png</code>
</p>
<p>反例： <code>renderDom.js / UserManagement.html</code></p>
<h4 id="114-命名严谨性">1.1.4 命名严谨性</h4>
<p>代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。
说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用</p>
<p>正例：<code>henan / luoyang / rmb 等国际通用的名称，可视同英文。</code></p>
<p>反例：<code>DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3</code>
</p>
<p><strong>杜绝完全不规范的缩写，避免望文不知义：</strong></p>
<p>反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成
condi，此类随意缩写严重降低了代码的可阅读性。</p>
<h3 id="二html-规范-（vue-template-同样适用）">(二)HTML 规范 （Vue Template 同样适用）</h3>
<h4 id="121-html-类型">1.2.1 HTML 类型</h4>
<p>推荐使用 HTML5 的文档类型申明： .<br>
（建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml
在浏览器中的应用支持与优化空间都十分有限）。</p>
<ul>
<li>规定字符编码</li>
<li>IE 兼容模式</li>
<li>规定字符编码</li>
<li>doctype 大写</li>
</ul>
<p>正例：</p>
<pre><code class="hljs xml"><span class="hljs-meta"><!DOCTYPE <span
class="hljs-meta-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span
class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span
class="hljs-string">"IE=Edge"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span
class="hljs-string">"UTF-8"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>Page title<span
class="hljs-tag"></<span
class="hljs-name">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span
class="hljs-string">"images/company-logo.png"</span> <span class="hljs-attr">alt</span>=<span
class="hljs-string">"Company"</span> /></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
</code></pre>
<h4 id="122-缩进">1.2.2 缩进</h4>
<p>缩进使用 2 个空格（一个 tab）</p>
<p>嵌套的节点应该缩进。</p>
<h4 id="123-分块注释">1.2.3 分块注释</h4>
<p>在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。注释格式</p>
<h3 id="124-语义化标签">1.2.4 语义化标签</h3>
<p>HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签</p>
<p>正例</p>
<pre><code class="hljs apache"><span
class="hljs-section"><header></span><span
class="hljs-section"></header></span>
<span class="hljs-section"><footer></span><span class="hljs-section"></footer></span>
</code></pre>
<p>反例</p>
<pre><code class="hljs apache"><span class="hljs-section"><div></span>
<span class="hljs-section"><p></span><span class="hljs-section"></p></span>
<span class="hljs-section"></div></span>
</code></pre>
<h4 id="125-引号">1.2.5 引号</h4>
<p>使用双引号(" ") 而不是单引号(’ ') 。</p>
<p>正例： ``</p>
<p>反例： ``</p>
<h3 id="三-css-规范">(三) CSS 规范</h3>
<h4 id="131-命名">1.3.1 命名</h4>
<ul>
<li>类名使用小写字母，以中划线分隔</li>
<li>id 采用驼峰式命名</li>
<li>scss 中的变量、函数、混合、placeholder 采用驼峰式命名</li>
</ul>
<p>ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称</p>
<p>不推荐：</p>
<pre><code class="hljs css"><span class="hljs-selector-class">.fw-800</span> {
<span class="hljs-attribute">font-weight</span>: <span class="hljs-number">800</span>;
}
<span class="hljs-selector-class">.red</span> {
<span class="hljs-attribute">color</span>: red;
}
</code></pre>
<p>推荐:</p>
<pre><code class="hljs css"><span class="hljs-selector-class">.heavy</span> {
<span class="hljs-attribute">font-weight</span>: <span class="hljs-number">800</span>;
}
<span class="hljs-selector-class">.important</span> {
<span class="hljs-attribute">color</span>: red;
}
</code></pre>
<h4 id="132-选择器">1.3.2 选择器</h4>
<p>1)css 选择器中避免使用标签名<br>
从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。</p>
<p>2)很多前端开发人员写选择器链的时候不使用
直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到
DOM 末端的选择器， 你应该总是考虑直接子选择器。</p>
<p>不推荐:</p>
<pre><code class="hljs css"><span
class="hljs-selector-class">.content</span> <span
class="hljs-selector-class">.title</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">2rem</span>;
}
</code></pre>
<p>推荐:</p>
<pre><code class="hljs css"><span
class="hljs-selector-class">.content</span> > <span
class="hljs-selector-class">.title</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">2rem</span>;
}
</code></pre>
<h4 id="133-尽量使用缩写属性">1.3.3 尽量使用缩写属性</h4>
<p>不推荐：</p>
<pre><code class="hljs scss"><span
class="hljs-attribute">border-top-style</span>: none;
<span class="hljs-attribute">font-family</span>: palatino, georgia, serif;
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">100%</span>;
<span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.6</span>;
<span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">2em</span>;
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">1em</span>;
<span class="hljs-attribute">padding-right</span>: <span class="hljs-number">1em</span>;
<span class="hljs-attribute">padding-top</span>: <span class="hljs-number">0</span>;
</code></pre>
<p>推荐：</p>
<pre><code class="hljs apache"><span
class="hljs-attribute">border</span>-top: <span
class="hljs-number">0</span>;
<span class="hljs-attribute">font</span>: <span class="hljs-number">100</span>%/<span class="hljs-number">1</span>.<span
class="hljs-number">6</span> palatino, georgia, serif;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span
class="hljs-number">1</span>em <span class="hljs-number">2</span>em;
</code></pre>
<h4 id="134-每个选择器及属性独占一行">1.3.4 每个选择器及属性独占一行</h4>
<p>不推荐：</p>
<pre><code class="hljs css"><span class="hljs-selector-tag">button</span>{
<span class="hljs-attribute">width</span>:<span class="hljs-number">100px</span>;<span
class="hljs-attribute">height</span>:<span
class="hljs-number">50px</span>;<span
class="hljs-attribute">color</span>:<span
class="hljs-number">#fff</span>;<span
class="hljs-attribute">background</span>:<span class="hljs-number">#00a0e9</span>;
}
</code></pre>
<p>推荐：</p>
<pre><code class="hljs css"><span class="hljs-selector-tag">button</span>{
<span class="hljs-attribute">width</span>:<span class="hljs-number">100px</span>;
<span class="hljs-attribute">height</span>:<span class="hljs-number">50px</span>;
<span class="hljs-attribute">color</span>:<span class="hljs-number">#fff</span>;
<span class="hljs-attribute">background</span>:<span class="hljs-number">#00a0e9</span>;
}
</code></pre>
<h4 id="135-省略0后面的单位">1.3.5 省略0后面的单位</h4>
<p>不推荐：</p>
<pre><code class="hljs css"><span class="hljs-selector-tag">div</span>{
<span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">0px</span>;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0em</span>;
}
</code></pre>
<p>推荐：</p>
<pre><code class="hljs css"><span class="hljs-selector-tag">div</span>{
<span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">0</span>;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
}
</code></pre>
<h4 id="136-避免使用id选择器及全局标签选择器防止污染全局样式">1.3.6 避免使用ID选择器及全局标签选择器防止污染全局样式</h4>
<p>不推荐：</p>
<pre><code class="hljs css"><span class="hljs-selector-id">#header</span>{
<span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">0px</span>;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0em</span>;
}
</code></pre>
<p>推荐：</p>
<pre><code class="hljs css"><span class="hljs-selector-class">.header</span>{
<span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">0px</span>;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0em</span>;
}
</code></pre>
<h3 id="四-less-规范">(四) LESS 规范</h3>
<h4 id="141-代码组织">1.4.1 代码组织</h4>
<h5 id="1将公共less文件放置在stylelesscommon文件夹">1)将公共less文件放置在style/less/common文件夹</h5>
<p>例:// color.less,common.less</p>
<h5 id="2按以下顺序组织">2)按以下顺序组织</h5>
<p>1、@import;<br>
2、变量声明;<br>
3、样式声明;</p>
<pre><code class="hljs less"><span class="hljs-keyword">@import</span> <span
class="hljs-string">"mixins/size.less"</span>;
<span class="hljs-variable">@default-text-color:</span> <span class="hljs-number">#333</span>;
<span class="hljs-selector-class">.page</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">960px</span>;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto;
}
</code></pre>
<h4 id="142-避免嵌套层级过多">1.4.2 避免嵌套层级过多</h4>
<p>将嵌套深度限制在3级。对于超过4级的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器。<br>
避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现</p>
<p>不推荐：</p>
<pre><code class="hljs x86asm"><span class="hljs-meta">.main</span>{
<span class="hljs-meta"> .title</span>{
<span class="hljs-meta"> .name</span>{
<span class="hljs-symbol"> color:</span>#fff
}
}
}
</code></pre>
<p>推荐：</p>
<pre><code class="hljs less"><span
class="hljs-selector-class">.main-title</span>{
<span class="hljs-selector-class">.name</span>{
<span class="hljs-attribute">color</span>:<span class="hljs-number">#fff</span>
}
}
</code></pre>
<h3 id="五-javascript-规范">(五) Javascript 规范</h3>
<h4 id="151-命名">1.5.1 命名</h4>
<h5 id="1-采用小写驼峰命名-lowercamelcase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束">1) 采用小写驼峰命名
lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束</h5>
<p>反例： <code>_name / name_ / name$</code></p>
<h5 id="2-方法名、参数名、成员变量、局部变量都统一使用-lowercamelcase-风格，必须遵从驼峰形式。">2)
方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式。</h5>
<p>正例： <code>localValue / getHttpMessage() / inputUserId</code></p>
<p>*<em><strong>其中 method 方法命名必须是 动词 或者 动词+名词 形式*</strong></em></p>
<p>正例：<code>saveShopCarData /openShopCarInfoDialog</code></p>
<p>反例：<code>save / open / show / go</code></p>
<p>*<em><strong>特此说明，增删查改，详情统一使用如下 5 个单词，不得使用其他（目的是为了统一各个端）*</strong></em></p>
<pre><code class="hljs sql">add / <span
class="hljs-keyword">update</span> / <span
class="hljs-keyword">delete</span> / detail / <span
class="hljs-keyword">get</span>
</code></pre>
<p><strong>附： 函数方法常用的动词:</strong></p>
<pre><code class="hljs sql">get 获取/<span class="hljs-keyword">set</span> 设置,
<span class="hljs-keyword">add</span> 增加/remove 删除
<span class="hljs-keyword">create</span> 创建/destory 移除
<span class="hljs-keyword">start</span> 启动/<span class="hljs-keyword">stop</span> 停止
<span class="hljs-keyword">open</span> 打开/<span class="hljs-keyword">close</span> 关闭,
<span class="hljs-keyword">read</span> 读取/write 写入
<span class="hljs-keyword">load</span> 载入/<span class="hljs-keyword">save</span> 保存,
<span class="hljs-keyword">create</span> 创建/destroy 销毁
<span class="hljs-keyword">begin</span> 开始/<span class="hljs-keyword">end</span> 结束,
<span class="hljs-keyword">backup</span> 备份/<span class="hljs-keyword">restore</span> 恢复
<span class="hljs-keyword">import</span> 导入/<span class="hljs-keyword">export</span> 导出,
<span class="hljs-keyword">split</span> 分割/<span class="hljs-keyword">merge</span> 合并
inject 注入/<span class="hljs-keyword">extract</span> 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
<span class="hljs-keyword">view</span> 查看/browse 浏览
edit 编辑/<span class="hljs-keyword">modify</span> 修改,
<span class="hljs-keyword">select</span> 选取/mark 标记
copy 复制/paste 粘贴,
<span class="hljs-keyword">undo</span> 撤销/<span class="hljs-keyword">redo</span> 重做
<span class="hljs-keyword">insert</span> 插入/<span class="hljs-keyword">delete</span> 移除,
<span class="hljs-keyword">add</span> 加入/append 添加
clean 清理/<span class="hljs-keyword">clear</span> 清除,
<span class="hljs-keyword">index</span> 索引/<span class="hljs-keyword">sort</span> 排序
find 查找/<span class="hljs-keyword">search</span> 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/<span class="hljs-keyword">execute</span> 执行,
debug 调试/<span class="hljs-keyword">trace</span> 跟踪
observe 观察/listen 监听,
<span class="hljs-keyword">build</span> 构建/publish 发布
<span class="hljs-keyword">input</span> 输入/<span class="hljs-keyword">output</span> 输出,
<span class="hljs-keyword">encode</span> 编码/<span class="hljs-keyword">decode</span> 解码
<span class="hljs-keyword">encrypt</span> 加密/<span class="hljs-keyword">decrypt</span> 解密,
<span class="hljs-keyword">compress</span> 压缩/decompress 解压缩
pack 打包/unpack 解包,
<span class="hljs-keyword">parse</span> 解析/emit 生成
<span class="hljs-keyword">connect</span> 连接/<span class="hljs-keyword">disconnect</span> 断开,
send 发送/receive 接收
download 下载/upload 上传,
<span class="hljs-keyword">refresh</span> 刷新/synchronize 同步
<span class="hljs-keyword">update</span> 更新/revert 复原,
<span class="hljs-keyword">lock</span> 锁定/<span class="hljs-keyword">unlock</span> 解锁
<span class="hljs-keyword">check</span> <span class="hljs-keyword">out</span> 签出/<span class="hljs-keyword">check</span> <span
class="hljs-keyword">in</span> 签入,
submit 提交/<span class="hljs-keyword">commit</span> 交付
push 推/pull 拉,
expand 展开/collapse 折叠
<span class="hljs-keyword">begin</span> 起始/<span class="hljs-keyword">end</span> 结束,
<span class="hljs-keyword">start</span> 开始/<span class="hljs-keyword">finish</span> 完成
enter 进入/<span class="hljs-keyword">exit</span> 退出,
<span class="hljs-keyword">abort</span> 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
<span class="hljs-keyword">collect</span> 收集/<span class="hljs-keyword">aggregate</span> 聚集
</code></pre>
<h5 id="3-常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。">3)
常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。</h5>
<p>正例： <code>MAX_STOCK_COUNT</code></p>
<p>反例： <code>MAX_COUNT</code></p>
<h4 id="152-代码格式">1.5.2 代码格式</h4>
<h5 id="1-使用-2-个空格进行缩进">1) 使用 2 个空格进行缩进</h5>
<p>正例：</p>
<pre><code class="hljs nginx"><span class="hljs-attribute">if</span> (x < y) {
<span class="hljs-attribute">x</span> += <span class="hljs-number">10</span>;
} <span class="hljs-section">else</span> {
<span class="hljs-attribute">x</span> += <span class="hljs-number">1</span>;
}
</code></pre>
<h5 id="2-不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。">2)
不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。</h5>
<blockquote>
<p>说明：任何情形，没有必要插入多个空行进行隔开。</p>
</blockquote>
<h4 id="153-字符串">1.5.3 字符串</h4>
<p>统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处：</p>
<p>正例:</p>
<pre><code class="hljs vbnet"><span class="hljs-keyword">let</span> str = <span
class="hljs-comment">'foo';</span>
<span class="hljs-keyword">let</span> testDiv = <span class="hljs-comment">'<span class="hljs-doctag"><div id="test"></span><span
class="hljs-doctag"></div></span>';</span>
</code></pre>
<p>反例:</p>
<pre><code class="hljs rust"><span class="hljs-keyword">let</span> <span
class="hljs-built_in">str</span> = <span class="hljs-symbol">'foo</span>';
<span class="hljs-keyword">let</span> testDiv = <span class="hljs-string">"<div id='test'></div>"</span>;
</code></pre>
<h4 id="154-对象声明">1.5.4 对象声明</h4>
<h5 id="1使用字面值创建对象">1)使用字面值创建对象</h5>
<p>正例： <code>let user = {};</code></p>
<p>反例： <code>let user = new Object();</code></p>
<h5 id="2-使用字面量来代替对象构造器">2) 使用字面量来代替对象构造器</h5>
<p>正例：</p>
<pre><code class="hljs yaml"><span class="hljs-string">var</span> <span
class="hljs-string">user</span> <span class="hljs-string">=</span> {
<span class="hljs-attr">age:</span> <span class="hljs-number">0</span>,
<span class="hljs-attr">name:</span> <span class="hljs-number">1</span>,
<span class="hljs-attr">city:</span> <span class="hljs-number">3</span>
}<span class="hljs-string">;</span>
</code></pre>
<p>反例：</p>
<pre><code class="hljs dockerfile">var <span class="hljs-keyword">user</span> = new Object();
<span class="hljs-keyword">user</span>.age = <span class="hljs-number">0</span>;
<span class="hljs-keyword">user</span>.name = <span class="hljs-number">0</span>;
<span class="hljs-keyword">user</span>.city = <span class="hljs-number">0</span>;
</code></pre>
<h4 id="155-使用-es67">1.5.5 使用 ES6,7</h4>
<p>必须优先使用 ES6,7 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用。</p>
<blockquote>
<p>必须强制使用 ES6, ES7 的新语法，比如箭头函数、await/async ， 解构， let ， for…of 等等</p>
</blockquote>
<h4 id="156-括号">1.5.6 括号</h4>
<p>下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch,
finally,
with。</p>
<p>正例：</p>
<pre><code class="hljs less"><span class="hljs-selector-tag">if</span> (condition) {
<span class="hljs-selector-tag">doSomething</span>();
}
</code></pre>
<p>反例：</p>
<pre><code class="hljs lisp">if (<span class="hljs-name">condition</span>) doSomething()<span
class="hljs-comment">;</span>
</code></pre>
<h4 id="157-undefined-判断">1.5.7 undefined 判断</h4>
<p>永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串’undefined’对变量进行判断。</p>
<p>正例：</p>
<pre><code class="hljs coffeescript"><span class="hljs-keyword">if</span> (<span
class="hljs-keyword">typeof</span> person === <span class="hljs-string">'undefined'</span>) {
...
}
</code></pre>
<p>反例：</p>
<pre><code class="hljs coffeescript"><span class="hljs-keyword">if</span> (person === <span
class="hljs-literal">undefined</span>) {
...
}
</code></pre>
<h4 id="158-条件判断和循环最多三层">1.5.8 条件判断和循环最多三层</h4>
<p>条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数，并写清楚注释。</p>
<h4 id="159-this-的转换命名">1.5.9 this 的转换命名</h4>
<p>对上下文 this 的引用只能使用’self’来命名</p>
<h4 id="1510-慎用-consolelog">1.5.10 慎用 console.log</h4>
<p>因 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能</p>
<h1 id="二、vue-项目规范">二、Vue 项目规范</h1>
<h3 id="一-vue-编码基础">(一) Vue 编码基础</h3>
<p>vue 项目规范以 Vue 官方规范 （<a href="https://cn.vuejs.org/v2/style-guide/%EF%BC%89"
target="_blank">https://cn.vuejs.org/v2/style-guide/）</a>
中的 A 规范为基础，在其上面进行项目开发，故所有代码均遵守该规范。</p>
<blockquote>
<p>请仔仔细细阅读 Vue 官方规范，切记，此为第一步。</p>
</blockquote>
<h4 id="211-组件规范">2.1.1. 组件规范</h4>
<h5 id="1-组件名为多个单词。">1) 组件名为多个单词。</h5>
<p>组件名应该始终是多个单词组成（大于等于 2），且命名规范为<code>KebabCase</code>格式。<br>
这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。</p>
<p>正例：</p>
<pre><code class="hljs css"><span class="hljs-selector-tag">export</span> <span
class="hljs-selector-tag">default</span> {
<span class="hljs-attribute">name</span>: <span class="hljs-string">'TodoItem'</span>
// ...
};
</code></pre>
<p>反例：</p>
<pre><code class="hljs css"><span class="hljs-selector-tag">export</span> <span
class="hljs-selector-tag">default</span> {
<span class="hljs-attribute">name</span>: <span class="hljs-string">'Todo'</span>,
// ...
}
<span class="hljs-selector-tag">export</span> <span class="hljs-selector-tag">default</span> {
<span class="hljs-attribute">name</span>: <span class="hljs-string">'todo-item'</span>,
// ...
}
</code></pre>
<h5 id="2-组件文件名为-pascal-case-格式">2) 组件文件名为 pascal-case 格式</h5>
<p>正例：</p>
<pre><code class="hljs perl">components/
|- <span class="hljs-keyword">my</span>-component.vue
</code></pre>
<p>反例：</p>
<pre><code class="hljs ruby">components/
<span class="hljs-params">|- myComponent.vue
|</span>- MyComponent.vue
</code></pre>
<h5 id="3-基础组件文件名为-base-开头，使用完整单词而不是缩写。">3) 基础组件文件名为 base 开头，使用完整单词而不是缩写。</h5>
<p>正例：</p>
<pre><code class="hljs csharp">components/
|- <span class="hljs-keyword">base</span>-button.vue
|- <span class="hljs-keyword">base</span>-table.vue
|- <span class="hljs-keyword">base</span>-icon.vue
</code></pre>
<p>反例：</p>
<pre><code class="hljs ruby">components/
<span class="hljs-params">|- MyButton.vue
|</span>- VueTable.vue
<span class="hljs-params">|- Icon.vue
</span></code></pre>
<h5 id="4-和父组件紧密耦合的子组件应该以父组件名作为前缀命名">4) 和父组件紧密耦合的子组件应该以父组件名作为前缀命名</h5>
<p>正例：</p>
<pre><code class="hljs cpp">components/
|- todo-<span class="hljs-built_in">list</span>.vue
|- todo-<span class="hljs-built_in">list</span>-item.vue
|- todo-<span class="hljs-built_in">list</span>-item-button.vue
|- user-profile-options.vue （完整单词）
</code></pre>
<p>反例：</p>
<pre><code class="hljs ruby">components/
<span class="hljs-params">|- TodoList.vue
|</span>- TodoItem.vue
<span class="hljs-params">|- TodoButton.vue
|</span>- UProfOpts.vue （使用了缩写）
</code></pre>
<h5 id="5-在-template-模版中使用组件，应使用-pascalcase-模式，并且使用自闭合组件。">5) 在 Template
模版中使用组件，应使用
PascalCase 模式，并且使用自闭合组件。</h5>
<p>正例：</p>
<pre><code class="hljs xml"><span class="hljs-comment"><!-- 在单文件组件、字符串模板和 JSX 中 --></span>
<span class="hljs-tag"><<span class="hljs-name">MyComponent</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">Row</span>></span><span class="hljs-tag"><<span
class="hljs-name">table</span> <span
class="hljs-attr">:column</span>=<span
class="hljs-string">"data"</span>/></span><span
class="hljs-tag"></<span class="hljs-name">Row</span>></span>
</code></pre>
<p>反例：</p>
<pre><code class="hljs ruby"><my-component /> <row><table <span
class="hljs-symbol">:column=<span class="hljs-string">"data"</span>/></row></span>
</code></pre>
<h5 id="6-组件的-data-必须是一个函数">6) 组件的 data 必须是一个函数</h5>
<p>当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。
因为如果直接是一个对象的话，子组件之间的属性值会互相影响。</p>
<p>正例：</p>
<pre><code class="hljs haskell"><span class="hljs-title">export</span> <span
class="hljs-keyword">default</span> {
<span class="hljs-class"><span class="hljs-keyword">data</span> () {
<span class="hljs-title">return</span> {
<span class="hljs-title">name</span>: '<span class="hljs-title">jack'</span>
}</span>
}
}
</code></pre>
<p>反例：</p>
<pre><code class="hljs css"><span class="hljs-selector-tag">export</span> <span
class="hljs-selector-tag">default</span> {
<span class="hljs-attribute">data</span>: {
name: <span class="hljs-string">'jack'</span>
}
}
</code></pre>
<h5 id="7-prop-定义应该尽量详细">7) Prop 定义应该尽量详细</h5>
<ul>
<li>必须使用 camelCase 驼峰命名</li>
<li>必须指定类型</li>
<li>必须加上注释，表明其含义</li>
<li>必须加上 required 或者 default，两者二选其一</li>
<li>如果有业务需要，必须加上 validator 验证</li>
</ul>
<p>正例：</p>
<pre><code class="hljs javascript"> props: {
<span class="hljs-comment">// 组件状态，用于控制组件的颜色</span>
<span class="hljs-attr">status</span>: {
<span class="hljs-attr">type</span>: <span class="hljs-built_in">String</span>,
<span class="hljs-attr">required</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">validator</span>: <span class="hljs-function"><span
class="hljs-keyword">function</span> (<span
class="hljs-params">value</span>) </span>{
<span class="hljs-keyword">return</span> [
<span class="hljs-string">'succ'</span>,
<span class="hljs-string">'info'</span>,
<span class="hljs-string">'error'</span>
].indexOf(value) !== -<span class="hljs-number">1</span>
}
},
<span class="hljs-comment">// 用户级别，用于显示皇冠个数</span>
userLevel：{
<span class="hljs-attr">type</span>: <span class="hljs-built_in">String</span>,
<span class="hljs-attr">required</span>: <span class="hljs-literal">true</span>
}
}
</code></pre>
<h5 id="8-为组件样式设置作用域">8) 为组件样式设置作用域</h5>
<p>正例：</p>
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">template</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span
class="hljs-string">"btn btn-close"</span>></span>X<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">template</span>></span>
<span class="hljs-comment"><!-- 使用 `scoped` 特性 --></span>
<span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>></span><span
class="css">
<span class="hljs-selector-class">.btn-close</span> {
<span class="hljs-attribute">background-color</span>: red;
}
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
</code></pre>
<p>反例：</p>
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">template</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span
class="hljs-string">"btn btn-close"</span>></span>X<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">template</span>></span>
<span class="hljs-comment"><!-- 没有使用 `scoped` 特性 --></span>
<span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css">
<span class="hljs-selector-class">.btn-close</span> {
<span class="hljs-attribute">background-color</span>: red;
}
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
</code></pre>
<h5 id="9-如果特性元素较多，应该主动换行。">9) 如果特性元素较多，应该主动换行。</h5>
<p>正例：</p>
<pre><code class="hljs smalltalk"><<span class="hljs-type">MyComponent</span> foo=<span
class="hljs-comment">"a"</span> bar=<span
class="hljs-comment">"b"</span> baz=<span
class="hljs-comment">"c"</span>
foo=<span class="hljs-comment">"a"</span> bar=<span class="hljs-comment">"b"</span> baz=<span class="hljs-comment">"c"</span>
foo=<span class="hljs-comment">"a"</span> bar=<span class="hljs-comment">"b"</span> baz=<span class="hljs-comment">"c"</span>
/>
</code></pre>
<p>反例：</p>
<pre><code class="hljs smalltalk"><<span class="hljs-type">MyComponent</span> foo=<span
class="hljs-comment">"a"</span> bar=<span
class="hljs-comment">"b"</span> baz=<span
class="hljs-comment">"c"</span> foo=<span
class="hljs-comment">"a"</span> bar=<span
class="hljs-comment">"b"</span> baz=<span
class="hljs-comment">"c"</span> foo=<span
class="hljs-comment">"a"</span> bar=<span
class="hljs-comment">"b"</span> baz=<span
class="hljs-comment">"c"</span> foo=<span
class="hljs-comment">"a"</span> bar=<span
class="hljs-comment">"b"</span> baz=<span
class="hljs-comment">"c"</span>/>
</code></pre>
<h4 id="212-模板中使用简单的表达式">2.1.2. 模板中使用简单的表达式</h4>
<p>
组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。</p>
<p>正例：</p>
<pre><code class="hljs javascript"><template>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>{{ normalizedFullName }}<span
class="hljs-tag"></<span class="hljs-name">p</span>></span></span>
</template>
<span class="hljs-comment">// 复杂表达式已经移入一个计算属性</span>
computed: {
<span class="hljs-attr">normalizedFullName</span>: <span class="hljs-function"><span
class="hljs-keyword">function</span> (<span
class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.fullName.split(<span
class="hljs-string">' '</span>).map(<span
class="hljs-function"><span
class="hljs-keyword">function</span> (<span
class="hljs-params">word</span>) </span>{
<span class="hljs-keyword">return</span> word[<span class="hljs-number">0</span>].toUpperCase() + word.slice(<span
class="hljs-number">1</span>)
}).join(<span class="hljs-string">' '</span>)
}
}
</code></pre>
<p>反例：</p>
<pre><code class="hljs lua"><template>
<p>
{{
fullName.split(<span class="hljs-string">' '</span>).map(<span class="hljs-function"><span
class="hljs-keyword">function</span> <span
class="hljs-params">(word)</span></span> {
<span class="hljs-keyword">return</span> word[<span class="hljs-number">0</span>].toUpperCase() + word.slice(<span
class="hljs-number">1</span>)
}).join(<span class="hljs-string">' '</span>)
}}
</p>
</template>
</code></pre>
<h4 id="213-指令都使用缩写形式">2.1.3 指令都使用缩写形式</h4>
<p>指令推荐都使用缩写形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)</p>
<p>正例：</p>
<pre><code class="hljs coffeescript"><input
@input=<span class="hljs-string">"onInput"</span>
@focus=<span class="hljs-string">"onFocus"</span>
>
</code></pre>
<p>反例：</p>
<pre><code class="hljs lua"><<span class="hljs-built_in">input</span>
v-on:<span class="hljs-built_in">input</span>=<span class="hljs-string">"onInput"</span>
@focus=<span class="hljs-string">"onFocus"</span>
>
</code></pre>
<h4 id="214-标签顺序保持一致">2.1.4 标签顺序保持一致</h4>
<p>单文件组件应该总是让标签顺序保持为 `</p>
<p>正例：</p>
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">template</span>></span>...<span
class="hljs-tag"></<span class="hljs-name">template</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span>...<span class="hljs-tag"></<span
class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">style</span>></span>...<span class="hljs-tag"></<span
class="hljs-name">style</span>></span>
</code></pre>
<p>反例：</p>
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">template</span>></span>...<span
class="hljs-tag"></<span class="hljs-name">template</span>></span>
<span class="hljs-tag"><<span class="hljs-name">style</span>></span>...<span class="hljs-tag"></<span
class="hljs-name">style</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span>...<span class="hljs-tag"></<span
class="hljs-name">script</span>></span>
</code></pre>
<h4 id="215-必须为-v-for-设置键值-key">2.1.5 必须为 v-for 设置键值 key</h4>
<h4 id="216-v-show-与-v-if-选择">2.1.6 v-show 与 v-if 选择</h4>
<p>如果运行时，需要非常频繁地切换，使用 v-show ；如果在运行时，条件很少改变，使用 v-if。</p>
<h4 id="217-script-标签内部结构顺序">2.1.7 script 标签内部结构顺序</h4>
<p>components > props > data > computed > watch > filter >
钩子函数（钩子函数按其执行顺序） > methods</p>
<h4 id="218-vue-router-规范">2.1.8 Vue Router 规范</h4>
<h5 id="1-页面跳转数据传递使用路由参数">1) 页面跳转数据传递使用路由参数</h5>
<p>页面跳转，例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，推荐使用 路由参数进行传参，而不是将需要传递的数据保存 vuex，然后在
B
页面取出 vuex 的数据，因为如果在 B 页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。</p>
<p>正例：</p>
<pre><code class="hljs objectivec">let <span
class="hljs-keyword">id</span> = <span
class="hljs-string">' 123'</span>;
<span class="hljs-keyword">this</span>.$router.push({ name: <span
class="hljs-string">'userCenter'</span>, query: { <span
class="hljs-keyword">id</span>: <span class="hljs-keyword">id</span> } });
</code></pre>
<h5 id="2-使用路由懒加载（延迟加载）机制">2) 使用路由懒加载（延迟加载）机制</h5>
<pre><code class="hljs coffeescript"> {
path: <span class="hljs-string">'/uploadAttachment'</span>,
name: <span class="hljs-string">'uploadAttachment'</span>,
meta: {
title: <span class="hljs-string">'上传附件'</span>
},
component: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span
class="hljs-keyword">import</span>(<span class="hljs-string">'@/view/components/uploadAttachment/index.vue'</span>)
},
</code></pre>
<h5 id="3-router-中的命名规范">3) router 中的命名规范</h5>
<p>path、childrenPoints 命名规范采用<code>kebab-case</code>命名规范（尽量vue文件的目录结构保持一致，因为目录、文件名都是<code>kebab-case</code>，这样很方便找到对应的文件）
</p>
<p>name 命名规范采用<code>KebabCase</code>命名规范且和component组件名保持一致！（因为要保持keep-alive特性，keep-alive按照component的name进行缓存，所以两者必须高度保持一致）
</p>
<pre><code class="hljs properties"><span class="hljs-meta">//</span> <span
class="hljs-string">动态加载</span>
<span class="hljs-attr">export</span> <span class="hljs-string">const reload = [</span>
<span class="hljs-attr">{</span>
<span class="hljs-attr">path</span>: <span class="hljs-string">'/reload',</span>
<span class="hljs-attr">name</span>: <span class="hljs-string">'reload',</span>
<span class="hljs-attr">component</span>: <span class="hljs-string">Main,</span>
<span class="hljs-attr">meta</span>: <span class="hljs-string">{</span>
<span class="hljs-attr">title</span>: <span class="hljs-string">'动态加载',</span>
<span class="hljs-attr">icon</span>: <span class="hljs-string">'icon iconfont'</span>
<span class="hljs-attr">},</span>
<span class="hljs-attr">children</span>: <span class="hljs-string">[</span>
<span class="hljs-attr">{</span>
<span class="hljs-attr">path</span>: <span class="hljs-string">'/reload/smart-reload-list',</span>
<span class="hljs-attr">name</span>: <span class="hljs-string">'SmartReloadList',</span>
<span class="hljs-attr">meta</span>: <span class="hljs-string">{</span>
<span class="hljs-attr">title</span>: <span class="hljs-string">'SmartReload',</span>
<span class="hljs-attr">childrenPoints</span>: <span class="hljs-string">[</span>
<span class="hljs-attr">{</span>
<span class="hljs-attr">title</span>: <span class="hljs-string">'查询',</span>
<span class="hljs-attr">name</span>: <span class="hljs-string">'smart-reload-search'</span>
<span class="hljs-attr">},</span>
<span class="hljs-attr">{</span>
<span class="hljs-attr">title</span>: <span class="hljs-string">'执行reload',</span>
<span class="hljs-attr">name</span>: <span class="hljs-string">'smart-reload-update'</span>
<span class="hljs-attr">},</span>
<span class="hljs-attr">{</span>
<span class="hljs-attr">title</span>: <span class="hljs-string">'查看执行结果',</span>
<span class="hljs-attr">name</span>: <span class="hljs-string">'smart-reload-result'</span>
<span class="hljs-attr">}</span>
<span class="hljs-attr">]</span>
<span class="hljs-attr">},</span>
<span class="hljs-attr">component</span>: <span class="hljs-string">() =></span>
<span class="hljs-attr">import('@/views/reload/smart-reload/smart-reload-list.vue')</span>
<span class="hljs-attr">}</span>
<span class="hljs-attr">]</span>
<span class="hljs-attr">}</span>
<span class="hljs-attr">];</span>
</code></pre>
<h5 id="4-router-中的-path-命名规范">4) router 中的 path 命名规范</h5>
<p>path除了采用<code>kebab-case</code>命名规范以外，必须以 / 开头，即使是children里的path也要以 / 开头。如下示例
</p>
<ul>
<li></li>
</ul>
<p>目的：</p>
<p>
经常有这样的场景：某个页面有问题，要立刻找到这个vue文件，如果不用以/开头，path为parent和children组成的，可能经常需要在router文件里搜索多次才能找到，而如果以/开头，则能立刻搜索到对应的组件<br>
*</p>
<pre><code class="hljs coffeescript">{
path: <span class="hljs-string">'/file'</span>,
name: <span class="hljs-string">'File'</span>,
component: Main,
meta: {
title: <span class="hljs-string">'文件服务'</span>,
icon: <span class="hljs-string">'ios-cloud-upload'</span>
},
children: [
{
path: <span class="hljs-string">'/file/file-list'</span>,
name: <span class="hljs-string">'FileList'</span>,
component: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span
class="hljs-keyword">import</span>(<span class="hljs-string">'@/views/file/file-list.vue'</span>)
},
{
path: <span class="hljs-string">'/file/file-add'</span>,
name: <span class="hljs-string">'FileAdd'</span>,
component: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span
class="hljs-keyword">import</span>(<span class="hljs-string">'@/views/file/file-add.vue'</span>)
},
{
path: <span class="hljs-string">'/file/file-update'</span>,
name: <span class="hljs-string">'FileUpdate'</span>,
component: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span
class="hljs-keyword">import</span>(<span class="hljs-string">'@/views/file/file-update.vue'</span>)
}
]
}
</code></pre>
<h3 id="二-vue-项目目录规范">(二) Vue 项目目录规范</h3>
<h4 id="221-基础">2.2.1 基础</h4>
<p>vue 项目中的所有命名一定要与后端命名统一。</p>