JS小技巧
1.使用 === 代替 ==
JavaScript 使用2种不同的等值运算符:===|!== 和 ==|!=,在比较操作中使用前者是最佳实践。
“如果两边的操作数具有相同的类型和值,===返回true,!==返回false。”——JavaScript:语言精粹
然而,当使用==和!=时,你可能会遇到类型不同的情况,这种情况下,操作数的类型会被强制转换成一样的再做比较,这可能不是你想要的结果。
在js中数字0是逻辑的false。空字符串("")是逻辑的false。undefined是逻辑的false。null是逻辑的false。
" "含有空格的字符串是逻辑的true。字符串"0"是逻辑的true。字符串"undefined"是逻辑的true。字符串"null"是逻辑的true。
/* 判断str是否为空。为空则返回true,否则返回false */ function isNull(str){ if("0" === str || 0 === str){ return false; } if(!str || str == null || str == '' || str == 'null'){ return true; } return false; }
2.将脚本放在页面的底部
在本系列前面的文章里已经提到过这个技巧,我粘贴信息在这里。
记住——首要目标是让页面尽可能快的呈献给用户,脚本的夹在是阻塞的,脚本加载并执行完之前,浏览器不能继续渲染下面的内容。因此,用户将被迫等待更长时间。
如果你的js只是用来增强效果——例如,按钮的单击事件——马上将脚本放在body结束之前。这绝对是最佳实践。
建议
<p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js"></script> <script type="text/javascript" src="path/to/anotherFile.js"></script> </body> </html>
3.使用{}代替 new Ojbect()
在JavaScript中创建对象的方法有多种。可能是传统的方法是使用"new"加构造函数,像下面这样:
var o = new Object(); o.name = 'Jeffrey'; o.lastName = 'Way'; o.someFunction = function() { console.log(this.name); }
然而,这种方法的受到的诟病不及实际上多。作为代替,我建议你使用更健壮的对象字面量方法。
更好的做法
var o = { name: 'Jeffrey', lastName = 'Way', someFunction : function() { console.log(this.name); } };
注意,果你只是想创建一个空对象,{}更好。
var o = {};
“对象字面量使我们能够编写更具特色的代码,而且相对简单的多。不需要直接调用构造函数或维持传递给函数的参数的正确顺序,等”——dyn-web.com
4.使用[]代替 new Array()
这同样适用于创建一个新的数组。
例如:
var a = new Array(); a[0] = "Joe"; a[1] = 'Plumber';
更好的做法:
var a = ['Joe','Plumber'];
“javascript程序中常见的错误是在需要对象的时候使用数组,而需要数组的时候却使用对象。规则很简单:当属性名是连续的整数时,你应该使用数组。否则,请使用对象”——Douglas Crockford
5.定义多个变量时,省略var关键字,用逗号代替
var someItem = 'some string'; var anotherItem = 'another string'; var oneMoreItem = 'one more string';
更好的做法
var someItem = 'some string', anotherItem = 'another string', oneMoreItem = 'one more string';
…应而不言自明。我怀疑这里真的有所提速,但它能是你的代码更清晰。
6.自执行函数
和调用一个函数类似,它很简单的使一个函数在页面加载或父函数被调用时自动运行。简单的将你的函数用圆括号包裹起来,然后添加一个额外的设置,这本质上就是调用函数。
(function doSomething() { return { name: 'jeff', lastName: 'way' }; })();
7.移除"language"属性
曾经脚本标签中的“language”属性非常常见。
<script type="text/javascript" language="javascript">
...
</script>
然而,这个属性早已被弃用,所以请移除(译者注:html5 中已废弃,但如果你喜欢,你仍然可以添加)。