每日十条JavaScript经验技巧(一)
1. 不使用script自闭合标签
script中使用自闭合标签,虽然他在XHTML中合法,但是不符合HTML规范,而且得不到某些浏览器的正确解析。我曾经就在引入EXT时使用此方式,导致无法正确执行脚本。
<script src="example.js"/> --> <script src="example.js"></script>
2. 将脚本放到</body>前面
如果将脚本文件放到<head>中去,则在显示页面前先得下载执行脚本,增加了用户等待的时间。样式表放在<head>中防止内容显示不正常。一般方式如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="theme.css" /> </head> <body> <!-- html代码 --> <script src="example.js"/> </body> </html>
3. 在函数内使用严格模式
如果在函数外部使用严格模式,则有可能会使第三方类库,和同事的代码不能正常工作,在函数内部则只能影响自己的代码,不至于影响到别人的代码。
function myfunction(){ "use strict"; //函数代码 }
4. 不要省略语句结尾的分号
代码结尾处没有分号容易引起压缩错误,另外在某些情况下可以增进代码的性能,应为解释器不比在花时间推测在什么地方插入分号。还有一种更常见的问题就是,自动插入分号有时会出错,所以并不建议省略分号。
5. 使用var定义变量
定义变量时使用var关键字,并且全部提前至函数的最开始。
这样做的好处就会避免无意识的创建出全局变量,而且让你的代码更容易理解。
function myfunction(){ var result = 10 + value; var value = 10; return result; }
这个函数语法上是没有问题的,但是不是很直观,不符合人的逻辑,修改如下会更好:
funciton myfunction(){ var result; var value; result = 10 + value; value = 10; return result; }
给大家解释一下,上面两个代码是等价的,result的值都是NAN.JavaScript会把函数内所有的变量声明提升到函数的最开始,代码一在代码执行时会变成代码二的样子,当运行到result = 10 + value;时,value的值为undefined,和10相加为NAN,然后value被赋值为10。
关于全局变量带来的问题,大家想必也比较清楚,不然也不会出现命名空间的概念。
6. 函数先声明再使用
和变量声明一样,函数声明也会被JavaScript引擎提前,因此在代码中,函数的调用可以出现在函数的声明之前。 还有一点值得注意,函数声明不应该出现在语句块之内,比如:
if (condition) { function myfunction(){ alert("true"); } }else{ function myfunction(){ alert("false"); } } myfunction();
运行代码我们发现会输出会和浏览器有关,在Chrome 51和Firefox 46输出true,IE 10下输出false。所以尽量避免在语句块中声明函数。
7. 慎用typeof underfined null判断
null是一个特殊值,我们经常和undefined混淆,下列场景应使用null:
- 用来初始化一个变量,这个变量可能赋值为一个对象。
- 用来和一个已经初始化的变量比较。
- 当函数的参数期望传入对象时,用作参数传入。
- 当函数的返回值期望是对象时,用作返回值传出。
下面一些情况不应该使用null:
- 不要使用null来检查是否传入了某个参数。
- 不要用null来检查一个变量是不是初始化。
理解null最好的方式是将他当做对象的占位符。我们经常将null和undefined搞混的原因是我们认为null和undefined都是变量未初始化,但是只有undefin代表一个变量还没有被初始化,null代表初始化为对象。看如下代码:
var person; console.log(typeof person); //undefined console.log(typeof foo); //undefined var house = null; console.log(typeof house); //object
所以尽量不要用typeof判断变量是否初始化,你并不能确定是变量不存在还是变量未初始化,返回null是你也不能确定变量有没有被正确的赋值,所以小心使用typeof。
8. 小心使用Number类型
想必大家也知道JavaScript整数支持十进制,八进制,和十六进制的字面值。八进制中如果字面值中的数值超过了范围,那么前导零将会被忽略,后面的数值当做十进制解析。
console.log(012); //10
console.lgo(082); //82
如果将八进制和十六进制用于小数则会语法错误。还有一点,八进制字面量在严格模式下是无效的。 关于浮点数计算误差的问题大家也都清楚,凡是基于IEEE754数值的浮点计算都是这样,所以永远不要测试某个特定的浮点数值。
在数值类型中有一个比较特殊的值,NaN(Not a Number),这个数值用于表示本来应该返回数值但是返回的不是数值类型。NaN和任何值都不相等,包括NaN本身。我们可以用isNaN()函数测试。
9. 使用逻辑运算动态赋值
大家比较喜欢的操作
var person={ age:10 } var condition; var myVar = condition && person; alert(myVar)
如果condition转为boolean类型为false,则myVar = condition,若为true,则myVar = person。
var person={ age:10 } var condition; var myVar = condition || person; alert(myVar)
如果condition转换为boolean为true,则myVar = condition,若为false,则myVar = person。
10. 不使用with语句
不使用with的一个重要原因是,在严格模式下语法本身就是禁用with语句的,这也表明ECMAScript委员会确信不应使用with。我们看如下例子:
var book = { title : "Maintainable JavaScript", author: "Nicholas C. Zakas" }; var message = "The book is "; with(book) { message += title; message += "by " + author; }
上述代码的问题在于我们很难分辨title和author出现的位置,也难分辨出message到地址一个局部变量还是book的一个属性,而且JavaScript引擎和压缩工具无法对这段代码进行优化,应为它们无法猜出代码的正确含义。
好了,已经十条了,我们下一个十条再见。
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
- 这篇文章主要介绍了Javascript类型转换的规则实例解析,涉及到javascript类型转换相关知识,对本文感兴趣的朋友一起学习吧...2016-02-27
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助...2021-11-10
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
- 神马是“解释器模式”?先翻开《GOF》看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如...2014-06-07
- 虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
JavaScript学习笔记整理_setTimeout的应用
下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-03- ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30
- tab切换在网页中很常见,故最近总结了4种实现方法。 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-20