新手与老司机的差距
2017-09-30 本文已影响0人
扶搏森
这是页面.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);
代码虽然没用框架，可读性和维护性大大提高
