每日十条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引擎和压缩工具无法对这段代码进行优化，应为它们无法猜出代码的正确含义。
好了，已经十条了，我们下一个十条再见。
相关推荐
-
利用Node.js获取项目根目录的小技巧
假设我们的js文件写在server目录中,但是我们的资源文件存储在app/img目录中. 实现功能 如下图,我们需要在server/index.js文件中使用fs读取app/img/favicon.ico文件. 实现方法 在node.js只提供了一个 dirname全局变量.通过 dirname可以获得"C:\wwwroot\yidata\server".这时需要用到path. 首先 import path from 'path'; (ES6)或var path = require (
-
JavaScript奇技淫巧44招【实用】
JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是很多新手踏入编程世界的第一个语言.既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino来控制机器人.能够编写结构清晰.性能高效的JavaScript代码的开发人员,现如今已成了招聘市场最受追捧的人 1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会
-
12个非常实用的JavaScript小技巧【推荐】
这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: funct
-
jsp编程常用技巧小结
本文实例总结了jsp编程常用技巧.分享给大家供大家参考,具体如下: 一.分离下拉列表框中的值 页面中有一个下拉列表框,如下: <td><select > <option value=""></option> <option value="18~30">18~30岁</option> <option value="31~40">31~40岁</option&g
-
每日十条JavaScript经验技巧(二)
1. 非数值类型转数值 使用Number()转换时: undefined会转为NaN 如果字符串以0开始,浏览器会忽略前导0,不会按照八进制进行转换 如果字符串以0x开始,浏览器会按照十六进制转化为十进制返回 如果字符串有字符,除(+,-,.)外都会转为NaN,十六进制时,字符串包含任何非数字字符都返回NaN 如果是对象转换,则对象先使用valueof(),然后按照规则转换.如果无valueOf方法,则调用toString方法,再转换. 使用parseInt()转换时: parseInt会忽略前
-
JavaScript中apply方法的应用技巧小结
前言 最近在看JavaScript设计模式,其中有一些巧妙的函数.所以将部分修改后记录在此,顺便加上自己写出的一些好玩的函数.方便大家和自己以后使用.下面来一起看看. 一.apply实现call Function.prototype.call = function () { var ctx = [].shift.apply(arguments) return this.apply(ctx, arguments) } 二.apply实现bind Function.prototype.bind =
-
41个Web开发者必须收藏的JavaScript实用技巧
Web开发者必须收藏的JavaScript实用技巧,供大家参考,具体内容如下 1. 将彻底屏蔽鼠标右键 oncontextmenu="window.event.returnValue=false" < table border oncontextmenu=return(false)>< td>no< /table> 可用于 Table 2. 取消选取.防止复制 < body onselectstart="return false&qu
-
JavaScript中Array的实用操作技巧分享
一.关于Array Array的创建很灵活,可以使用Array构造函数,也可以直接创建数组"字面量". var arr = new Array(); //[] var brr = Array(); //[] 两者等效 var arr = Array(3); //[] arr.length; //3 长度为3的空数组 var arr = Array(22,33,'qq',{}); //[22, 33, "qq", Object] var brr = [22,33,'q
-
javascript函数中的3个高级技巧
前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本文将再深入一步,介绍函数的3个高级技巧 技巧一:作用域安全的构造函数 构造函数其实就是一个使用new操作符调用的函数 function Person(name,age,job){ this.name=name; this.age=age; this.job=job; } var person=new Person('match',28,'Software E
-
Web性能优化系列 10个提升JavaScript性能的技巧
Nicholas Zakas是一位 JS 大师,Yahoo! 首页的前端主程.他是<高性能 Javascript>的作者,这本书值得每个程序员去阅读. 当谈到 JS 性能的时候,Zakas差不多就是你要找的,2010年六月他在Google Tech Talk发表了名为<Speed Up Your Javascript>的演讲. 但 Javascript 性能优化绝不是一种书面的技术,Nicholas 的技术演进列出了10条建议,帮助你写出高效的 JS 代码. 1. 定义局部变量 当
-
javascript 四十条常用技巧大全
1. 将彻底屏蔽鼠标右键 oncontextmenu="window.event.returnValue=false" < table border oncontextmenu=return(false)>< td>no< /table> 可用于 Table 2. 取消选取.防止复制 <span class="tag" style="color:rgb(0,0,128)">< <span
-
JS常用函数和常用技巧小结
学习和工作的过程中总结的干货,包括常用函数.常用js技巧.常用正则表达式.git笔记等.为刚接触前端的童鞋们提供一个简单的查询的途径,也以此来缅怀我的前端学习之路. Ajax请求 jquery ajax函数 我自己封装了一个ajax的函数,代码如下: var Ajax = function(url, type success, error) { $.ajax({ url: url, type: type, dataType: 'json', timeout: 10000, success: fu
-
静态页面html中跳转传值的JS处理技巧
本文实例讲述了静态页面html中跳转传值的JS处理技巧.分享给大家供大家参考,具体如下: 在html中通过"?"传值: <a href="index2.html?name=caoy">静态传值</a> 在跳转到的页面index2.html中接收: var name=UrlParm.parm("name"); 代码如下: index.html: <script type="text/javascript&qu