最好最全面的前端開發(fā)規(guī)則_第1頁
最好最全面的前端開發(fā)規(guī)則_第2頁
最好最全面的前端開發(fā)規(guī)則_第3頁
最好最全面的前端開發(fā)規(guī)則_第4頁
最好最全面的前端開發(fā)規(guī)則_第5頁
已閱讀5頁，還剩44頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

1、這是一份旨在增強團隊的開發(fā)協(xié)作，提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格標(biāo)準(zhǔn)，其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個局部。我們知道，當(dāng)一個團隊開始指定并實行編碼標(biāo)準(zhǔn)的話，錯誤就會變得更加顯而易見。如果一段特定的代碼不符合標(biāo)準(zhǔn)的話，它有可能只是代碼風(fēng)格錯誤，而也有可能會是 bug。早期指定標(biāo)準(zhǔn)就使得代碼審核得以更好的開展，并且可以更精確的地定位到錯誤。只要開發(fā)者們能夠保證源代碼源文件都嚴(yán)格遵循標(biāo)準(zhǔn)，那接下去所使用的混淆、壓縮和編譯工具那么可投其所好不盡相同。一般標(biāo)準(zhǔn)以下章節(jié)列舉了一些可應(yīng)用在 HTML, JavaScript 和 CSS/SCSS 上的通用規(guī)那么。

2、文件/資源命名在 web 工程中，所有的文件名應(yīng)該都遵循同一命名約定。以可讀性而言，減號-是用來分隔文件名的不二之選。同時它也是常見的 URL 分隔符i.e. /example /blog/my-blog-entry or，所以理所當(dāng)然的，減號應(yīng)該也是用來分隔資源名稱的好選擇。請確保文件命名總是以字母開頭而不是數(shù)字。而以特殊字符開頭命名的文件，一般都有特殊的含義與用處比方 compass1 中的下劃線就是用來標(biāo)記跳過直接編譯的文件用的。資源的字母名稱必須全為小寫，這是因為在某些對大小寫字母敏感的操作系統(tǒng)中，當(dāng)文件通過工具壓縮混淆后，或者人為修改正后，大小寫不同而導(dǎo)

3、致引用文件不同的錯誤，很難被發(fā)現(xiàn)。還有一些情況下，需要對文件增加前后綴或特定的擴展名比方 .min.js, .min.css，抑或一串前綴比方 。這種情況下，建議使用點分隔符來區(qū)分這些在文件名中帶有清晰意義的元數(shù)據(jù)。不推薦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.協(xié)議不要指定引入資源所帶的具體協(xié)議。當(dāng)引入圖片或其他媒體文件，還有樣式和腳本時，URLs 所指向的具體路徑，不要指定協(xié)議局部 :,  s:，除非這兩者協(xié)議都不可用。不指定協(xié)議使得 URL 從絕對的獲取路徑轉(zhuǎn)變?yōu)橄鄬Φ?，在請求資源協(xié)議無法確定時非常好用，而且還能為文件大小節(jié)省幾個字節(jié)。不推薦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. ();注釋注釋是你自己與你的小伙伴們了解代碼寫法和目的的唯一途徑。特別是在寫一些看似瑣碎的無關(guān)緊要的代碼時，由于記憶點不深刻，注釋就變得尤為重要了。編寫自解釋代碼只是一個傳說，沒有任何代碼

7、是可以完全自解釋的。而代碼注釋，那么是永遠(yuǎn)也不嫌多。當(dāng)你寫注釋時一定要注意：不要寫你的代碼都干了些什么，而要寫你的代碼為什么要這么寫，背后的考量是什么。當(dāng)然也可以參加所思考問題或是解決方案的鏈接地址。不推薦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 注釋用的。你甚至可以使用工具來為這些注釋生成文檔，這也是鼓勵開發(fā)者們寫注釋的一個好方法，因為一旦有了這樣方便的生成文檔的工具，他們通常會開始花更多時間在注釋細(xì)節(jié)上。1.  代碼

9、檢查對于比較寬松自由的編程語言來說，嚴(yán)格遵循編碼標(biāo)準(zhǔn)和格式化風(fēng)格指南就顯得極為重要。遵循標(biāo)準(zhǔn)固然很好，但是有自動化流程來確保其執(zhí)行情況，豈不更佳。Trust is good, control is better.對于 JavaScript，建議使用 JSLint 或 JSHint。HTML 標(biāo)準(zhǔn)文檔類型推薦使用 HTML5 的文檔類型申明： <!DOCTYPE html>.建議使用 text/html 格式的 HTML。防止使用 XHTML。XHTML 以及它的屬性，比方application/xhtml+xml 在瀏覽器中的應(yīng)用支

10、持與優(yōu)化空間都十分有限。HTML 中最好不要將無內(nèi)容元素1 的標(biāo)簽閉合，例如：使用 <br> 而非 <br />.HTML 驗證一般情況下，建議使用能通過標(biāo)準(zhǔn)標(biāo)準(zhǔn)驗證的 HTML 代碼，除非在性能優(yōu)化和控制文件大小上不得不做出讓步。使用諸如 W3C HTML validator 這樣的工具來進行檢測。標(biāo)準(zhǔn)化的 HTML 是顯現(xiàn)技術(shù)要求與局限的顯著質(zhì)量基線，它促進了 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>省略可選標(biāo)簽HTML5 標(biāo)準(zhǔn)中規(guī)定了 HTML 標(biāo)簽是可以省略的。但從可讀性來說，在開發(fā)的源文件中最好不要這樣做，因為省略標(biāo)簽可能會導(dǎo)致一些問題。省略一些可選的標(biāo)簽確實使得頁面大小減少，這很有用，尤其是對于一些大型網(wǎng)站來說。為了到達這一目的，我們可以在開發(fā)后期對頁面進行壓縮處理，在這

12、個環(huán)節(jié)中這些可選的標(biāo)簽完全就可以省略掉了。腳本加載出于性能考慮，腳本異步加載很關(guān)鍵。一段腳本放置在 <head> 內(nèi)，比方<script src="main.js"></script>，其加載會一直阻塞 DOM 解析，直至它完全地加載和執(zhí)行完畢。這會造成頁面顯示的延遲。特別是一些重量級的腳本，對用戶體驗來說那真是一個巨大的影響。異步加載腳本可緩解這種性能影響。如果只需兼容 IE10+，可將 HTML5 的 async 屬性加至腳本中，它可防止阻塞 DOM 的解析，甚至你可以將腳本引用寫在 <head&g

13、t; 里也沒有影響。如需兼容老舊的瀏覽器，實踐說明可使用用來動態(tài)注入腳本的腳本加載器。你可以考慮 yepnope 或labjs。注入腳本的一個問題是：一直要等到 CSS 對象文檔已就緒，它們才開始加載短暫地在 CSS 加載完畢之后，這就對需要及時觸發(fā)的 JS 造成了一定的延遲，這多多少少也影響了用戶體驗吧。終上所述，兼容老舊瀏覽器(IE9-)時，應(yīng)該遵循以下最正確實踐。腳本引用寫在 body 結(jié)束標(biāo)簽之前，并帶上 async 屬性。這雖然在老舊瀏覽器中不會異步加載腳本，但它只阻塞了 body 結(jié)束標(biāo)簽之前的 DOM 解析，這就大大降低了其阻塞影響。而在現(xiàn)代瀏覽器中

14、，腳本將在 DOM 解析器發(fā)現(xiàn) body 尾部的 script 標(biāo)簽才進行加載，此時加載屬于異步加載，不會阻塞 CSSOM但其執(zhí)行仍發(fā)生在 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>只在現(xiàn)代瀏覽器中，推薦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>語義化根據(jù)元素有時被錯誤地稱作“標(biāo)簽其被創(chuàng)造出來時的初始意義來使用它。打個比方，用 heading 元素來定義頭部標(biāo)題，p 元素來定義文字段落，用 a 元素來定義鏈接錨點，等等。有根據(jù)有目的地使用 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，視頻和音頻文件我們可以為其加上說明文字或字幕。提供可替代內(nèi)容對可用性來說十分重要。試想，一位盲人用戶

34、如何能知曉一張圖片是什么，要是沒有 alt 的話。圖片的 alt 屬性是可不填寫內(nèi)容的，純裝飾性的圖片就可用這么做：alt=""。不推薦1. <img src="luke-skywalker.jpg">推薦1. <img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse">盡量用 alt 標(biāo)簽去描述圖片，設(shè)想你需要對于那些只能通過語音或者看不見圖片的用戶表達圖片到底是什么。不推薦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">關(guān)注點別離理解 web 中如何和為何區(qū)分不同的關(guān)注點，這很重要。這里的關(guān)注點主要指的是：信息HTML 結(jié)構(gòu)、外觀CSS和行為JavaScript。為了使它們成為可維護的干凈整

36、潔的代碼，我們要盡可能的將它們別離開來。嚴(yán)格地保證結(jié)構(gòu)、表現(xiàn)、行為三者別離，并盡量使三者之間沒有太多的交互和聯(lián)系。就是說，盡量在文檔和模板中只包含結(jié)構(gòu)性的 HTML；而將所有表現(xiàn)代碼，移入樣式表中；將所有動作行為，移入腳本之中。在此之外，為使得它們之間的聯(lián)系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件。清晰的分層意味著：· 不使用超過一到兩張樣式表i.e. main.css, vendor.css· 不使用超過一到兩個腳本學(xué)會用合并腳本· 不使用行內(nèi)樣式<style>.no-good </style>· 不在元素上使用

37、style 屬性<hr style="border-top: 5px solid black">· 不使用行內(nèi)腳本<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 內(nèi)容至上不要讓非內(nèi)容信息污染了你的 HTML?，F(xiàn)在貌似有一種傾向：通過 HTML 來解決設(shè)計問題，這是顯然是不對的。HTML 就應(yīng)該只關(guān)注內(nèi)容。HTML 標(biāo)簽的目的，就是為了不斷地展示內(nèi)容信息。· 不要引入一些特定的 HTML 結(jié)構(gòu)來解決一些視覺設(shè)計問題· 不要將 img 元素當(dāng)做專門用來做視覺設(shè)計的元素以下例子展示了誤將 HTML 用來解決設(shè)計問題的這兩種情況：不推薦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 中的唯一理由是它們呈現(xiàn)出了與內(nèi)容相關(guān)的一些信息。不推薦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 中以上兩者默認(rèn)的 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 語義化標(biāo)簽使

51、用得當(dāng)，許多可用性問題已經(jīng)引刃而解。ARIA 規(guī)那么在一些語義化的元素上可為其添上默認(rèn)的可用性角色屬性，使用得當(dāng)?shù)脑捯咽咕W(wǎng)站的可用性大局部成立。假設(shè)你使用 nav,aside, main, footer 等元素，ARIA 規(guī)那么會在其上應(yīng)用一些關(guān)聯(lián)的默認(rèn)值。更多細(xì)節(jié)可參考 ARIA specification另外一些角色屬性那么能夠用來呈現(xiàn)更多可用性情景i.e. role="tab"。Tab Index 在可用性上的運用檢查文檔中的 tab 切換順序并傳值給元素上的 tabindex，這可以依據(jù)元素的重要性來重新排

52、列其 tab 切換順序。你可以設(shè)置 tabindex="-1" 在任何元素上來禁用其 tab 切換。當(dāng)你在一個默認(rèn)不可聚焦的元素上增加了功能，你應(yīng)該總是為其加上 tabindex 屬性使其變?yōu)榭删劢範(fàn)顟B(tài)，而且這也會激活其 CSS 的偽類 :focus。選擇適宜的 tabindex 值，或是直接使用 tabindex="0" 將元素們組織成同一 tab 順序水平，并強制干預(yù)其自然閱讀順序。微格式在 SEO 和可用性上的運用如果 SEO 和可用性環(huán)境條件允許的話，建議考

53、慮采用微格式。微格式是通過在元素標(biāo)簽上申明一系列特定數(shù)據(jù)來達成特定語義的方法。谷歌、微軟和雅虎對如何使用這些額外的數(shù)據(jù)一定程度上的達成一致，如果正確的使用，這將給搜索引擎優(yōu)化帶來巨大的好處。你可以訪問  獲得更多內(nèi)容細(xì)節(jié)。看一個電影網(wǎng)站的簡單例子：不帶微格式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 和錨點通常一個比較好的做法是將頁面內(nèi)所有的頭部標(biāo)題元素都加上 ID. 這樣做，頁面 URL 的 hash 中帶上對應(yīng)的 ID 名稱，即形成描點，方便跳轉(zhuǎn)至對應(yīng)元素所處位置。打個比方，當(dāng)你在瀏覽器中輸入 URL  :/your-site /about#best-practices，瀏覽器將定位至以下 H3 上。1. <h3 id="best-practice

57、s">Best practices</h3>格式化規(guī)那么在每一個塊狀元素，列表元素和表格元素后，加上一新空白行，并對其子孫元素進行縮進。內(nèi)聯(lián)元素寫在一行內(nèi)，塊狀元素還有列表和表格要另起一行。如果由于換行的空格引發(fā)了不可預(yù)計的問題，那將所有元素并入一行也是可以接受的，格式警告總好過錯誤警告。推薦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 標(biāo)準(zhǔn)全局命名空間污染與 IIFE總是將代碼包裹成一個 IIFE(Immediately-Invoked Function Expression)，用以創(chuàng)立獨立隔絕的定義域。這一舉措可防止全局命名空間被污染。IIFE 還可確保你的代碼不會輕易被其它全局命名

61、空間里的代碼所修改i.e. 第三方庫，window 引用，被覆蓋的未定義的關(guān)鍵字等等。不推薦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立即執(zhí)行的函數(shù)表達式無論何時，想要創(chuàng)立一個新的封閉的定義域，那就用 IIFE。它不僅防止了干擾，也使得內(nèi)存在執(zhí)行完后立即釋放。所有腳本文件建議都從 IIFE 開始。立即執(zhí)行的函數(shù)表達式的執(zhí)行括號應(yīng)該寫在外包括號內(nèi)。雖然寫在內(nèi)還是寫在外都是有效的，但寫在內(nèi)使得整個表達式看起來更像一個整體，因此推薦這么做。不推薦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);嚴(yán)格模式ECMAScript 5 嚴(yán)格模式可在整個腳本或獨個方法內(nèi)被激活。它對應(yīng)不同的 javascript 語境會做更加嚴(yán)格的錯誤檢查。嚴(yán)格模式也確保了 javascript 代碼更加的健壯，運行的也更加快速。嚴(yán)格模式會阻止使用在未來很可能

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論