,,12条写出高质量JS代码的方法

,,12条写出高质量JS代码的方法

本文告诉你如何遵循12种方法写出高质量的JS代码。需要这种便利的朋友请参考。

写出高质量的JS代码,不仅让程序员看着舒服,还能提高程序的运行速度。下面是如何组织我们的小编:

一、如何书写可维护性的代码

当一个bug出现时,如果你能立即修复它,那是最好的。这个时候,解决问题的四种方法在你的脑海里还是很清晰的。否则,您会转移到其他任务,或者bug只在一段时间后出现,并且您会忘记特定的代码。如果您稍后检查这些代码,您将需要:

1.花时间去学习和理解这个问题。2.时间就是知道应该解决的问题的代码。

还有一个问题,特别是大型项目或者公司。修复bug的人不是写代码的人(发现和修复bug的人也不是同一个人)。所以,无论是自己前段时间写的代码,还是团队其他成员写的代码,都要减少理解代码生成的时间。这关系到底线(收入)和开发人员的幸福,因为我们应该开发新的和令人兴奋的东西,而不是花费数小时和数天来维护遗留代码。因此,创建可维护性代码至关重要。一般可维护性代码有以下原则:

可读性

一致性

可预测性

看起来是同一个人写的。

记录

二、全局变量的问题

全局变量的问题在于,您的JavaScript应用程序和网页上的所有代码都共享这些全局变量。它们生活在同一个全局命名空间中,所以当程序的两个不同部分用相同的名字但不同的函数定义全局变量时,命名冲突是不可避免的。网页包含非页面开发人员编写的代码也很常见,例如:

第三方JavaScript库

广告方脚本代码

第三方用户跟踪和分析脚本代码

不同类型的部件、标志和按钮

例如,第三方脚本定义了一个名为a的全局变量;然后,在函数中定义一个名为a的全局变量。结果是后面的变量覆盖了前面的,第三方脚本会突然失效!而且很难调试。

所以尽量少用全局变量是很重要的,比如命名空间模式或者函数自动立即执行。但是,最重要的是,为了减少全局变量,总是使用var来声明变量。

三、忘记var作用的副作用

隐式全局变量和显式定义的全局变量之间有一些小的区别,即通过delete操作符使变量未定义的能力。如下所示:

通过var创建的全局变量(在程序中而不是在任何函数中创建)不能被删除。

非通过var创建的隐式全局变量(无论是否在函数中创建)可以删除。

所以隐式全局变量不是真正的全局变量,而是全局对象的属性。属性可以用delete操作符删除,变量不能,具体代码我就不写了。

四、访问全局对象

在浏览器中,可以通过window属性在代码中的任何位置访问全局对象(除非您做了一些出格的事情,如声明一个名为window的局部变量)。但在其他环境中,这个方便的属性可能会被称为其他东西(甚至在程序中没有)。如果需要在没有硬编码窗口标识符的情况下访问全局对象,可以在任何级别的函数范围内执行以下操作:

var global=(function(){ return this;}());

五、for循环

在for循环中,可以循环获取数组或类似对象的值,如参数和HTMLCollection对象。通常的循环形式如下:

//下一个最佳循环为(var I=0;i myarray.lengthI) {//用myarray[i]}做些什么

这种循环形式的缺点是每次循环时都必须获得数组的长度。这次降低代码,特别是当myarray不是数组而是HTMLCollection对象时。

六、不扩展内置原型

扩展构造函数的prototype属性是增加功能的有力手段,但有时过于强大。添加内置的构造函数原型(如Object()、Array()或Function())很有诱惑力,但这会严重降低可维护性,因为这会使您的代码不可预测。使用您的代码的其他开发人员很可能希望使用内置的JavaScript方法来持续工作,而不是您添加的方法。此外,添加到原型中的属性可能会导致hasOwnProperty属性在不使用时显示在循环中,从而造成混乱。

七、避免隐式类型转换

JavaScript变量在比较时是隐式类型的。这就是为什么有些东西像:false==0或者" "==0会返回true结果。为了避免混淆隐式类型转换,在比较值和表达式类型时,请始终使用===和!==运算符。

var zero=0;If (zero==false) {//不执行因为zero是0,not false} //负例if(zero==false){//执行.}

八、避免eval()

如果在当前代码中使用eval(),请记住“eval()是魔鬼”这个咒语。该方法接受任意字符串,并将其视为JavaScript代码。当问题中的代码是预先已知的(不是在运行时确定的)时,就没有理由使用eval()。如果代码是在运行时动态生成的,那么有一种更好的方法可以在不使用eval的情况下实现相同的目标。例如,使用方括号来访问动态属性会更好、更简单:

//负例var property=' namealert(eval('obj。物业));//better var property=' name ';alert(obj[property]);

使用eval()也会带来安全风险,因为执行的代码(比如来自网络的)可能已经被篡改了。这是很常见的反面教材,当处理Ajax请求得到的JSON是对应的。在这些情况下,最好使用JavaScript内置方法来解析JSON对应,以保证安全性和有效性。如果你的浏览器不支持JSON.parse(),你可以使用JSON.parse的库。

同样重要的是要记住,在大多数情况下,将字符串传递给setInterval()、setTimeout()和Function()构造函数类似于使用eval(),因此应该避免。在幕后,JavaScript仍然需要评估和执行您传递给程序的字符串:

//反面例子setTimeout('myFunc()',1000);setTimeout('myFunc(1,2,3)',1000);//更好的setTimeout(myFunc,1000);setTimeout(function () { myFunc(1,2,3));}, 1000);

使用新的Function()构造类似于eval(),应该小心使用。这可能是一个强大的概念,但它经常被误用。如果一定要用eval(),可以考虑用new Function()代替。有一个小小的潜在好处,因为new Function()中的代码求值是在局部函数作用域中运行的,所以代码中var定义的任何求值变量都不会自动变成全局变量。防止自动全局变量的另一种方法是将eval()封装到一个立即函数中。

考虑下面的例子,其中只有un污染了作为全局变量的名称空间。

console . log(un类型);//'undefined' console.log(类型为deux);//' undefined ' console . log(trois类型);//' undefined ' var jsstring=' var un=1;console . log(un);';eval(jsstring);//logs ' 1 ' jsstring=' var deux=2;console . log(deux);';新函数(jsstring)();//logs ' 2 ' jsstring=' var trois=3;console . log(trois);';(function(){ eval(jsstring));}());//logs '3' console.log(类型为un);//number console . log(type of deux);//' undefined ' console . log(trois类型);//'未定义'

eval()和函数构造的另一个区别是,eval()会干扰作用域链,而Function()更自律。无论在哪里执行Function(),它都只看到全局范围。因此,它可以很好地避免局部变量污染。在下面的例子中,eval()可以访问和修改其外部作用域内的变量,而Function不能这样做(注意using Function和new Function是一样的)。

(function(){ var local=1;eval(' local=3;console . log(local)');//logs '3' console.log(本地);//logs ' 3 ' }());(function(){ var local=1;函数(' console.log(类型为local);')();//日志未定义

九、编码规范

建立并遵循编码标准是非常重要的,这将使您的代码一致、可预测且更易于阅读和理解。当一个新的开发人员加入这个团队时,他可以通读规范,理解其他团队成员编写的代码,更快上手。

十、缩进

没有缩进代码基本上是不可读的。唯一不好的是缩进不一致,因为看似遵循规范,但一路上可能伴随着困惑和惊喜。以标准化的方式使用缩进是很重要的。

十一、注释

你必须注释你的代码,即使没有人会像你一样接触它。通常当你深入研究一个问题的时候,你会知道这个代码到底是干什么用的,但是一个星期后你再来的时候,你就要花大量的脑细胞去搞清楚它到底是怎么工作的。

显然,注释不能走极端:每个单独的变量或单行。但是,您通常应该记录所有函数、它们的参数和返回值,或者任何不寻常的技术和方法。认为注释可以给你的代码的未来读者很多提示;读者需要的是(不要看太多)只有注释和函数属性名才能理解你的代码。例如,当你有五六行程序来执行一个特定的任务时,如果你提供一行代码的用途以及为什么在这里描述它,读者可以直接跳过这个细节。注释代码比例没有硬性规定,代码的某些部分(比如正则表达式)注释可能比代码多。

十二、花括号{}

花括号(也叫大括号,下同)应该一直使用,即使是可选的。从技术上来说,如果in或for中只有一个语句,花括号是不必要的,但你应该总是使用它们,这将使代码更可持续,更易于更新。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 关于js的面试题,前段js面试题
  • 关于js的面试题,前段js面试题,送你43道JS面试题(收藏)
  • 关于js中的全等和不全等,等于和不等于问题的关系,
  • 关于js中的全等和不全等,等于和不等于问题的关系,,关于JS中的全等和不全等、等于和不等于问题
  • 全面了解js中的匿名函数有哪些,全面了解js中的匿名函数是什么
  • 全面了解js中的匿名函数有哪些,全面了解js中的匿名函数是什么,全面了解JS中的匿名函数
  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令
  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令,使用JS实现简单的图片切换功能
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法,使用js实现数据格式化
  • 使用js代码实现点击按钮下载文件的方法,使用js代码实现点击按钮下载文件并安装
  • 使用js代码实现点击按钮下载文件的方法,使用js代码实现点击按钮下载文件并安装,使用JS代码实现点击按钮下载文件
  • 代码错误未结束的字符串常量,代码错误未结束的字符串常量,js 未结束的字符串常量错误解决方法
  • 什么叫jsp,jsp的概念是什么
  • 什么叫jsp,JSP是指
  • 留言与评论(共有 条评论)
       
    验证码: