第5章最佳实践

过去的错误

不要怪罪JavaScript

游览器遇到不合法的html会想尽办法将他展现出来
游览器遇到不合法的js将拒绝执行它们并报错
写js要保障自己代码的健壮性

质疑一切

写js功能前一定要考虑这个功能的合理性，避免造成不可预见的后果
写js功能前一定要考虑用户的游览器是否支持js已经用户是否禁用游览器，增强代码健壮性

平稳退化

可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你的网站。这就是所谓的平稳退化

“javascript:”伪协议

“真”协议用来在因特网上的计算机之间传输数据包，如HTTP协议（http://）、FTP协议（ftp://）等，伪协议则是一种非标准化的协议。“javascript:”伪协议让我们通过一个链接来调用JavaScript函数。在支持它的游览器中链接能够正常打开不支持它的游览器则会什么有不做。
总之，在HTML文档里通过“javascript:”伪协议调用JavaScript代码的做法非常不好。

在这里插入图片描述

// 打开新的连接，一个参数为链接，第二个参数为方式(_self，_blank)，第三个参数为视口配置
window.open("https://www.baidu.com/","_blank","width=100,height=300")

内嵌的事件处理函数

点击事件

<button onclick="open_win()">点我</button>

例子

此段代码当用户禁用掉js后页面就没办法正常跳转

// href="#"表示创建一个空链接，return false表示阻止触发href
<a href="#" onclick="open_win();return false">跳转</a>

<script>
    function open_win(){
        window.open("https://www.baidu.com","_blank","width=100,height=300")
    }open
</script>

设置href。由于禁掉了js所以onclick不会触发

<a href="https://www.baidu.com" onclick="open_win();return false">跳转</a>

向CSS学习

结构与样式的分离

我们经常会遇到一些几乎每个元素都带有style属性的Web文档，而这是CSS技术最缺乏效率的用法之一。真正能从CSS技术获益的方法，是把样式全部转移到外部文件中去。
按这种原则使用JavaScript时，我们可以从CSS身上借鉴到很多东西。

渐进增强

所谓“渐进增强”就是用一些额外的信息层去包裹原始数据。按照“渐进增强”原则创建出来的网页几乎（如果不是“全部”的话）都符合“平稳退化”原则。
类似于CSS, JavaScript和DOM提供的所有功能也应该构成一个额外的指令层。CSS代码负责提供关于“表示”的信息，JavaScript代码负责提供关于“行为”的信息。行为层的应用方式与表示层一样。
把CSS代码从HTML文档里分离出来可以让CSS工作得最好。这个适用于CSS表示层的结论同样适用于JavaScript行为层。

分离JavaScript

类似于使用style属性，在HTML文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法。

<a href="https://www.baidu.com" onclick="open_win();return false">跳转</a>

解决方式1，放在head标签中不过js文件要等待游览器html元素加载完成后执行

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

// index.js
// 需要等页面加载完成后执行操作
window.onload = function() {
	// 获取dom
    const target=document.getElementById('target_a');
    // 获取dom中的href
    const href=target.getAttribute("href");
	
	// 绑定事件回调
    target.onclick=open_win

    function open_win(){
        window.open(href,"_self");
    }
}

解决方式2，放在html元素后一般放在body最后位置。让游览器优先加载html元素

<a href="https://www.baidu.com" id="target_a">跳转</a>

<script  src="./index.js"></script>

const target = document.getElementById('target_a');
const href = target.getAttribute("href");

target.onclick = open_win

function open_win() {
    window.open(href, "_self");
}

向后兼容

对象检测

为了保障代码的健壮性我们可以在调用某个dom方法前判断游览器是否支持

function open_win() {
	if(!document.getElementById)return;
	...
}

性能考虑

尽量少访问DOM和尽量减少标记

不管什么时候，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM树，从中查找可能匹配的元素

function fn(){
   if(document.getElementsByClassName("a").length>0){
       let alls=document.getElementsByClassName("a");

       alls=Array.from(alls);
       alls.forEach((item)=>{
           console.log(item);
       })
   }
}

上述代码中对dom树搜索了两次这是及其不合理的，可以搜索的结果存储在一个变量中来优化性能

function fn(){
	 const alls=document.getElementsByClassName("a")
	 if(alls.length>0){
	     alls=Array.from(alls);
	     alls.forEach((item)=>{
	         console.log(item);
	     })
	 }
}

在比较复杂的项目中可以吧dom搜索的结果存储在全局变量中，方便维护减少性能消耗