新手与老司机的差距

作者: 扶搏森 | 来源:发表于2017-09-30 15:24 被阅读0次

新手与老司机的差距
老铁，稳住！
开车是菜鸟还是老司机？用这五点来对号入座吧！
新手老司机
老司机新手
新手老司机
2019-05-28做好这一点，新手司机也能开出老手风格
老司机和新手司机
java
开车时有这7个表现的人，一看就是新手上路!你中招几个？

这是页面.html

要实现的功能：点击td，可以编辑td里面的内容，按回车键保存编辑之后的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css">
</head>
<body>
    <table id="table" class="table table-striped">
        <tr>
            <td>编号</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>2</td>
            <td>chenpan</td>
        </tr>
    </table>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>

新手的代码

$('#table tr>td').on('click',function(){
    console.log($(this).text());
    var text=$(this).text();
    var html='<input value="'+text+'">';
    $(this).html(html);
});
$('#table tr>td').on('click','input',function(e){
    e.stopPropagation();//防止事件委托(冒泡)
});
$('#table tr>td').on('keyup','input',function(e){
    if(e.keyCode==13){
        $(this).parent().html($(this).val());
    }
});

这种代码虽然能实现功能，但是如果点击事件太多，会导致页面全是这种代码，一般人看多了就会很烦，还容易出错误。

老司机的代码

//自执行，目的是减少当前jquery的查找
(function($){
    var index={
        //初始化
        init:function(){
            var me=this;
            me.render();
            me.bind();
        },
        //保存数据
        datas:{
            num:1
        },
        //页面render，保存要操作的元素
        render:function(){
            var me=this;
            me.test=$('#table tr>td');
        },
        //绑定的事件
        bind:function(){
            var me=this;
            //精华，这里面的this都是index这个对象，就没有什么冒泡了
            me.test.on('click',$.proxy(me['_do'],this));
            me.test.on('keyup','input',$.proxy(me['_keyup'],this));
        },
        //私有函数，点击时的函数
        _do:function(e){
            //e.target就是点击的这个this
            var m=$(e.target).text();
            var me=this;
            m=m+this.datas.num;
            var html='<input value="'+m+'">';
            $(e.target).html(html);
        },
        //私有函数，keyup时的函数
        _keyup:function(e){
            if(e.keyCode==13){
                $(e.target).parent().html($(e.target).val());
            }
        }
    };
    index.init();
})(jQuery);

代码虽然没用框架，可读性和维护性大大提高