Question

您好我试图模块化我的javascript并使其面向对象，但当我尝试使用具有多个实例的组件时，我感到困惑。

我的代码看起来像这样

HTML文件

   <div id="1" class="home-post-list" data-id="1">
         <div class="home-post-list-hide">
         </div>
   </div>
   <div id="2" class="home-post-list" data-id="2">
        <div class="home-post-list-hide">
         </div>

   </div>

上面的HTML ID（＃1，＃2）是从服务器随机生成的。

这是当前的代码（NOT OOP），

$(document).on('click', '.home-post-list', function(e){ 
   var id = $(this).data('id');
   var $widget = $("#" + id);
   $widget.find('.home-post-list-hide').hide();
});

$(document).on('mouseover', '.home-post-list', function(e) {
      var id = $(this).data('id');
   var $widget = $("#" + id);
   $widget.find('.home-post-list-hide').show();
});

我想做这样的事情。

var HomePostList = function(){
    this.$widget = this.find('.home-post-list-hide');
    this.init();
};

HomePostList.prototype.init() {
    //event handling
}

我想让它成为OOP的原因，因为我想在组件之间进行通信而我不必重写$ widget.find（＆＃39; .home-post-list-hide＆＃39; ）.hide（）很多次。

Answer 1

你可以这样做。

var HomePostList = function($root){
    this.$root = $root;
    this.$widget = this.$root.find('.home-post-list-hide');
    this.init();
};

HomePostList.prototype.init() {
    //event handling
}


list = []
$(".home-post-list").each(function(el){
    list.push(HomePostList($(el)));
});

Answer 2

它（从评论中）看起来你真正试图在这里做的是缓存你的DOM访问，这样你就不必一遍又一遍地找到这些元素。你可以用这样的模式来实现：

$(document).on('click', '.home-post-list', (function(e) {
   var element = null // we'll lazily set this on the first event
   return function(e) {
     // by using the conditional here, find only gets executed once:
     // the first time the event fires.
     if (!element) {
        // note that instead of 'this' I'm using the event target.
        // the 'this' context is lost in handlers, that's why OOP
        // is arguably a sub-optimal fit here
        element = $("#" + $(e.currentTarget).data('id')).find('.home-post-list-hide');
     }
     element.hide();
   };
});

正如我上面所说，OOP不像布尔假，你可以说“假”，每个人都知道你在谈论什么。添加流行语'modularize'也没有多大帮助。以某种方式询问问题，避免假设您知道解决方案应该是什么。

面向对象的javascript用于事件处理

2 个答案: