js最佳实践

时间:2023-03-10 05:46:09
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>标记之前,就可以让页面变得更快。