一个 JavaScript 最佳实践的例子

GreyZeng

已于 2022-07-11 10:43:45 修改

阅读量142

点赞数

分类专栏：前端文章标签：前端最佳实践 CSS HTML JavaScript

于 2022-06-21 09:22:56 首次发布

本文链接：https://blog.csdn.net/hotonyhui/article/details/125384750

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一个 JavaScript 最佳实践的例子

作者：Grey

原文地址：一个 JavaScript 最佳实践的例子

举个例子：

用户在点击某个链接的时候需要弹出一个新窗口

方法1. 采用"javascript:"伪协议

代码清单：

jsbestpractise1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS Best Practice</title>
</head>

<body>
    <a href="javascript:popUp('http://www.baidu.com');">Example</a>
    <script src="js/jsbestpractise1.js"></script>
</body>

</html>

js/jsbestpractise1.js

function popUp(winURL) {
    window.open(winURL, "popup", "width=320,height=480");
}

这种方式在支持"javascript:"伪协议的浏览器中运行正常，但是禁用了JavaScript功能的浏览器会什么也不做。所以，这种调用方式并不好。

方法2. 通过onclick方法来触发弹出链接：

代码清单：

jsbestpractise2.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS Best Practice</title>
</head>

<body>
    <a href="#" onclick="popUp('http://www.baidu.com/');return false;">Example</a>
    <script src="js/jsbestpractise2.js"></script>
</body>

</html>

js/jsbestpractise2.js

function popUp(winURL) {
    window.open(winURL, "popup", "width=320,height=480");
}

这种方式对于禁用了JavaScript功能的浏览器同样什么也不做。

所以，这种调用方式也不好。

优化1

我们可以在链接的href属性中设置为真实存在的URL地址，让它成为一个有效的链接，这样，即便浏览器禁用了JavaScript，也可以通过链接直接到目标地址，好过什么都不做。

代码清单：

jsbestpractise3.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS Best Practice</title>
</head>

<body>
    <a href="http://www.baidu.com/" onclick="popUp('http://www.baidu.com/');return false;">Example</a>
    <script src="js/jsbestpractise3.js"></script>
</body>

</html>

js/jsbestpractise3.js

function popUp(winURL) {
    window.open(winURL, "popup", "width=320,height=480");
}

我们还可以把链接简化一些：

jsbestpractise4.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS Best Practice</title>
</head>

<body>
    <a href="http://www.baidu.com/" onclick="popUp(this.href);return false;">Example</a>
    <script src="js/jsbestpractise3.js"></script>
</body>

</html>

优化2

分离JavaScript，类似style属性，onclick方法也是一种既没有效率又容易引发问题的做法，

如果我们用类似CSS机制中的class属性来分离JavaScript代码和HTML页面，网页就会健壮的多。

代码清单：

jsbestpractise5.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS Best Practice</title>
</head>

<body>
    <a href="http://www.baidu.com/" class="popUp">Example</a>
    <script src="js/jsbestpractise5.js"></script>
</body>

</html>

js/jsbestpractise5.js

window.onload = prepareLinks;
function prepareLinks() {
    var links = document.getElementsByTagName("a");
    if (links.length > 0) {
        for (var i = 0; i < links.length; i++) {
            if (links[i].getAttribute("class") == "popUp") {
                links[i].onclick = function () {
                    popUp(this.getAttribute("href"));
                    return false;
                }
            }
        }
    }
}

function popUp(winURL) {
    window.open(winURL, "popup", "width=320,height=480");
}

这种方式的步骤如下：

获取所有链接：document.getElementsByTagName("a");
遍历链接，如果某个链接的class=popup，就表示这个链接在被点击的时候应该调用popUp函数。

优化3

检测浏览器是否支持某些JavaScript方法，如果不支持，则不执行相应的JS方法，比如：

这个例子中用到了getElementsByTagName这个方法，我们可以在执行这个方法之前，检测一下

浏览器是否支持这样的方法：

代码清单：

js/jsbestpractise7.js

window.onload = prepareLinks;
function prepareLinks() {
    if (!document.getElementsByTagName) {
        return false;
    }
    var links = document.getElementsByTagName("a");
    if (links.length > 0) {
        for (var i = 0; i < links.length; i++) {
            if (links[i].getAttribute("class") == "popUp") {
                links[i].onclick = function () {
                    popUp(this.getAttribute("href"));
                    return false;
                }
            }
        }
    }
}

function popUp(winURL) {
    window.open(winURL, "popup", "width=320,height=480");
}

自此，我们就完成了对这个例子的一些代码优化，当然，还有更进一步的优化，

比如：压缩脚本，本文暂不作说明。

代码清单

hello-js

参考资料

JavaScript DOM编程艺术（第2版）

GreyZeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
一个 JavaScript 最佳实践的例子

作者：Grey原文地址：一个 JavaScript 最佳实践的例子举个例子：方法1. 采用伪协议代码清单：这种方式在支持伪协议的浏览器中运行正常，但是禁用了功能的浏览器会什么也不做。所以，这种调用方式并不好。方法2. 通过方法来触发弹出链接：代码清单：js/jsbestpractise2.js这种方式对于禁用了功能的浏览器同样什么也不做。所以，这种调用方式也不好。优化1我们可以在链接的属性中设置为真实存在的URL地址，让它成为一个有效的链接，这样，即便浏览器禁用了，也可以通过链接直接到目标地址，好
复制链接

扫一扫