JavaScript最佳实践

作者:Grey

原文地址: http://www.cnblogs.com/greyzeng/p/5540469.html

举个例子:用户在点击某个链接的时候弹出一个新窗口

弹出窗口的方法采用:window.open(url, name, features)

方法1. 采用"javascript:"伪协议

代码清单:

jsbestpractise1.html

js/jsbestpractise1.js

这种方式在支持"javascript:"伪协议的浏览器中运行正常,但是禁用了JavaScript功能的浏览器会什么也不做。

所以,这种调用方式并不好。

方法2. 通过onclick方法来触发弹出链接:

代码清单:

jsbestpractise2.html

js/jsbestpractise2.js

这种方式对于禁用了JavaScript功能的浏览器同样什么也不做。

所以,这种调用方式也不好。

优化1:

我们可以在链接的href属性中设置为真实存在的URL地址,让它成为一个有效的链接,

这样,即便浏览器禁用了JavaScript,也可以通过链接直接到目标地址,好过什么都不做。

代码清单:

jsbestpractise3.html

js/jsbestpractise3.js

我们还可以把链接简化一些:

优化2:

分离JavaScript,类似style属性,onclick方法也是一种既没有效率又容易引发问题的做法,

如果我们用类似css机制中的class属性来分离JavaScript代码和HTML页面,网页就会健壮的多。

代码清单:

jsbestpractise5.html

js/jsbestpractise5.js

这种方式的步骤如下:

  1. 获取所有链接:document.getElementsByTagName("a");
  2. 遍历链接,如果某个链接的class=popup,就表示这个链接在被点击的时候应该调用popUp函数。

但是我们缺少了一步判断:document.getElementsByTagName("a").length>0

所以js/jsbestpractise5.js代码修改为:

优化3:

优化js代码的性能,document.getElementsByTagName("a")方法在js中执行了两次,浪费了一次搜索。

更好的办法是把第一次搜索的结果保存在一个变量中:

var links = document.getElementsByTagName("a");

然后在循环中重用该变量。

代码清单:

js/jsbestpractise6.js

优化4:

检测浏览器是否支持某些JavaScript方法,如果不支持,则不执行相应的JS方法,比如:

这个例子中用到了getElementsByTagName这个方法,我们可以在执行这个方法之前,检测一下

浏览器是否支持这样的方法:

代码清单:

js/jsbestpractise7.js

自此,我们就完成了对这个例子的一些代码优化,当然,还有更进一步的优化,

比如:压缩脚本,本文暂不作说明。

最后代码清单:

jsbestpractise8.html

js/jsbestpractise8.js

参考:

JavaScript DOM编程艺术(第2版)

时间: 2024-12-14 22:24:25

JavaScript最佳实践的相关文章

javascript最佳实践,包含性能优化、编码实践等。

昨天跳过<javascript高级程序设计>前面几章书的内容,直接跳到最佳实践那一章,然而那一张说的又和我在实习的时候的实践,有很大的关系,因此我就觉得应该整理出来,分享一下,毕竟还是挺好的一部分. 一.编写可维护的代码 可维护的代码就有一些特征: (1)可理解性 (2)直观性 (3)可适应性 (4)可拓展性 (5)可调试性   二.代码约定        1.可读性:代码缩进大小为4个空格 需要进行注释的地方: (1)函数和方法:如函数的目的和用于完成任务所可能使用的算法. (2)大段代码:

JavaScript 最佳实践

这个文档是基于JavaScript社区众多开发者的意见和经验,在开发JavaScript代码上的最佳实践和首选的方案的明细表.因为这是一个推荐的表而非原则性的方案,经验丰富的开发者可能对下面的表达会有略有不同的见解. 1. 总是使用 ‘var’ 在JavaScript中,变量不是全局范围的就是函数范围的,使用”var”关键词将是保持变量简洁明了的关键.当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置”var”关键词,下面的例子将强调不这样做潜在的问题. 不使用

JavaScript最佳实践:性能

注意作用域 避免全局查找 一个例子: function updateUI(){ var imgs = document.getElementByTagName("img"); for(var i=0, len=imgs.length; i<len; i++){ imgs[i].title = document.title + " image " + i; } var msg = document.getElementById("msg");

45个实用的JavaScript技巧、窍门和最佳实践

如你所知,JavaScript是世界上第一的编程语言,它是Web的语言,是移动混合应用(mobile hybrid apps)的语言(比如PhoneGap或者Appcelerator),是服务器端的语言(比如NodeJS或者Wakanda),并且拥有很多其他的实现.同时它也是很多新手的启蒙语言,因为它不但可以在浏览器上显示一个简单的alert信息,而且还可以用来控制一个机器人(使用nodebot,或者nodruino).掌握JavaScript并且能够写出组织规范并性能高效的代码的开发人员,已经

Javascript继承的最佳实践

什么是继承? 继承是面向对象最显著的一个特性.继承是从已有的类中派生出新的类,新的类能吸收已有类的数据属性和行为,并能扩展新的能力. 在Javascript 中 没有 类的概念, 它是通过构造函数来产生 对象, 构造函数 就是一个普通的函数,通常当函数名 为 大写开头的,我们认为是构造函数,否则 就是普通的方法. function A() { this.name = 'A Class instance'; } function m1() { } 既然 Javascript 是 通过构造函数来产生

超实用的JavaScript技巧及最佳实践

众所周知,JavaScript是一门非常流行的编程语言,开发者用它不仅可以开发出炫丽的Web程序,还可以用它来开发一些移动应用程序(如PhoneGap或Appcelerator),它还有一些服务端实现,比如NodeJS.Wakanda以及其它实现.此外,许多开发者都会把JavaScript选为入门语言,使用它来做一些弹出窗口等小东西. 在这篇文章中,作者将会向大家分享JavaScript开发的小技巧.最佳实践等非常实用的内容,不管你是前端开发者还是服务端开发者,都应该来看看这些小技巧,它们绝对会

实用的JavaScript技巧、窍门和最佳实践

1 – 在第一次给一个变量赋值的时候不要忘记使用var关键字 给一个未定义的变量赋值会导致创建一个全局变量.要避免全局变量. 2 – 使用===,而不是== ==(或!=)操作符在需要的时候会自动执行类型转换.===(或!==)操作不会执行任何转换.它将比较值和类型,而且在速度上也被认为优于==. 1 2 3 4 5 6 7 8 [10] === 10    // is false [10]  == 10    // is true '10' == 10     // is true '10'

【译】JavaScript 创建对象: 方法一览与最佳实践

本文是我在众成翻译上认领并翻译的:JavaScript 创建对象: 方法一览与最佳实践 在JavaScript中“创建对象”是一个复杂的话题.这门语言提供了很多种创建对象的方式,不论新手还是老手都可能对此感到无所适从,不知道应该选择哪一种.不过,尽管创建对象的方法很多,看上去语法差异也很大,但实际上它们的相似性可能比你所以为的要多.本文将带领你踏上一段梳理对象创建方法的旅程,为你揭示不同方法之间的依赖与递进关系. 对象字面量 我们的第一站毫无疑问就是创建对象最简单的方法,对象字面量.JavaSc

Javascript继承之最佳实践

尊重原创,转载请注明出处:http://blog.csdn.net/zoutongyuan 什么是继承? 继承是面向对象最显著的一个特性.继承是从已有的类中派生出新的类,新的类能吸收已有类的数据属性和行为,并能扩展新的能力. 在Javascript 中 没有 类的概念, 它是通过构造函数来产生 对象, 构造函数 就是一个普通的函数.通常当函数名 为 大写开头的.我们觉得是构造函数,否则 就是普通的方法. function A() { this.name = 'A Class instance';