5个书写JavaScript代码的坏习惯，看看你中枪了没？
Javascript在互联网上名声很臭，但你又很难再找到一个像它这样如此动态、如此被广泛使用、如此根植于我们的生活中的另外一种语言。它的低学习门槛让很多人都称它为学前脚本语言，它另外一个让人嘲笑的东西是动态语言的概念是偏偏使用了高标准的静态数据类型。其实，你和Javascript都站错了立场，而现在，你让Javascript很生气。这里有五个原因能说明你的Javascript技术很烂。
1. 你没有使用命名空间。
是否还记得在大学里老师告诉你不要在家庭作业里使用全局变量？Javascript里的全局变量的使用方法也不例外。Web网页稍不留神就会变的混乱不堪、到处都是从互联网上各个角落里找来的乱糟糟的相互侵犯的脚本和脚本库。如果你把一个变量命名成loader()，那你是成心自找麻烦。如果你在无意识的情况下重载了一个函数，Javascript根本不会提醒你。你还把它叫做一种学前教育编程语言，还记得吧？我要说的是，你需要知道在做了这些后发生什么情况。
function derp(){ alert(“one”); }
function derp(){ alert(“two”); }
derp();
“two”，答案是“two”。并不是一定会这样，它也可能是“one”。所以，把你所有的代码都放在自己的命名空间里，这很容易。下面是定义自己的命名空间的一个简单做法。
var foospace={};
foospace.derp=function(){ alert(“one”); }
function derp(){ alert(“two”); }
foospace.derp();
2. 你在变戏法，你把变量定义的东一个西一个。
你使用莫名其妙的数字字母组合作为变量名是一个双输的结局。在40行的代码块中寻找一个不带任何表意的字符变量，对于维护工作来说简直是场噩梦。把对变量的第一次声明混合到一个40行的代码块里同样也是一场噩梦。即使你自己遇到这样的变量时，你也要不由的问自己：“这是在哪里定义的？”，然后迅速的使用Ctrl+F组合在源代码里寻找这个变量最初定义的位置。不，不要这样，相反，这是对Javascript的滥用，是一种愚蠢的做法。你应该始终把变量定义在它的使用范围的顶部。并不能说因为这不是必须的，你就可以不这样做。
function(){
var a,//description
b; //description
//process…
}
3. 你没有理解Javascript的变量范围。
你是个天才的程序员，你吃的是C++、拉的是List。你知道什么是变量范围，你对你的变量有完全的控制，你就像太上皇似的的注视着它们。然而，Javascript却在你的咖啡里拉了一泡屎，并且大笑不止。
var herp=”one”;
{
var herp=”two”;
}
alert(herp);
在这种情况下你得到的herp不是“one”，而是“two”。Javascript的变量有效范围并不是跟其它语言一样依赖于代码块。Javascript的变量范围是以函数为基础的。每个函数都有它自己的变量范围，Javascript这一点上表现的很酷，根本不理睬这毫无意义的花括弧包起来的范围。事实上，Javascript是如此的酷，以至于你甚至可以将变量范围像命名空间或变量那样进行传递。
4. 你以为Javascript的面向对象特征只是嫁接而来的。
Javascript，自从呱呱落地起，它就是一个面向对象的语言。所有的东西在Javascript里都是对象，所有的！甚至数字和字符这样的文字符号都可以通过它自身固有的构造器转化成对象。跟其它面向对象的语言比起来，Javascript的不同之处在于，它没有类(class)。Javascript对象像函数那样定义，甚至函数自己也是对象。Javascript有个属性叫做prototype，所有对象里都内置了这个属性，你可以通过它来改变对象的构造，修改对象、添加更多的变量、更多的功能。
var derp; //will hold a Herp instance
var Herp= function(){
this.opinion=”Javascript is cooler than BASIC.”;
}
Herp.prototype.speak=function(){ alert(this.opinion); }
var derp= new Herp();
derp.speak();
如果这个看起来跟你毫不相干，我愿意介绍我的好朋友Google给你，Google擅长于帮助人们学习知识。面向对象对于我这篇简短的、低姿态的文章来说实在是个太大的话题。
5. 你使用“new”关键字时就像是盲人瞎马。
Javascript肯定是你的初恋女友，因为你显得无所适从。如果你想像真人那样取悦Javascript，你需要去了解对象符号。除了在需要实例化一个对象，或罕见的需要延时加载数据的情况外，你基本上不需要使用new关键字。在Javascript里分配大量的new变量地址是一项很慢的操作，为了效率起见，你应该始终使用对象符号。
var rightway= [1, 2, 3];
var wrongway= new Array(1, 2, 3);
是否还记得我说过Javascript的变量范围是以函数为基础的？是否还记得有人说Javascript的对象像函数那样定义？如果你不使用new关键字来声明一个对象，你将会使这个对象成为全局范围内的对象。所以，永远使用new关键字来声明对象是一个好习惯。
var derp=”one”;
var Herp=function(){
this.derp=”two”;
}
var foo=Herp();
alert(derp);
如果你这样写，Javascript并不会在意，而你真正弹出的答案是“two”！有很多方法可以防止对象做出这样的行为，可以以使用instanceOf，但更好的方法是正确的使用new关键字，这样显得更专业。
现在你知道你的Javascript代码写的很烂了吧，如果你记住了上面所说的东西，你的代码就会有所改善。我喜欢用3个tab键来缩进代码，我喜欢用下划线来连接单词，我喜欢把函数名首字母大写来表示它是对象。当然，这个是另外一场讨论了。有很多原因会导致你的Javascript代码写的很烂，就像我有很多技术很烂一样，所以，尽情的在评论里表达你的意见，支持，反对，不吝赐教。
非常感谢rogeliorv和 Jared Wein指出第五点中存在的错误。你们很强。
相关文章
这篇文章主要为大家分享了一份很全面的JavaScript常用功能汇总集合，一些常用的额JS 对象、基本数据结构、功能函数等，感兴趣的小伙伴们可以参考一下2016-01-01
axios是基于promise用于浏览器和node.js的http客户端，支持浏览器和node.js，能拦截请求和响应，这篇文章主要介绍了axios get post请求传递参数的操作代码,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了微信小程序实现计时器，小程序点击事件触发计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要介绍了JS中substring与substr的用法讲解，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-11-11
流程编辑器是一种用于创建、编辑和管理流程图的工具,它提供了一个可视化的界面,使用户能够以图形化的方式定义和配置流程的各个步骤、条件和流程间的关系,说明关于bpmn.js的一些事件, 通过本文你可以了解到,感兴趣的朋友一起看看吧2023-10-10
js无缝滚动，图片无缝滚动，文字无缝滚动，基于js代码如何实现，本篇文章给大家详解js代码实现无缝滚动(文字和图片)，需要的朋友可以参考下2015-08-08
我们在使用JS渲染DOM时，一般使用字符串创建DOM然后附加到父元素上，如果附加的DOM是动态易变的，那需要在函数中写大量逻辑。如果在控件实现过程中，这带来的问题更为严重。2013-04-04
浏览器为开发者提供了功能丰富的Observer,本文主要介绍了JavaScript中5个重要的Observer函数小结,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要为大家详细介绍了微信小程序实现拍照画布指定区域生成图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要为大家详细介绍了微信小程序原生自定义弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论