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.

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!