|
|
51CTO旗下网站
|
|
移动端

实现JavaScript优秀实践:注意应避开使用的旧结构

由于JavaScript有很多小陷阱,因此要注意避开。本文会介绍需要避开的误区,例如声明全局变量、向setInterval和setTimeout传递字符串、使用with语句等。

作者:读芯术来源:今日头条|2020-03-27 22:18

与任何其他编程语言一样,JavaScript也有自己的最佳实践列表,使程序更易于阅读和维护。

由于JavaScript有很多小陷阱,因此要注意避开。可以通过轻松地遵循一些最佳实践使JavaScript代码易于阅读。

本文会介绍需要避开的误区,例如声明全局变量、向setInterval和setTimeout传递字符串、使用with语句等。

避免声明全局变量

无论出于何种原因,都应该尽量避免使用全局变量。

其一是它们很容易在不同的地方被覆盖,因为全局变量在任何地方都是可用的。此外,全局变量是window对象的属性,还可以覆盖window对象中的内容。

这两个问题会使代码难以执行。因此应该尽可能多地定义局部变量。

可以使用var、let或const关键字来定义局部变量。

用var定义的变量在定义之前,在被定义的层次及以下是可用的。例如以下代码:

  1. const log = () => { 
  2. console.log(x); 
  3. log(); 
  4. var x = 1
  5. log(); 

代码中,第一个console.log中的x是未定义的,第二个log中x则为1.

以下为同效代码:

  1. var x; 
  2. constlog= () => { 
  3.   console.log(x); 
  4. log(); 
  5. x =1
  6. log(); 

用let声明的变量只有在定义之后才可用,所以如果给出以下代码:

  1. const log = () => { 
  2. console.log(x); 
  3. log(); 
  4. let x = 1
  5. log(); 

会出现以下错误信息:

  1. Uncaught ReferenceError: Cannotaccess ‘x’ before initialization 

使用const关键字可定义只能分配一次且不能再分配的常量。与var不同,这种常量只有在声明之后才可用。

例如以下代码:

  1. {console.log(x);}const x = 1;log(); 

在const x = 1之前调用log也会出现以下错误信息:

  1. Uncaught ReferenceError: Cannotaccess ‘x’ before initialization 

如果想要在程序的不同部分中使用变量,应使用JavaScript模块,然后在发布代码时将这些模块构建到一个或多个大型文件中。这一方法自ES6后可行。

可以导出变量并将其引入至其他模块。还可以使用“导出默认”导出整个模块。通过这种方式只能导出应该在模块外部可用的部分,其他都为不可见的。

此外还可以使用闭包将变量保存在函数中,这样可避免外部调用。以下为简单的闭包使用:

  1. = () => {const x = 3
  2. return () => x * 2;} 

将x保留在divide函数中可避免外部调用,并可返回一个处理x的函数。

然后编写以下代码调用:

  1. console.log(divide()()); 

不要向setInterval或setTimeout传递字符串

不应将字符串传递给setInterval或setTimeout函数的第一个参数,而应传递回调函数。

如果传递的是一个字符串而不是一个回调函数,浏览器将使用eval来运行字符串中的代码,速度很慢,并易受到代码注入攻击。

因此,没有理由进行以上操作,除非我们真的需要运行动态生成的代码,但这应该是非常非常罕见的情况。

不应该写以下代码:

  1. setTimeout(() => {document.getElementById('foo')。textContent = 'foo';}, 1000); 

应该写以下代码:

  1. setTimeout(() => {document.getElementById('foo')。textContent = 'foo';}, 1000); 

不要使用“with”语句

从表面上看,with语句似乎是访问对象深度嵌套属性的一个良好捷径。例如可以这样写:

  1. let obj = { 
  2.   foo: { 
  3.     bar: { 
  4.       baz: 1 
  5.     } 
  6.   } 
  7. obj.foo.bar.baz=2

而不是:

  1. let obj = { 
  2.   foo: { 
  3.     bar: { 
  4.       baz: 1 
  5.     } 
  6.   } 
  7. with(obj.foo.bar) { 
  8.   var baz =2

但即使这样仍会干扰全局对象,并使baz是否可以在with语句之外访问变得模糊不定。因为还可以在with语句中声明新的变量:

  1. let obj = { 
  2.   foo: { 
  3.     bar: { 
  4.       baz: 1 
  5.     } 
  6.   } 
  7. with(obj.foo.bar) { 
  8.   var baz =2

这里baz变量是在with语句内部声明,但外部无法调用。

幸运的是,在JavaScript严格模式下不允许使用with语句,所以现在也不必担心。

var关键字

在ES6中,可分别使用块作用域的let和const关键字来声明变量和常量。之所以可以用来声明变量,是因为它们有明确的作用域。

用var声明的变量使用范围较为模糊。如果是在如if块或循环这样的程序块中声明,声明的变量在块外部可用。

例如:

  1. for (let i = 0; i < 10; i++){ 
  2.   var j = i
  3. console.log(j); 

这种情况下使用var是可行的,但如果用let替代var声明变量就会报错。

由于作用域是混淆模糊的,我们应该停止使用var来声明变量。

使用JavaScript编程时,我们希望避免使用存在于早期JavaScript版本中的许多老旧结构。使用这些结构让代码难以阅读,并很容易产生bug。

首先要避免全局变量声明,以防止在全局范围内意外引用和声明内容。这样还可降低意外修改全局变量值的可能。

其次应该停止在字符串中传递代码,而是将回调函数传递给setTimeout和setInterval函数的第一个参数。因为eval将用于运行存储在字符串中的代码,这会让程序面临代码注入攻击,而且速度也很慢。

另外应该避免使用with语句,因为它会在全局对象内创建变量。

同样,由于var关键字声明的变量的作用域比较模糊,因此应避免使用var关键字声明变量。

【责任编辑:赵宁宁 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

 敏捷无敌之 Gitlab CI 持续集成

敏捷无敌之 Gitlab CI 持续集成

打破运维与研发壁垒
共5章 | KaliArch

109人订阅学习

秒杀高并发白话实战

秒杀高并发白话实战

主流高并发架构
共15章 | 51CTO崔皓

64人订阅学习

网络排障一点通

网络排障一点通

网络排障及优化调整案例
共20章 | 捷哥CCIE

482人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微