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

总是头疼javascript的代码写起来不可维护，那么看看下面的代码：

(function (w, $) {
  var app = {
    init: function () {
      var me = this;
      me.render();
      me.bind();
    },
    datas: {
      num: 1
    },
    render: function () {
      var me = this;
      me.test = $('#table td');
    },
    bind: function () {
      var me = this;
      me.test.on('click', $.proxy(me['_do'], this));
    },
    _do: function (e) {
      var m = $(e.target).text();
      var me = this;
      m = me.datas.num + m;
      var s = '<input type="text" value="' + m + '">';
      $(e.target).html(s);
    }
  };

  app.init();
  exports = app;
})(window, jQuery);

代码其实很简单，其基本思路就是，将数据、函数、事件监听和回调都封装在一个对象中，那么我们可以简单的把这个对象理解为一个组件。

封装的难点：事件监听和回调

封装的难点其实在于事件的监听和回调，先看一个简单的实现：

    bind: function () {
      var me = this;
      me.test.on('click', function(e) {
        // 操作
      });
    },

就是以匿名函数的形式写回调函数，可以满足需求，但如果有大量的事件需要监听、绑定回调函数时，这种方式显然就不太合理了：bind方法会变得过长而不好维护，那么以传入具名函数函数名的方式就可以解决这个问题，但是会遇到回调函数中的this不是指向app对象而指向触发元素的问题：

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

那么如何解决上面的问题，答案就是$.proxy(fn, contenxt)，这个方法可以改变函数执行时的上下文：

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

上面的代码使me['_do']被调用时，this指向app，那么在me['_do']中就可以获取app中的数据，从而解决了上面this的指向问题。

总结
上面的js代码实现了一个简陋的可编辑表格的功能，这段代码是京程一灯袁志佳在腾讯视频公开课上讲的代码，我贴在这里来提醒自己：前端javascript的编写还有许多要学习和挖掘的地方。代码中主要用到了jQuery.proxy()这个强大的函数，另外就是这种对象封装的思想。

存在的问题

虽然$.proxy()解决了this的指向问题，但它也不是完美的。这里在使用事件委托时就要小心了：

    render: function () {
      var me = this;
      me.document= $(document);
    },
    bind: function() {
      document.on('click', 'ul li', $.proxy(me['_do2'], this));
    },
    _do2: function(e) {
        var eleTarget = $(e.target);
    }

因为_do2中的this不再指向绑定事件的元素ul li，所以要想在_do2中获取ul li就有些麻烦，尤其是li中嵌套比较多的子元素时：

<ul>
  <li>
    <div><span></span>...</div>
  </li>
</ul>

_do2中的eleTarget由于事件冒泡的原因可能是：span、div、li，那么该如何解决这个问题？很遗憾我没有想到好的解决方法，提供两个思路：1，如果li中嵌套了太多的子元素，那么事件委托在这里就不是一个好的解决方案了。2，如果嵌套的子元素不多，那么还可以通过查找的方法找到ul li，这个也是可行的。当然，如果抛开本文章，单纯使用事件委托还是可以的：

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

因为这里的this始终指向ul li，即委托的元素ul li。

 

这篇文章最初发表在我自己折腾的博客站点上：如何把js的代码写的更加容易维护(一)--面向对象编程，该博客用了一位前辈开源的源码，基于thinkjs和vuejs开发，欢迎大家来逛逛。