Js Dom编程艺术第五章

最新推荐文章于 2024-03-25 22:22:22 发布

conan25216

最新推荐文章于 2024-03-25 22:22:22 发布

阅读量298

点赞数

分类专栏： Js 文章标签： js

本文链接：https://blog.csdn.net/conan25216/article/details/43488715

版权

Js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

5.1 平稳退化

5.2.1 伪协议 javascript:

 <html>
    <head>
    <script src = “5.js”></script>
    </head>
    <body>
    <a href = “javascript:popUp(‘http://www.baidu.com/’);”>
    Example</a>
    </body>
 </html>

5.js

function popUp(winURL){
    window.open(winURL,”popup”);
 }
//window.open(url,name,features);

5.2.2 内嵌的事件处理函数

<a href = “#” onclick = “popUp(‘http://www.163.com/’);return false;”>Example </a>

以上两种调用javascript函数的例子，在浏览器不支持js的情况下都不能做到平稳退化，无法再转到指定地址。

标准写法：

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

//平稳退化做好两点，
第一，在href属性里已经填写了正确的链接，如果不支持onclick事件调用，仍然可以采用href连接。
第二，在支持js的情况下,使用onclick事件.this:对象,href:连接属性.

5.2 分离JavaScript

window.onload = prepareLinks;// 在页面加载完毕时再触发函数，此时可确保读出完整的a标签.
function prepareLinks(){
	var links = document.getElementsByTagName("a");// 获取a标签所有元素
	for(var i = 0;i<links.length;i++){
		if(links[i].getAttribute("class") == "popup"){ //寻找class==popup的类
			links[i].onclick = function(){  //调用函数
				popUp(this.getAttribute("href")); //调研popUp函数，传递这个对象的href属性值，作为函数参数。
				return false;
			}
		}
	}
}

function popUp(winURL){
	window.open(winURL,"popup"); 
}

5.3 向后兼容

5.3.1 对象检测

例如

 if(document.getElementById) statements; //即可以实现当浏览器不支持此方法时，避免执行statements。

5.4 性能考虑

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

if(document.getElementsByTagName("a").length>0){
    var links = document.getElementsByTagName("a");
    for(var i = 0;i<links.length;i++){
      // 对每个链接做操作
   }
}  
//这段代码可行，但是不能保持最优性能。因为他使用了两次getElementsByTagName语句。
//改进版
var links = document.getElementsByTagName("a");
    if(links.length>0){
       for(var i = 0;i<links.length;i++){
             //对每个链接做点处理
          }
 }//通过增设一个变量，减少了一次getElementsByTagName语句。

5.4.2 合并和放置脚本

合并：把多个js并到一起。

5.4.3 压缩脚本

压缩：就是去掉注释等一些东西。