經(jīng)典范例：7個(gè)JavaScript最佳實(shí)踐

文共2976字，預(yù)計(jì)學(xué)習(xí)時(shí)長6分鐘

來源：Pexels

1. 編寫構(gòu)造函數(shù)時(shí)，在 .prototype上添加方法

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

（請記住，這并不適用于類，因?yàn)轭愐呀?jīng)將方法附加到它們的prototype上。）

以下是構(gòu)造函數(shù)的一個(gè)示例：

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`)

當(dāng)把方法直接添加到prototype時(shí)，它們將在構(gòu)造函數(shù)創(chuàng)建的所有實(shí)例之間共享。

換句話說，使用上個(gè)例子，如果創(chuàng)建三個(gè)獨(dú)立的 Frog (從 this.leap = function() {...})，然后以創(chuàng)建三個(gè)獨(dú)立的副本結(jié)束。這是一個(gè)問題，因?yàn)閘eap方法總是保持不變，不需要在實(shí)例上建立自己的副本。

最終導(dǎo)致本可以避免的性能下降。this.name 和this.gender屬性需要在實(shí)例上定義，因?yàn)楝F(xiàn)實(shí)生活中，frog可能有自己的名字和性別，所以才在實(shí)例級別上創(chuàng)建它們。

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

2. 使用TypeScript

TypeScript不僅能為類型安全提供強(qiáng)大防御，還能幫助預(yù)防錯誤，已經(jīng)在JavaScript社區(qū)中得到了廣泛應(yīng)用。

使用TypeScript能使編譯器在代碼運(yùn)行之前對潛在的錯誤進(jìn)行監(jiān)測并顯示警告。

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

3. 編寫測試

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

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

來源：Pexels

4. 使用JSON.parse或JSON.stringify時(shí)，務(wù)必考慮使用 try/catch

JavaScript中，當(dāng)把JSON作為輸入傳遞給JSON.parse時(shí)，需要一個(gè)正確格式的JSON作為第一個(gè)參數(shù)。如果格式不正確，會提示JSON解析錯誤。

來自JSON解析錯誤的危險(xiǎn)是接受無效的JSON會導(dǎo)致應(yīng)用程序崩潰。最近我們的一個(gè)web項(xiàng)目失敗了，因?yàn)榱硪粋€(gè)內(nèi)置程序包沒有在try/catch里安裝JSON.parse 。最終導(dǎo)致了web頁面失效，而且由于JavaScript運(yùn)行時(shí)被破壞，除非內(nèi)置程序包修復(fù)它，否則無法修正錯誤。

SyntaxError: Unexpected token }in JSON at position 107

不應(yīng)總是期望有效的JSON輸入，因?yàn)樗鼤盏饺纭?gt;”的奇怪字符，這在今天是很常見的。

5. 使用常規(guī)的.type屬性進(jìn)行區(qū)分

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

使用類似方法也能使開發(fā)流程變得無比簡單，因?yàn)樗踔量梢院芎玫挠涗涀约骸?/p>

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. 使用工廠函數(shù)（factory function）

如果你不知道什么是工廠函數(shù)，那么它就是一個(gè)返回對象的函數(shù)（它既不是類，也不是構(gòu)造函數(shù)）。通過這個(gè)簡單概念，就可以利用JavaScript及其特征來創(chuàng)建強(qiáng)大健壯的應(yīng)用程序。

必須知道，當(dāng)函數(shù)被new關(guān)鍵字調(diào)用時(shí)，該函數(shù)就不再是工廠函數(shù)了。

為什么要用工廠函數(shù)？

使用工廠函數(shù)可以輕松的生成對象實(shí)例，且無需涉及類或new關(guān)鍵字。

其本質(zhì)上意味著，它們最終會被當(dāng)做函數(shù)來對待，即可用于組合對象、函數(shù)，甚至Promise函數(shù)。這表明可以將工廠函數(shù)混合搭配，以創(chuàng)建一個(gè)升級版工廠函數(shù)，然后繼續(xù)和別的函數(shù)或?qū)ο蠼M合創(chuàng)建成更強(qiáng)的工廠函數(shù)。其可能性是無窮無盡的。

考慮到這一點(diǎn)，將其與好的代碼實(shí)踐相結(jié)合，它便開始大放光彩了。

以下是工廠函數(shù)的一個(gè)簡單示例：

functioncreateFrog(name) {

  const children = []

  return {

    addChild(frog) {

      children.push(frog)

},

const mikeTheFrog =createFrog('mike')

當(dāng)使用足夠多的工廠函數(shù)后，會意識到工廠函數(shù)比類構(gòu)造函數(shù)有更強(qiáng)的可重用性。這減少了代碼量，縮短了代碼重構(gòu)時(shí)間(因?yàn)楣S函數(shù)最終會返回任意對象)，縮短了從一個(gè)代碼到另一個(gè)代碼的管理時(shí)間。

來源：Pexels

7. 使函數(shù)盡可能的簡單

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

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

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

如果你更喜歡函數(shù)式編程范式，這一點(diǎn)尤其重要。函數(shù)執(zhí)行一件事就應(yīng)該把它做好，這是常識。

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

留言點(diǎn)贊關(guān)注

我們一起分享AI學(xué)習(xí)與發(fā)展的干貨

如轉(zhuǎn)載，請后臺留言，遵守轉(zhuǎn)載規(guī)范

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

編寫規(guī)范：

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

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

標(biāo)記有內(nèi)容文本或?qū)傩?/li>

<title>這是一個(gè)標(biāo)簽</title><meta name="" content=""></meta>

注意：

html不區(qū)分大小寫
建議大家用雙引號

當(dāng)然單引號也可以，但是雙引號才是professional的表現(xiàn)

html基本結(jié)構(gòu)

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

doctype：必須這樣寫
html：其實(shí)不寫也可以，為了規(guī)范，還是寫上吧
head：用來設(shè)置網(wǎng)頁的信息，比如標(biāo)題、小圖標(biāo)等
body：網(wǎng)頁內(nèi)容（可視化標(biāo)簽）

特殊符號

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

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

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

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

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

寫了Hello World!你就開始了HTML學(xué)習(xí)啦~

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

常用的可視化標(biāo)簽

這里只說幾個(gè)有代表性的，其實(shí)所有標(biāo)簽都差不多，就像鋼筆和鉛筆一樣，都是寫字用的，只是作用不一樣。

<!DOCTYPE html>
<html>
    <head>
        <title>第一節(jié)課</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>

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

發(fā)現(xiàn)上面那個(gè)框比較長，下面的和文字長度一樣，這是因?yàn)橛幸粋€(gè)display屬性，div標(biāo)簽display默認(rèn)值是block，span標(biāo)簽display默認(rèn)值是inline，所以如果我把span標(biāo)簽的display值改為block，那么兩個(gè)顯示就會相同了：

<!DOCTYPE html><html>
    <head>
        <title>第一節(jié)課</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標(biāo)簽里的內(nèi)容就是css修改可視化標(biāo)簽的方式。）

我們再加一個(gè)p標(biāo)簽：

<!DOCTYPE html><html>
    <head>
        <title>第一節(jié)課</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>

發(fā)現(xiàn)p標(biāo)簽和上面的內(nèi)容空了一行，這是因?yàn)閜標(biāo)簽的margin屬性默認(rèn)值不是0，所以如果想去掉空行，只需要在style中修改p標(biāo)簽margin值為0：

<!DOCTYPE html><html>
    <head>
        <title>第一節(jié)課</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標(biāo)簽

a標(biāo)簽因?yàn)橛幸粋€(gè)href屬性，才變成了一個(gè)超鏈接，而div標(biāo)簽就沒有href屬性，以后我們遇到****頁面跳轉(zhuǎn)或表單提交的的文字，都用a標(biāo)簽：

<!DOCTYPE html><html>
    <head>
        <title>第一節(jié)課</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屬性的地址寫的時(shí)候必須加協(xié)議，就是http或https或file等，如果不加就會頁面跳轉(zhuǎn)錯誤。此外，大家看到這樣寫頁面是在當(dāng)前頁面進(jìn)行，跳轉(zhuǎn)，很多時(shí)候頁面跳轉(zhuǎn)需要新開標(biāo)簽頁，那么我們就要給a標(biāo)簽增加一個(gè)target屬性，值為_blank：

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

這個(gè)target默認(rèn)值為_self。

img標(biāo)簽

我們先看一下文檔結(jié)構(gòu)：

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

<!DOCTYPE html><html>
    <head>
        <title>第一節(jié)課</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除了用來設(shè)置圖片路徑以外，還用來設(shè)置alt屬性，alt屬性是用來給搜索引擎用的，以便你寫的頁面可以被搜索引擎搜索到。此外它還有width和height屬性，比如剛才的圖片比較大，我們現(xiàn)在修改圖片的大小，只需要：

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

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

然后復(fù)制這個(gè)地址，粘貼到你的src路徑里：

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

但是要注意，如果圖片寫的是網(wǎng)絡(luò)上的圖片，要必須確定有網(wǎng)，不然圖片是不顯示的。

ul li標(biāo)簽

這兩個(gè)標(biāo)簽是列表。

<!DOCTYPE html><html>
    <head>
        <title>第一節(jié)課</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，不用管那么多，記住這個(gè)就夠了。
記住，只要頁面中有固定樣式的列表，那就用ul li，比如：

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

table

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

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

顯示：

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

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

還要知道，table已經(jīng)用的很少了，因?yàn)榇嬖跒g覽器的兼容性，很多時(shí)候都被ul li代替了。大家會想到上次還說的tbody現(xiàn)在卻沒有寫，其實(shí)即使我們不寫瀏覽器也會幫我們加上：

上圖中的tbody就是瀏覽器默認(rèn)給我們加上的。此外，如果是表的第一行，需要加粗顯示的話，可以將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用來做表頭，默認(rèn)字體居中顯示。還有caption作為表格的標(biāo)題：

<table border="1">
    <caption>表格標(biāo)題</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>表格標(biāo)題</caption>
    <tr>
        <th>第1行1列</th>
        <th>第1行2列</th>
        <th>分?jǐn)?shù)</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標(biāo)簽加了colspan="2"，就可以合并兩行了：

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

<!DOCTYPE html><html>
    <head>
        <title>第一節(jié)課</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>表格標(biāo)題</caption>
            <tr>
                <th>第1行1列</th>
                <th>第1行2列</th>
                <th>分?jǐn)?shù)</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>

顯示：

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

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

案例研究演示了如何構(gòu)建一個(gè)完整的 <AppML> 互聯(lián)網(wǎng)應(yīng)用程序，具有針對數(shù)據(jù)庫中的若干表進(jìn)行信息列舉、編輯和搜索的功能。

添加 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>

在線咨詢

上一篇：給機(jī)友發(fā)福利啦！筆記本游戲優(yōu)化秘籍
下一篇：靜態(tài)網(wǎng)頁是什么及其優(yōu)缺點(diǎn)有哪些？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

經(jīng)典范例：7個(gè)JavaScript最佳實(shí)踐

1. 編寫構(gòu)造函數(shù)時(shí)，在 .prototype上添加方法

2. 使用TypeScript

3. 編寫測試

4. 使用JSON.parse或JSON.stringify時(shí)，務(wù)必考慮使用 try/catch

5. 使用常規(guī)的.type屬性進(jìn)行區(qū)分

6. 使用工廠函數(shù)（factory function）

7. 使函數(shù)盡可能的簡單

注意：

html基本結(jié)構(gòu)

特殊符號

常用的可視化標(biāo)簽

您的項(xiàng)目需求

1. 編寫構(gòu)造函數(shù)時(shí)，在 .prototype上添加方法

4. 使用JSON.parse或JSON.stringify時(shí)，務(wù)必考慮使用 try/catch