4_最佳实践（DOM编程艺术）

最新推荐文章于 2024-09-11 17:09:49 发布

Akii7

最新推荐文章于 2024-09-11 17:09:49 发布

阅读量149

点赞数

文章标签： js javascript css

本文链接：https://blog.csdn.net/cheng_09/article/details/109409402

版权

5. 最佳实践

5.1 过去的错误

5.2 平稳退化

讨论在用户点击某个链接时弹出一个新窗口

（注意：应该只在绝对必要的情况下才使用弹出窗口，因为这牵涉到网页的可访问性问题）

JavaScript使用window对象的open()方法来创建新的浏览器窗口，该方法有三个参数

window.open(url,name,features)

这三个参数都是可选的

第一个参数是网页的URL地址，忽略后屏幕上将弹出一个空白的浏览器窗口
第二个参数是新窗口的名字
第三个参数是一个以逗号分割的字符串，其内容是新窗口的各种属性（少而精）

该方法是使用BOM的一个好案例，对文档的内容没有任何影响，只和浏览环境有关

下面这个函数是window.open()方法的一种典型应用：

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

会影响到网页的只是：我将如何使用这个函数

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

5.2.1 "javascript:"伪协议

"javascript:"伪协议让我们通过一个连接来调用JavaScript函数

具体做法：

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

5.2.2 内嵌的事件处理函数

5.3 向CSS学习

5.3.1 结构与样式的分离

5.3.2 渐进增强

5.4 分离JavaScript

//把调用popUp()函数的onclick事件添加到有关的链接
//var links = document.getElementsByTagName("a"); 在JavaScript文件被加载时立刻执行
//必须让这些代码在文档全部加载后马上开始执行
window.onload = prepareLinks;
function prepareLinks(){
    var links = document.getElementsByTagName("a");
    for(var i=0; i<links.length; i++){
		if(links[i].getAttribute("class")=="popup"){
        	links[i].οnclick=function(){
            	popUp(this.getAttribute("href"));
            	return false;
        	}
   	     }
	}
}
function popUp(winURL){
	window.open(winURL,"popup","width=320,height=480");
}

5.5 向后兼容

5.5.1 对象检测

if(!method){
	return false;
}

插入一条if语句去检查浏览器是否理解所调用的方法

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