-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexam.html
320 lines (307 loc) · 13.2 KB
/
exam.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>JavaScript开发规范</title>
<link rel="stylesheet" href="github-markdown.css" />
<style type="text/css" media="all">
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
</style>
</head>
<body>
<article class="markdown-body"><h1 id="javascript-">JavaScript开发规范</h1>
<h2 id="1-">1. 命名规范</h2>
<h3 id="-">驼峰式命名法：</h3>
<p>驼峰式命名法由大（小）写字母开始，后续每个单词首字母都大写。
按照第一个字母是否大写，分为：</p>
<ul>
<li>Pascal Case 大驼峰式命名法：首字母大写。如：StudentInfo</li>
<li>Camel Case 小驼峰式命名法：首字母小写。如：studentInfo</li>
</ul>
<!-- more -->
<h3 id="1-1-">1.1 变量</h3>
<p>命名方法： 小驼峰式命名法
命名规范： 前缀应当是名词。（函数的名字前缀为动词，以此区分变量和函数）
命名建议：尽量在变量名字中体现所属类型，如：length、count等表示数字类型；而包含name、title表示为字符串类型。</p>
<p>示例：</p>
<pre><code class="lang-javascript">// good
var maxCount = 10;
var tableTitle = 'LoginTable';
// bad
var setCount = 10;
var getTitle = 'LoginTable';
</code></pre>
<h3 id="1-2-">1.2 函数</h3>
<p>命名方法：小驼峰式命名法
命名规范：前缀应当为动词
命名建议：可以使用常见动词约定</p>
<table>
<thead>
<tr>
<th style="text-align:left">动词</th>
<th style="text-align:left">含义</th>
<th style="text-align:left">返回值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">can</td>
<td style="text-align:left">判断是否可执行某个动作（权限）</td>
<td style="text-align:left">Boolean</td>
</tr>
<tr>
<td style="text-align:left">has</td>
<td style="text-align:left">判断是否含有某个值</td>
<td style="text-align:left">Boolean</td>
</tr>
<tr>
<td style="text-align:left">is</td>
<td style="text-align:left">判断是否为某个值</td>
<td style="text-align:left">Boolean</td>
</tr>
<tr>
<td style="text-align:left">get</td>
<td style="text-align:left">获取某个值</td>
<td style="text-align:left">NOT Boolean</td>
</tr>
<tr>
<td style="text-align:left">set</td>
<td style="text-align:left">设置某个值</td>
<td style="text-align:left">无返回值、Boolean或者返回链式对象</td>
</tr>
<tr>
<td style="text-align:left">load</td>
<td style="text-align:left">加载某些数据</td>
<td style="text-align:left">无返回值或加载状态</td>
</tr>
</tbody>
</table>
<p>示例：</p>
<pre><code class="lang-javascript">// 判断是否可读
function canRead() {
return true;
}
// 获取名字
function getName() {
return this.name;
}
</code></pre>
<h3 id="1-3-">1.3 常量</h3>
<p>命名方法：名称全部大写
命名规范：使用大写字母和下划线组合命名，下划线用以分割单词
命名建议：参照1.1</p>
<p>示例：</p>
<pre><code class="lang-javascript">var MAX_COUNT = 10;
var URL = 'http://www.lrts.me';
</code></pre>
<h3 id="1-4-">1.4 构造函数</h3>
<p>命名方法：大驼峰式命名法
命名规范：前缀为名称
命名建议：无</p>
<p>示例：</p>
<pre><code class="lang-javascript">function Student(name) {
this.name = name;
}
var student1 = new Student('Tom');
</code></pre>
<h3 id="1-5-">1.5 类的成员</h3>
<p>命名建议：</p>
<ul>
<li>公共属性和方法：跟变量和函数的命名一样</li>
<li>私有属性和方法：前缀为_（下划线），后面跟公共属性和方法一样的命名方式</li>
</ul>
<p>示例：</p>
<pre><code class="lang-javascript">function Student(name) {
// 私有属性
var _name = name;
// 公共方法
this.getName = function () {
return _name;
}
this.setName = function (value) {
_name = value;
}
}
var student1 = new Student('Tom');
student1.setName('John');
console.log(student1.getName()); // => John
</code></pre>
<h2 id="2-">2. 注释规范</h2>
<p>JavaScript支持两种不同类型的注释：单行注释和多行注释。</p>
<h3 id="2-1-">2.1 单行注释</h3>
<p>说明：单行注释以两个斜杠开始，以行尾结束
语法：<code>//</code> 这是单行注释
使用方式：</p>
<ul>
<li>单独一行：<code>// comments</code> 双斜杠与文字之间保留一个空格</li>
<li>在代码后面添加注释：<code>var MAX_COUNT = 10; // comments</code> 双斜杠与代码结尾之间保留一个空格，与注释文字之间保留一个空格。</li>
<li>注释代码：<code>// var MAX_COUNT = 10;</code> 双斜杠与代码之间保留一个空格。</li>
</ul>
<p>示例：</p>
<pre><code class="lang-javascript">// 单独一行
setCount();
var MAX_COUNT = 10; // 在代码后面添加注释
// 注释代码
// setName();
</code></pre>
<h3 id="2-2-">2.2 多行注释</h3>
<p>说明：以<code>/*</code>开头，以<code>*/</code>结尾
语法：<code>/* comments */</code>
使用方法：</p>
<ul>
<li>若<code>/*</code>和<code>*/</code>在同一行，推荐采用单行注释</li>
<li>若至少三行注释，第一行为<code>/*</code>，最后一行为<code>*/</code>，其他行以<code>*</code>开始，与注释文字之间保留一个空格，并且所有的<code>*</code>保持竖向对齐</li>
</ul>
<p>示例：</p>
<pre><code class="lang-javascript">/*
* comments line one
* comments line two
*/
setName();
</code></pre>
<h3 id="2-3-">2.3 函数（方法）注释</h3>
<p>说明：函数（方法）注释也是多行注释的一种，但是包含了特殊的注释要求。
语法：</p>
<pre><code class="lang-javascript">/**
* 函数说明
* @关键字
*/
</code></pre>
<p>常用注释关键字：（只列出一部分）</p>
<table>
<thead>
<tr>
<th style="text-align:left">注释名</th>
<th style="text-align:left">语法</th>
<th style="text-align:left">含义</th>
<th style="text-align:left">示例</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">@param</td>
<td style="text-align:left">@param 参数名 {参数类型} 描述信息</td>
<td style="text-align:left">描述参数的信息</td>
<td style="text-align:left">@param name {String} 名称</td>
</tr>
<tr>
<td style="text-align:left">@return</td>
<td style="text-align:left">@return {返回类型} 描述信息</td>
<td style="text-align:left">描述返回值的信息</td>
<td style="text-align:left">@return {String} 名称</td>
</tr>
<tr>
<td style="text-align:left">@author</td>
<td style="text-align:left">@author 作者名字 附属信息</td>
<td style="text-align:left">描述此函数或者模块的作者信息</td>
<td style="text-align:left">@author Tom 2016-10-10</td>
</tr>
<tr>
<td style="text-align:left">@version</td>
<td style="text-align:left">@version xx.xx.xx</td>
<td style="text-align:left">描述此函数或者模块的版本号</td>
<td style="text-align:left">@version 1.0.1</td>
</tr>
<tr>
<td style="text-align:left">@example</td>
<td style="text-align:left">@example 示例代码</td>
<td style="text-align:left">示例函数使用方法</td>
<td style="text-align:left">@example setName('John')</td>
</tr>
</tbody>
</table>
<p>示例：</p>
<pre><code class="lang-javascript">/**
* 合并Grid的行
* @param grid {Ext.Grid.Panel} 需要合并的Grid
* @param cols {Array} 需要合并的Index（序号）数组；从0开始计数，序号也包含
* @param isAllSome {Boolean} 是否2个tr的cols必须完全一样才能进行合并。true: 完全一样；false(默认): 不完全一样
* @return void
* @author polk6 2015/07/21
* @example
* ______________ ______________
* | 年龄 | 姓名 | | 年龄 | 姓名 |
* -------------- mergeCells(grid, [0]) --------------
* | 18 | 张三 | => | | 张三 |
* -------------- | 18 |-------
* | 18 | 王五 | | | 王五 |
* -------------- --------------
*/
function mergeCells(grid, cols, isAllSome) {
// do something
}
</code></pre>
<h2 id="3-">3. 框架开发</h2>
<p>在团队开发或者引入第三方JS的时候，有时候会造成全局对象的命名冲突，比如a.js有个全局函数sendMsg()，b.js也有个全局函数sendMsg()，引入a.js和b.js文件时，会造成sendMsg()函数冲突。</p>
<p>示例：</p>
<pre><code>全局变量冲突：b.js会覆盖a.js的同名函数 // a.js
------------------------
+----> | function sendMsg() { |
<script src="/js/b.js" type="text/javascript"></script>---+ | alert('a'); |
<script src="/js/a.js" type="text/javascript"></script>---+ | } |
<script type="text/javascript"> | ------------------------
| // b.js
sendMsg(); // => ‘b’ | -------------------------
| | function sendMsg() { |
</script> +----> | alert('b'); |
| } |
-------------------------
</code></pre><h3 id="3-2-">3.2 单全局变量</h3>
<p>所创建的全局对象名称是独一无二的，并将所有的功能代码添加到这个全局对象上。调用自己所写的代码时，以这个全局对象为入口。</p>
<p>如：</p>
<ul>
<li>jQuery的全局对象：$和jQuery</li>
<li>ExtJS的全局对象：Ext</li>
</ul>
<p>示例：</p>
<pre><code>全局变量冲突：b.js和a.js都有各自的主对象。 // a.js
-----------------------------
| var A = A || {}; |
+----> | A.sendMsg = function () { |
<script src="/js/b.js" type="text/javascript"></script>---+ | alert('a'); |
<script src="/js/a.js" type="text/javascript"></script>---+ | } |
<script type="text/javascript"> | -----------------------------
| // b.js
A.sendMsg(); // => ‘a’ | ------------------------------
| | var B = B || {}; |
| | B.sendMsg = function () { |
B.sendMsg(); // => 'b' +----> | alert('b'); |
| } |
------------------------------
</script>
</code></pre><h3 id="3-3-">3.3 命名空间</h3>
<p>在项目规模日益壮大时，可采用命名空间的方式对JS代码进行规范：即将代码按照功能进行分组，以组的形式附加到单全局对象上。</p>
<p>以Ext的chart模块为例：</p>
<pre><code> ------------
+---> | Axis |
| ------------
| ------------
+---> | Category |
子模块名称 | ------------
---------- | ------------
+---> | axis | --+---> | ... |
模块名称 | ---------- ------------
--------- | ---------- ------------
+---> | chart | --+---> | series | --+---> | Area |
单全局对象 | --------- | ---------- | ------------
--------- | | ---------- | ------------
| Ext | --+ +---> | ... | +---> | Bar |
--------- | ---------- | ------------
| --------- | ------------
+---> | ... | +---> | ... |
--------- ------------
</code></pre></article>
</body>
</html>