最好最全面的前端开发规则

上传人：优*** IP属地：河南上传时间：2022-03-14 格式：DOCX 页数：49 大小：107.44KB 积分：16 举报 版权申诉

已阅读5页，还剩44页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、这是一份旨在增强团队的开发协作，提高代码质量和打造开发基石的编码风格标准，其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个局部。我们知道，当一个团队开始指定并实行编码标准的话，错误就会变得更加显而易见。如果一段特定的代码不符合标准的话，它有可能只是代码风格错误，而也有可能会是 bug。早期指定标准就使得代码审核得以更好的开展，并且可以更精确的地定位到错误。只要开发者们能够保证源代码源文件都严格遵循标准，那接下去所使用的混淆、压缩和编译工具那么可投其所好不尽相同。一般标准以下章节列举了一些可应用在 HTML, JavaScript 和 CSS/SCSS 上的通用规那么。

2、文件/资源命名在 web 工程中，所有的文件名应该都遵循同一命名约定。以可读性而言，减号-是用来分隔文件名的不二之选。同时它也是常见的 URL 分隔符i.e. /example /blog/my-blog-entry or，所以理所当然的，减号应该也是用来分隔资源名称的好选择。请确保文件命名总是以字母开头而不是数字。而以特殊字符开头命名的文件，一般都有特殊的含义与用处比方 compass1 中的下划线就是用来标记跳过直接编译的文件用的。资源的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改正后，大小写不同而导

3、致引用文件不同的错误，很难被发现。还有一些情况下，需要对文件增加前后缀或特定的扩展名比方 .min.js, .min.css，抑或一串前缀比方。这种情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。不推荐1. MyScript.js2. myCamelCaseName.css3. i_love_underscores.html4. 1001-scripts.js5. my-file-min.css推荐1. my-script.js2. my-camel-case-name.css3. i-love-underscores.html4. thousand-and-on

4、e-scripts.js5.协议不要指定引入资源所带的具体协议。当引入图片或其他媒体文件，还有样式和脚本时，URLs 所指向的具体路径，不要指定协议局部 :, s:，除非这两者协议都不可用。不指定协议使得 URL 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。不推荐1. <script src=" :/cdn /foundation.min.js"></script>推荐1. <script src="/cdn /foundation.min.js"><

5、;/script>不推荐1. .example 2. background: url( :/static.example /images/bg.jpg);3. 推荐1. .example 2. background: url(/static.example /images/bg.jpg);3. 文本缩进一次缩进两个空格。1. <ul>2. <li>Fantastic</li>3. <li>Great</li>4. <li>5. <a href="#">Test</a>6.

6、</li>7. </ul>1. media screen and (min-width: 1100px) 2. body 3. font-size: 100%;4. 5. 1. (function()2. var x = 10;3. 4. function y(a, b) 5. return 6. result: (a + b) * x7. 8. 9. 10. ();注释注释是你自己与你的小伙伴们了解代码写法和目的的唯一途径。特别是在写一些看似琐碎的无关紧要的代码时，由于记忆点不深刻，注释就变得尤为重要了。编写自解释代码只是一个传说，没有任何代码

7、是可以完全自解释的。而代码注释，那么是永远也不嫌多。当你写注释时一定要注意：不要写你的代码都干了些什么，而要写你的代码为什么要这么写，背后的考量是什么。当然也可以参加所思考问题或是解决方案的链接地址。不推荐1. var offset = 0;2. 3. if(includeLabels) 4. / Add offset of 205. offset = 20;6. 推荐1. var offset = 0;2. 3. if(includeLabels) 4. / If the labels are included we need to have a minimum of

8、fset of 20 pixels5. / We need to set it explicitly because of the following bug: :/somebrowservendor /issue-tracker/ISSUE-16. offset = 20;7. 一些注释工具可以帮助你写出更好的注释。JSDoc 或 YUIDoc 就是用来写 JavaScript 注释用的。你甚至可以使用工具来为这些注释生成文档，这也是鼓励开发者们写注释的一个好方法，因为一旦有了这样方便的生成文档的工具，他们通常会开始花更多时间在注释细节上。1. 代码

9、检查对于比较宽松自由的编程语言来说，严格遵循编码标准和格式化风格指南就显得极为重要。遵循标准固然很好，但是有自动化流程来确保其执行情况，岂不更佳。Trust is good, control is better.对于 JavaScript，建议使用 JSLint 或 JSHint。HTML 标准文档类型推荐使用 HTML5 的文档类型申明： <!DOCTYPE html>.建议使用 text/html 格式的 HTML。防止使用 XHTML。XHTML 以及它的属性，比方application/xhtml+xml 在浏览器中的应用支

10、持与优化空间都十分有限。HTML 中最好不要将无内容元素1 的标签闭合，例如：使用 <br> 而非 <br />.HTML 验证一般情况下，建议使用能通过标准标准验证的 HTML 代码，除非在性能优化和控制文件大小上不得不做出让步。使用诸如 W3C HTML validator 这样的工具来进行检测。标准化的 HTML 是显现技术要求与局限的显著质量基线，它促进了 HTML 被更好地运用。不推荐1. <title>Test</title>2. <article>This is only a te

11、st.推荐1. <!DOCTYPE html>2. <meta charset="utf-8">3. <title>Test</title>4. <article>This is only a test.</article>省略可选标签HTML5 标准中规定了 HTML 标签是可以省略的。但从可读性来说，在开发的源文件中最好不要这样做，因为省略标签可能会导致一些问题。省略一些可选的标签确实使得页面大小减少，这很有用，尤其是对于一些大型网站来说。为了到达这一目的，我们可以在开发后期对页面进行压缩处理，在这

12、个环节中这些可选的标签完全就可以省略掉了。脚本加载出于性能考虑，脚本异步加载很关键。一段脚本放置在 <head> 内，比方<script src="main.js"></script>，其加载会一直阻塞 DOM 解析，直至它完全地加载和执行完毕。这会造成页面显示的延迟。特别是一些重量级的脚本，对用户体验来说那真是一个巨大的影响。异步加载脚本可缓解这种性能影响。如果只需兼容 IE10+，可将 HTML5 的 async 属性加至脚本中，它可防止阻塞 DOM 的解析，甚至你可以将脚本引用写在 <head&g

13、t; 里也没有影响。如需兼容老旧的浏览器，实践说明可使用用来动态注入脚本的脚本加载器。你可以考虑 yepnope 或labjs。注入脚本的一个问题是：一直要等到 CSS 对象文档已就绪，它们才开始加载短暂地在 CSS 加载完毕之后，这就对需要及时触发的 JS 造成了一定的延迟，这多多少少也影响了用户体验吧。终上所述，兼容老旧浏览器(IE9-)时，应该遵循以下最正确实践。脚本引用写在 body 结束标签之前，并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了 body 结束标签之前的 DOM 解析，这就大大降低了其阻塞影响。而在现代浏览器中

14、，脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载，此时加载属于异步加载，不会阻塞 CSSOM但其执行仍发生在 CSSOM 之后。所有浏览器中，推荐1. <html>2. <head>3. <link rel="stylesheet" href="main.css">4. </head>5. <body>6. <!- body goes here ->7. 8. <script src="main.js" async&

15、gt;</script>9. </body>10. </html>只在现代浏览器中，推荐1. <html>2. <head>3. <link rel="stylesheet" href="main.css">4. <script src="main.js" async></script>5. </head>6. <body>7. <!- body goes here ->8. </body>9

16、. </html>语义化根据元素有时被错误地称作“标签其被创造出来时的初始意义来使用它。打个比方，用 heading 元素来定义头部标题，p 元素来定义文字段落，用 a 元素来定义链接锚点，等等。有根据有目的地使用 HTML 元素，对于可访问性、代码重用、代码效率来说意义重大。以下例如列出了一些的语义化 HTML 主要情况：不推荐1. <b>My page title</b>2. <div class="top-navigation">3. <div class="nav-item"><a

17、 href="#home">Home</a></div>4. <div class="nav-item"><a href="#news">News</a></div>5. <div class="nav-item"><a href="#about">About</a></div>6. </div>7. 8. <div class="

18、news-page">9. <div class="page-section news">10. <div class="title">All news articles</div>11. <div class="news-article">12. <h2>Bad article</h2>13. <div class="intro">Introduction sub-title</div>14. <

19、div class="content">This is a very bad example for HTML semantics</div>15. <div class="article-side-notes">I think I'm more on the side and should not receive the main credits</div>16. <div class="article-foot-notes">17. This article was c

20、reated by David <div class="time">2021-01-01 00:00</div>18. </div>19. </div>20. 21. <div class="section-footer">22. Related sections: Events, Public holidays23. </div>24. </div>25. </div>26. 27. <div class="page-

21、footer">28. Copyright 202129. </div>推荐1. <!- The page header should go into a header element ->2. <header>3. <!- As this title belongs to the page structure it's a heading and h1 should be used ->4. <h1>My page title</h1>5. </header>6. 7. &

22、lt;!- All navigation should go into a nav element ->8. <nav class="top-navigation">9. <!- A listing of elements should always go to UL (OL for ordered listings) ->10. <ul>11. <li class="nav-item"><a href="#home">Home</a></li>

23、12. <li class="nav-item"><a href="#news">News</a></li>13. <li class="nav-item"><a href="#about">About</a></li>14. </ul>15. </nav>16. 17. <!- The main part of the page should go into a main el

24、ement (also use role="main" for accessibility) ->18. <main class="news-page" role="main">19. <!- A section of a page should go into a section element. Divide a page into sections with semantic elements. ->20. <section class="page-section news"

25、;>21. <!- A section header should go into a section element ->22. <header>23. <!- As a page section belongs to the page structure heading elements should be used (in this case h2) ->24. <h2 class="title">All news articles</h2>25. </header>26. 27

26、. <!- If a section / module can be seen as an article (news article, blog entry, products teaser, any other28. re-usable module / section that can occur multiple times on a page) a article element should be used ->29. <article class="news-article">30. <!- An article can cont

27、ain a header that contains the summary / introduction information of the article ->31. <header>32. <!- As a article title does not belong to the overall page structure there should not be any heading tag! ->33. <div class="article-title">Good article</div>34. <

28、;!- Small can optionally be used to reduce importance ->35. <small class="intro">Introduction sub-title</small>36. </header>37. 38. <!- For the main content in a section or article there is no semantic element ->39. <div class="content">40.

29、<p>This is a good example for HTML semantics</p>41. </div>42. <!- For content that is represented as side note or less important information in a given context use aside ->43. <aside class="article-side-notes">44. <p>I think I'm more on the side and

30、should not receive the main credits</p>45. </aside>46. <!- Articles can also contain footers. If you have footnotes for an article place them into a footer element ->47. <footer class="article-foot-notes">48. <!- The time element can be used to annotate a timesta

31、mp. Use the datetime attribute to specify ISO time49. while the actual text in the time element can also be more human readable / relative ->50. <p>This article was created by David <time datetime="2021-01-01 00:00" class="time">1 month ago</time></p>51

32、. </footer>52. </article>53. 54. <!- In a section, footnotes or similar information can also go into a footer element ->55. <footer class="section-footer">56. <p>Related sections: Events, Public holidays</p>57. </footer>58. </section>59

33、. </main>60. 61. <!- Your page footer should go into a global footer element ->62. <footer class="page-footer">63. Copyright 202164. </footer>多媒体回溯对页面上的媒体而言，像图片、视频、canvas 动画等，要确保其有可替代的接入接口。图片文件我们可采用有意义的备选文本alt，视频和音频文件我们可以为其加上说明文字或字幕。提供可替代内容对可用性来说十分重要。试想，一位盲人用户

34、如何能知晓一张图片是什么，要是没有 alt 的话。图片的 alt 属性是可不填写内容的，纯装饰性的图片就可用这么做：alt=""。不推荐1. <img src="luke-skywalker.jpg">推荐1. <img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse">尽量用 alt 标签去描述图片，设想你需要对于那些只能通过语音或者看不见图片的用户表达图片到底是什么。不推荐1. <img src=

35、"huge-spaceship-approaching-earth.jpg" alt="Header image">推荐1. <img src="huge-spaceship-approaching-earth.jpg" alt="A huge spaceship that is approaching the earth">关注点别离理解 web 中如何和为何区分不同的关注点，这很重要。这里的关注点主要指的是：信息HTML 结构、外观CSS和行为JavaScript。为了使它们成为可维护的干净整

36、洁的代码，我们要尽可能的将它们别离开来。严格地保证结构、表现、行为三者别离，并尽量使三者之间没有太多的交互和联系。就是说，尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。清晰的分层意味着：· 不使用超过一到两张样式表i.e. main.css, vendor.css· 不使用超过一到两个脚本学会用合并脚本· 不使用行内样式<style>.no-good </style>· 不在元素上使用

37、style 属性<hr style="border-top: 5px solid black">· 不使用行内脚本<script>alert('no good')</script>· 不使用表象元素i.e. <b>, <u>, <center>, <font>, <b>· 不使用表象 class 名i.e. red, left, center不推荐1. <!DOCTYPE htm

38、l>2. <html>3. <head>4. <link rel="stylesheet" href="base.css">5. <link rel="stylesheet" href="grid.css">6. <link rel="stylesheet" href="type.css">7. <link rel="stylesheet" href="modules/tea

39、ser.css">8. </head>9. <body>10. <h1 style="font-size: 3rem"></h1>11. <b>I'm a subtitle and I'm bold!</b>12. <center>Dare you center me!</center>13. <script>14. alert('Just dont.');15. </script>16. <div c

40、lass="red">I'm important!</div>17. </body>18. </html>推荐1. <!DOCTYPE html>2. <html>3. <head>4. <!- Concatinate your style sheets into a single one ->5. <link rel="stylesheet" href="main.css">6. </head>7. <bo

41、dy>8. <!- Don't use style attributes but assign sensible classes and apply styles in the stylesheet ->9. <h1 class="title"></h1>10. <!- Don't use presentational elements and assign sensible classes ->11. <div class="sub-title">I'm a su

42、btitle and I'm bold!</div>12. <!- Maybe your comments get centered in your presentation but that decision is up to the stylesheet ->13. <span class="comment">Dare you center me!</span>14. <!- You wanted to make it red because it's important so then also n

43、ame the class important and decide in the stylesheet15. what you want to do with it ->16. <div class="important">I'm important!</div>17. 18. <!- Put all your scripts into files and concatinate them into a single one ->19. <script async src="main.js&qu

44、ot;></script>20. </body>21. </html>HTML 内容至上不要让非内容信息污染了你的 HTML。现在貌似有一种倾向：通过 HTML 来解决设计问题，这是显然是不对的。HTML 就应该只关注内容。HTML 标签的目的，就是为了不断地展示内容信息。· 不要引入一些特定的 HTML 结构来解决一些视觉设计问题· 不要将 img 元素当做专门用来做视觉设计的元素以下例子展示了误将 HTML 用来解决设计问题的这两种情况：不推荐1. <!- We should not introduce

45、 an additional element just to solve a design problem ->2. <span class="text-box">3. <span class="square"></span>4. See the square next to me?5. </span>1. .text-box > .square 2. display: inline-block;3. width: 1rem;4. height: 1rem;5. background-color

46、: red;6. 推荐1. <!- That's clean markup! ->2. <span class="text-box">3. See the square next to me?4. </span>1. /* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */2. .text-box:before 3. content: "

47、;"4. display: inline-block;5. width: 1rem;6. height: 1rem;7. background-color: red;8. 图片和 SVG 图形能被引入到 HTML 中的唯一理由是它们呈现出了与内容相关的一些信息。不推荐1. <!- Content images should never be used for design elements! ->2. <span class="text-box">3. <img src="square.svg" alt="

48、;Square" />4. See the square next to me?5. </span>推荐1. <!- That's clean markup! ->2. <span class="text-box">3. See the square next to me?4. </span>1. /* We use a :before pseudo element with a background image to solve the problem */2. .text-box:before 3.

49、 content: ""4. display: inline-block;5. width: 1rem;6. height: 1rem;7. background: url(square.svg) no-repeat;8. background-size: 100%;9. Type 属性省略样式表与脚本上的 type 属性。鉴于 HTML5 中以上两者默认的 type 值就是 text/css 和 text/javascript，所以 type 属性一般是可以忽略掉的。甚至在老旧版本的浏览器中这么做也是平安可靠的。不推荐1. <link rel="style

50、sheet" href="main.css" type="text/css">2. <script src="main.js" type="text/javascript"></script>推荐1. <link rel="stylesheet" href="main.css">2. <script src="main.js"></script>可用性如果 HTML5 语义化标签使

51、用得当，许多可用性问题已经引刃而解。ARIA 规那么在一些语义化的元素上可为其添上默认的可用性角色属性，使用得当的话已使网站的可用性大局部成立。假设你使用 nav,aside, main, footer 等元素，ARIA 规那么会在其上应用一些关联的默认值。更多细节可参考 ARIA specification另外一些角色属性那么能够用来呈现更多可用性情景i.e. role="tab"。Tab Index 在可用性上的运用检查文档中的 tab 切换顺序并传值给元素上的 tabindex，这可以依据元素的重要性来重新排

52、列其 tab 切换顺序。你可以设置 tabindex="-1" 在任何元素上来禁用其 tab 切换。当你在一个默认不可聚焦的元素上增加了功能，你应该总是为其加上 tabindex 属性使其变为可聚焦状态，而且这也会激活其 CSS 的伪类 :focus。选择适宜的 tabindex 值，或是直接使用 tabindex="0" 将元素们组织成同一 tab 顺序水平，并强制干预其自然阅读顺序。微格式在 SEO 和可用性上的运用如果 SEO 和可用性环境条件允许的话，建议考

53、虑采用微格式。微格式是通过在元素标签上申明一系列特定数据来达成特定语义的方法。谷歌、微软和雅虎对如何使用这些额外的数据一定程度上的达成一致，如果正确的使用，这将给搜索引擎优化带来巨大的好处。你可以访问获得更多内容细节。看一个电影网站的简单例子：不带微格式1. <div>2. <h1>Avatar</h1>3. <span>Director: James Cameron (born August 16, 1954)</span>4. <span>Science fiction<

54、;/span>5. <a href="./movies/avatar-theatrical-trailer.html">Trailer</a>6. </div>带有微格式1. <div itemscope itemtype =" ://Movie">2. <h1 itemprop="name">Avatar</h1>3. <div itemprop="director" itemscope itemtype=&q

55、uot; ://Person">4. Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>5. </div>6. <span itemprop="genre">Science fiction</span>7. <a href="./mov

56、ies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>8. </div>ID 和锚点通常一个比较好的做法是将页面内所有的头部标题元素都加上 ID. 这样做，页面 URL 的 hash 中带上对应的 ID 名称，即形成描点，方便跳转至对应元素所处位置。打个比方，当你在浏览器中输入 URL :/your-site /about#best-practices，浏览器将定位至以下 H3 上。1. <h3 id="best-practice

57、s">Best practices</h3>格式化规那么在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格要另起一行。如果由于换行的空格引发了不可预计的问题，那将所有元素并入一行也是可以接受的，格式警告总好过错误警告。推荐1. <blockquote>2. <p><em>Space</em>, the final frontier.</p>3. </blockquote>4. 5. <ul>6. &l

58、t;li>Moe</li>7. <li>Larry</li>8. <li>Curly</li>9. </ul>10. 11. <table>12. <thead>13. <tr>14. <th scope="col">Income</th>15. <th scope="col">Taxes</th>16. </tr>17. </thead>18. <tb

59、ody>19. <tr>20. <td>$ 5.00</td>21. <td>$ 4.50</td>22. </tr>23. </tbody>24. </table>HTML 引号使用双引号(“) 而不是单引号() 。不推荐1. <div class='news-article'></div>推荐1. <div class="news-article"></div>1: 此处的空白元素指的是以下元素：area,

60、 base, br, col, command, embed, hr, img, input, keygen,link, meta, param, source, track, wbrJavaScript 标准全局命名空间污染与 IIFE总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，用以创立独立隔绝的定义域。这一举措可防止全局命名空间被污染。IIFE 还可确保你的代码不会轻易被其它全局命名

61、空间里的代码所修改i.e. 第三方库，window 引用，被覆盖的未定义的关键字等等。不推荐1. var x = 10,2. y = 100;3. 4. / Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this5. / will be stored in the window object. This is very unclean and needs to be avoided.6. console.log(w

62、indow.x + ' ' + window.y);推荐1. / We declare a IIFE and pass parameters into the function that we will use from the global space2. (function(log, w, undefined)3. 'use strict'4. 5. var x = 10,6. y = 100;7. 8. / Will output 'true true'9. log(w.x = undefined) + '

63、' + (w.y = undefined);10. 11. (window.console.log, window);IIFE立即执行的函数表达式无论何时，想要创立一个新的封闭的定义域，那就用 IIFE。它不仅防止了干扰，也使得内存在执行完后立即释放。所有脚本文件建议都从 IIFE 开始。立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的，但写在内使得整个表达式看起来更像一个整体，因此推荐这么做。不推荐1. (function()();推荐1. (function()();so，用以下写法来格式化你的 IIFE 代码：1. (function(

64、)2. 'use strict'3. 4. / Code goes here5. 6. ();如果你想引用全局变量或者是外层 IIFE 的变量，可以通过以下方式传参：1. (function($, w, d)2. 'use strict'3. 4. $(function() 5. w.alert(d.querySelectorAll('div').length);6. );7. (jQuery, window, document);严格模式ECMAScript 5 严格模式可在整个脚本或独个方法内被激活。它对应不同的 javascript 语境会做更加严格的错误检查。严格模式也确保了 javascript 代码更加的健壮，运行的也更加快速。严格模式会阻止使用在未来很可能

人人文库> 全部分类> 专业文献 > 工程机械

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最好最全面的前端开发规则

文档简介

温馨提示

最新文档

评论

最好最全面的前端开发规则

文档简介

温馨提示

最新文档

评论

相关文档