编码原则:

1. 不太归罪于Js,一切根源在于编写Js的人对Js的认知

2. 可观的说没有不好的技术,只有没有用好的技术,所以在实现一些功能时,首先要确认,网页增加这种额外的功能是否真的有必要

3. 结构化设计理论推崇一个函数最好只有一个入口点和一个出口点,但现实中我们推荐大家一个函数可以有多个出口点,但是推荐出口点集中在函数的开头部分,最后有一个出口点即可


预留退路:

说明: 当有些浏览器不支持Js或是被禁用,我们应该预留退路,也就是说虽然某些功能无法使用,但是最基本的操作任然能顺利完成

1. 不推荐的做法 - 伪协议法





预留退路


    
        ζ自动化运维开发之路ζ
        


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'
            )
}

2. 不推荐的做法 - 事件处理





预留退路


    
        ζ自动化运维开发之路ζ
        


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'
                )
}


问题: "javascript:"伪协议让我们可以通过一个链接来调用Js函数,但是一旦浏览器不支持Js或是被禁用Js功能,则此时链接失效,点击什么也不会做,内嵌事件处理,href值为#只是创建一个空链接,实际工作全部由onclick属性完成,但是和伪协议一样糟糕,因为搜索引擎爬取的是带链接的内容,而不认识Js代码

3. 改进后的做法 - 事件处理





预留退路


    
        ζ自动化运维开发之路ζ
        


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'
                )
}

说明: 如上方式即时浏览器不支持Js或禁用Js链接依然生效,对搜索引擎也更加友好,但是这样的写法和我们内联CSS的写法似乎更相似,我们更推荐的是大家使用事件绑定的方式来实现Js分离

4. 改进后的做法 - 事件绑定


    
        
        
        
    
    
        
SnamShots

    
    
        
  • 
            fireworks
        
    • 
        
  • 
            coffee
        
    • 
        
  • 
            rose
        
    • 
        
  • 
            bigben
        
    • 
    

    
    Choose a p_w_picpath.

    
    

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 
  
 
  

 
  
循序渐进:
 
  
 
  
说明: 其实是一种思考问题的方法,从最核心的内容开始,逐步添加额外功能,先用标记语言给核心内容添加正确标记使得获得正确结构,然后在逐步充实被加上的正确标记内容,充实的内容既可以通过CSS样式表实现各种呈现效果也可以通过DOM操作添加各种操作行为
 
  

 
  
收回控制:
 
  
 
  
说明: 默认事件譬如鼠标悬停在被设置title属性的元素上时,不同的浏览器可能显示效果不一,我们完全可以通过DOM把隐藏的属性检索出来依据信息创建内容然后插入到文档,来掌握控制权