虽然很早就接触到js了,但写的少,研究得也少,所以还是小菜一个,最近写的一些东西中,觉得有个方法值得推荐的,所以记录下来.分享分享.
虽然很早就接触到js了,但写的少,研究得也少,所以还是小菜一个,最近写的一些东西中,觉得有个方法值得推荐的,所以记录下来.分享分享.呵呵.高手请飘过.
先来看看最初这个方法是什么样子的吧.
version 1:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Version 1#
1
<script language="javascript" type="text/javascript">
2
function SomeClass()
3![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
4
5
}
6![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
SomeClass.prototype =
{
7
Show : function()
8![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
9
alert("Say Hello!");
10
}
11
}
12
window.onload = function()
13![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
14
window.Variable = new SomeClass();
15
};
16
</script>
17![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
<input type="button" value="Hello" onclick="Variable.Show()" />
在这个版中,按钮上要写上变量名,似乎不方便,也不雅,于是我就想能不能在脚本里绑定方法呢?在园子里找到了李战老师,答案是可以,这就出来了下面一个版本.
Version 2:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Version 2#
1
<script language="javascript" type="text/javascript">
2
function SomeClass(el)
3![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
4
5
if(typeof(el) == "string")
6![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
7
el = document.getElementById(el);
8
}
9
el.onclick = function(me)
10![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
11
return function()
12![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
13
me.Show();
14
}
15
}(this);
16
}
17![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
SomeClass.prototype =
{
18
Show : function()
19![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
20
alert("Say Hello!");
21
}
22
}
23![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
24
window.onload = function()
25![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
26
new SomeClass("btnDemo");
27
}
28
</script>
29
<input type="button" value="Hello" id="btnDemo" />
在这里面按钮上的变量名没有了,好看了些,不过如果要是多写几次的话就会觉得,每次都function(){return function(){}},这样好像很麻烦,提出来一个方法不是更好么?
Version 3:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Version 3#
1
<script language="javascript" type="text/javascript">
2
function SomeClass(el)
3![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
4
5
if(typeof(el) == "string")
6![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
7
el = document.getElementById(el);
8
}
9
el.onclick = this.GetFunction(this, "Show");
10
}
11![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
SomeClass.prototype =
{
12
Show : function()
13![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
14
alert("Say Hello!");
15
},
16
GetFunction : function(Variable, Method)
17![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
18
return function()
19![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
20
Variable[Method]();
21
}
22
}
23
}
24![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
25
window.onload = function()
26![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
27
new SomeClass("btnDemo");
28
}
29
</script>
30
<input type="button" value="Hello" id="btnDemo" />
这样每次要绑定方法的时候只要调用GetFunction方法就可以了,重用嘛.但是问题又来了,我要是要传参数怎么办呢?
Version 4:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Version 4#
1
<script language="javascript" type="text/javascript">
2
function SomeClass(el)
3![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
4
5
if(typeof(el) == "string")
6![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
7
el = document.getElementById(el);
8
}
9
el.onclick = this.GetFunction(this, "ShowAny", "Hello, Robot!");
10
}
11![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
SomeClass.prototype =
{
12
Show : function()
13![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
14
alert("Say Hello!");
15
},
16
ShowAny : function(any)
17![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
18
alert(any);
19
},
20
GetFunction : function(Variable, Method, Parameter)
21![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
22
return function()
23![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
24
Variable[Method](Parameter);
25
}
26
}
27
}
28![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
29
window.onload = function()
30![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
31
new SomeClass("btnDemo");
32
}
33
</script>
34
<input type="button" value="Hello" id="btnDemo" />
再一次扩展,得到了上面的方法,可以调指定方法,也可以传参数了,似乎没问题了,但是在firefox中,如果我要用到event的话,event是不能用window.event来取的,必须要传event过去或者声名一个隐含参数接收event,真麻烦,再改改吧.
Version 5:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Version 5#
1
<script language="javascript" type="text/javascript">
2
function SomeClass(el)
3![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
4
5
if(typeof(el) == "string")
6![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
7
el = document.getElementById(el);
8
}
9
el.onclick = this.GetFunctionWithEvent(this, "ShowEvent", "Hello, Robot!");
10
}
11![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
SomeClass.prototype =
{
12
Show : function()
13![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
14
alert("Say Hello!");
15
},
16
ShowAny : function(any)
17![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
18
alert(any);
19
},
20
ShowEvent : function(e,any)
21![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
22
var el = e ? e.target : event.srcElement;
23
var x = e ? e.pageX : event.clientX;
24
var y = e ? e.pageY : event.clientY;
25
alert(any + "\r\nElement : " + el.id + "\r\nPosition : " + x + " | " + y);
26
},
27
GetFunction : function(Variable, Method, Parameter)
28![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
29
return function()
30![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
31
Variable[Method](Parameter);
32
}
33
},
34
GetFunctionWithEvent : function(Variable, Method, Parameter)
35![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
36
return function(e)
37![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
38
Variable[Method](e, Parameter);
39
}
40
}
41
}
42![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
43
window.onload = function()
44![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
45
new SomeClass("btnDemo");
46
}
47
</script>
48
<input type="button" value="Hello" id="btnDemo" />
49![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
这样,你的方法在firefox中也可以用event了,取鼠标的事件源dom就可以这样了:
var el = e ? e.target : event.srcElement;
firefox里的event跟ie里的event有啥区别就不用我说了吧.
最后我又碰到了这么一个问题,如果我在一个element的onclick上要绑定多个事件怎么办呢?
Version Final:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Version Final#
1
<script language="javascript" type="text/javascript">
2
function SomeClass(el)
3![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
4
5
if(typeof(el) == "string")
6![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
7
el = document.getElementById(el);
8
}
9
el.onclick = this.GetFunction(this, "Show|ShowAny", "Hello, Robot!");
10
}
11![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
SomeClass.prototype =
{
12
Show : function()
13![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
14
alert("Say Hello!");
15
},
16
ShowAny : function(any)
17![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
18
alert(any);
19
},
20
GetFunction : function(Variable, Method, Parameter)
21![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
22
return function()
23![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
24
if(Method.indexOf("|") > -1)
25![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
26
var MethodArray = Method.split("|");
27
for(var x = 0; x < MethodArray.length; x++)
28![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
29
Variable[MethodArray[x]](Parameter);
30
}
31
}
32
else
33![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
34
Variable[Method](Parameter);
35
}
36
}
37
},
38
GetFunctionWithEvent : function(Variable, Method, Parameter)
39![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
40
return function(e)
41![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
42
if(Method.indexOf("|") > -1)
43![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
44
var MethodArray = Method.split("|");
45
for(var x = 0; x < MethodArray.length; x++)
46![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
47
try
48![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
49
Variable[MethodArray[x]](e, Parameter);
50
}
51
catch(err)
52![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
53
continue;
54
}
55
}
56
}
57
else
58![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
59
Variable[Method](e, Parameter);
60
}
61
}
62
}
63
}
64![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
65
window.onload = function()
66![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
67
new SomeClass("btnDemo");
68
}
69
</script>
70
<input type="button" value="Hello" id="btnDemo" />
这里面使用|来分割方法,加入了event,可以绑定多个方法了,也加入了try...catch...避免一个出错,其它的也跟着一起挂.暂时没能想到升级版了.呵呵.
这个方法的演变过程,大家应该能在我之前发布的文章里看到.
OK,故事讲完了,有好方法的请指点指点,想拍砖的请开始吧.
刚刚又发现一个问题,如果我要绑定一个带event和一个不带event的方法该怎么办呢?当然方法是有的.