如何把js的代码写的更加容易维护(一)--面向对象…

 1 (function (w, $) {
 2   var app = {
 3     init: function () {
 4       var me = this;
 5       me.render();
 6       me.bind();
 7     },
 8     datas: {
 9       num: 1
10     },
11     render: function () {
12       var me = this;
13       me.test = $('#table td');
14     },
15     bind: function () {
16       var me = this;
17       me.test.on('click', $.proxy(me['_do'], this));
18     },
19     _do: function (e) {
20       var m = $(e.target).text();
21       var me = this;
22       m = me.datas.num + m;
23       var s = '<input type="text" value="' + m + '">';
24       $(e.target).html(s);
25     }
26   };
27 
28   app.init();
29   exports = app;
30 })(window, jQuery);

1     bind: function () {
2       var me = this;
3       me.test.on('click', function(e) {
4         // 操作
5       });
6     },

 1     bind: function () {
 2       var me = this;
 3       me.test.on('click', me['_do']);
 4     },
 5     _do: function(e) {
 6         // 这里的this指向谁？
 7     var targetEle = $(e.target);
 8         // 这里的this显然指的是触发事件的元素，在这里是一个jQuery对象
 9         var me = this;
10     // 下面这句就会报错
11     m = me.datas.num + m;
12     }

1     bind: function () {
2       var me = this;
3       me.test.on('click', $.proxy(me['_do'], this));
4     },

 1     render: function () {
 2       var me = this;
 3       me.document= $(document);
 4     },
 5     bind: function() {
 6       document.on('click', 'ul li', $.proxy(me['_do2'], this));
 7     },
 8     _do2: function(e) {
 9         var eleTarget = $(e.target);
10     }

1 <ul>
2   <li>
3     <div><span></span>...</div>
4   </li>
5 </ul>

1 $(document).on('click', 'ul li', function(e) {
2   var this = $(this); 
3 });