说明你的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 相关文章推荐
js replace 与replaceall实例用法详解
Aug 03 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 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 parse_url 一个好用的函数
2009/10/03 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
基于Python实现一个简单的银行转账操作
2016/03/06 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
python的多重继承的理解
2017/08/06 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
python之语音识别speech模块
2020/09/09 Python
python实现学生信息管理系统源码
2021/02/22 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
给国外客户的邀请函
2014/01/30 职场文书
公司员工安全协议书
2014/11/21 职场文书
校车安全管理责任书
2015/05/11 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
治庸问责工作总结
2015/08/11 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL