小蓝xlanll

这个屌丝很懒，什么也没留下！

热门标签

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

作者：小蓝xlanll | 2024-03-29 02:46:48

踩

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);
1

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

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

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

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

<head>
    <script src="js/payment.js"></script>
</head> 
1
2
3

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

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

5.3.1 "javascript:"伪协议

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

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

5.3.2 内嵌的事件处理函数

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

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

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

5.3.3 谁关心这个

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

具体popUp()函数

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

当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;  
1
2

如果事件涉及多个元素，可以使用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;
                }
        }
    }
1
2
3
4
5
6
7
8
9

但是，上面的代码无法正常执行，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;
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

5.6 向后兼容性

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

5.6.1 对象检测

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

if (method) {
    statement;
}
1
2
3

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

function myFunction() {
    if (document.getElementById) {
        statements using getElementById;
    } else {
        return false;
    }
}
1
2
3
4
5
6
7

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
        }
    }
}
1
2
3
4
5
6
7
8

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

改进方法：

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

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);
1
2
3
4
5
6
7
8
9

压缩后：

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

5.8 总结

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

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

5.9 参考

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/333279?site

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

5 最佳实践

5.1 本章内容

5.2 过去的错误

5.3 平稳退化

5.3.1 "javascript:"伪协议

5.3.2 内嵌的事件处理函数

5.3.3 谁关心这个

5.4 向CSS学习

5.4.1 结构和样式的分离

5.4.2 逐渐增强

5.5 分离JavaScript

5.6 向后兼容性

5.6.1 对象检测

5.6.2 浏览器嗅探技术

5.7 性能考虑

5.7.1 减少DOM操作

5.7.2 合并和放置脚本

5.7.3 压缩脚本

5.8 总结

5.9 参考

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