第5章 最佳实践

过去的错误

不要怪罪JavaScript

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

质疑一切

1. 写js功能前一定要考虑这个功能的合理性，避免造成不可预见的后果
2. 写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")

内嵌的事件处理函数

点击事件

点我

例子

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

// href="#"表示创建一个空链接，return false表示阻止触发href
跳转

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

跳转

---

向CSS学习

结构与样式的分离

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

渐进增强

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

---

分离JavaScript

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

跳转

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

	...
	

// 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元素

跳转

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搜索的结果存储在全局变量中，方便维护减少性能消耗

合并和放置脚本

下述做法是不推荐的因为会增加游览器的请求次数，最好的做法是把他们在一个js文件中加载然后引入html中

在下载js期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有其他资源都要等js加载完毕后才能下载。所以js放在body最后可以加快游览器的加载速度

压缩脚本

所谓压缩脚本，指的是把脚本文件中不必要的字节，如空格和注释，统统删除，从而达到“压缩”文件的目的。下面是几个压缩代码的工具

• http://www.crockford.com/javascript/jsmin.html
• http://developer.yahoo.com/yui/compressor
• http://closure-compiler.appspot.com/home