标签:网站前端 javascript
编码原则:
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把隐藏的属性检索出来依据信息创建内容然后插入到文档,来掌握控制权
本文出自 “ζ自动化运维开发之路ζ” 博客,请务必保留此出处http://xmdevops.blog.51cto.com/11144840/1858122
网站前端_JavaScript-DOM编程.0002.JavaScriptDom编码原则?
标签:网站前端 javascript
原文地址:http://xmdevops.blog.51cto.com/11144840/1858122