js从0开始 DOM文档编程思路4 最佳实践-CSDN博客

本文链接：https://blog.csdn.net/a12365445/article/details/118674627

内容：

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

JavaScript本身是一种让网页变得易于访问的技术，然而他却也有着降低网站可用性和可访问性的坏名声。遵循用户至上才能走的长远，确认对用户的浏览体验。

平稳退化：正确地使用了JavaScript脚本，就可以让访问者在他们不支持JavaScript的情况下仍能顺利浏览你都网站。

JavaScript使用window对象的open（）方法来创建新的浏览窗口

window.open(url,name,features)

这三个参数都是可选的

第一个参数是想在新窗口里打开的网页的URL地址。如果省略这个参数，屏幕上将弹出一个空白的浏览器窗口。

第二个参数是新窗口的名字。可以在代码里通过这个名字与新窗口进行通信。

第三个参数是一个以逗号分隔的字符串，其内容是新窗口的各种属性，包括尺寸和各种浏览功能。

window.open()的一种应用：

function popUp(winURL){

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

打开一个320像素宽，480像素高的新窗口“popup”。需要在某个网页使用这个函数时，只要在这个网页的<head>部分用一个<script>标签导入即可。函数本身不会对网页的可访问性产生任何影响。

调用popUp函数的一个方法是使用伪协议

伪协议是一种非标准化的协议。“javascript：”伪协议让我通过一个链接来调用JavaScript函数

通过伪协议调用popUp函数的具体做法：

<a href="javascript:'popUp(http://www.example.com/');">Example</a>

这句话在支持“javascript：”伪协议的浏览器中运行正常

在较老浏览器则会尝试打开这个链接却失败

支持伪协议但禁用了javascript功能的浏览器什么也不做

总之在HTML文档里通过“javascript：”伪协议调用“javascript代码的做法非常不好。

还有内嵌的事件处理函数

把onlick嵌入<a>标签中，可以调用popUp函数。href属性没有用处，因为有关链接已经包括在onclick属性了。

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

但这个技巧不能平稳退化，禁用了javascript功能的浏览器什么也不会做。

目前最有用的技巧是直接具体popUp函数，在链接里把href属性改为真实存在的URL地址，让它成为一个有效链接。

<a href = "http://www.example.com/" onclick="popUp('http://www.example.com');return false ;">Example</a>

可以用this和getAttribute（）提取href属性οnclick=“popUp（this.getAttribute('href ')）”

还能使用DOM提供的this.href属性简化

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

把href属性设置为真实存在的URL地址后，即使JavaScript被禁用，这个链接也是可用的。

所谓的 渐进增强就是用一些额外的信息层去包裹原始数据，创造出来的网页几乎符合平稳退化原则。类似于CSS，JavaScript，DOM提供的所有功能也应该构成一个额外的指令层。

CSS代码负责提供关于“表示”的信息，JavaScript代码负责提供关于“行为”的信息。

因此想要获得的最佳表示效果，应该从CSS代码从HTML文档分离出来放在一些外部文件里。同理对于JavaScript代码也是。

JavaScript语言不要求事件必须在HTML文档里处理，可以在外部JavaScript文件里把一个事件添加到HTML文档中的某个元素上：element.event=action..

关键是将获得的事件元素确定下来。可以利用class或id属性解决。

一件事情添加到某个特定id属性就用getElementById：getElementById（id）.event=action

涉及多个元素就使用：getElementsByTagName和geiAttribute添加到有特定属性的一组元素上。

步骤

1、把文档的所有链接全放入一个数组里

2、遍历数组

3、如果某个链接的class属性等于popup，表示这个链接被点击时应该调用popup（）函数

把这个链接的href属性值传递给popup函数

取消链接的默认行为，不让这个链接把访问者带离当前窗口

4、让代码在HTML文档全部加载到浏览器之后马上开始执行，当文档全部加载完毕时将触发一个事件，当window触发onload事件时，document对象已经存在。

5、把popup函数保存到外部JS文件里

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

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

这就演示了怎样才能成功的把行为和结构分离开来。

向后兼容：有些访问者未开启JS功能，或者有些浏览器不理解DOM的属性和方法。因此有些用户访问时JavaScript不一定正常使用

对象检测：针对以上问题的解决方案是需要检测浏览器对JavaScript的支持程度。

把某个方法打包在一个if语句里，根据这条if语句的条件表达式的求值结果是true（存在）或是false（不存在）来决定采取怎么的行动。可以把不支持的某个特点的DOM方法的浏览器检测出来：if（method）｛statements ｝

例如：使用了geiElementById（）方法的函数，就可以调用getElementById（）方法之前检测浏览器是否支持，检测时记得删掉方法后面的圆括号，不删掉测试的就是方法的结果，无论方法是否存在。

function myFunction(){
 if(docunment.getElementById){
statements using getElementById
}
}

由于阅读起来花括号太多不方便，因此将检测条件从“如果你理解该方法```”改为“如果你不理解该方法，请离开”，会简单些：if（！method） “请离开”可以用 return false来中途退出。

可以简写成一行
if (!document.getElementById) return false;
测试多个方法或属性是否存在，可以用“逻辑或”操作符合并
if ( !document.getElementById || !document.getElementsTagName) return false;

举例子：把onlick事件添加到链接中插入if语句检测getElementsByTagName
window.onload=function(){
if (!document.getElementsByTagName) return false;
var lnks=document.getElementsByTagName("a");
for(var i=0 ;i<lnks.length;i++){
 if(lnks[i].getAttribute("class")=="popup"){
lnks[i].onclick=function(){
popup(this.getAttribute("href"));
return false;
}
}
}
}

这么做是为了让脚本有良好的向后兼容性。

性能考虑：

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

把第一次搜索的结果保存在一个变量中，然后在循环里重用该结果。在多个函数都会取得一组类似元素的情况下，可以考虑重构代码，把搜索结果保存在一个全局变量里，或是把一组元素直接以参数形式传递给函数。尽量减少文档中的标记数量。过多的不必要元素只会增加DOM树的规模，增加不必要的查找特地元素的时间。

压缩脚本：利用工具压缩脚本文件可以加快加载速度。就是把脚本中不必要的字节删掉，减小文件大小。