經典范例：7個JavaScript最佳實踐

文共2976字，預計學習時長6分鐘

來源：Pexels

1. 編寫構造函數時，在 .prototype上添加方法

根據我頭兩年接觸JavaScript的經歷，如果你是一名JavaScript新手，可能會對這部分有些陌生。

（請記住，這并不適用于類，因為類已經將方法附加到它們的prototype上。）

以下是構造函數的一個示例：

functionFrog(name, gender)  {

  this.name= name

  this.gender= gender

Frog.prototype.leap=function(feet) {

  console.log(`Leaping ${feet}ft into the  air`)

為什么不像以下示例一樣，直接附加leap方法呢？

functionFrog(name, gender)  {

  this.name= name

  this.gender= gender

  this.leap=function(feet) {

    console.log(`Leaping ${feet}ft into the  air`)

當把方法直接添加到prototype時，它們將在構造函數創建的所有實例之間共享。

換句話說，使用上個例子，如果創建三個獨立的 Frog (從 this.leap = function() {...})，然后以創建三個獨立的副本結束。這是一個問題，因為leap方法總是保持不變，不需要在實例上建立自己的副本。

最終導致本可以避免的性能下降。this.name 和this.gender屬性需要在實例上定義，因為現實生活中，frog可能有自己的名字和性別，所以才在實例級別上創建它們。

這里是流行的request 包使用這種方法的一個示例（在GitHub上）。

2. 使用TypeScript

TypeScript不僅能為類型安全提供強大防御，還能幫助預防錯誤，已經在JavaScript社區中得到了廣泛應用。

使用TypeScript能使編譯器在代碼運行之前對潛在的錯誤進行監測并顯示警告。

但這還遠不能解釋為什么TypeScript可以適用于任何情況。TypeScript最好的一點是允許在主流瀏覽器支持之前使用JavaScript中的新特征，因為這些特征被編譯成更早期的JavaScript版本，因此能在舊版本的瀏覽器中運行。

3. 編寫測試

如果要認真處理一個項目，必須使用測試，這樣應用程序才更能夠更加可預測、少出錯、并靈活應對未來的變化。換句話說，如果打算做一個經得起時間考驗的項目，沒有比在整個代碼中建立測試更好的方法。在代碼中投入的測試越多，將其應用于生產環境后，對它的信心也會越多。

測試最好的部分是什么？是能捕捉錯誤，使其無從出現——有人不想要那種能力嗎？我確定我想要。這就是我在項目中寫單元測試的原因。

來源：Pexels

4. 使用JSON.parse或JSON.stringify時，務必考慮使用 try/catch

JavaScript中，當把JSON作為輸入傳遞給JSON.parse時，需要一個正確格式的JSON作為第一個參數。如果格式不正確，會提示JSON解析錯誤。

來自JSON解析錯誤的危險是接受無效的JSON會導致應用程序崩潰。最近我們的一個web項目失敗了，因為另一個內置程序包沒有在try/catch里安裝JSON.parse 。最終導致了web頁面失效，而且由于JavaScript運行時被破壞，除非內置程序包修復它，否則無法修正錯誤。

SyntaxError: Unexpected token }in JSON at position 107

不應總是期望有效的JSON輸入，因為它會收到如“>”的奇怪字符，這在今天是很常見的。

5. 使用常規的.type屬性進行區分

這個方法很棒，得到了廣泛使用。React開發人員可能每天都能看到這種做法，特別是使用Redux工作時。

使用類似方法也能使開發流程變得無比簡單，因為它甚至可以很好的記錄自己。

functioncreateSpecies(type, name,  gender) {

  if (type ==='frog') {

    returncreateFrog(name, gender)

  } elseif (type ==='human') {

    returncreateHuman(name, gender)

  } elseif (type == undefined) {

    thrownewError('Cannot create  a species with an unknown type')

const myNewFrog =createSpecies('frog', 'sally', 'female')

6. 使用工廠函數（factory function）

如果你不知道什么是工廠函數，那么它就是一個返回對象的函數（它既不是類，也不是構造函數）。通過這個簡單概念，就可以利用JavaScript及其特征來創建強大健壯的應用程序。

必須知道，當函數被new關鍵字調用時，該函數就不再是工廠函數了。

為什么要用工廠函數？

使用工廠函數可以輕松的生成對象實例，且無需涉及類或new關鍵字。

其本質上意味著，它們最終會被當做函數來對待，即可用于組合對象、函數，甚至Promise函數。這表明可以將工廠函數混合搭配，以創建一個升級版工廠函數，然后繼續和別的函數或對象組合創建成更強的工廠函數。其可能性是無窮無盡的。

考慮到這一點，將其與好的代碼實踐相結合，它便開始大放光彩了。

以下是工廠函數的一個簡單示例：

functioncreateFrog(name) {

  const children = []

  return {

    addChild(frog) {

      children.push(frog)

},

const mikeTheFrog =createFrog('mike')

當使用足夠多的工廠函數后，會意識到工廠函數比類構造函數有更強的可重用性。這減少了代碼量，縮短了代碼重構時間(因為工廠函數最終會返回任意對象)，縮短了從一個代碼到另一個代碼的管理時間。

來源：Pexels

7. 使函數盡可能的簡單

眾所周知，在JavaScript中很可能有同時做很多事情的大型函數。

編程新手可能覺得這是一件好事——之前當我寫了很大篇幅可以工作的代碼后，我的自我感覺非常好。這對我來說很重要，并給予我很大信心。畢竟它能正常運行，我就把自己的代碼有多么冗長這件事拋之腦后了。天哪，當時太幼稚了。

如果想寫更易維護的、簡單的、少出錯的代碼，最好使它盡量簡潔短小。代碼越簡潔，單獨測試也會越容易。

如果你更喜歡函數式編程范式，這一點尤其重要。函數執行一件事就應該把它做好，這是常識。

希望對你有用，獲得更完美的JavaScript的最佳實踐。

留言點贊關注

我們一起分享AI學習與發展的干貨

如轉載，請后臺留言，遵守轉載規范

tml叫做超本文標記語言，注意它只是標記語言，不是編程語言。

編寫規范：

由標記（html, div, p, h1等）組成
標記成對出現（<html>...</html>），也有例外，比如<img src=""/>、
標記有層級關系

<html>
    <head>
    </head>
    <body>
    </body><html>

標記有內容文本或屬性

<title>這是一個標簽</title><meta name="" content=""></meta>

注意：

html不區分大小寫
建議大家用雙引號

當然單引號也可以，但是雙引號才是professional的表現

html基本結構

<!DOCTYPE html><html lang="en">    <head>
        <meta charset="UTF-8">
        <title>Title</title>    </head>    <body>    </body></html>

doctype：必須這樣寫
html：其實不寫也可以，為了規范，還是寫上吧
head：用來設置網頁的信息，比如標題、小圖標等
body：網頁內容（可視化標簽）

特殊符號

空格：【分號是必須寫的】

注意，空格這里寫一個表示添加了一個空格，寫多個也只會有一個空格

好，現在我們新建一個名為index.html的文件，你可以在桌面建一個txt文件，然后修改擴展名為HTML，然后打開方式選擇sublime，或者其他編輯器。船長這里是建了一個flask項目，然后在templates文件夾下新建了一個。這里提醒大家的是，以后大家能用英文的地方盡量用英文，比如文件夾名、文件名等，不然會有各種問題等著你。

用pycharm這種IDE的話發現它會幫你寫好模板，這里建議大家清空然后自己寫一遍加深印象：

<!DOCTYPE html><html>
    <head>
        <title>第一節課</title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        Hello World!    </body></html>

寫了Hello World!你就開始了HTML學習啦~

先和大家說一下什么是可視化標簽，一句話：可以在<body>中看到的標簽就是可視化標簽，比如<p>、<body>、<div>等這些都是可以看到的，所以是可視化標簽；而<style>、<meta>等在<body>中不能看到的標簽，就是非可視化標簽。注意：只有可視化標簽，才能用css改變它的樣式。

常用的可視化標簽

這里只說幾個有代表性的，其實所有標簽都差不多，就像鋼筆和鉛筆一樣，都是寫字用的，只是作用不一樣。

<!DOCTYPE html>
<html>
    <head>
        <title>第一節課</title>
        <meta charset="UTF-8"/>
        <style>
            div{
                border:1px solid green;
            }
            span{
                border:1px solid red;
            }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
    </body>
</html>

上面代碼頁面沒講的內容大家不要急，后面會講。顯示：

發現上面那個框比較長，下面的和文字長度一樣，這是因為有一個display屬性，div標簽display默認值是block，span標簽display默認值是inline，所以如果我把span標簽的display值改為block，那么兩個顯示就會相同了：

<!DOCTYPE html><html>
    <head>
        <title>第一節課</title>
        <meta charset="UTF-8"/>
        <style>
            div{                border:1px solid green;                                display: block;                        }
            span{                border:1px solid red;                                display: block;                        }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
    </body></html>

顯示：

（代碼里style標簽里的內容就是css修改可視化標簽的方式。）

我們再加一個p標簽：

<!DOCTYPE html><html>
    <head>
        <title>第一節課</title>
        <meta charset="UTF-8"/>
        <style>
            div{                border:1px solid green;                                display: block;                        }
            span{                border:1px solid red;                                display: block;                        }
            p{                border: 1px solid palevioletred;                        }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
        <p>This is a p</p>
    </body></html>

發現p標簽和上面的內容空了一行，這是因為p標簽的margin屬性默認值不是0，所以如果想去掉空行，只需要在style中修改p標簽margin值為0：

<!DOCTYPE html><html>
    <head>
        <title>第一節課</title>
        <meta charset="UTF-8"/>
        <style>
            div{                border:1px solid green;                                display: block;                        }
            span{                border:1px solid red;                                display: block;                        }
            p{                border: 1px solid palevioletred;                                margin: 0px;                        }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
        <p>This is a p</p>
    </body></html>

看到頁面樣式變成了這樣：

a標簽

a標簽因為有一個href屬性，才變成了一個超鏈接，而div標簽就沒有href屬性，以后我們遇到****頁面跳轉或表單提交的的文字，都用a標簽：

<!DOCTYPE html><html>
    <head>
        <title>第一節課</title>
        <meta charset="UTF-8"/>
        <style>
            div{                border:1px solid green;                                display: block;                        }
            span{                border:1px solid red;                                display: block;                        }
            p{                border: 1px solid palevioletred;                                margin: 0px;                        }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
        <p>This is a p</p>
        <a href="https://www.baidu.com">百度</a>
    </body></html>

這里要注意的是，href屬性的地址寫的時候必須加協議，就是http或https或file等，如果不加就會頁面跳轉錯誤。此外，大家看到這樣寫頁面是在當前頁面進行，跳轉，很多時候頁面跳轉需要新開標簽頁，那么我們就要給a標簽增加一個target屬性，值為_blank：

<a href="https://www.baidu.com" target="_blank">百度</a>

這個target默認值為_self。

img標簽

我們先看一下文檔結構：

這里我們文件當前位置就是lesson.html，所以現在我們img屬性src給的值要進入imgs文件夾，所以我們可以用相對路徑來表示，看代碼：

<!DOCTYPE html><html>
    <head>
        <title>第一節課</title>
        <meta charset="UTF-8"/>

    </head>
    <body>
        <a href="https://www.baidu.com" target="_blank">百度</a>
        <img src="imgs/0.png">
    </body></html>

上面src后面跟的就是相對路徑。

頁面顯示：

src除了用來設置圖片路徑以外，還用來設置alt屬性，alt屬性是用來給搜索引擎用的，以便你寫的頁面可以被搜索引擎搜索到。此外它還有width和height屬性，比如剛才的圖片比較大，我們現在修改圖片的大小，只需要：

<img src="imgs/0.png" width="5%" height="5%">

如果你希望自己的圖片是網絡上的圖片，那只需要粘貼你希望放上去的圖片地址，比如，放百度的背景，那么只需要看一下百度的地址：

然后復制這個地址，粘貼到你的src路徑里：

<img src="https://www.baidu.com/img/bd_logo1.png" width="50%" height="50%">

但是要注意，如果圖片寫的是網絡上的圖片，要必須確定有網，不然圖片是不顯示的。

ul li標簽

這兩個標簽是列表。

<!DOCTYPE html><html>
    <head>
        <title>第一節課</title>
        <meta charset="UTF-8"/>

    </head>
    <body>
        <a href="https://www.baidu.com" target="_blank">百度</a>
        <img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">
        <ul>
            <li>第一行</li>
            <li>第二行</li>
            <li>第三行</li>
        </ul>
    </body></html>

顯示：

你可能會說除了ul li還有ol li，不用管那么多，記住這個就夠了。
記住，只要頁面中有固定樣式的列表，那就用ul li，比如：

不信大家就去天貓看一下。

table

表格。之前說過了，以今天的為準。tr代表行，td代表列。

<table>
    <tr>
        <td>第1行1列</td>
        <td>第1行2列</td>
    </tr>
    <tr>
        <td>第2行1列</td>
        <td>第2行2列</td>
    </tr></table>

顯示：

如果想顯示邊框，可以加個border屬性：

<table border="1">...</table>

還要知道，table已經用的很少了，因為存在瀏覽器的兼容性，很多時候都被ul li代替了。大家會想到上次還說的tbody現在卻沒有寫，其實即使我們不寫瀏覽器也會幫我們加上：

上圖中的tbody就是瀏覽器默認給我們加上的。此外，如果是表的第一行，需要加粗顯示的話，可以將tr改為th：

<table border="1">
    <tr>
        <th>第1行1列</th>
        <th>第1行2列</th>
    </tr>
    <tr>
        <td>第2行1列</td>
        <td>第2行2列</td>
    </tr></table>

th用來做表頭，默認字體居中顯示。還有caption作為表格的標題：

<table border="1">
    <caption>表格標題</caption>
    <tr>
        <th>第1行1列</th>
        <th>第1行2列</th>
    </tr>
    <tr>
        <td>第2行1列</td>
        <td>第2行2列</td>
    </tr></table>

tbody和caption等這些都不用記。

合并表格：

<table border="1">
    <caption>表格標題</caption>
    <tr>
        <th>第1行1列</th>
        <th>第1行2列</th>
        <th>分數</th>
    </tr>
    <tr>
        <td>第2行1列</td>
        <td>第2行2列</td>
        <td>10</td>
    </tr>
    <tr>
        <td colspan="2">總成績</td>                        
        <td>20</td>
    </tr></table>

我們給td標簽加了colspan="2"，就可以合并兩行了：

最后給大家看一個例子，圖片來自https://nba.hupu.com/teams：

<!DOCTYPE html><html>
    <head>
        <title>第一節課</title>
        <meta charset="UTF-8"/>

    </head>
    <body>
        <a href="https://www.baidu.com" target="_blank">百度</a>
        <img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">
        <ul>
            <li>第一行</li>
            <li>第二行</li>
            <li>第三行</li>
        </ul>
        <table border="1">
            <caption>表格標題</caption>
            <tr>
                <th>第1行1列</th>
                <th>第1行2列</th>
                <th>分數</th>
                <th>一整行</th>
            </tr>
            <tr>
                <td><img src="imgs/0.png"></td>
                <td><img src="imgs/1.png"></td>
                <td><img src="imgs/2.png"></td>
                <td rowspan="3"><img src="imgs/logo.png"></td>
            </tr>
            <tr>
                <td><img src="imgs/3.png"></td>
                <td><img src="imgs/4.png"></td>
                <td><img src="imgs/5.png"></td>
            </tr>
            <tr>
                <td><img src="imgs/6.png"></td>
                <td><img src="imgs/7.png"></td>
                <td><img src="imgs/8.png"></td>
            </tr>
        </table>
    </body></html>

顯示：

寫會了上面這個例子，table這里就沒什么問題了。大家想學就得加把勁，自己不努力誰也教不會。

如果對接口、性能、自動化測試、面試經驗交流等感興趣的，可以關注我的頭條號，我會不定期的發放免費的資料，這些資料都是從各個技術網站搜集、整理出來的，如果你有好的學習資料可以私聊發我，我會注明出處之后分享給大家。歡迎分享，歡迎評論，歡迎轉發。需要資料的同學可以關注小編+轉發文章+私信【測試資料】

案例研究演示了如何構建一個完整的 <AppML> 互聯網應用程序，具有針對數據庫中的若干表進行信息列舉、編輯和搜索的功能。

添加 HTML 模板

我們將演示如何向 HTML 頁面添加 HTML 模板。

列出客戶

HTML - View

<h1>Customers</h1>

<tr>

<th>Customer</th>

<th>Country</th>

</tr>

<td>#CustomerName#</td>

<td>#Country#</td>

</tr>

</table>

var customers

customers=new AppML("appml.php","Models/Customers");

customers.run("List01","Template01");

</script>

在線咨詢

上一篇：給機友發福利啦！筆記本游戲優化秘籍
下一篇：靜態網頁是什么及其優缺點有哪些？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

經典范例：7個JavaScript最佳實踐

1. 編寫構造函數時，在 .prototype上添加方法

2. 使用TypeScript

3. 編寫測試

4. 使用JSON.parse或JSON.stringify時，務必考慮使用 try/catch

5. 使用常規的.type屬性進行區分

6. 使用工廠函數（factory function）

7. 使函數盡可能的簡單

注意：

html基本結構

特殊符號

常用的可視化標簽

您的項目需求