你必须知道的JavaScript的技巧

胡晋 发布于 2011/10/15 12:04
阅读 1K+
收藏 16
Jav

aScript是一种广泛用于客户端网页开发的脚本语言,最常是于HTML上使用,用来给HTML网页添加动态功能。JavaScript是比较容易上手的语言之一,虽然他名字含有着Java但是两者完全是不相干的,JavaScript最初受Java启发而开始设计的。尽管JavaScript作为给非程式人员的脚本语言,而非作为给程式人员的编程语言来推广和宣传,但是JavaScript具有非常丰富的特性。你又知道多少JavaScript的技巧呢?你真的敢看完这文章之后不会惊讶?至少笔者当时收录这些,受益匪浅。

命名空间

命名空间在JavaScript开发中建议必须使用,无论是在协同开发还是使用插件上都不会存在方法冲突的风险。而且命名空间有利于JavaScript代码的管理和更容易被人知道哪里使用了那些方法。

情景:

function derp(){ alert(“one”); }
function derp(){ alert(“two”); }
derp();

输出的会是”two”?不一定他也有可能输出”one”。在方法名重名的情况下,JavaScript不会提示你任何的错误。但是谁会发这种错误?你我都会,协同开发时最容易发生“冲突事件”。

解决:

var maxzu={};
maxzu.derp=function(){ alert(“one”); }
function derp(){ alert(“two”); }
maxzu.derp();

这样就不会产生“不可预料的结果”,也可以避免协同开发或者插件发生冲突的风险。

变量的定义

function maxzu(){var a = "maxzu";b="maxzu"}
maxzu();
alert(b);

有人会知道这段代码输出什么?答案是“Maxzu”。但有人会有疑问这个变量b不是在Maxzu() 方法里面吗?Javascript不是每个函数都有它自己的变量范围吗?怎么会输出“maxzu”了,其实如果将程序改成:

function maxzu(){var a = "maxzu";b="maxzu"}
maxzu();
alert(a);

这个就会输出“undefined”了,可是为什么呢?发现两个之间的变化了?a前有var,而b是没有。其实这里的a只能用于maxzu()方法内,而b却是一个全局变量了。

prototype

JavaScript的面向对象特征其实只是嫁接而来的,Javascript有个属性叫做prototype,所有对象里都内置了这个属性,你可以通过它来改变对象的构造,修改对象、添加更多的变量、更多的功能。

var max;
var Zu = function(){ this.opinion = "I like maxzu!"; }
Zu.prototype.tall = function(){alert(this.opinion);}
var max = new Zu();
max.tall();

是不是很神奇?有点像Java的类,JavaScript太神奇了。

参数可以是方法

有人可能很不解,参数为什么可以是方法这句话。其实在JavaScript里面,方法是可以被当作参数传进另外一个方法里面。这样可以使你的代码更加简洁,如果不是用这种方法的话你可能需要做很多的事情去处理每一个方法。

var f1 = function(name){alert("You are "+name);}
var f2 = function(name){alert("I'm "+name);}
f1("God");
f2("Maxzu"); //当你需要弹出这两个的时候,是不是觉得这样很简单.但是如果不止f1,f2呢?或者不止执行一个方法呢?

老实说,很多人不知道方法可以当作参数传。如果将上面的代码改成:

var f1 = function(name){alert("You are "+name);}
var f2 = function(name){alert("I'm "+name);}
function al(name,f){ f(name); }
al("God",f1);
al("Maxzu",f2);

这样一般用于需要多个已知方法处理一个函数的时候,但必须处理的逻辑是样的。这样看上去的代码是不是更加优美了呢?当然你也可以把他写成内联函数,在使用jQuery最常用到的。

function al(name,f){ f(name); }
al("God",function(name){alert("You are "+name);});
al("Maxzu",function(name){alert("I'm "+name););


加载中
0
weilingfeng98
weilingfeng98
很基础,还可以简单介绍闭包,面向对象等等
0
王向众
王向众
" Javascript有个属性叫做prototype,所有对象里都内置了这个属性 "。每个对象都有一个原型对象,但并不是每个对象都内置 prototype属性,只有函数对象才内置此属性。
0
狗头666
狗头666
我感觉最后一个特点有点像 语法糖
0
庸人谷
庸人谷
我的博客里有篇“ Javascript中最常用的55个经典技巧可以参考下
0
返回顶部
顶部