Javascript 一些需要注意的细节(必看篇)


Posted in Javascript onJuly 08, 2017

1.使用 === 代替 ==

JavaScript 使用2种不同的等值运算符:===|!== 和 ==|!=,在比较操作中使用前者是最佳实践。

“如果两边的操作数具有相同的类型和值,===返回true,!==返回false。”——JavaScript:语言精粹

然而,当使用==和!=时,你可能会遇到类型不同的情况,这种情况下,操作数的类型会被强制转换成一样的再做比较,这可能不是你想要的结果。

2.Eval == 邪恶

起初不太熟悉时,“eval”让我们能够访问JavaScript的编译器(译注:这看起来很强大)。从本质上讲,我们可以将字符串传递给eval作为参数,而执行它。

这不仅大幅降低脚本的性能(译注:JIT编译器无法预知字符串内容,而无法预编译和优化),而且这也会带来巨大的安全风险,因为这样付给要执行的文本太高的权限,避而远之。

3.省略未必省事

从技术上讲,你可以省略大多数花括号和分号。大多数浏览器都能正确理解下面的代码:

if(someVariableExists) 
  x = false

然后,如果像下面这样:

if(someVariableExists) 
  x = false 
  anotherFunctionCall();

有人可能会认为上面的代码等价于下面这样:

if(someVariableExists) { 
  x = false; 
  anotherFunctionCall(); 
}

不幸的是,这种理解是错误的。实际上的意思如下:

if(someVariableExists) { 
  x = false; 
} 
anotherFunctionCall();

你可能注意到了,上面的缩进容易给人花括号的假象。无可非议,这是一种可怕的实践,应不惜一切代价避免。仅有一种情况下,即只有一行的时候,花括号是可以省略的,但这点是饱受争议的。

if(2 + 2 === 4) return 'nicely done';

未雨绸缪

很可能,有一天你需要在if语句块中添加更多的语句。这样的话,你必须重写这段代码。底线——省略是雷区。

4.将脚本放在页面的底部

记住——首要目标是让页面尽可能快的呈献给用户,脚本的夹在是阻塞的,脚本加载并执行完之前,浏览器不能继续渲染下面的内容。因此,用户将被迫等待更长时间。

如果你的js只是用来增强效果——例如,按钮的单击事件——马上将脚本放在body结束之前。这绝对是最佳实践。

5.避免在For语句内声明变量

当执行冗长的for语句时,要保持语句块的尽量简洁,例如:

糟糕:

for(var i = 0; i < someArray.length; i++) { 
  var container = document.getElementById('container'); 
  container.innerHtml += 'my number: ' + i; 
  console.log(i); 
}

注意每次循环都要计算数组的长度,并且每次都要遍历dom查询“container”元素——效率严重地下!

建议:

var container = document.getElementById('container'); 
for(var i = 0, len = someArray.length; i < len; i++) { 
  container.innerHtml += 'my number: ' + i; 
  console.log(i); 
}

6.构建字符串的最优方法

当你需要遍历数组或对象的时候,不要总想着“for”语句,要有创造性,总能找到更好的办法,例如,像下面这样。

var arr = ['item 1', 'item 2', 'item 3', ...]; 
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

我不是你心中神,但请你相信我(不信你自己测试)——这是迄今为止最快的方法!

使用原生代码(如 join()),不管系统内部做了什么,通常比非原生快很多。

7.减少全局变量

“只要把多个全局变量都整理在一个名称空间下,拟将显著降低与其他应用程序、组件或类库之间产生糟糕的相互影响的可能性。”——Douglas Crockford

var name = 'Jeffrey'; 
var lastName = 'Way'; 
function doSomething() {...} 
console.log(name); // Jeffrey -- 或 window.name
// 更好的做法
var DudeNameSpace = { 
  name : 'Jeffrey', 
  lastName : 'Way', 
  doSomething : function() {...} 
} 
console.log(DudeNameSpace.name); // Jeffrey

注:这里只是简单命名为 "DudeNameSpace",实际当中要取更合理的名字。

8.给代码添加注释

似乎没有必要,当请相信我,尽量给你的代码添加更合理的注释。当几个月后,重看你的项目,你可能记不清当初你的思路。或者,假如你的一位同事需要修改你的代码呢?总而言之,给代码添加注释是重要的部分。

// 循环数组,输出每项名字(译者注:这样的注释似乎有点多余吧)
for(var i = 0, len = array.length; i < len; i++) {
  console.log(array[i]); 
}

9.拥抱渐进增强

确保javascript被禁用的情况下能平稳退化。我们总是被这样的想法吸引,“大多数我的访客已经启用JavaScript,所以我不必担心。”然而,这是个很大的误区。

你可曾花费片刻查看下你漂亮的页面在javascript被关闭时是什么样的吗?(下载 Web Developer 工具就能很容易做到(译者注:chrome用户在应用商店里自行下载,ie用户在Internet选项中设置)),这有可能让你的网站支离破碎。作为一个经验法则,设计你的网站时假设JavaScript是被禁用的,然后,在此基础上,逐步增强你的网站。

10.不要给"setInterval"或"setTimeout"传递字符串参数

考虑下面的代码:

setInterval( 
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000 
);

不仅效率低下,而且这种做法和"eval"如出一辙。从不给setInterval和setTimeout传递字符串作为参数,而是像下面这样传递函数名。

setInterval(someFunction, 3000);

11.不要使用"with"语句

乍一看,"with"语句看起来像一个聪明的主意。基本理念是,它可以为访问深度嵌套对象提供缩写,例如……

with (being.person.man.bodyparts) { 
  arms = true; 
  legs = true; 
}

而不是像下面这样:

being.person.man.bodyparts.arms = true; 
being.person.man.bodyparts.legs= true;

不幸的是,经过测试后,发现这时“设置新成员时表现得非常糟糕。作为代替,您应该使用变量,像下面这样。

var o = being.person.man.bodyparts; 
o.arms = true; 
o.legs = true;

12.使用{}代替 new Ojbect()

在JavaScript中创建对象的方法有多种。可能是传统的方法是使用"new"加构造函数,像下面这样:

ar 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); 
  } 
};

注意,果你只是想创建一个空对象,{}更好。

13.使用[]代替 new Array()

这同样适用于创建一个新的数组。

例如:

var a = new Array(); 
a[0] = "Joe"; 
a[1] = 'Plumber';

// 更好的做法:
var a = ['Joe','Plumber'];

“javascript程序中常见的错误是在需要对象的时候使用数组,而需要数组的时候却使用对象。规则很简单:当属性名是连续的整数时,你应该使用数组。否则,请使用对象”——Douglas Crockford

14.定义多个变量时,省略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';

应而不言自明。我怀疑这里真的有所提速,但它能是你的代码更清晰。

15.使用Firebug的"timer"功能优化你的代码

在寻找一个快速、简单的方法来确定操作需要多长时间吗?使用Firebug的“timer”功能来记录结果。

function TimeTracker(){ 
 console.time("MyTimer"); 
 for(x=5000; x > 0; x--){} 
 console.timeEnd("MyTimer"); 
}

16.阅读,阅读,反复阅读

虽午餐之余或上床睡觉之前,实在没有什么比一本书更合适了,坚持放一本web开发方面书在你的床头柜。

以上这篇Javascript 一些需要注意的细节(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 原型学习总结
Oct 29 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 #jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 #jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 #jQuery
js中变量的连续赋值(实例讲解)
Jul 08 #Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 #Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 #Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 #Javascript
You might like
Zerg基本策略
2020/03/14 星际争霸
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
js 页面执行时间计算代码
2009/03/04 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
Vue插件写、用详解(附demo)
2017/03/20 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
分析Python读取文件时的路径问题
2018/02/11 Python
Python实现的质因式分解算法示例
2018/05/03 Python
机器学习实战之knn算法pandas
2019/06/22 Python
python实现控制COM口的示例
2019/07/03 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
html5与css3小应用
2013/04/03 HTML / CSS
八项规定整改方案
2014/02/21 职场文书
大学应届生的自我评价
2014/03/06 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
教师三严三实心得体会
2014/10/11 职场文书
大学辅导员述职报告
2015/01/10 职场文书
舞出我人生观后感
2015/06/16 职场文书
爱国主题班会教案
2015/08/14 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python