编码原则:
1. 不太归罪于Js,一切根源在于编写Js的人对Js的认知
2. 可观的说没有不好的技术,只有没有用好的技术,所以在实现一些功能时,首先要确认,网页增加这种额外的功能是否真的有必要
3. 结构化设计理论推崇一个函数最好只有一个入口点和一个出口点,但现实中我们推荐大家一个函数可以有多个出口点,但是推荐出口点集中在函数的开头部分,最后有一个出口点即可
预留退路:
说明: 当有些浏览器不支持Js或是被禁用,我们应该预留退路,也就是说虽然某些功能无法使用,但是最基本的操作任然能顺利完成
1. 不推荐的做法 - 伪协议法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>预留退路</title>
</head>
<body>
<a href="javascript:pop(‘http://xmdevops.blog.51cto.com/‘)">
ζ自动化运维开发之路ζ
</a>
</body>
<script type="text/javascript">
function pop(url){
window.open(url, ‘xmdevops‘,
‘fullscreen=yes,height=‘ + screen.height + ‘,width=‘ + screen.width +
‘left=0,location=no‘+
‘menubar=no,resizeable=no,scrollbars=yes,status=no,toolbar=no,top=0‘
)
}
</script>
</html>
2. 不推荐的做法 - 事件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>预留退路</title>
</head>
<body>
<a href="#" onclick="pop(‘http://xmdevops.blog.51cto.com/‘);return false">
ζ自动化运维开发之路ζ
</a>
</body>
<script type="text/javascript">
function pop(url){
window.open(url, ‘xmdevops‘,
‘fullscreen=yes,height=‘ + screen.height + ‘,width=‘ + screen.width +
‘left=0,location=no‘+
‘menubar=no,resizeable=no,scrollbars=yes,status=no,toolbar=no,top=0‘
)
}
</script>
</html>
问题: "javascript:"伪协议让我们可以通过一个链接来调用Js函数,但是一旦浏览器不支持Js或是被禁用Js功能,则此时链接失效,点击什么也不会做,内嵌事件处理,href值为#只是创建一个空链接,实际工作全部由onclick属性完成,但是和伪协议一样糟糕,因为搜索引擎爬取的是带链接的内容,而不认识Js代码
3. 改进后的做法 - 事件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>预留退路</title>
</head>
<body>
<a href="http://xmdevops.blog.51cto.com/" onclick="pop(this.getAttribute(‘href‘));return false">
ζ自动化运维开发之路ζ
</a>
</body>
<script type="text/javascript">
function pop(url){
window.open(url, ‘xmdevops‘,
‘fullscreen=yes,height=‘ + screen.height + ‘,width=‘ + screen.width +
‘left=0,location=no‘+
‘menubar=no,resizeable=no,scrollbars=yes,status=no,toolbar=no,top=0‘
)
}
</script>
</html>
说明: 如上方式即时浏览器不支持Js或禁用Js链接依然生效,对搜索引擎也更加友好,但是这样的写法和我们内联CSS的写法似乎更相似,我们更推荐的是大家使用事件绑定的方式来实现Js分离
4. 改进后的做法 - 事件绑定
<html> <head> <title></title> <meta charset="utf-8"/> <link rel="stylesheet" href="css/layout.css" /> </head> <body> <h1>SnamShots</h1> <ul> <li> <a href="images/fireworks.jpg" title="a fireworks display">fireworks</a> </li> <li> <a href="images/coffee.jpg" title="a coffee display">coffee</a> </li> <li> <a href="images/rose.jpg" title="a rose display">rose</a> </li> <li> <a href="images/bigben.jpg" title="a bigben display">bigben</a> </li> </ul> <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> <p id="description">Choose a image.</p> <script type="text/javascript" src="js/main.js"></script> </body> </html>
window.load = prepareLinks
function prepareLinks(){
// 判断浏览器兼容度来决定是否要执行此函数
if(document.getElementsByTagName) return false
var links = document.getElementsByTagName(‘a‘)
var placeholder = document.getElementById(‘placeholder‘)
var description = document.getElementById(‘description‘)
for(var i=0; i<links.length; i++){
links[i].onclick = function(){
var href = this.getAttribute(‘href‘)
var title = this.getAttribute(‘title‘)
placeholder.setAttribute(‘src‘, href)
description.firstChild.nodeValue = title
return false
}
}
}
循序渐进:
说明: 其实是一种思考问题的方法,从最核心的内容开始,逐步添加额外功能,先用标记语言给核心内容添加正确标记使得获得正确结构,然后在逐步充实被加上的正确标记内容,充实的内容既可以通过CSS样式表实现各种呈现效果也可以通过DOM操作添加各种操作行为
收回控制:
说明: 默认事件譬如鼠标悬停在被设置title属性的元素上时,不同的浏览器可能显示效果不一,我们完全可以通过DOM把隐藏的属性检索出来依据信息创建内容然后插入到文档,来掌握控制权
时间： 2024-12-06 15:59:49