JS 互動程式碼這樣寫可能好維護點

bigbug發表於2020-05-31
JS

用 “`” 做字串拼接

維護老專案,看到動態渲染的地方是這樣寫的:

let pageHtml = "";
for (val of data) {
    pageHtml = pageHtml + "<h1>" + val.Title + "</h1>";
    pageHtml = pageHtml + "<div class="balabal">"
    // ... More...
    pageHtml = pageHtml + "</div>";
}

篇幅很長的話,不便於維護,但如果這樣寫,可能情況會好一點:

let pageHtml = "";
for (val of data) {
    pageHtml = pageHtml + ` <h5 class="card-title">${val.Title}</h5>
            <div>${val.Text}</div>
            直接寫其它的html元素,要輸出就用 ${val.變數}
    `;
}

使用 “`” ,能夠讓要渲染的內容更直觀的表現出來,能清楚的瞭解使用到了哪些動態資料.

考慮 JS 作用域

還有一個問題就是,很多的用於前段互動的 JS 沒有考慮到作用域,簡單的來說就是直接在頁面這樣寫:

// pub.js file 

funciton showTip(){
    // do someting
}

在引用 pub.js 的頁面,寫了一個同名的方法,這就會導致原本的一些邏輯沒有生效:

<button onClick="showTip()">按鈕</button>

<script src="/pub.js" crossorigin="anonymous"></script>
<script>
    function showTip(){
        // do someting
    }
</script>

這不能怪取名字太難,只要我們養成這樣的習慣,就可以避免無意觸發其它同名的風險:

<button onClick="logIndexPage.showTip()">按鈕</button>
<script src="/pub.js" crossorigin="anonymous"></script>
<script>
    let logIndexPage = {
        showTip: () => {
            // do someting
        },
    }
</script>

搬磚有搬磚的快樂,現在看到“充滿活力”的程式碼,我變得淡定了,因為可能有一個人正在維護我以前天馬行空的程式碼,希望他不會問候我.

本作品採用《CC 協議》，轉載必須註明作者和本文連結

Knowledge is power only when it can be made available and practical.

相關文章