JavaScript DOM编程艺术第五章最佳实践笔记

名字填充中

已于 2024-03-27 22:35:41 修改

阅读量699

点赞数 23

文章标签： javascript 笔记开发语言

于 2024-03-25 22:22:22 首次发布

本文链接：https://blog.csdn.net/qq_42388742/article/details/137028053

版权

5 最佳实践

5.1 本章内容

平稳退化：确保页面在没有JavaScript的情况下也能正常工作
分离JavaScript：把网页的结构和内容与JavaScript脚本的动作分开
向后兼容性：确保老版本的浏览器不会因为Javacript的使用而崩溃
性能考虑: 确保脚本执行性能最优。

本章提供最佳实践，保证编写脚本不会与愿望背道而驰

5.2 过去的错误

JavaScript的易学易用性，以及其在浏览器中的广泛使用，存在滥用和滥用问题。过去，许多开发者过度依赖JavaScript，导致代码质量下降，性能下降，用户体验下降。这部分可以去看原文，很长。
总结下来：
在编写代码时，要考虑如果用户浏览器不支持JavaScript，代码是否能正常运行，以及用户体验是否会受到影响。

5.3 平稳退化

平稳退化（Stability Fallback）是指当用户浏览器不支持JavaScript时，页面仍然能够正常显示，并且页面的最基本功能也能正常使用。

例如，点击支付链接需要弹窗场景，需要打开新弹窗到支付页面，但是用户浏览器不支持JavaScript时，平稳退化要用户任留在当前页面，并且提示用户相关信息。
javascrip使用window.open()方法打开一个新的窗口，该方法有三个参数。

window.open(url, name, features);

第一个参数是目标URL，第二个参数是窗口名称，第三个参数是窗口特征。

function popUp(winURL) {
    window.open(winURL, "payment_window", "width=600,height=400");
}

这个函数打开一个新的窗口，目标URL为winURL，窗口名称为payment_window，窗口特征为宽度为600像素，高度为400像素。

将popUp函数存入外部文件，然后在HTML页面中引用,在head标签中引入外部文件。

<head>
    <script src="js/payment.js"></script>
</head>

在HTML页面中，通过a标签的href属性调用popUp()函数，当用户浏览器不支持JavaScript时，popUp()函数将不会执行，用户仍然可以正常使用页面的基本功能。

<a href="#" onclick="popUp('https://www.example.com')">Pay Now</a>

5.3.1 "javascript:"伪协议

"javascript:"伪协议，即在HTML中通过，标签a的href属性，通过javascript:void(0)来执行JavaScript代码，但是该方法并不推荐使用。
利用伪协议，调用函数popUp()，可以实现平稳退化。

<a href="javascript:popUp('https://www.example.com')">Pay Now</a>

5.3.2 内嵌的事件处理函数

如第四章，onclick事件处理函数作为标签a的属性，同样的方法也可用于调用popUp()函数。

<a href="#" onclick="popUp('https://www.example.com'); return false;">Pay Now</a>

"#"是一个空链接
但是，javascript:伪链接方法也不能实现平稳退化，如果用户禁用javascript，则该链接将无法点击。

5.3.3 谁关心这个

答案: 搜索机器人
JavaScript平稳退化，防止禁用JavaScript的用户不能打开支付页面

具体popUp()函数

    <a href="https://www.example.com" onclick="popUp(this.href); return false;">Pay Now</a>

当javascript可用时，点击Pay Now链接，将会打开一个新的窗口，目标URL为https://www.example.com，窗口名称为payment_window，窗口特征为宽度为600像素，高度为400像素。
当javascript不可用时，点击Pay Now链接，将在当前页面打开https://www.example.com页面。

5.4 向CSS学习

5.4.1 结构和样式的分离

把网页的结构和内容与CSS样式分开，这样可以提高代码的可维护性，降低代码的耦合性，提高代码的可复用性。

5.4.2 逐渐增强

标记良好的内容就是一切
逐渐增强就是用一些额外的信息层去包裹原始数据，让用户更容易理解，切基本都符合“平稳退化”原则。

5.5 分离JavaScript

JavaScript语言不要求事件必须在HTML文档中处理，因此可以在外部把JS的一个事件添加到HTML中，
如可以利用class属性和id属性，把JavaScript代码添加到HTML元素中。

     element.event = actinon;  
     getElementByID("myButton").onclick = action;

如果事件涉及多个元素，可以使用getElementsByTagName和getAttribute方法。

    var elements = document.getElementsByTagName("a");
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].getAttribute("class") == "popup") { 
            elements[i].onclick = function() {
                window.open(this.href, "popup", "width=600,height=400");
                return false;
                }
        }
    }

但是，上面的代码无法正常执行，var elements = document.getElementsByTagName(“a”);会在JS文件被加载时执行，此时页面还没有加载完成，所以会报错。

如果javascript文件在HTML文档的head标签中使用script调用，将会在HTML文档前加载，如果在body标签中使用，也不能保证哪个文件最先结束加载。

必须让JS代码在HTML文档加载完成后才执行，当文档被加载到一个浏览器窗口中时，当window.onload’事件被触发时，JavaScript代码执行

window.onload = prepareLinks;

function prepareLinks() {
    var elements = document.getElementsByTagName("a");
    for (var i = 0; i < elements.length; i++) { 
        if (elements[i].getAttribute("class") == "popup") {
            elements[i].onclick = function() {  
                window.open(this.href, "popup", "width=600,height=400");
                return false;
            }
        }
    }
}

完成把行为和结构分离，可以提高代码的可维护性，降低代码的耦合性，提高代码的可复用性。

5.6 向后兼容性

向后兼容性（Backward Compatibility）是指当用户浏览器升级到新版本，旧版本的浏览器仍然可以正常运行，并且页面的基本功能也能正常使用。
旧版本的浏览器可能不支持某些新特性，这时，需要使用一些兼容性代码来实现向后兼容。

5.6.1 对象检测

浏览器必须理解JavaScript对象，才能正确执行JavaScript代码。可以采用if实现

if (method) {
    statement;
}

比如getElementById()方法，使浏览器实现“如果你不理解getElementById()方法，就不执行”的功能

function myFunction() {
    if (document.getElementById) {
        statements using getElementById;
    } else {
        return false;
    }
}

5.6.2 浏览器嗅探技术

跳过，没必要看

5.7 性能考虑

5.7.1 减少DOM操作

DOM操作是JavaScript性能的瓶颈，因此，减少DOM操作可以提高JavaScript的性能。
例如

if (document.getElementByTagName("a").length > 0) {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        function myFunction() {
            // do something
        }
    }
}

这段代码遍历两次DOM，一次是获取所有a标签，一次是遍历所有a标签。

改进方法：

var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {    
    links[i].onclick = function() {
        // do something
    }
}

5.7.2 合并和放置脚本

合并脚本：将多个脚本合并成一个文件，减少HTTP请求，提高加载速度。
放置脚本：将脚本放置在HTML文档的head标签中，可以减少页面加载时间，提高页面的响应速度。但是，这样放置也有一个问题，HTTP每次从一个域名最多加载有上限(书里写的2个),在下载期间不会下载其他文件

5.7.3 压缩脚本

对脚本进行压缩可以减少文件大小，从而加快其加载速度、执行速度。
代码压缩通常包括删除空白字符、注释、未使用的代码，以及通过缩短变量名和使用缩写等来减小代码体积。
比如压缩前：

// 这是一个示例函数
function exampleFunction(input) {
  var output = input * 2;
  return output;
}

// 调用示例函数
var result = exampleFunction(5);
console.log(result);

压缩后：

function _e(input){var _o=input*2;return _o;}var _r=_e(5);console.log(_r);

5.8 总结

JavaScript是一种动态的脚本语言，它可以实现网页的动态效果，但是，过度依赖JavaScript，会导致代码质量下降，性能下降，用户体验下降。因此，编写脚本时，要考虑平稳退化、分离JavaScript、向后兼容性、性能考虑等问题。

平稳退化：确保页面在没有JavaScript的情况下也能正常工作。
分离JavaScript：把网页的结构和内容与JavaScript脚本的动作分开。
向后兼容性：确保老版本的浏览器不会因为Javacript的使用而崩溃。
性能考虑：确保脚本执行性能最优。

5.9 参考

知乎-代码压缩
《JavaScprpt DOM 编程艺术（第2版）》
主要内容由Fitten Code生成, 强烈推荐