javascript - 模块化/对象化 JQuery

Question

我的应用程序上有许多不同的“控制元素”:下拉菜单、选项卡、菜单等。在同一页面上，有许多相同的控件。当编写 JavaScript 来处理与每个控件关联的不同事件时，我试图使我的代码尽可能干燥。挑战之一是模块化我的 JQuery 代码，以便特定控件中发生的事件仅影响该控件。

以这个初始代码为例，它所做的只是在单击时打开一个下拉菜单。我习惯于编写大量由不同事件触发的不同匿名函数，因此这种类型的 JQuery 对我来说确实很新鲜。

var dropdown = {
  init: function() {
    $(".dropdown").click(".dropdown", dropdown.openDropdown);
  },  
  openDropdown: function() {
    $(this).children(".dropdown-menu").show();
    $(this).addClass("open");
  }
}

$(document).ready(dropdown.init);

我的问题是，在这个 dropdown 变量中，我希望能够保存/跟踪当前正在操作的 dropdown 控件的不同部分。例如，我可能想写:

var menu = $(this).children(".dropdown-menu");

在这个 block 的某个地方，以便我可以在调用不同的函数时引用这个菜单。我只是无法从语法上弄清楚如何做到这一点。欢迎任何帮助/指导!谢谢。

Answer 1

我喜欢 coffeescript 的一点是它可以让您轻松创建类。 Coffee 中的类只是使用 javascript 的原型(prototype)继承生成“模块”的简化方法。更多信息请参见:http://coffeescript.org/#classes

但是如何实现更加模块化的 jQuery 代码是通过执行以下操作:

http://jsfiddle.net/x858q/2/

var DropDown = (function(){
    // constructor
    function DropDown(el){
        this.el = $(el);
        this.link = this.el.find("a");
        this.menu = this.el.find(".dropdown-menu");
        this.bindClick();
    }

    // method binding click event listener
    DropDown.prototype.bindClick = function(){
        var _this = this;
        this.link.click(function(e){
            _this.openDropDown();
            e.preventDefault();
        });
    };

    // click event handler
    DropDown.prototype.openDropDown = function(){
        this.menu.show();
        this.link.addClass("open");
    };

    return DropDown;
})();

$(function(){
    // init each .dropdown element as a new DropDown
    $(".dropdown").each(function(){
       new DropDown(this); 
    });
});