jq代码书写方式

作者: 我跟你蒋 | 来源:发表于2019-02-14 09:49 被阅读6次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
        <div>
            <input type="text" name="" id="input" value="" />
            <button id="btn">提交</button>
            <ul id="list">
        
            </ul>
        </div>
        <script type="text/javascript">
            function Page(){}
            
            $.extend(Page.prototype,{
                init:function(){
                    this.bindEvents()
                },
                bindEvents:function(){
                    var btn=$("#btn");      
                    btn.on("click",$.proxy(this.handleBtnClick,this))
                },
                handleBtnClick:function(){
                    var inputElem=$("#input");
                    var inputValue=inputElem.val();
                    var ulElem=$("#list");
                    ulElem.append('<li>'+inputValue+'</li>')
                    inputElem.val('')
                }
            });
            var page=new Page()
            page.init()
        </script>
    </body>
</html>

$.proxy() 最主要就是用来修改函数执行时的上下文对象的。把方法handleBtnClick绑定在Page实例的引用