如何在Javascript中打包功能？ 你如何打包模块和相关功能，比如在你认为是“小部件”或“元类”的最小的部分？

例如，我通常创建一个模态类/小部件，并根据需要重用它。但我一直在考虑将其分解为更小的部分，并创建一个覆盖元类，它可以在模式、工具提示或任何页面上覆盖有绝对div的内容中重用

另一个例子可能是，可能是一个内容元类（这个元类的名称需要修改lol），但是这个元类将负责显示/隐藏自己，或者通过向上/向下滑动、淡入/淡出、通过ajax更新自己，或者其他方式。这个内容元类可以在accordio小部件（每个上下滑动的面板可以是一个内容实例）或Tabs小部件中重用

或者是一个旋转器元类，它可以被旋转木马小部件重用，或者是任何可以在一个列表中循环的东西

希望我的问题是清楚的。我很想知道你们的功能有多小。此外，以这种方式编写元类对我来说是一种陌生的方式，任何关于如何实现这种模式的提示都将受到赞赏（本质上，一个可以应用于多种场景的通用元类，但有一种方法可以用正确的功能适当地增强自身）

谢谢

---

编辑：这将有效地将大多数小部件简化为将所有较小元类绑定在一起的容器。从某种意义上说，装饰器模式（或者可能是复合模式？）但我发现的装饰器模式的大多数示例要么太简单，没有为我说明真实的场景，要么我遗漏了一些东西。

完全没有理由不从组件构建小部件

现在我不知道你们有什么样的框架，所以让我们用一些通用的

function HideableComponent(el) {
    this.show = function() {
         $(el).show();
    }

    this.hide = function() {
        $(el).hide();
    }
}

function LoadableComponent(el) {
    this.load = function(url) {
        $(el).load(url);
    }
}

var Components = {
    "Loadable": LoadableComponent,
    "Hideable": HideableComponent
}

function SomeUIWidget(el) {
    var hide = new Component.Hideable(el),
        load = new Component.Loadable(el);

    $.extend(true, this, hide, load);

    ...
}

现在，这些例子是微不足道的。据推测，这些组件将是jQuery函数周围非常薄的包装，并具有内置配置、可定制性、自动化和验证

关键是，你没有理由不让你的小部件利用组件，不管它们多么微不足道

只要这些组件使您的代码更加枯燥、可读性和可维护性更强，那么您就可以使它们尽可能地小而琐碎

您甚至可能希望这样做的一个原因是将

jQuery

抽象为DOM操作库，并允许一组通用的

组件

，这些组件可以作为

jQueryComponents

，

MooToolsComponents

等加载，同时保留一个公共API

现在，这可能开始接近工程。您需要为自己的项目找到一个良好的平衡点

对于旋转器元类，可能是这样的

function RotatorComponent(container) {
    var children = $(container).children(),
        curr = children.first();

    this.rotate = function(draw) {
         curr = curr.next();
         draw(curr);
    }
}

---

绝对没有理由不能从组件构建小部件

现在我不知道你们有什么样的框架，所以让我们用一些通用的

function HideableComponent(el) {
    this.show = function() {
         $(el).show();
    }

    this.hide = function() {
        $(el).hide();
    }
}

function LoadableComponent(el) {
    this.load = function(url) {
        $(el).load(url);
    }
}

var Components = {
    "Loadable": LoadableComponent,
    "Hideable": HideableComponent
}

function SomeUIWidget(el) {
    var hide = new Component.Hideable(el),
        load = new Component.Loadable(el);

    $.extend(true, this, hide, load);

    ...
}

现在，这些例子是微不足道的。据推测，这些组件将是jQuery函数周围非常薄的包装，并具有内置配置、可定制性、自动化和验证

关键是，你没有理由不让你的小部件利用组件，不管它们多么微不足道

只要这些组件使您的代码更加枯燥、可读性和可维护性更强，那么您就可以使它们尽可能地小而琐碎

您甚至可能希望这样做的一个原因是将

jQuery

抽象为DOM操作库，并允许一组通用的

组件

，这些组件可以作为

jQueryComponents

，

MooToolsComponents

等加载，同时保留一个公共API

现在，这可能开始接近工程。您需要为自己的项目找到一个良好的平衡点

对于旋转器元类，可能是这样的

function RotatorComponent(container) {
    var children = $(container).children(),
        curr = children.first();

    this.rotate = function(draw) {
         curr = curr.next();
         draw(curr);
    }
}

---

对不起，我从未意识到我没有接受这个答案。谢谢，这有助于我当时的想法。对不起，我从未意识到我不接受这个答案。谢谢，这有助于我当时的想法