├── README.md ├── html ├── 前端工程师纳米学位样式指南 - CSS.html ├── 前端工程师纳米学位样式指南 - Git.html ├── 前端工程师纳米学位样式指南 - HTML.html └── 前端工程师纳米学位样式指南 - JavaScript.html ├── udacity-git-keyterms.pdf ├── 前端工程师纳米学位样式指南 - CSS.md ├── 前端工程师纳米学位样式指南 - Git.md ├── 前端工程师纳米学位样式指南 - HTML.md └── 前端工程师纳米学位样式指南 - JavaScript.md /README.md: -------------------------------------------------------------------------------- 1 | 2 | # 优达学城（Udacity）前端样式指南 3 | 4 | 5 | - [HTML 样式指南](https://udacity.github.io/frontend-nanodegree-styleguide-zh/html/前端工程师纳米学位样式指南%20-%20HTML.html) 6 | - [CSS 样式指南](https://udacity.github.io/frontend-nanodegree-styleguide-zh/html/前端工程师纳米学位样式指南%20-%20CSS.html) 7 | - [JavaScript 样式指南](https://udacity.github.io/frontend-nanodegree-styleguide-zh/html/前端工程师纳米学位样式指南%20-%20JavaScript.html) 8 | - [Git 样式指南](https://udacity.github.io/frontend-nanodegree-styleguide-zh/html/前端工程师纳米学位样式指南%20-%20Git.html) 9 | 10 | 样式指南英文版：[在此查看](https://udacity.github.io/frontend-nanodegree-styleguide/) 11 | 12 | 13 | # Archival Note 14 | This repository is deprecated; therefore, we are going to archive it. However, learners will be able to fork it to their personal Github account but cannot submit PRs to this repository. If you have any issues or suggestions to make, feel free to: 15 | - Utilize the https://knowledge.udacity.com/ forum to seek help on content-specific issues. 16 | - Submit a support ticket along with the link to your forked repository if (learners are) blocked for other reasons. Here are the links for the [retail consumers](https://udacity.zendesk.com/hc/en-us/requests/new) and [enterprise learners](https://udacityenterprise.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000279131). -------------------------------------------------------------------------------- /html/前端工程师纳米学位样式指南 - CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 前端工程师纳米学位样式指南 - CSS 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 263 | 264 | 265 |

266 |

前端工程师纳米学位样式指南 - CSS

267 | 268 |

点此查看文档英文版（pdf，GitHub.io）

269 |

零. 简介

270 | 271 |

该指南是你在项目进行过程中所需遵守的官方指南。优达学城的评估人员会根据该指南为你的项目打分。在前端网页开发的世界中，有很"最佳"样式供你选择。因此，为了减少学生在项目过程中因选择何种样式所产生的困惑，我们强烈建议所有学生在其项目中遵循这个样式指南。

272 |

一. 通用规则

273 | 274 |

1.1 编码

275 | 276 |

使用 UTF-8 。

277 |

确保你的编辑器将没有字节顺序标记的 UTF-8 用作字符编码。

278 |

1.2 字母大小写

279 | 280 |

仅使用小写。

281 |

所有代码均使用小写，该规则适用于 CSS 选择符、属性和属性值（字符串除外）。

282 |

不推荐：

283 |

color: #E5E5E5;
284 |

推荐：

285 |

color: #e5e5e5;
286 |

1.3 末尾空格

287 | 288 |

删除行尾空格。

289 |

行尾空格属于多余的符号，并且会让 diff 变得更加复杂。

290 |

不推荐：

291 |

border: 0;__
292 |

推荐：

293 |

border: 0;
294 |

如果你使用 VS Code，你可进入编辑器菜单的「首选项——>设置」中搜索 files.trimTrailingWhitespace ，然后将选项勾选即可，这样每当你保存文件时，去除行尾空格操作便会自动完成：

295 |

"files.trimTrailingWhitespace": true
296 |

1.4 缩进

297 | 298 |

整个文件中的缩进应保持前后一致，使用 Tab、2个空格或4个空格都可以，但需保持前后一致。

299 |

1.5 注释

300 | 301 |

在可行和必要时，对代码添加注释。

302 |

用注释解释代码的覆盖范围、目的和作用以及使用和选择各解决方案的原因。

303 |

1.6 区块注释

304 | 305 |

在可行时，用注释将样式表区块组合在一起，用新行分隔各区块。

306 |

推荐：

307 |

/* Header */
308 | .header {
309 |    …
310 | }
311 | 
312 | .header-nav {
313 |    …
314 | }
315 | 
316 | /* Content */
317 | .gallery {
318 |    …
319 | }
320 | 
321 | .gallery-img {
322 |    …
323 | }
324 | 
325 | /* Footer */
326 | .footer {
327 |    …
328 | }
329 | 
330 | .footer-nav {
331 |    …
332 | }
333 |

1.7 待办任务

334 | 335 |

用 TODO: 标注待办事项和任务项：

336 |

仅用关键词 TODO 标注待办事项，不要使用 @@ 等其他格式的字样。在任务项前加冒号，如：TODO: 待办任务 。

337 |

推荐：

338 |

/* TODO: 添加一个按钮元素 */
339 |

二. CSS 样式规则

340 | 341 |

2.1 ID 和 CLASS 名称

342 | 343 |

使用有意义或具有普遍性的 ID 和类名称。

344 |

不可使用意义含糊的 ID 和类名称，使用能够反映相应元素意义的名称或具有普遍性的通用名。

345 |

最好使用能够反映相应元素意义的具体名称，因为这些名称最易于理解且不易变更。

346 |

具有普遍性的通用名被用于与类似元素意义相仿的元素，主要起辅助作用。

347 |

不推荐：

348 |

.p-998 {
349 |    …
350 | }
351 | 
352 | .btn-green {
353 |    …
354 | }
355 |

2.2 类型选择符

364 | 365 |

避免用类型选择器限定 ID 和类名称。

366 |

除非情况需要（例如，在辅助类型中），否则不要将元素名和 ID 或类名称同时使用。为提高性能，避免使用不必要的祖先选择符。

367 |

在 CSS 文件中使用 ID 也是较糟糕的做法，类别始终比名称更具优势，如果你需要给予某元素一个特殊的名称，请使用类别。（ ID 的唯一优点是在存在数千个类似元素的页面上能保持较快的运行速度。）

368 |

不推荐：

369 |

ul#example {
370 |    …
371 | }
372 | 
373 | div.error {
374 |    …
375 | }
376 |

推荐：

377 |

.example {
378 |    …
379 | }
380 | 
381 | .error {
382 |    …
383 | }
384 |

2.3 简写属性

385 | 386 |

应使用简写。

387 |

CSS 可提供多种简写属性（例如，padding，而不是 padding-top、padding-bottom 等），应尽可能使用这些简写，但字体属性和在 Bootstrap 等框架中会覆盖其他同名属性的属性除外。

388 |

使用简写属性有助于提高代码的效率和易懂性。推荐在设置仅与字体 font 相关的属性时使用字体简写属性，但无需在进行小幅改动时使用。在使用字体简写属性时，请注意，如果未注明字体的大小和系列，浏览器会忽略整个字体声明。

389 |

不推荐：

390 |

border-top-style: none;
391 | font-family: palatino, georgia, serif;
392 | font-size: 100%;
393 | line-height: 1.6;
394 | padding-bottom: 2em;
395 | padding-left: 1em;
396 | padding-right: 1em;
397 | padding-top: 0;
398 |

推荐：

399 |

border-top: 0;
400 | font: 100%/1.6 palatino, georgia, serif;
401 | padding: 0 1em 2em;
402 |

2.4 省略0后面的单位

403 | 404 |

去掉 0 值后面的单位。

405 |

不推荐：

406 |

margin: 0em;
407 | padding: 0px;
408 |

推荐：

409 |

margin: 0;
410 | padding: 0;
411 |

2.5 前导零

412 | 413 |

为方便阅读，十进制值中含有前导零。

414 |

不推荐：

415 |

font-size: .8em;
416 |

推荐：

417 |

font-size: 0.8em;
418 |

2.6 十六进制表示法

419 | 420 |

在可行时，使用三个十六进制表示法的字符。

421 |

不推荐：

422 |

color: #eebbcc;
423 |

推荐：

424 |

color: #ebc;
425 |

2.7 ID 和 CLASS 名称分隔符

426 | 427 |

用连字符分隔 ID 和类名称中的字词 -。

428 |

用连字符连接选择符中的词语和缩略词，以方便理解和扫描。

429 |

唯一的例外：在编写 BEM 样式 CSS 选择符时也可以使用下划线 _ 。

430 |

不推荐：

431 |

.demoimage {
432 |    …
433 | }
434 | 
435 | .errorStatus {
436 |    …
437 | }
438 |

推荐：

439 |

.demo-image {
440 |    …
441 | }
442 | 
443 | .error-status {
444 |    …
445 | }
446 |

2.8 Hack

447 | 448 |

避免用户代理检测或 CSS Hack ——尝试另一种方法。

449 |

人们可能很想处理用户代理检测或特殊的 CSS 过滤器以及应变方案和非法入侵之间的样式差异。这两项措施均为实现和维护有效和可处理的代码库的最后方案。请考虑该样式是否对应用的性能至关重要，需要该样式的用户代理是否可以不采样该样式。

450 |

三. CSS 格式规则

451 | 452 |

3.1 代码块内容缩进

453 | 454 |

缩进所有代码块内容，即规则内的规则和声明，以反映层次结构、方便理解。

455 |

3.2 声明标点

463 | 464 |

在所有声明后使用分号，以增加连贯性和延展性。

465 |

不推荐：

466 |

.test {
467 |    display: block;
468 |    height: 100px
469 | }
470 |

推荐：

471 |

.test {
472 |    display: block;
473 |    height: 100px;
474 | }
475 |

3.3 属性名标点

476 | 477 |

所有属性名冒号后均需添加空格，但属性和冒号间不加空格，以增加连贯性。

478 |

不推荐：

479 |

font-weight:bold;
480 | padding : 0;
481 | margin :0;
482 |

推荐：

483 |

font-weight: bold;
484 | padding: 0;
485 | margin: 0;
486 |

3.4 声明区标点

487 | 488 |

最后一个选择符和声明区起始处的左大括号之间需加空格。

489 |

不推荐：

490 |

.video-block{
491 |    margin: 0;
492 | }
493 | 
494 | .audio-block{
495 |    margin: 0;
496 | }
497 |

推荐：

498 |

.video-block {
499 |    margin: 0;
500 | }
501 | 
502 | .audio-block {
503 |    margin: 0;
504 | }
505 |

3.5 选择符和声明分隔

506 | 507 |

所有选择符和声明均需另起一行。

508 |

不推荐：

509 |

h1, h2, h3 {
510 |    font-weight: normal;
511 |    line-height: 1.2;
512 | }
513 |

推荐：

514 |

h1,
515 | h2,
516 | h3 {
517 |    font-weight: normal;
518 |    line-height: 1.2;
519 | }
520 |

3.6 规则分隔

521 | 522 |

所有规则间均需加一个空行（两个换行符）。

523 |

推荐：

524 |

html {
525 |    background: #fff;
526 | }
527 | 
528 | body {
529 |    margin: auto;
530 |    width: 50%;
531 | }
532 |

3.7 CSS 引号

533 | 534 |

属性选择符和属性值均需使用双引号，链接值 url() 中不可使用双引号。

535 |

不推荐：

536 |

@import url("css/links.css");
537 | html {
538 |    font-family: 'Open Sans', arial, sans-serif;
539 | }
540 |

推荐：

541 |

@import url(css/links.css);
542 | html {
543 |    font-family: "Open Sans", arial, sans-serif;
544 | }
545 |

546 |

547 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 610 | 611 | 612 | -------------------------------------------------------------------------------- /html/前端工程师纳米学位样式指南 - Git.html: -------------------------------------------------------------------------------- 1 | 2 | 前端工程师纳米学位样式指南 - Git 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 263 | 264 | 265 |

266 |

Git 提交信息样式指南

267 | 268 |

点此查看文档英文版（pdf，GitHub.io）

269 |

零. 简介

270 | 271 |

该指南是你在项目进行过程中所需遵守的官方指南。优达学城的评估人员会根据该指南为你的项目打分。在前端网页开发的世界中，有很“最佳”样式供你选择。因此，为了减少学生在项目过程中因选择何种样式所产生的困惑，我们强烈建议所有学生在其项目中遵循这个样式指南。

272 |

一. 提交信息

273 | 274 |

1.1 信息结构

275 | 276 |

提交信息由三个不同的部分构成，这些部分均由空行分隔：标题、可选的消息体和可选的注释。其布局大致如此：

277 |

类型：主题
278 | 消息正文
279 | 注释
280 |

标题由消息类型和主题构成。

281 |

1.2 类型

282 | 283 |

类型位于在标题内，有以下几种可能：

284 |

feature：新功能
fix：错误修复
docs：文档修改
style：格式、分号缺失等，代码无变动
refactor：生产代码重构
test：测试添加、测试重构等，生产代码无变动
chore：构建任务更新、程序包管理器配置等，生产代码无变动。

293 |

1.3 标题

294 | 295 |

主题不得超过50个字符，首字母大写，末尾不加句号。
296 | 以祈使语气描述提交的任务，而不是其已完成的任务。例如，使用 change...，而不是 changed 或 changes 。

297 |

1.4 信息正文

298 | 299 |

并不是所有的提交信息都复杂到需要主体，因此这是可选内容，仅在提交信息需要一定的解释和语境时使用。消息体是用于解释提交任务的内容和原因，而不是方法。

300 |

在编写正文时，需要在标题和正文间加一个空行，且每行的内容应控制在72个字符内。

301 |

1.5 注释

302 | 303 |

注释是可选内容，用于引用问题跟踪的 ID 。

304 |

1.6 提交信息示例

305 | 306 |

Feature: 总结变动的内容，保持在50个字符内
307 | 
308 | 如有需要，使用更详细的说明性文字，将其大概控制在72个字符。在部分语境中，第一行被视为提交信息的主题，余下的文本被视为主体。分隔总结与主体的空行十分重要（除非你完全忽略主体）；否则`log`、`shortlog`和`rebase`等多个工具容易发生混淆。
309 | 解释该提交信息所解决的问题，说明你进行该变动的原因，而不是方法（代码本身可以解释方法）。
310 | 该变动是否存在副作用或其他直觉性后果？在这里进行解释。
311 | 
312 | 后续段落前需加空行。
313 | 可以列出要点
314 | - 通常情况下，要点会使用空格加上连字符或星号，中间用空行分隔，但该规定存在差别。
315 | 
316 | 如果你使用问题追踪，将其引用放在末尾，例如：
317 | 解决了问题：#123
318 | 另见：#456, #789
319 |

320 |

321 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 360 | 361 | 362 | -------------------------------------------------------------------------------- /html/前端工程师纳米学位样式指南 - HTML.html: -------------------------------------------------------------------------------- 1 | 2 | 前端工程师纳米学位样式指南 - HTML 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 263 | 264 | 265 |

266 |

前端工程师纳米学位样式指南 - HTML

267 | 268 |

点此查看文档英文版（pdf，GitHub.io）

269 |

零. 简介

270 | 271 |

272 |

一. 通用规则

273 | 274 |

1.1 编码

275 | 276 |

使用 UTF-8 。

277 |

确保你的编辑器将没有字节顺序标记的 UTF-8 用作字符编码。在 HTML 模板中设置编码并用 <meta charset="utf-8"> 记录。

278 |

1.2 字母大小写

279 | 280 |

仅使用小写。

281 |

所有代码均使用小写，该规则适用于 HTML 元素名、属性和属性值（文本/ CDATA 除外）。

282 |

不推荐：

283 |

<A HREF="/" class="HOME">主页</A>
284 |

推荐：

285 |

<a href="/" class="home">主页</a>
286 |

1.3 末尾空格

287 | 288 |

删除行尾空格。

289 |

行尾空格属于多余的符号，并且会让 diff 变得更加复杂。

290 |

不推荐：

291 |

<p>什么?</p>__
292 |

推荐：

293 |

<p>一往情深深几许？深山夕照深秋雨。</p>
294 |

295 |

"files.trimTrailingWhitespace": true
296 |

1.4 缩进

297 | 298 |

整个文件中的缩进应保持前后一致，使用 Tab、2个空格或4个空格都可以，但需保持前后一致。

299 |

1.5 注释

300 | 301 |

在可行和必要时，对代码进行注释。

302 |

用注释解释代码的覆盖范围、目的和作用以及使用和选择各解决方案的原因。

303 |

1.6 待办任务

304 | 305 |

用 TODO: 标注待办事项和任务项

306 |

仅用关键词 TODO 标注待办事项，不要使用 @@ 等其他格式的字样。在任务项前加冒号，如： TODO: 待办任务

307 |

推荐：

308 |

<!-- TODO: 对出下联 -->
309 | <ul>
310 |    <li>风吹云，云随风，风云变幻</li>
311 | </ul>
312 |

二. HTML 样式规则

313 | 314 |

2.1 文件类型

315 | 316 |

使用 HTML5 。

317 |

所有 HTML 文件均应使用 HTML5 （ HTML 语法）： <!DOCTYPE html>

318 |

不要结束自结束元素，即编写 <br> ，而不是 <br />。

319 |

2.2 语义

320 | 321 |

根据目的使用 HTML 。

322 |

根据元素的预期作用使用元素。例如，针对标题使用标题元素，针对段落使用 p 元素，针对锚点使用 a 元素等。根据目的使用 HTML 对提高可访问性、再利用程度和代码效率十分重要。

323 |

不推荐：

324 |

<div onclick="goToRecommendations();">All recommendations</div>
325 |

推荐：

326 |

<a href="recommendations/">All recommendations</a>
327 |

2.3 多媒体应变计划

328 | 329 |

为多媒体设置备用内容。

330 |

确保为图片、视频或通过画布呈现的动画对象等多媒体提供其他访问方式。对于图片而言，使用有意义的 Alt 文本。对于视频，使用音频转述资料和字幕（如有）。

331 |

为方便访问，需提供备用内容，若没有 alt 属性，盲人用户将难以辨别图片的内容，其他用户也可能无法理解视频或音频的内容。

332 |

针对具有会引入冗余的 alt 属性的图片和无法立即使用 CSS 的装饰性图片，使用空备用内容，即 alt="" 。

333 |

不推荐：

334 |

<img src="udacity.png">
335 |

推荐：

336 |

<img src="udacity.png" alt="Udacity logo">
337 |

2.4 关注点分离

338 | 339 |

将结构、描述和行为相互分离。

340 |

将结构（标记）、描述（样式）和行为（脚本设计）严格分开，将三者间可能发生的相互作用降至最低。

341 |

也就是说，确保文件和模板仅含有只用于结构目的 HTML 。将所有描述性事物移至样式表，将所有行为性事物移至脚本。此外，尽可能少地连接文件和模板中的样式表和脚本，以便使接触面积最小化。

342 |

将结构、描述和行为相互分离对维护十分重要。相比对样式表和脚本进行更新，更改 HTML 文件和模板的成本往往更高。

343 |

不推荐：

344 |

<!DOCTYPE html>
345 | <html lang="en">
346 | <head>
347 |    <meta charset="UTF-8">
348 |    <meta name="viewport" content="width=device-width, initial-scale=1.0">
349 |    <meta http-equiv="X-UA-Compatible" content="ie=edge">
350 |    <title>Document</title>
351 |    <style>
352 |    /*
353 |       此处省略 n 行样式
354 |    */
355 |    </style>
356 | </head>
357 | <body>
358 |    <script>
359 |    // 此处省略 n 行脚本
360 |    </script>
361 | </body>
362 | </html>
363 |

推荐：

364 |

<!DOCTYPE html>
365 | <html lang="en">
366 | <head>
367 |    <meta charset="UTF-8">
368 |    <meta name="viewport" content="width=device-width, initial-scale=1.0">
369 |    <title>Document</title>
370 |    <link rel="stylesheet" href="style.css">
371 | </head>
372 | <body>
373 |    <script src="js/app.js"></script>
374 | </body>
375 | </html>
376 |

2.5 类型属性

377 | 378 |

忽略样式表和脚本的 type 属性。

379 |

不要针对样式表和脚本使用 type 属性。因为 HTML 已经默认设置了 text/css 和 text/javascript ，所以在此类语境中无需设置 type 属性。

380 |

在老式浏览器中，也可以安全进行此项操作。

381 |

不推荐：

382 |

<link rel="stylesheet" type="text/css" href="css/style.css">
383 | <script src="js/app.js" type="text/javascript"></script>
384 |

推荐：

385 |

<link rel="stylesheet" href="css/style.css">
386 | <script src="js/app.js"></script>
387 |

三. HTML 格式规则

388 | 389 |

3.1 一般格式

390 | 391 |

所有代码块、列表和表元素均需另起一行，所有子元素均需缩进。

392 |

每一个代码块、列表和表元素均需另起一行，与元素的样式相独立（因为 CSS 允许元素在每一个显示属性中担任不同的角色）。

393 |

此外，代码块、列表和表元素的子元素也需进行缩进（如果你遇到列表项间存在空白的问题，可以将所有 li 元素放置在一行）。

394 |

推荐:

395 |

<blockquote>
396 |    <p>啊！<em>船长！</em>我的船长！</p>
397 | </blockquote>
398 | <ul>
399 |    <li>啊．船长，我的船长！我们艰苦的航程已经终结，</li>
400 |    <li>这只船安然渡过了一切风浪，我们寻求的奖赏已经获得。</li>
401 |    <li>港口在望，我听见钟声在响，人们都在欢呼，</li>
402 |    <li>目迎着我们的船从容返航，它显得威严而英武。</li>
403 |    <li>可是，啊，心啊！心啊！心啊！</li>
404 |    <li>啊．殷红的鲜血长流，</li>
405 |    <li>在甲板上，那里躺着我的船长，</li>
406 |    <li>他已倒下，已死去，已冷却。</li>
407 |    <li>啊，船长，我的船长！起来吧，起来听听这钟声，</li>
408 |    <li>起来，——旌旗正为你招展——军号正为你发出颤音。</li>
409 |    <li>为你．送来了这些花束和花环。</li>
410 |    <li>为你，熙攘的群众在呼唤，转动着多少殷切的脸。</li>
411 |    <li>这里，船长！亲爱的父亲！</li>
412 |    <li>你头颅下边是我的手臂！</li>
413 |    <li>在甲板上像是在一场梦里，</li>
414 |    <li>你已倒下，已死去，已冷却。</li>
415 |    <li>我们的船长不作回答，他的双唇惨白而寂静，</li>
416 |    <li>我的父亲不能感觉我的手臂，他已没有脉息、没有知觉，</li>
417 |    <li>我们的船已安全抛锚碇泊，已经结束了它的航程，</li>
418 |    <li>胜利的船从险恶的旅途归来，我们寻求的已赢得手中。</li>
419 |    <li>欢呼吧，啊，海岸！轰鸣，啊，洪钟！</li>
420 |    <li>可是，我却轻移悲伤的步履，</li>
421 |    <li>在甲板上，那里躺着我的船长，</li>
422 |    <li>他已倒下，已死去，已冷却。</li>
423 | </ul>
424 | <table>
425 |    <thead>
426 |       <tr>
427 |          <th scope="col">姓名</th>
428 |          <th scope="col">职业</th>
429 |       </tr>
430 |    </thead>
431 |    <tbody>
432 |       <tr>
433 |          <td>瓦尔特·惠特曼</td>
434 |          <td>诗人</td>
435 |       </tr>
436 |    </tbody>
437 | </table>
438 |

3.2 HTML 引号

439 | 440 |

在引用属性值时，使用双引号。

441 |

不推荐：

442 |

<a href='login/' class='btn btn-secondary'>登录</a>
443 |

推荐：

444 |

<a href="login/" class="btn btn-secondary">登录</a>
445 |

446 |

447 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 501 | 502 | 503 | -------------------------------------------------------------------------------- /html/前端工程师纳米学位样式指南 - JavaScript.html: -------------------------------------------------------------------------------- 1 | 2 | 前端工程师纳米学位样式指南 - JavaScript 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 263 | 264 | 265 |

266 |

前端工程师纳米学位样式指南 - JavaScript

267 | 268 |

点此查看文档英文版（pdf，GitHub.io）

269 |

零. 简介

270 | 271 |

272 |

一. 通用规则

273 | 274 |

1.1 编码

275 | 276 |

使用 UTF-8（无 BOM）。

277 |

确保你的编辑器将没有字节顺序标记的 UTF-8 用作字符编码。

278 |

1.2 末尾空白

279 | 280 |

删除行尾空格。

281 |

行尾空格属于多余的符号，并且会让 diff 变得更加复杂。

282 |

不推荐：

283 |

const name = "John Smith";__
284 |

推荐：

285 |

const name = "John Smith";
286 |

287 |

"files.trimTrailingWhitespace": true
288 |

1.3 缩进

289 | 290 |

整个文件中的缩进应保持前后一致，使用 Tab、2个空格或4个空格都可以，但需保持前后一致。

291 |

1.4 注释

292 | 293 |

用注释解释代码的覆盖范围、目的和作用以及使用和选择各解决方案的原因。

294 |

你可以选择使用 JSDoc，即编写代码注释的文件生成器和标准，对你的 JavaScript 功能进行记录，其优点包括为你的注释提供技术参照和能够针对文件生成网页的命令行 jsdoc 工具。 JSDoc 会为你提供记录代码的多种注释，但我们只推荐你使用以下种类：

295 |

@constructor：用于记录一个 Class 类，也就是用 new 关键字调用的函数。
@description：用于描述你的函数，该标签还可以使你在需要时添加 HTML 标记。
@param：用于描述函数参数的名称、类别和说明。
@returns：记录函数返回值的类型和说明。

301 |

下方实例说明了如何记录类构造函数（注意注释区开头使用的 /** ，这个非常重要）：

302 |

/**
303 | * @description 简要描述这本书
304 | * @constructor
305 | * @param {string} title - 书的标题
306 | * @param {string} author - 书的作者
307 | */
308 | 
309 | function Book(title, author) {
310 |    ...
311 | }
312 |

以下函数含有能返回值的参数，注意，这里的参数作用一目了然，因此并未对其进行说明。

313 |

/**
314 | * @description 计算两数相加
315 | * @param {number} a
316 | * @param {number} b
317 | * @returns {number} 数字 a 与 b 的和
318 | */
319 | 
320 | function sum(a, b) {
321 |    return a + b;
322 | }
323 |

你也可以使用更多你想要编写的注释。

324 |

1.5 待办任务

325 | 326 |

用 TODO: 标注待办事项和任务项

327 |

仅用关键词 TODO 标注待办事项，不要使用 @@ 等其他格式的字样。在任务项前加冒号，如： TODO: 待办任务

328 |

推荐：

329 |

// TODO: 加些其他的需求
330 |

二. JavaScript 语言规则

331 | 332 |

2.1 变量

333 | 334 |

在 JavaScript 里一共有三种定义变量的方式：

335 |

const
let
var

340 |

当定义变量的时候，你应该使用上面列出的关键字来定义变量。优先考虑使用 const 定义你的变量，如果觉得以后需要对变量重新赋值的，则使用 let。现在已经不推荐使用 var 关键字来定义变量了。

341 |

2.2 分号

342 | 343 |

始终使用分号。

344 |

依靠隐式插入会造成难以排除的细微问题。分号应放在函数表达式的末尾，而不是函数声明的末尾。

345 |

不推荐：

346 |

const foo = function() {
347 |    return true // 缺少分号
348 | } // 缺少分号
349 | function foo() {
350 |    return true;
351 | }; // 额外的分号
352 |

推荐：

353 |

const foo = function() {
354 |    return true;
355 | };
356 | function foo() {
357 |    return true;
358 | }
359 |

2.3 基本类型包装对象

360 | 361 |

基本类型无需使用包装对象，此外，包装对象还具有潜在危险，但可以使用类型转换。

362 |

不推荐：

363 |

const x = new Boolean(0);
364 | if (x) {
365 |    alert('hi');	// 如果 x 是一个真实对象，则显示 hi
366 | }
367 |

推荐：

368 |

const x = Boolean(false);
369 | if (x) {
370 |    alert('hi');	// 如果 x 是一个否定的布尔值，则显示 hi
371 | }
372 |

2.4 闭包

373 | 374 |

进行该操作时要小心谨慎。创建闭包的能力可能是 JavaScript 中最有用但最常被忽略的能力。需要记住的是，闭包会储存对其封闭范围的指针，因此，将 DOM 元素与闭包相连会生成循环引用，从而导致内存的泄露。

375 |

不推荐：

376 |

function foo(element, a, b) {
377 |    element.onclick = function() { /* 使用 a 和 b */ }
378 | }
379 |

推荐：

380 |

function foo(element, a, b) {
381 |    element.onclick = bar(a, b);
382 | }
383 | function bar(a, b) {
384 |    return function() { /* 使用 a 和 b */ }
385 | }
386 |

2.5 for 、for-in 和 forEach

387 | 388 |

2.6 数组

389 | 390 |

在迭代数组时，相比 for-in 循环， forEach 或 for 循环更具优势。

391 |

不推荐：

392 |

const myArray = ['a', 1, 'etc'];
393 | for (const indexNum in myArray) {
394 |    console.log(myArray[indexNum]);
395 | }
396 | const starWars = {
397 |    "creatures": [
398 |       {
399 |          "name": "bantha",
400 |          "face": "furry"
401 |       },
402 |       {
403 |          "name": "loth-cat",
404 |          "face": "toothy"
405 |       }
406 |    ]
407 | };
408 | for (const i in starWars.creatures) {
409 |    console.log(starWars.creatures[i].name);
410 |    console.log(starWars.creatures[i].face);
411 | };
412 |

推荐：

413 |

const mySimpleArray = ['a', 1, 'etc'];
414 | const mySimpleArray.forEach(function(val) {
415 |    console.log(val);
416 | });
417 | const starWars = {
418 |    "creatures": [
419 |       {
420 |          "name": "bantha",
421 |          "face": "furry"
422 |       },
423 |       {
424 |          "name": "loth-cat",
425 |          "face": "toothy"
426 |       }
427 |    ]
428 | };
429 | starWars.creatures.forEach(function(creature){
430 |    console.log(creature.name);
431 |    console.log(creature.face)
432 | });
433 | // 或者
434 | const myArray = ['a', 1, 'etc'];
435 | for (let indexCount = 0; indexCount < myArray.length; indexCount++) {
436 |    console.log(myArray[indexCount]);
437 | };
438 |

2.6 对象

439 | 440 |

for-in 循环用于在对象中循环关键词。这样很容易出错，因为， for-in 不会从 0 循环，而是循环对象及其原型链中现存的所有关键词。如果可以的话，对数据进行整理，以避免迭代对象。如果不可行，将 for-in 循环的内容包裹在条件语句中，以避免迭代原型链。

441 |

for-in 循环用于循环对象中的键。这很容易出错，因为 for-in 不是从 0 循环到 length-1 ，而是循环对象及其原型链中的所有现有键。

442 |

如果可以的话，对数据进行整理，这样就不必在对象上迭代。如果不可行，就将 for-in 循环的内容包裹在条件语句中，以防止它在原型链上迭代。

443 |

不推荐：

444 |

const myObj = {'firstName':'Ada','secondName':'Lovelace'};
445 | for (const key in myObj) {
446 |    console.log(myObj[key]);
447 | }
448 |

推荐：

449 |

const myObj = {'firstName':'Ada','lastName':'Lovelace'};
450 | for (const key in myObj) {
451 |    if (myObj.hasOwnProperty(key)) {
452 |       console.log(myObj[key]);
453 |    }
454 | }
455 |

2.7 多行字符串字面量

456 | 457 |

不要使用。编译期间无法妥善删除各行开头的空格，斜杠后的空白会引发棘手的问题，虽然大部分脚本引擎支持该操作，但这并不属于规格中的一部分。

458 |

不推荐：

459 |

const myPoetry = '一二三四五，\
460 |    上山打老虎，\
461 |    老虎没打到，\
462 |    打到小松鼠，\
463 |    让我数一数，\
464 |    一二三四五';
465 |

推荐：

466 |

const myPoetry = '黄河远上白云间，' +
467 |    '一片孤城万仞山。' +
468 |    '羌笛何须怨杨柳，' +
469 |    '春风不度玉门关。';
470 | 
471 | // or
472 | const myPoetry = `
473 |    黄河远上白云间，
474 |    一片孤城万仞山。
475 |    羌笛何须怨杨柳，
476 |    春风不度玉门关。
477 | `;
478 |

2.8 数组和对象字面量

479 | 480 |

使用数组和对象字面量，而不是数组和对象构造函数。

481 |

不推荐：

482 |

const myArray = new Array(x1, x2, x3);
483 | const myObject = new Object();
484 | myObject.a = 0;
485 |

推荐：

486 |

const myArray = [x1, x2, x3];
487 | const myObject = {
488 |    a: 0
489 | };
490 |

三. JavaScript 样式规则

491 | 492 |

3.1 命名

493 | 494 |

总体来说，函数名称为 functionNames ，变量名称为 variableNames ，类名称为 ClassNames ，方法名称为 methodNames ，常量值名称为 CONSTANT_VALUES ，文件名称为 filenames 。

495 |

3.2 代码格式

496 | 497 |

由于分号的隐式插入，大括号应与其内容放置在同一行。

498 |

推荐：

499 |

if (something) {
500 |    // 执行某项任务
501 | } else {
502 |    // 执行另外一项任务
503 | }
504 |

只有在单行数组和对象初始器可以在写同一行时方可使用这两项。左括号前和右括号后都不应有空格。

505 |

推荐：

506 |

const array = [1, 2, 3];
507 | const object = {a: 1, b: 2, c: 3};
508 |

多行数组和对象初始器需进行单行缩进，与代码块一样，其括号与内容应位于同一行。

509 |

推荐：

510 |

const array = [
511 |    'Joe <joe@email.com>',
512 |    'Sal <sal@email.com>',
513 |    'Murr <murr@email.com>',
514 |    'Q <q@email.com>'
515 | ];
516 | 
517 | const object = {
518 |    id: 'foo',
519 |    class: 'foo-important',
520 |    name: 'notification'
521 | };
522 |

3.3 字符串

523 | 524 |

为了保持连贯性，应使用单引号 ' 而不是双引号 "。这在创建含有 HTML 的字符串时尤其有帮助。

525 |

推荐：

526 |

const element = 'Click Me';
527 |

此规则较为明显的一个例外是在 JSON 对象中： JSON 要求使用双引号。

528 |

四. 技巧提示

529 | 530 |

4.1 真假布尔表达式

531 | 532 |

以下为假的布尔表达式：

533 |

null
undefined
'' 空字符串
数字 0

539 |

注意区分，以下为真的表达式：

540 |

'0' 字符串0
[] 空数组
{} 空对象

545 |

4.2 三元表达式 `expr ? A : B`

546 | 547 |

不强制规定，但建议使用三元条件运算符编写简洁代码，避免使用以下代码：

548 |

不推荐：

549 |

if (val) {
550 |    return foo();
551 | } else {
552 |    return bar();
553 | }
554 |

推荐：

555 |

return val ? foo() : bar();
556 |

4.3 短路求值 `&&` 和 `||`

557 | 558 |

短路求值是一种逻辑运算符的求值策略。只有当第一个运算数的值无法确定逻辑运算的结果时，才对第二个运算数进行求值。例如，当 && 的第一个运算数的值为 false 时，其结果必定为 false ；当 || 的第一个运算数为 true 时，最后结果必定为 true ，在这种情况下，就不需要知道第二个运算数的具体值。

559 |

不推荐：

560 |

function foo(name) {
561 |    let theName;
562 |    if (name) {
563 |       theName = name;
564 |    } else {
565 |       theName = 'John';
566 |    }
567 |    return theName;
568 | }
569 |

推荐：

570 |

function foo(name) {
571 |    return theName = name || 'John';
572 | }
573 |

4.4 && 也被用于缩减代码

574 | 575 |

不推荐：

576 |

if (node) {
577 |    if (node.kids) {
578 |       console.log(node.kids);
579 |    }
580 | }
581 |

推荐：

582 |

if (node && node.kids) {
583 |    console.log(node.kids);
584 | }
585 |

586 |

587 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 656 | 657 | 658 | -------------------------------------------------------------------------------- /udacity-git-keyterms.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/frontend-nanodegree-styleguide-zh/bde9d79c4d377294a6fb9ceef28be83d9705c07b/udacity-git-keyterms.pdf -------------------------------------------------------------------------------- /前端工程师纳米学位样式指南 - CSS.md: -------------------------------------------------------------------------------- 1 | --- 2 | html: 3 | embed_local_images: false 4 | embed_svg: true 5 | offline: false 6 | toc: true 7 | 8 | print_background: false 9 | --- 10 | 11 | 12 | # 前端工程师纳米学位样式指南 - CSS 13 | 14 | 点此查看文档英文版（[pdf](https://s3.cn-north-1.amazonaws.com.cn/static-documents/nd001/Udacity+Nanodegree+Style+Guide_JavaScript_EN.pdf)，[GitHub.io](http://udacity.github.io/frontend-nanodegree-styleguide/javascript.html)） 15 | 16 | ## 零. 简介 17 | 18 | 该指南是你在项目进行过程中所需遵守的官方指南。优达学城的评估人员会根据该指南为你的项目打分。在前端网页开发的世界中，有很"最佳"样式供你选择。因此，为了减少学生在项目过程中因选择何种样式所产生的困惑，我们强烈建议所有学生在其项目中遵循这个样式指南。 19 | 20 | ## 一. 通用规则 21 | 22 | ### 1.1 编码 23 | 24 | 使用 UTF-8 。 25 | 26 | 确保你的编辑器将没有字节顺序标记的 UTF-8 用作字符编码。 27 | 28 | ### 1.2 字母大小写 29 | 30 | 仅使用小写。 31 | 32 | 所有代码均使用小写，该规则适用于 CSS 选择符、属性和属性值（字符串除外）。 33 | 34 | **不推荐：** 35 | 36 | ```css 37 | color: #E5E5E5; 38 | ``` 39 | 40 | **推荐：** 41 | 42 | ```css 43 | color: #e5e5e5; 44 | ``` 45 | 46 | ### 1.3 末尾空格 47 | 48 | 删除行尾空格。 49 | 50 | 行尾空格属于多余的符号，并且会让 diff 变得更加复杂。 51 | 52 | **不推荐：** 53 | 54 | ```css 55 | border: 0;__ 56 | ``` 57 | 58 | **推荐：** 59 | 60 | ```css 61 | border: 0; 62 | ``` 63 | 64 | 如果你使用 VS Code，你可进入编辑器菜单的「首选项——>设置」中搜索 `files.trimTrailingWhitespace` ，然后将选项勾选即可，这样每当你保存文件时，去除行尾空格操作便会自动完成： 65 | 66 | ```json 67 | "files.trimTrailingWhitespace": true 68 | ``` 69 | 70 | ### 1.4 缩进 71 | 72 | 整个文件中的缩进应保持前后一致，使用 Tab、2个空格或4个空格都可以，但需保持前后一致。 73 | 74 | ### 1.5 注释 75 | 76 | 在可行和必要时，对代码添加注释。 77 | 78 | 用注释解释代码的覆盖范围、目的和作用以及使用和选择各解决方案的原因。 79 | 80 | ### 1.6 区块注释 81 | 82 | 在可行时，用注释将样式表区块组合在一起，用新行分隔各区块。 83 | 84 | **推荐：** 85 | 86 | ```css 87 | /* Header */ 88 | .header { 89 | … 90 | } 91 | 92 | .header-nav { 93 | … 94 | } 95 | 96 | /* Content */ 97 | .gallery { 98 | … 99 | } 100 | 101 | .gallery-img { 102 | … 103 | } 104 | 105 | /* Footer */ 106 | .footer { 107 | … 108 | } 109 | 110 | .footer-nav { 111 | … 112 | } 113 | ``` 114 | 115 | ### 1.7 待办任务 116 | 117 | 用 `TODO:` 标注待办事项和任务项： 118 | 119 | 仅用关键词 `TODO` 标注待办事项，不要使用 `@@` 等其他格式的字样。在任务项前加冒号，如：`TODO: 待办任务` 。 120 | 121 | **推荐：** 122 | 123 | ```css 124 | /* TODO: 添加一个按钮元素 */ 125 | ``` 126 | 127 | ## 二. CSS 样式规则 128 | 129 | ### 2.1 ID 和 CLASS 名称 130 | 131 | 使用有意义或具有普遍性的 ID 和类名称。 132 | 133 | 不可使用意义含糊的 ID 和类名称，使用能够反映相应元素意义的名称或具有普遍性的通用名。 134 | 135 | 最好使用能够反映相应元素意义的具体名称，因为这些名称最易于理解且不易变更。 136 | 137 | 具有普遍性的通用名被用于与类似元素意义相仿的元素，主要起辅助作用。 138 | 139 | **不推荐：** 140 | 141 | ```css 142 | .p-998 { 143 | … 144 | } 145 | 146 | .btn-green { 147 | … 148 | } 149 | ``` 150 | 151 | 推荐： 152 | 153 | ```css 154 | .gallery { 155 | … 156 | } 157 | 158 | .btn-default { 159 | … 160 | } 161 | ``` 162 | 163 | ### 2.2 类型选择符 164 | 165 | 避免用类型选择器限定 ID 和类名称。 166 | 167 | 除非情况需要（例如，在辅助类型中），否则不要将元素名和 ID 或类名称同时使用。为提高性能，避免使用不必要的祖先选择符。 168 | 169 | 在 CSS 文件中使用 ID 也是较糟糕的做法，类别始终比名称更具优势，如果你需要给予某元素一个特殊的名称，请使用类别。（ ID 的唯一优点是在存在数千个类似元素的页面上能保持较快的运行速度。） 170 | 171 | **不推荐：** 172 | 173 | ```css 174 | ul#example { 175 | … 176 | } 177 | 178 | div.error { 179 | … 180 | } 181 | ``` 182 | 183 | **推荐：** 184 | 185 | ```css 186 | .example { 187 | … 188 | } 189 | 190 | .error { 191 | … 192 | } 193 | ``` 194 | 195 | ### 2.3 简写属性 196 | 197 | 应使用简写。 198 | 199 | CSS 可提供多种简写属性（例如，padding，而不是 padding-top、padding-bottom 等），应尽可能使用这些简写，但字体属性和在 Bootstrap 等框架中会覆盖其他同名属性的属性除外。 200 | 201 | 使用简写属性有助于提高代码的效率和易懂性。推荐在设置仅与字体 font 相关的属性时使用字体简写属性，但无需在进行小幅改动时使用。在使用字体简写属性时，请注意，如果未注明字体的大小和系列，浏览器会忽略整个字体声明。 202 | 203 | 不推荐： 204 | 205 | ```css 206 | border-top-style: none; 207 | font-family: palatino, georgia, serif; 208 | font-size: 100%; 209 | line-height: 1.6; 210 | padding-bottom: 2em; 211 | padding-left: 1em; 212 | padding-right: 1em; 213 | padding-top: 0; 214 | ``` 215 | 216 | **推荐：** 217 | 218 | ```css 219 | border-top: 0; 220 | font: 100%/1.6 palatino, georgia, serif; 221 | padding: 0 1em 2em; 222 | ``` 223 | 224 | ### 2.4 省略0后面的单位 225 | 226 | 去掉 `0` 值后面的单位。 227 | 228 | **不推荐：** 229 | 230 | ```css 231 | margin: 0em; 232 | padding: 0px; 233 | ``` 234 | 235 | **推荐：** 236 | 237 | ```css 238 | margin: 0; 239 | padding: 0; 240 | ``` 241 | 242 | ### 2.5 前导零 243 | 244 | 为方便阅读，十进制值中含有前导零。 245 | 246 | **不推荐：** 247 | 248 | ```css 249 | font-size: .8em; 250 | ``` 251 | 252 | **推荐：** 253 | 254 | ```css 255 | font-size: 0.8em; 256 | ``` 257 | 258 | ### 2.6 十六进制表示法 259 | 260 | 在可行时，使用三个十六进制表示法的字符。 261 | 262 | **不推荐：** 263 | 264 | ```css 265 | color: #eebbcc; 266 | ``` 267 | 268 | **推荐：** 269 | 270 | ```css 271 | color: #ebc; 272 | ``` 273 | 274 | ### 2.7 ID 和 CLASS 名称分隔符 275 | 276 | 用连字符分隔 ID 和类名称中的字词 `-`。 277 | 278 | 用连字符连接选择符中的词语和缩略词，以方便理解和扫描。 279 | 280 | 唯一的例外：在编写 [BEM](http://getbem.com/naming/) 样式 CSS 选择符时也可以使用下划线 `_` 。 281 | 282 | **不推荐：** 283 | 284 | ```css 285 | .demoimage { 286 | … 287 | } 288 | 289 | .errorStatus { 290 | … 291 | } 292 | ``` 293 | 294 | **推荐：** 295 | 296 | ```css 297 | .demo-image { 298 | … 299 | } 300 | 301 | .error-status { 302 | … 303 | } 304 | ``` 305 | 306 | ### 2.8 Hack 307 | 308 | 避免用户代理检测或 CSS Hack ——尝试另一种方法。 309 | 310 | 人们可能很想处理用户代理检测或特殊的 CSS 过滤器以及应变方案和非法入侵之间的样式差异。这两项措施均为实现和维护有效和可处理的代码库的最后方案。请考虑该样式是否对应用的性能至关重要，需要该样式的用户代理是否可以不采样该样式。 311 | 312 | ## 三. CSS 格式规则 313 | 314 | ### 3.1 代码块内容缩进 315 | 316 | 缩进所有代码块内容，即规则内的规则和声明，以反映层次结构、方便理解。 317 | 318 | 推荐： 319 | 320 | ```css 321 | @media screen, projection { 322 | html { 323 | background: #fff; 324 | color: #444; 325 | } 326 | } 327 | ``` 328 | 329 | ### 3.2 声明标点 330 | 331 | 在所有声明后使用分号，以增加连贯性和延展性。 332 | 333 | **不推荐：** 334 | 335 | ```css 336 | .test { 337 | display: block; 338 | height: 100px 339 | } 340 | ``` 341 | 342 | **推荐：** 343 | 344 | ```css 345 | .test { 346 | display: block; 347 | height: 100px; 348 | } 349 | ``` 350 | 351 | ### 3.3 属性名标点 352 | 353 | 所有属性名冒号后均需添加空格，但属性和冒号间不加空格，以增加连贯性。 354 | 355 | **不推荐：** 356 | 357 | ```css 358 | font-weight:bold; 359 | padding : 0; 360 | margin :0; 361 | ``` 362 | 363 | **推荐：** 364 | 365 | ```css 366 | font-weight: bold; 367 | padding: 0; 368 | margin: 0; 369 | ``` 370 | 371 | ### 3.4 声明区标点 372 | 373 | 最后一个选择符和声明区起始处的左大括号之间需加空格。 374 | 375 | **不推荐：** 376 | 377 | ```css 378 | .video-block{ 379 | margin: 0; 380 | } 381 | 382 | .audio-block{ 383 | margin: 0; 384 | } 385 | ``` 386 | 387 | **推荐：** 388 | 389 | ```css 390 | .video-block { 391 | margin: 0; 392 | } 393 | 394 | .audio-block { 395 | margin: 0; 396 | } 397 | ``` 398 | 399 | ### 3.5 选择符和声明分隔 400 | 401 | 所有选择符和声明均需另起一行。 402 | 403 | **不推荐：** 404 | 405 | ```css 406 | h1, h2, h3 { 407 | font-weight: normal; 408 | line-height: 1.2; 409 | } 410 | ``` 411 | 412 | **推荐：** 413 | 414 | ```css 415 | h1, 416 | h2, 417 | h3 { 418 | font-weight: normal; 419 | line-height: 1.2; 420 | } 421 | ``` 422 | 423 | ### 3.6 规则分隔 424 | 425 | 所有规则间均需加一个空行（两个换行符）。 426 | 427 | **推荐：** 428 | 429 | ```css 430 | html { 431 | background: #fff; 432 | } 433 | 434 | body { 435 | margin: auto; 436 | width: 50%; 437 | } 438 | ``` 439 | 440 | ### 3.7 CSS 引号 441 | 442 | 属性选择符和属性值均需使用双引号，链接值 `url()` 中不可使用双引号。 443 | 444 | **不推荐：** 445 | 446 | ```css 447 | @import url("css/links.css"); 448 | html { 449 | font-family: 'Open Sans', arial, sans-serif; 450 | } 451 | ``` 452 | 453 | **推荐：** 454 | 455 | ```css 456 | @import url(css/links.css); 457 | html { 458 | font-family: "Open Sans", arial, sans-serif; 459 | } 460 | ``` 461 | -------------------------------------------------------------------------------- /前端工程师纳米学位样式指南 - Git.md: -------------------------------------------------------------------------------- 1 | --- 2 | html: 3 | embed_local_images: false 4 | embed_svg: true 5 | offline: false 6 | toc: true 7 | 8 | print_background: false 9 | --- 10 | 11 | # Git 提交信息样式指南 12 | 13 | 点此查看文档英文版（[pdf](https://s3.cn-north-1.amazonaws.com.cn/static-documents/nd001/Udacity+Nanodegree+Style+Guide_CSS_EN.pdf)，[GitHub.io](http://udacity.github.io/frontend-nanodegree-styleguide/css.html)） 14 | 15 | ## 零. 简介 16 | 17 | 该指南是你在项目进行过程中所需遵守的官方指南。优达学城的评估人员会根据该指南为你的项目打分。在前端网页开发的世界中，有很“最佳”样式供你选择。因此，为了减少学生在项目过程中因选择何种样式所产生的困惑，我们强烈建议所有学生在其项目中遵循这个样式指南。 18 | 19 | ## 一. 提交信息 20 | 21 | ### 1.1 信息结构 22 | 23 | 提交信息由三个不同的部分构成，这些部分均由空行分隔：标题、可选的消息体和可选的注释。其布局大致如此： 24 | 25 | ```shell 26 | 类型：主题 27 | 消息正文 28 | 注释 29 | ``` 30 | 31 | 标题由消息类型和主题构成。 32 | 33 | ### 1.2 类型 34 | 35 | 类型位于在标题内，有以下几种可能： 36 | 37 | - **feature**：新功能 38 | - **fix**：错误修复 39 | - **docs**：文档修改 40 | - **style**：格式、分号缺失等，代码无变动 41 | - **refactor**：生产代码重构 42 | - **test**：测试添加、测试重构等，生产代码无变动 43 | - **chore**：构建任务更新、程序包管理器配置等，生产代码无变动。 44 | 45 | ### 1.3 标题 46 | 47 | 主题不得超过50个字符，首字母大写，末尾不加句号。 48 | 以祈使语气描述提交的任务，而不是其已完成的任务。例如，使用 **change**...，而不是 changed 或 changes 。 49 | 50 | ### 1.4 信息正文 51 | 52 | 并不是所有的提交信息都复杂到需要主体，因此这是可选内容，仅在提交信息需要一定的解释和语境时使用。消息体是用于解释提交任务的内容和原因，而不是方法。 53 | 54 | 在编写正文时，需要在标题和正文间加一个空行，且每行的内容应控制在72个字符内。 55 | 56 | ### 1.5 注释 57 | 58 | 注释是可选内容，用于引用问题跟踪的 ID 。 59 | 60 | ### 1.6 提交信息示例 61 | 62 | ```shell 63 | Feature: 总结变动的内容，保持在50个字符内 64 | 65 | 如有需要，使用更详细的说明性文字，将其大概控制在72个字符。在部分语境中，第一行被视为提交信息的主题，余下的文本被视为主体。分隔总结与主体的空行十分重要（除非你完全忽略主体）；否则`log`、 `shortlog` 和 `rebase` 等多个工具容易发生混淆。 66 | 解释该提交信息所解决的问题，说明你进行该变动的原因，而不是方法（代码本身可以解释方法）。 67 | 该变动是否存在副作用或其他直觉性后果？在这里进行解释。 68 | 69 | 后续段落前需加空行。 70 | 可以列出要点 71 | - 通常情况下，要点会使用空格加上连字符或星号，中间用空行分隔，但该规定存在差别。 72 | 73 | 如果你使用问题追踪，将其引用放在末尾，例如： 74 | 解决了问题：#123 75 | 另见：#456, #789 76 | ``` 77 | -------------------------------------------------------------------------------- /前端工程师纳米学位样式指南 - HTML.md: -------------------------------------------------------------------------------- 1 | --- 2 | html: 3 | embed_local_images: false 4 | embed_svg: true 5 | offline: false 6 | toc: true 7 | 8 | print_background: false 9 | --- 10 | 11 | # 优达学城前端工程师纳米学位样式指南 - HTML 12 | 13 | 点此查看文档英文版（[pdf](https://s3.cn-north-1.amazonaws.com.cn/static-documents/nd001/Udacity+Nanodegree+Style+Guide_HTML_EN.pdf)，[GitHub.io](http://udacity.github.io/frontend-nanodegree-styleguide/index.html)） 14 | 15 | ## 零. 简介 16 | 该指南是你在项目进行过程中所需遵守的官方指南。优达学城的评估人员会根据该指南为你的项目打分。在前端网页开发的世界中，有很“最佳”样式供你选择。因此，为了减少学生在项目过程中因选择何种样式所产生的困惑，我们强烈建议所有学生在其项目中遵循这个样式指南。 17 | 18 | ## 一. 通用规则 19 | 20 | ### 1.1 编码 21 | 22 | 使用 UTF-8 。 23 | 24 | 确保你的编辑器将没有字节顺序标记的 UTF-8 用作字符编码。在 HTML 模板中设置编码并用 `` 记录。 25 | 26 | ### 1.2 字母大小写 27 | 28 | 仅使用小写。 29 | 30 | 所有代码均使用小写，该规则适用于 HTML 元素名、属性和属性值（文本/ CDATA 除外）。 31 | 32 | **不推荐：** 33 | 34 | ```html 35 | 主页 36 | ``` 37 | 38 | **推荐：** 39 | 40 | ```html 41 | 主页 42 | ``` 43 | 44 | ### 1.3 末尾空格 45 | 46 | 删除行尾空格。 47 | 48 | 行尾空格属于多余的符号，并且会让 diff 变得更加复杂。 49 | 50 | **不推荐：** 51 | 52 | ```html 53 |

什么?

__ 54 | ``` 55 | 56 | **推荐：** 57 | 58 | ```html 59 |

一往情深深几许？深山夕照深秋雨。

60 | ``` 61 | 62 | 如果你使用 VS Code，你可进入编辑器菜单的「首选项——>设置」中搜索 `files.trimTrailingWhitespace` ，然后将选项勾选即可，这样每当你保存文件时，去除行尾空格操作便会自动完成： 63 | 64 | ```json 65 | "files.trimTrailingWhitespace": true 66 | ``` 67 | 68 | ### 1.4 缩进 69 | 70 | 整个文件中的缩进应保持前后一致，使用 Tab、2个空格或4个空格都可以，但需保持前后一致。 71 | 72 | ### 1.5 注释 73 | 74 | 在可行和必要时，对代码进行注释。 75 | 76 | 用注释解释代码的覆盖范围、目的和作用以及使用和选择各解决方案的原因。 77 | 78 | ### 1.6 待办任务 79 | 80 | 用 `TODO:` 标注待办事项和任务项 81 | 82 | 仅用关键词 `TODO` 标注待办事项，不要使用 `@@` 等其他格式的字样。在任务项前加冒号，如： `TODO: 待办任务` 83 | 84 | **推荐：** 85 | 86 | ```html 87 | 88 |

风吹云，云随风，风云变幻

91 | ``` 92 | 93 | ## 二. HTML 样式规则 94 | 95 | ### 2.1 文件类型 96 | 97 | 使用 HTML5 。 98 | 99 | 所有 HTML 文件均应使用 HTML5 （ HTML 语法）： `` 100 | 101 | 不要结束自结束元素，即编写 `
` ，而不是 `
`。 102 | 103 | ### 2.2 语义 104 | 105 | 根据目的使用 HTML 。 106 | 107 | 根据元素的预期作用使用元素。例如，针对标题使用标题元素，针对段落使用 p 元素，针对锚点使用 a 元素等。根据目的使用 HTML 对提高可访问性、再利用程度和代码效率十分重要。 108 | 109 | **不推荐：** 110 | 111 | ```html 112 |

All recommendations

113 | ``` 114 | 115 | **推荐：** 116 | 117 | ```html 118 | All recommendations 119 | ``` 120 | 121 | ### 2.3 多媒体应变计划 122 | 123 | 为多媒体设置备用内容。 124 | 125 | 确保为图片、视频或通过画布呈现的动画对象等多媒体提供其他访问方式。对于图片而言，使用有意义的 Alt 文本。对于视频，使用音频转述资料和字幕（如有）。 126 | 127 | 为方便访问，需提供备用内容，若没有 `alt` 属性，盲人用户将难以辨别图片的内容，其他用户也可能无法理解视频或音频的内容。 128 | 129 | 针对具有会引入冗余的 `alt` 属性的图片和无法立即使用 CSS 的装饰性图片，使用空备用内容，即 `alt=""` 。 130 | 131 | **不推荐：** 132 | 133 | ```html 134 |

135 | ``` 136 | 137 | **推荐：** 138 | 139 | ```html 140 | Udacity logo

141 | ``` 142 | 143 | ### 2.4 关注点分离 144 | 145 | 将结构、描述和行为相互分离。 146 | 147 | 将结构（标记）、描述（样式）和行为（脚本设计）严格分开，将三者间可能发生的相互作用降至最低。 148 | 149 | 也就是说，确保文件和模板仅含有只用于结构目的 HTML 。将所有描述性事物移至样式表，将所有行为性事物移至脚本。此外，尽可能少地连接文件和模板中的样式表和脚本，以便使接触面积最小化。 150 | 151 | 将结构、描述和行为相互分离对维护十分重要。相比对样式表和脚本进行更新，更改 HTML 文件和模板的成本往往更高。 152 | 153 | **不推荐：** 154 | 155 | ```html 156 | 157 | 158 | 159 | 160 | 161 | 162 | Document 163 | 168 | 169 | 170 | 173 | 174 | 175 | ``` 176 | 177 | **推荐：** 178 | 179 | ```html 180 | 181 | 182 | 183 | 184 | 185 | Document 186 | 187 | 188 | 189 | 190 | 191 | 192 | ``` 193 | 194 | ### 2.5 类型属性 195 | 196 | 忽略样式表和脚本的 type 属性。 197 | 198 | 不要针对样式表和脚本使用 type 属性。因为 HTML 已经默认设置了 `text/css` 和 `text/javascript` ，所以在此类语境中无需设置 type 属性。 199 | 200 | 在老式浏览器中，也可以安全进行此项操作。 201 | 202 | **不推荐：** 203 | 204 | ```html 205 | 206 | 207 | ``` 208 | 209 | **推荐：** 210 | 211 | ```html 212 | 213 | 214 | ``` 215 | 216 | ## 三. HTML 格式规则 217 | 218 | ### 3.1 一般格式 219 | 220 | 所有代码块、列表和表元素均需另起一行，所有子元素均需缩进。 221 | 222 | 每一个代码块、列表和表元素均需另起一行，与元素的样式相独立（因为 CSS 允许元素在每一个显示属性中担任不同的角色）。 223 | 224 | 此外，代码块、列表和表元素的子元素也需进行缩进（如果你遇到列表项间存在空白的问题，可以将所有 `li` 元素放置在一行）。 225 | 226 | **推荐:** 227 | 228 | ```html 229 |

230 |
啊！船长！我的船长！
231 |

232 |

啊．船长，我的船长！我们艰苦的航程已经终结，
这只船安然渡过了一切风浪，我们寻求的奖赏已经获得。
港口在望，我听见钟声在响，人们都在欢呼，
目迎着我们的船从容返航，它显得威严而英武。
可是，啊，心啊！心啊！心啊！
啊．殷红的鲜血长流，
在甲板上，那里躺着我的船长，
他已倒下，已死去，已冷却。
啊，船长，我的船长！起来吧，起来听听这钟声，
起来，——旌旗正为你招展——军号正为你发出颤音。
为你．送来了这些花束和花环。
为你，熙攘的群众在呼唤，转动着多少殷切的脸。
这里，船长！亲爱的父亲！
你头颅下边是我的手臂！
在甲板上像是在一场梦里，
你已倒下，已死去，已冷却。
我们的船长不作回答，他的双唇惨白而寂静，
我的父亲不能感觉我的手臂，他已没有脉息、没有知觉，
我们的船已安全抛锚碇泊，已经结束了它的航程，
胜利的船从险恶的旅途归来，我们寻求的已赢得手中。
欢呼吧，啊，海岸！轰鸣，啊，洪钟！
可是，我却轻移悲伤的步履，
在甲板上，那里躺着我的船长，
他已倒下，已死去，已冷却。

258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 |

姓名	职业
瓦尔特·惠特曼	诗人

272 | ``` 273 | 274 | ### 3.2 HTML 引号 275 | 276 | 在引用属性值时，使用双引号。 277 | 278 | **不推荐：** 279 | 280 | ```html 281 | 登录 282 | ``` 283 | 284 | **推荐：** 285 | 286 | ```html 287 | 登录 288 | ``` 289 | -------------------------------------------------------------------------------- /前端工程师纳米学位样式指南 - JavaScript.md: -------------------------------------------------------------------------------- 1 | --- 2 | html: 3 | embed_local_images: false 4 | embed_svg: true 5 | offline: false 6 | toc: true 7 | 8 | print_background: false 9 | --- 10 | 11 | # 前端工程师纳米学位样式指南 - JavaScript 12 | 13 | 点此查看文档英文版（[pdf](https://s3.cn-north-1.amazonaws.com.cn/static-documents/nd001/Udacity+Nanodegree+Style+Guide_JavaScript_EN.pdf)，[GitHub.io](http://udacity.github.io/frontend-nanodegree-styleguide/javascript.html)） 14 | 15 | ## 零. 简介 16 | 17 | 该指南是你在项目进行过程中所需遵守的官方指南。优达学城的评估人员会根据该指南为你的项目打分。在前端网页开发的世界中，有很"最佳"样式供你选择。因此，为了减少学生在项目过程中因选择何种样式所产生的困惑，我们强烈建议所有学生在其项目中遵循这个样式指南。 18 | 19 | ## 一. 通用规则 20 | 21 | ### 1.1 编码 22 | 23 | 使用 UTF-8（无 BOM）。 24 | 25 | 确保你的编辑器将没有字节顺序标记的 UTF-8 用作字符编码。 26 | 27 | ### 1.2 末尾空白 28 | 29 | 删除行尾空格。 30 | 31 | 行尾空格属于多余的符号，并且会让 diff 变得更加复杂。 32 | 33 | **不推荐：** 34 | 35 | ```javascript 36 | const name = "John Smith";__ 37 | ``` 38 | 39 | **推荐：** 40 | 41 | ```javascript 42 | const name = "John Smith"; 43 | ``` 44 | 45 | 如果你使用 VS Code，你可进入编辑器菜单的「首选项——>设置」中搜索 `files.trimTrailingWhitespace` ，然后将选项勾选即可，这样每当你保存文件时，去除行尾空格操作便会自动完成： 46 | 47 | ```json 48 | "files.trimTrailingWhitespace": true 49 | ``` 50 | 51 | ### 1.3 缩进 52 | 53 | 整个文件中的缩进应保持前后一致，使用 Tab、2个空格或4个空格都可以，但需保持前后一致。 54 | 55 | ### 1.4 注释 56 | 57 | 用注释解释代码的覆盖范围、目的和作用以及使用和选择各解决方案的原因。 58 | 59 | 你可以选择使用 [JSDoc](http://usejsdoc.org/)，即编写代码注释的文件生成器和标准，对你的 JavaScript 功能进行记录，其优点包括为你的注释提供技术参照和能够针对文件生成网页的命令行 jsdoc 工具。 JSDoc 会为你提供记录代码的多种注释，但我们只推荐你使用以下种类： 60 | 61 | - [@constructor](http://usejsdoc.org/tags-class.html)：用于记录一个 Class 类，也就是用 `new` 关键字调用的函数。 62 | - [@description](http://usejsdoc.org/tags-description.html)：用于描述你的函数，该标签还可以使你在需要时添加 HTML 标记。 63 | - [@param](http://usejsdoc.org/tags-param.html)：用于描述函数参数的名称、类别和说明。 64 | - [@returns](http://usejsdoc.org/tags-returns.html)：记录函数返回值的类型和说明。 65 | 66 | 下方实例说明了如何记录类构造函数（注意注释区开头使用的 `/**` ，这个非常重要）： 67 | 68 | ```javascript 69 | /** 70 | * @description 简要描述这本书 71 | * @constructor 72 | * @param {string} title - 书的标题 73 | * @param {string} author - 书的作者 74 | */ 75 | 76 | function Book(title, author) { 77 | ... 78 | } 79 | ``` 80 | 81 | 以下函数含有能返回值的参数，注意，这里的参数作用一目了然，因此并未对其进行说明。 82 | 83 | ```javascript 84 | /** 85 | * @description 计算两数相加 86 | * @param {number} a 87 | * @param {number} b 88 | * @returns {number} 数字 a 与 b 的和 89 | */ 90 | 91 | function sum(a, b) { 92 | return a + b; 93 | } 94 | ``` 95 | 96 | 你也可以使用更多你想要编写的注释。 97 | 98 | ### 1.5 待办任务 99 | 100 | 用 `TODO:` 标注待办事项和任务项 101 | 102 | 仅用关键词 `TODO` 标注待办事项，不要使用 `@@` 等其他格式的字样。在任务项前加冒号，如： `TODO: 待办任务` 103 | 104 | **推荐：** 105 | 106 | ```javascript 107 | // TODO: 加些其他的需求 108 | ``` 109 | 110 | ## 二. JavaScript 语言规则 111 | 112 | ### 2.1 变量 113 | 114 | 在 JavaScript 里一共有三种定义变量的方式： 115 | 116 | - [const](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const) 117 | - [let](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let) 118 | - [var](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/var) 119 | 120 | 当定义变量的时候，你应该使用上面列出的关键字来定义变量。优先考虑使用 `const` 定义你的变量，如果觉得以后需要对变量重新赋值的，则使用 `let`。现在已经不推荐使用 `var` 关键字来定义变量了。 121 | 122 | ### 2.2 分号 123 | 124 | 始终使用分号。 125 | 126 | 依靠隐式插入会造成难以排除的细微问题。分号应放在**函数表达式**的末尾，而不是**函数声明**的末尾。 127 | 128 | **不推荐：** 129 | 130 | ```javascript 131 | const foo = function() { 132 | return true // 缺少分号 133 | } // 缺少分号 134 | function foo() { 135 | return true; 136 | }; // 额外的分号 137 | ``` 138 | 139 | **推荐：** 140 | 141 | ```javascript 142 | const foo = function() { 143 | return true; 144 | }; 145 | function foo() { 146 | return true; 147 | } 148 | ``` 149 | 150 | ### 2.3 基本类型包装对象 151 | 152 | 基本类型无需使用包装对象，此外，包装对象还具有潜在危险，但可以使用类型转换。 153 | 154 | **不推荐：** 155 | 156 | ```javascript 157 | const x = new Boolean(0); 158 | if (x) { 159 | alert('hi'); // 如果 x 是一个真实对象，则显示 hi 160 | } 161 | ``` 162 | 163 | **推荐：** 164 | 165 | ```javascript 166 | const x = Boolean(false); 167 | if (x) { 168 | alert('hi'); // 如果 x 是一个否定的布尔值，则显示 hi 169 | } 170 | ``` 171 | 172 | ### 2.4 闭包 173 | 174 | 进行该操作时要小心谨慎。创建闭包的能力可能是 JavaScript 中最有用但最常被忽略的能力。需要记住的是，闭包会储存对其封闭范围的指针，因此，将 DOM 元素与闭包相连会生成循环引用，从而导致内存的泄露。 175 | 176 | **不推荐：** 177 | 178 | ```javascript 179 | function foo(element, a, b) { 180 | element.onclick = function() { /* 使用 a 和 b */ } 181 | } 182 | ``` 183 | 184 | **推荐：** 185 | 186 | ```javascript 187 | function foo(element, a, b) { 188 | element.onclick = bar(a, b); 189 | } 190 | function bar(a, b) { 191 | return function() { /* 使用 a 和 b */ } 192 | } 193 | ``` 194 | 195 | ### 2.5 for 、for-in 和 forEach 196 | 197 | ### 2.6 数组 198 | 199 | 在迭代数组时，相比 `for-in` 循环， `forEach` 或 `for` 循环更具优势。 200 | 201 | **不推荐：** 202 | 203 | ```javascript 204 | const myArray = ['a', 1, 'etc']; 205 | for (const indexNum in myArray) { 206 | console.log(myArray[indexNum]); 207 | } 208 | const starWars = { 209 | "creatures": [ 210 | { 211 | "name": "bantha", 212 | "face": "furry" 213 | }, 214 | { 215 | "name": "loth-cat", 216 | "face": "toothy" 217 | } 218 | ] 219 | }; 220 | for (const i in starWars.creatures) { 221 | console.log(starWars.creatures[i].name); 222 | console.log(starWars.creatures[i].face); 223 | }; 224 | ``` 225 | 226 | **推荐：** 227 | 228 | ```javascript 229 | const mySimpleArray = ['a', 1, 'etc']; 230 | const mySimpleArray.forEach(function(val) { 231 | console.log(val); 232 | }); 233 | const starWars = { 234 | "creatures": [ 235 | { 236 | "name": "bantha", 237 | "face": "furry" 238 | }, 239 | { 240 | "name": "loth-cat", 241 | "face": "toothy" 242 | } 243 | ] 244 | }; 245 | starWars.creatures.forEach(function(creature){ 246 | console.log(creature.name); 247 | console.log(creature.face) 248 | }); 249 | // 或者 250 | const myArray = ['a', 1, 'etc']; 251 | for (let indexCount = 0; indexCount < myArray.length; indexCount++) { 252 | console.log(myArray[indexCount]); 253 | }; 254 | ``` 255 | 256 | ### 2.6 对象 257 | 258 | `for-in` 循环用于在对象中循环关键词。这样很容易出错，因为， `for-in` 不会从 `0` 循环，而是循环对象及其原型链中现存的所有关键词。如果可以的话，对数据进行整理，以避免迭代对象。如果不可行，将 `for-in` 循环的内容包裹在条件语句中，以避免迭代原型链。 259 | 260 | `for-in` 循环用于循环对象中的键。这很容易出错，因为 `for-in` 不是从 `0` 循环到 `length-1` ，而是循环对象及其**原型链**中的所有现有键。 261 | 262 | 如果可以的话，对数据进行整理，这样就不必在对象上迭代。如果不可行，就将 `for-in` 循环的内容包裹在条件语句中，以防止它在原型链上迭代。 263 | 264 | **不推荐：** 265 | 266 | ```javascript 267 | const myObj = {'firstName':'Ada','secondName':'Lovelace'}; 268 | for (const key in myObj) { 269 | console.log(myObj[key]); 270 | } 271 | ``` 272 | 273 | **推荐：** 274 | 275 | ```javascript 276 | const myObj = {'firstName':'Ada','lastName':'Lovelace'}; 277 | for (const key in myObj) { 278 | if (myObj.hasOwnProperty(key)) { 279 | console.log(myObj[key]); 280 | } 281 | } 282 | ``` 283 | 284 | ### 2.7 多行字符串字面量 285 | 286 | 不要使用。编译期间无法妥善删除各行开头的空格，斜杠后的空白会引发棘手的问题，虽然大部分脚本引擎支持该操作，但这并不属于规格中的一部分。 287 | 288 | **不推荐：** 289 | 290 | ```javascript 291 | const myPoetry = '一二三四五，\ 292 | 上山打老虎，\ 293 | 老虎没打到，\ 294 | 打到小松鼠，\ 295 | 让我数一数，\ 296 | 一二三四五'; 297 | ``` 298 | 299 | **推荐：** 300 | 301 | ```javascript 302 | const myPoetry = '黄河远上白云间，' + 303 | '一片孤城万仞山。' + 304 | '羌笛何须怨杨柳，' + 305 | '春风不度玉门关。'; 306 | 307 | // or 308 | const myPoetry = ` 309 | 黄河远上白云间， 310 | 一片孤城万仞山。 311 | 羌笛何须怨杨柳， 312 | 春风不度玉门关。 313 | `; 314 | ``` 315 | 316 | ### 2.8 数组和对象字面量 317 | 318 | 使用数组和对象字面量，而不是数组和对象构造函数。 319 | 320 | **不推荐：** 321 | 322 | ```javascript 323 | const myArray = new Array(x1, x2, x3); 324 | const myObject = new Object(); 325 | myObject.a = 0; 326 | ``` 327 | 328 | **推荐：** 329 | 330 | ```javascript 331 | const myArray = [x1, x2, x3]; 332 | const myObject = { 333 | a: 0 334 | }; 335 | ``` 336 | 337 | ## 三. JavaScript 样式规则 338 | 339 | ### 3.1 命名 340 | 341 | 总体来说，函数名称为 `functionNames` ，变量名称为 `variableNames` ，类名称为 `ClassNames` ，方法名称为 `methodNames` ，常量值名称为 `CONSTANT_VALUES` ，文件名称为 `filenames` 。 342 | 343 | ### 3.2 代码格式 344 | 345 | 由于分号的隐式插入，大括号应与其内容放置在同一行。 346 | 347 | **推荐：** 348 | 349 | ```javascript 350 | if (something) { 351 | // 执行某项任务 352 | } else { 353 | // 执行另外一项任务 354 | } 355 | ``` 356 | 357 | 只有在单行数组和对象初始器可以在写同一行时方可使用这两项。左括号前和右括号后都不应有空格。 358 | 359 | **推荐：** 360 | 361 | ```javascript 362 | const array = [1, 2, 3]; 363 | const object = {a: 1, b: 2, c: 3}; 364 | ``` 365 | 366 | 多行数组和对象初始器需进行单行缩进，与代码块一样，其括号与内容应位于同一行。 367 | 368 | **推荐：** 369 | 370 | ```javascript 371 | const array = [ 372 | 'Joe ', 373 | 'Sal ', 374 | 'Murr ', 375 | 'Q ' 376 | ]; 377 | 378 | const object = { 379 | id: 'foo', 380 | class: 'foo-important', 381 | name: 'notification' 382 | }; 383 | ``` 384 | 385 | ### 3.3 字符串 386 | 387 | 为了保持连贯性，应使用单引号 `'` 而不是双引号 `"`。这在创建含有 HTML 的字符串时尤其有帮助。 388 | 389 | **推荐：** 390 | 391 | ```javascript 392 | const element = 'Click Me'; 393 | ``` 394 | 395 | 此规则较为明显的一个例外是在 JSON 对象中： **JSON 要求使用双引号**。 396 | 397 | ## 四. 技巧提示 398 | 399 | ### 4.1 真假布尔表达式 400 | 401 | 以下为**假**的布尔表达式： 402 | 403 | - `null` 404 | - `undefined` 405 | - `''` 空字符串 406 | - 数字 `0` 407 | 408 | 注意区分，以下为**真**的表达式： 409 | 410 | - `'0'` 字符串0 411 | - `[]` 空数组 412 | - `{}` 空对象 413 | 414 | ### 4.2 三元表达式 `expr ? A : B` 415 | 416 | 不强制规定，但建议使用三元条件运算符编写简洁代码，避免使用以下代码： 417 | 418 | **不推荐：** 419 | 420 | ```javascript 421 | if (val) { 422 | return foo(); 423 | } else { 424 | return bar(); 425 | } 426 | ``` 427 | 428 | **推荐：** 429 | 430 | ```javascript 431 | return val ? foo() : bar(); 432 | ``` 433 | 434 | ### 4.3 短路求值 `&&` 和 `||` 435 | 436 | 短路求值是一种逻辑运算符的求值策略。只有当第一个运算数的值无法确定逻辑运算的结果时，才对第二个运算数进行求值。例如，当 `&&` 的第一个运算数的值为 `false` 时，其结果必定为 `false` ；当 `||` 的第一个运算数为 `true` 时，最后结果必定为 `true` ，在这种情况下，就不需要知道第二个运算数的具体值。 437 | 438 | **不推荐：** 439 | 440 | ```javascript 441 | function foo(name) { 442 | let theName; 443 | if (name) { 444 | theName = name; 445 | } else { 446 | theName = 'John'; 447 | } 448 | return theName; 449 | } 450 | ``` 451 | 452 | **推荐：** 453 | 454 | ```javascript 455 | function foo(name) { 456 | return theName = name || 'John'; 457 | } 458 | ``` 459 | 460 | #### 4.4 && 也被用于缩减代码 461 | 462 | **不推荐：** 463 | 464 | ```javascript 465 | if (node) { 466 | if (node.kids) { 467 | console.log(node.kids); 468 | } 469 | } 470 | ``` 471 | 472 | **推荐：** 473 | 474 | ```javascript 475 | if (node && node.kids) { 476 | console.log(node.kids); 477 | } 478 | ``` 479 | --------------------------------------------------------------------------------

前端工程师纳米学位样式指南 - CSS

零. 简介

一. 通用规则

1.1 编码

1.2 字母大小写

1.3 末尾空格

1.4 缩进

1.5 注释

1.6 区块注释

1.7 待办任务

二. CSS 样式规则

2.1 ID 和 CLASS 名称

2.2 类型选择符

2.3 简写属性

2.4 省略0后面的单位

2.5 前导零

2.6 十六进制表示法

2.7 ID 和 CLASS 名称分隔符

2.8 Hack

三. CSS 格式规则

3.1 代码块内容缩进

3.2 声明标点

3.3 属性名标点

3.4 声明区标点

3.5 选择符和声明分隔

3.6 规则分隔

3.7 CSS 引号

Git 提交信息样式指南

零. 简介

一. 提交信息

1.1 信息结构

1.2 类型

1.3 标题

1.4 信息正文

1.5 注释

1.6 提交信息示例

前端工程师纳米学位样式指南 - HTML

零. 简介

一. 通用规则

1.1 编码

1.2 字母大小写

1.3 末尾空格

1.4 缩进

1.5 注释

1.6 待办任务

二. HTML 样式规则

2.1 文件类型

2.2 语义

2.3 多媒体应变计划

2.4 关注点分离

2.5 类型属性

三. HTML 格式规则

3.1 一般格式

3.2 HTML 引号

前端工程师纳米学位样式指南 - JavaScript

零. 简介

一. 通用规则

1.1 编码

1.2 末尾空白

1.3 缩进

1.4 注释

1.5 待办任务

二. JavaScript 语言规则

2.1 变量

2.2 分号

2.3 基本类型包装对象

2.4 闭包

2.5 for 、for-in 和 forEach

2.6 数组

2.6 对象

2.7 多行字符串字面量

2.8 数组和对象字面量

三. JavaScript 样式规则

3.1 命名

3.2 代码格式

3.3 字符串

四. 技巧提示

4.1 真假布尔表达式

4.2 三元表达式 expr ? A : B

4.3 短路求值 && 和 ||

4.2 三元表达式 `expr ? A : B`

4.3 短路求值 `&&` 和 `||`