网站前端_JavaScript-DOM编程.0002.JavaScriptDom编码原则?

Posted 2020-08-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网站前端_JavaScript-DOM编程.0002.JavaScriptDom编码原则?相关的知识，希望对你有一定的参考价值。

编码原则:

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把隐藏的属性检索出来依据信息创建内容然后插入到文档,来掌握控制权