一个JavaScript方法的演变

虽然很早就接触到js了,但写的少,研究得也少,所以还是小菜一个,最近写的一些东西中,觉得有个方法值得推荐的,所以记录下来.分享分享.呵呵.高手请飘过.

先来看看最初这个方法是什么样子的吧.

version 1: 

Version 1#
 1<script language="javascript" type="text/javascript">
 2function SomeClass()
 3{
 4    
 5}
 6SomeClass.prototype = {
 7    Show : function()
 8    {
 9        alert("Say Hello!");
    }
}
window.onload = function()
{
    window.Variable = new SomeClass();
};
</script>

<input type="button" value="Hello" onclick="Variable.Show()" />

在这个版中,按钮上要写上变量名,似乎不方便,也不雅,于是我就想能不能在脚本里绑定方法呢?在园子里找到了李战老师,答案是可以,这就出来了下面一个版本.

Version 2:

Version 2#
 1<script language="javascript" type="text/javascript">
 2function SomeClass(el)
 3{
 4    
 5    if(typeof(el) == "string")
 6    {
 7        el = document.getElementById(el);
 8    }
 9    el.onclick = function(me)
    {
        return function()
        {
            me.Show();
        }
    }(this);
}
SomeClass.prototype = {
    Show : function()
    {
        alert("Say Hello!");
    }
}

window.onload = function()
{
    new SomeClass("btnDemo");
}
</script>
<input type="button" value="Hello" id="btnDemo" />

在这里面按钮上的变量名没有了,好看了些,不过如果要是多写几次的话就会觉得,每次都function(){return function(){}},这样好像很麻烦,提出来一个方法不是更好么?

Version 3:

Version 3#
 1<script language="javascript" type="text/javascript">
 2function SomeClass(el)
 3{
 4    
 5    if(typeof(el) == "string")
 6    {
 7        el = document.getElementById(el);
 8    }
 9    el.onclick = this.GetFunction(this, "Show");
}
SomeClass.prototype = {
    Show : function()
    {
        alert("Say Hello!");
    },
    GetFunction : function(Variable, Method)
    {
            return function()
            {
                Variable[Method]();
            }
    }
}

window.onload = function()
{
    new SomeClass("btnDemo");
}
</script>
<input type="button" value="Hello" id="btnDemo" />

这样每次要绑定方法的时候只要调用GetFunction方法就可以了,重用嘛.但是问题又来了,我要是要传参数怎么办呢?

Version 4:

Version 4#
 1<script language="javascript" type="text/javascript">
 2function SomeClass(el)
 3{
 4    
 5    if(typeof(el) == "string")
 6    {
 7        el = document.getElementById(el);
 8    }
 9    el.onclick = this.GetFunction(this, "ShowAny", "Hello, Robot!");
}
SomeClass.prototype = {
    Show : function()
    {
        alert("Say Hello!");
    },
    ShowAny : function(any)
    {
        alert(any);
    },
    GetFunction : function(Variable, Method, Parameter)
    {
            return function()
            {
                Variable[Method](Parameter);
            }
    }
}

window.onload = function()
{
    new SomeClass("btnDemo");
}
</script>
<input type="button" value="Hello" id="btnDemo" />

再一次扩展,得到了上面的方法,可以调指定方法,也可以传参数了,似乎没问题了,但是在firefox中,如果我要用到event的话,event是不能用window.event来取的,必须要传event过去或者声名一个隐含参数接收event,真麻烦,再改改吧.

Version 5:

Version 5#
 1<script language="javascript" type="text/javascript">
 2function SomeClass(el)
 3{
 4    
 5    if(typeof(el) == "string")
 6    {
 7        el = document.getElementById(el);
 8    }
 9    el.onclick = this.GetFunctionWithEvent(this, "ShowEvent", "Hello, Robot!");
}
SomeClass.prototype = {
    Show : function()
    {
        alert("Say Hello!");
    },
    ShowAny : function(any)
    {
        alert(any);
    },
    ShowEvent : function(e,any)
    {
      var el = e ? e.target : event.srcElement;
      var x = e ? e.pageX : event.clientX;
      var y = e ? e.pageY : event.clientY;
      alert(any + "\r\nElement : " + el.id + "\r\nPosition : " + x + " | " + y);
    },
    GetFunction : function(Variable, Method, Parameter)
    {
            return function()
            {
                Variable[Method](Parameter);
            }
    },
    GetFunctionWithEvent : function(Variable, Method, Parameter)
    {
            return function(e)
            {
                Variable[Method](e, Parameter);
            }
    }
}

window.onload = function()
{
    new SomeClass("btnDemo");
}
</script>
<input type="button" value="Hello" id="btnDemo" />

这样,你的方法在firefox中也可以用event了,取鼠标的事件源dom就可以这样了:

var el = e ? e.target : event.srcElement;

firefox里的event跟ie里的event有啥区别就不用我说了吧.

最后我又碰到了这么一个问题,如果我在一个element的onclick上要绑定多个事件怎么办呢?

Version Final:

Version Final#
 1<script language="javascript" type="text/javascript">
 2function SomeClass(el)
 3{
 4    
 5    if(typeof(el) == "string")
 6    {
 7        el = document.getElementById(el);
 8    }
 9    el.onclick = this.GetFunction(this, "Show|ShowAny", "Hello, Robot!");
}
SomeClass.prototype = {
    Show : function()
    {
        alert("Say Hello!");
    },
    ShowAny : function(any)
    {
        alert(any);
    },
    GetFunction : function(Variable, Method, Parameter)
    {
            return function()
            {
                if(Method.indexOf("|") > -1)
                {
                    var MethodArray = Method.split("|");
                    for(var x = 0; x < MethodArray.length; x++)
                    {
                        Variable[MethodArray[x]](Parameter);
                    }
                }
                else
                {
                    Variable[Method](Parameter);
                }
            }
    },
    GetFunctionWithEvent : function(Variable, Method, Parameter)
    {
            return function(e)
            {
                if(Method.indexOf("|") > -1)
                {
                    var MethodArray = Method.split("|");
                    for(var x = 0; x < MethodArray.length; x++)
                    {
                        try
                        {
                            Variable[MethodArray[x]](e, Parameter);
                        }
                        catch(err)
                        {
                            continue;
                        }
                    }
                }
                else
                {
                    Variable[Method](e, Parameter);
                }
            }
    }
}

window.onload = function()
{
    new SomeClass("btnDemo");
}
</script>
<input type="button" value="Hello" id="btnDemo" />

这里面使用|来分割方法,加入了event,可以绑定多个方法了,也加入了try...catch...避免一个出错,其它的也跟着一起挂.暂时没能想到升级版了.呵呵.

这个方法的演变过程,大家应该能在我之前发布的文章里看到.

OK,故事讲完了,有好方法的请指点指点,想拍砖的请开始吧.

刚刚又发现一个问题,如果我要绑定一个带event和一个不带event的方法该怎么办呢?当然方法是有的.