js最佳实践

JavaScript使用windows对象的open()方法来创建新的浏览器窗口，这个方法有三个参数：windows.open(url,name,features)

参数一：url:是想在新窗口里打开的网页的URL地址。

参数二：name 是新窗口的名字，可以在代码里通过这个名字与新窗口进行通信

参数三：features：是一个以逗号分隔的字符串，其内容是新窗口的各种属性

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

这个函数将打开一个320px宽，480px高的新窗口“popup”，当把新的URL地址传递给此函数时，这个函数将把新窗口里的现有文档替换为新URL地址所处的文档，而不是去创建一个新窗口。

用"JavaScript:"伪协议调用popUp()函数：<a href="javascript:popup('http://www.example.com');">Example</a>

结构与样式的分离：

css技术的突出优点，就是文档结构与文档样式的分离可以确保网页都能够平稳退化。

渐进增强：

用一些额外的信息层去包裹原始数据。按照“渐进增强”原则创建出来的网页几乎都符合“平稳退化”原则

外部js文件里把一个事件添加到HTML文档中的某个元素上：element.event=action……

如果想把一个事件添加到某个带有特定id属性的元素上，可以用getElementById就可以：

getElementById(id).event=action

如果事件涉及多个元素：

①把文档的所有链接全放在一个数组中。

②遍历数组

③如果某个链接的class属性等于popup，就表示这个链接在被点击时应该调用popUp()函数

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

以上代码将把调用popUp()函数的onclick事件添加到有关的链接上。

对象检测：只要把某个方法打包在一个if语句里面，就可以根据这条if语句的条件表达式的求值结果是true（这个方法存在）还是false（这个方法不存在）来决定应该采取怎样的行动。

if(!getElementById){
    retrun false;
}//使用“如果不具备，就离开”的判断方式

window.onload=function(){//让这些代码在HTML文档全部加载到浏览器以后马上开始执行
if (!getElementsByTagName) return false;
    var links=document.getElementsByTagName("a");
    for(var i=0;i<links.lenght;i++){
        if(links[i].getAttribute("class")=="popup"){
            links[i].onclick=function(){
                popUp(this.getAttribute("href"));
                return false;
            }
        }
    }    
}

性能考虑：尽量少访问DOM和尽量减少标记

在多个函数都会取得一组类似元素的情况下，可以考虑重构代码，把搜索结果保存在一个全局变量里，或者把一组元素直接以参数形式传递给函数。

合并和放置脚本：包含脚本的最佳方式就是使用外部文件，因为外部文件与标记能清晰地分离开，而且浏览器也能对站点中的多个页面重用缓存过的相同脚本。

把所有<script>标签都放在文档的末尾，</body>标记之前，就可以让页面变得更快。