プラグイン内の変数をクリックしてイベントをクリックするとJavaScript内に関数が割り当てられます

Question

文字列に基づいてクリックイベント関数を割り当てるプラグインがあります。しかし、私はWindow['variable name']変数が私のプラグインスコープ内にあるので、ウィンドウスコープではないと思う。

EventLeft/EventRight/EventClose変数の匿名関数をquerySelectorAllループのclickイベントに割り当てる方法を教えてください。

(function() { 

    // Constructor 
    this.MarvLightbox = function() { 

    // Initialise plugin 
    this.open(); 
    }; 

    MarvLightbox.prototype.open = function() { 

    setupLightbox.call(this); 
    }; 

    function setupLightbox() { 

    var createExpand = function(img) { 

      // Generate lightbox HTML and append 
      var instance = this, 
       html = buildHTML(instance.options.html), 
       EventClose = function() { 
       // Do stuff 
       }, 
       EventLeft = function() { 
       // Do stuff 
       }, 
       EventRight = function() { 
       // Do stuff 
       }; 

      // Lightbox is active 
      instance.active = true; 

      // Assign click events 
      html.getElementsByClassName('image')[0].src = img; 

      html.querySelectorAll('[data-click]').forEach(function(e) { 
      e.addEventListener('click', function() { instance[this.dataset.click]; }); 
      }); 

    }.bind(this); 

    } 

}); 

Answer 1

あなた自身の答えは実際には読めるものではなく、したがって維持するのが容易ではないが動作します。

オブジェクトに関数を格納し、keyを使用してアクセスします。

var events = { 
    EventClose: function() { 
    instance.active = false; 
    item.current = null; 
    }, 
    EventLeft: function() { 
    if (item.current !== 0) { 
     item.current = item.current - 1; 
    } else { 
     item.current = instance.images_count; 
    } 
    }, 
    EventRight: function() { 
    if (item.current !== instance.images_count) { 
     item.current = item.current + 1; 
    } else { 
     item.current = 0; 
    } 
    } 
} 

html.querySelectorAll('[data-click]').forEach(function(e) { 
    e.addEventListener('click', events[e.dataset.click]); 
}) 

Answer 2

なぜこの質問がとても混乱しているのかは分かりません。解決策を見つけるために管理：

events = function(fnstring) { 
    switch(fnstring) { 
     case 'EventClose': (function() { 
     instance.active = false; 
     item.current = null; 
     }()); break; 
     case 'EventLeft': (function() { 
     if (item.current !== 0) { 
      item.current = item.current - 1; 
     } else { 
      item.current = instance.images_count; 
     } 
     }()); break; 
     case 'EventRight': (function() { 
     if (item.current !== instance.images_count) { 
      item.current = item.current + 1; 
     } else { 
      item.current = 0; 
     } 
     }()); break; 
    } 
}; 

html.querySelectorAll('[data-click]').forEach(function(e) { 
    e.addEventListener('click', function() { events(e.dataset.click); }); 
});