说明你的Javascript技术很烂的五个原因


Posted in Javascript onApril 26, 2011

本文是从 5 Reasons Your Javascript Stinks 这篇文章翻译而来。

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 相关文章推荐
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
chrome调试javascript详解
Oct 21 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 #Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 #Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 #Javascript
jqPlot 基于jquery的画图插件
Apr 26 #Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 #Javascript
jQuery 版元素拖拽原型代码
Apr 25 #Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 #Javascript
You might like
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
php 定义404页面的实现代码
2012/11/19 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
一段实用的php验证码函数
2016/05/19 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP实现计算器小功能
2020/08/28 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
python实现将汉字保存成文本的方法
2018/11/16 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python3 配置logging日志类的操作
2020/04/08 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
平面设计师工作职责范文
2013/12/03 职场文书
模具数控专业自荐信
2014/01/27 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python