5个书写JavaScript代码的坏习惯,看看你中枪了没?


Posted in Javascript onNovember 06, 2014

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 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
javascript解析json实例详解
Nov 05 #Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 #Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 #Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 #Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 #Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 #Javascript
node.js中的Socket.IO使用实例
Nov 04 #Javascript
You might like
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python 流程控制实例代码
2009/09/25 Python
Python中使用SAX解析xml实例
2014/11/21 Python
详解Python的单元测试
2015/04/28 Python
python字符串,数值计算
2016/10/05 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
深入浅出学习python装饰器
2017/09/29 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
咖啡店创业计划书范文
2014/09/15 职场文书
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server