js隐式编程

一.最早初期我们对HTML元素所要执行的代码一般采用以下方式

1.HTML页面

    <input type="button" οnclick="oldMethod()" value="最古老的方式" />

2.JS代码

        //最古老的方式
        function oldMethod() {
            alert("最古老的方式");
        }

我们发现,如果方法名称(oldMathod)发生变化,需要修改2处

经过发展,提出了HTML元素和JS代码要实现页码分离方式.

二.页码分离

1.HTML页面

    <input type="button" id="btnTest" value="代码分离方式" />

2.JS代码

        //代码分离方式
        $(function () {
            $("#btnTest").click(function () {
                alert("代码分离方式");
            })
        })

相比最古老的方式,需要给元素增加一个id,实现的HTML元素和JS代码分离

三.隐式编程方式

1.HTML页面

<input type="button" myClick="myClick" value="隐式编程方式" />

2.JS代码

        //隐式编程方式
        $(function () {
            $("input[myClick]").click(function () {
                var btnStr = $(this).attr("myClick");
                eval(btnStr + "()");
            })
        })
        function myClick()
        {
            alert("隐式编程方式");
        }

这样好像HTML和JS代码没有任何关系了,只需要加一个自定的属性,JS中找到这个属性再增加相应的功能.