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


Posted in Javascript onOctober 28, 2011

它的低学习门槛让很多人都称它为学前脚本语言,它另外一个让人嘲笑的东西是动态语言的概念是偏偏使用了高标准的静态数据类型。其实,你和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 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
js实现div色块拖动录制
Jan 16 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
js实现tab栏切换效果
Aug 02 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
js 数据类型判断的方法
Dec 03 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 #Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 #Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 #Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 #Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 #Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 #Javascript
JavaScript学习笔记(二) js对象
Oct 25 #Javascript
You might like
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python网络爬虫采集联想词示例
2014/02/11 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
python目录与文件名操作例子
2016/08/28 Python
python分割列表(list)的方法示例
2017/05/07 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
倡议书格式模板
2014/05/13 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
车辆管理制度范本
2015/08/05 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis