|
16 | 16 | - [语句结尾](#语句结尾)
|
17 | 17 | - [行的长度](#行的长度)
|
18 | 18 | - [换行](#换行)
|
| 19 | + - [空行](#空行) |
| 20 | + - [命名](#命名) |
| 21 | + + [变量和函数](#变量和函数) |
| 22 | + + [常量](#常量) |
| 23 | + + [构造函数](#构造函数) |
| 24 | + - [直接量](#直接量) |
| 25 | + + [字符串](#字符串) |
19 | 26 |
|
20 | 27 | ### 缩进层级
|
21 | 28 |
|
@@ -104,7 +111,7 @@ function getData(){
|
104 | 111 | ### 行的长度
|
105 | 112 |
|
106 | 113 | - 如果一行的内容太长,编辑窗口就会出现滚动条。这样不利于我们查看代码,也比较变扭。
|
107 |
| -我们应该规定我们一行的长度不要超过80个字符。超过80个字符应该折行。这是因为很多编辑是 |
| 114 | +我们应该规定我们一行的长度不要超过80个字符。超过80个字符应该折行。这是因为很多编辑器是 |
108 | 115 | 在80个字符以后出现滚动条
|
109 | 116 |
|
110 | 117 | [返回顶部](#编程风格)
|
@@ -148,6 +155,200 @@ callAFunction(document, element, window, "some string value", true, 123
|
148 | 155 |
|
149 | 156 | [返回顶部](#编程风格)
|
150 | 157 |
|
| 158 | +### 空行 |
| 159 | +
|
| 160 | +- 空行常常被忽略,代码看起来应该像一段一段可读的代码,而不是全部糅合在一块。拿缩进层级的例子来说 |
| 161 | +
|
| 162 | +```javascript |
| 163 | +if (wl && wl.length) { |
| 164 | + for (i = 0, 1 = wl.length; i < 1; ++i) { |
| 165 | + p = wl[i]; |
| 166 | + type = Y.Lang.type(r[p]); |
| 167 | + if (s.hasOwnProperty(p)) { |
| 168 | + if (merge && type == 'object') { |
| 169 | + Y.mix(r[p], s[p]); |
| 170 | + } else if (ov || !(p in r)) { |
| 171 | + r[p] = s[p]; |
| 172 | + } |
| 173 | + } |
| 174 | + } |
| 175 | +} |
| 176 | +``` |
| 177 | +
|
| 178 | +- 给这段代码加上空行 |
| 179 | +
|
| 180 | +```javascript |
| 181 | +if (wl && wl.length) { |
| 182 | + |
| 183 | + for (i = 0, 1 = wl.length; i < 1; ++i) { |
| 184 | + p = wl[i]; |
| 185 | + type = Y.Lang.type(r[p]); |
| 186 | + |
| 187 | + if (s.hasOwnProperty(p)) { |
| 188 | + |
| 189 | + if (merge && type == 'object') { |
| 190 | + Y.mix(r[p], s[p]); |
| 191 | + } else if (ov || !(p in r)) { |
| 192 | + r[p] = s[p]; |
| 193 | + } |
| 194 | + } |
| 195 | + } |
| 196 | +} |
| 197 | +``` |
| 198 | +
|
| 199 | +- 这样看上去能够更加流畅的阅读,一般来讲下面的场景添加空行是不错的注意 |
| 200 | + + 在方法之间。 |
| 201 | + + 在方法中的局部变量和第一条语句之间。 |
| 202 | + + 在多行或则单行注释之前。 |
| 203 | + + 在方法的逻辑片段之间插入空行,提高可读性。 |
| 204 | +
|
| 205 | +[返回顶部](#编程风格) |
| 206 | +
|
| 207 | +
|
| 208 | +### 命名 |
| 209 | +
|
| 210 | +- JavaScript语言核心是EXMAScript,遵照了驼峰式大小写命名法(这个太有名了我就不解释了) |
| 211 | +- 一般是遵循语言核心所采用的命名规范,因此大部分JavaScript程序员使用驼峰命名法给变量和函数命名。 |
| 212 | +
|
| 213 | +
|
| 214 | +
|
| 215 | +[返回顶部](#编程风格) |
| 216 | +
|
| 217 | +#### 变量和函数 |
| 218 | +
|
| 219 | +- 变量的命名前缀应该是名词,这能后和函数的命名规则区分开,函数应该以动词来做前缀。 |
| 220 | +
|
| 221 | +```javascript |
| 222 | +// 好的写法 |
| 223 | +var count = 10; |
| 224 | +var myName = "Nicholas"; |
| 225 | +var found = true; |
| 226 | + |
| 227 | +// 不好的写法: 变量看起来像函数 |
| 228 | +var getCount = 10; |
| 229 | +var isFound = true; |
| 230 | + |
| 231 | +// 好的写法 |
| 232 | +function getName() { |
| 233 | + return myName; |
| 234 | +} |
| 235 | + |
| 236 | +// 不好的写法 |
| 237 | +function theName() { |
| 238 | + return myName; |
| 239 | +} |
| 240 | + |
| 241 | +``` |
| 242 | +
|
| 243 | +- 命名应该要尽量短小精干,例如,count,length和size一看就知道是数字类型,name,title,和message一看就知道是字符串类型 |
| 244 | +- i,j,k通常在循环处理中使用。 |
| 245 | +- 要经量避免写无意义的命名。 |
| 246 | +
|
| 247 | +- 对于方法的命名,第一个单词应该是动词。下面是一些常见的约定 |
| 248 | +
|
| 249 | +动词 | 含义 |
| 250 | +-|- |
| 251 | +can | 函数返回一个布尔值 |
| 252 | +has | 函数返回一个布尔值 |
| 253 | +is | 函数返回一个布尔值 |
| 254 | +get | 函数返回一个非布尔值 |
| 255 | +set | 函数用来保存一个值 |
| 256 | +
|
| 257 | +- 按照上面的写法,可读性会很好 |
| 258 | +
|
| 259 | +```javascript |
| 260 | + |
| 261 | +if (isEnabled()) { |
| 262 | + setName("Shenxf"); |
| 263 | +} |
| 264 | + |
| 265 | +if (getName() === "shenxf") { |
| 266 | + doSomething(); |
| 267 | +} |
| 268 | +``` |
| 269 | +
|
| 270 | +[返回顶部](#编程风格) |
| 271 | +
|
| 272 | +#### 常量 |
| 273 | +
|
| 274 | +- 在ECMAScript6之前,JavaScript没有真正常量的概念。为了区分普通的变量和常量, |
| 275 | +用类似于C语言方法来命名,用大写字母和下划线来命名,下划线是用来分隔单词的。 |
| 276 | +
|
| 277 | +```javascript |
| 278 | +var MAX_COUNT = 10; |
| 279 | +var URL = "http://shenxf.top"; |
| 280 | +``` |
| 281 | +
|
| 282 | +- 来看一下代码 |
| 283 | +
|
| 284 | +```javascript |
| 285 | +if (count < MAX_COUNT) { |
| 286 | + doSomething(); |
| 287 | +} |
| 288 | +``` |
| 289 | +
|
| 290 | +[返回顶部](#编程风格) |
| 291 | +
|
| 292 | +#### 构造函数 |
| 293 | +
|
| 294 | +- 够着函数遵照大驼峰命名法。主要是为了和函数与变量的命名法进行区分。 |
| 295 | +
|
| 296 | +```javascript |
| 297 | +// 好的做法 |
| 298 | +function Person(name) { |
| 299 | + this.name = name; |
| 300 | +} |
| 301 | + |
| 302 | +Person.prototype.sayName = function() { |
| 303 | + alert(this.name); |
| 304 | +} |
| 305 | + |
| 306 | +var me = new Person("shenxf"); |
| 307 | +``` |
| 308 | +
|
| 309 | +- 这样写可以快速的发现问题,看一下下面的代码 |
| 310 | +
|
| 311 | +```javascript |
| 312 | +var me = Person("shenxf"); // 这里缺少了new |
| 313 | +var you = getPerson("xx"); |
| 314 | +``` |
| 315 | +
|
| 316 | +[返回顶部](#编程风格) |
| 317 | +
|
| 318 | +### 直接量 |
| 319 | +
|
| 320 | +- JavaScript里面的原始值包括:字符串、数字、布尔值、null和undefined。也包含对象和数组的直接量。 |
| 321 | +- 其中只有布尔值是自解释的,其他的多少要考虑下如何能准确地表达其中的含义。 |
| 322 | +
|
| 323 | +[返回顶部](#编程风格) |
| 324 | +
|
| 325 | +#### 字符串 |
| 326 | +
|
| 327 | +- 这里原书的作者提出可以用双引号和单引号。 |
| 328 | +
|
| 329 | +```javascript |
| 330 | +// 下面都是合法的javascript代码 |
| 331 | +var name = "shenxf says, \"Hi.\""; |
| 332 | +var name = 'shenxf says, "Hi."'; |
| 333 | +``` |
| 334 | +
|
| 335 | +- 书的作者经常使用Java,Java是用双引号来表示字符串。所以作者推荐使用双引号,因为可以和Java语言保持一致。 |
| 336 | +- 我个人推荐使用单引号,本人之前使用的很多编码规范插件都是以单引号来声明变量的。我已经习惯了,所以我推荐使用单引号。 |
| 337 | +
|
| 338 | +- 当字符串换行的时候,应该使用运算符来连接。 |
| 339 | +
|
| 340 | +```javascript |
| 341 | +// 不好的写法 |
| 342 | +var longString = "Here's the story, of a man \ |
| 343 | +named Brady."; |
| 344 | + |
| 345 | +// 好的写法 |
| 346 | +var longString = "Here's the story, of a man" + |
| 347 | + "named Brady."; |
| 348 | +``` |
| 349 | +
|
| 350 | +
|
| 351 | +[返回顶部](#编程风格) |
151 | 352 |
|
152 | 353 | ## 补足
|
153 | 354 |
|
|
0 commit comments