1

对于我的一个项目，我想扩展 twitter 引导模式窗口功能。

我希望我的模态窗口能够获得 Java CardLayout 的功能。对于那些不知道的人，CardLayout 允许一个容器（在我们的例子中是模态窗口）接受多个卡片子项（在我们的例子中是 div）。每个孩子都有一个索引，容器最初显示索引为“0”的孩子。CardLayout 接口包含“previous()、next()、first()、last()”函数，根据它们的索引更改显示的卡片。

这是我想用来生成带有 4 个“卡片”的“卡片模式”的 HTML 模板：

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<div class="modal hide" id="myModal">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <div class="modal-card" card-index="0">
            This is the initial state
        </div>
        <div class="modal-card" card-index="1">
            This is the Step 1
        </div>
        <div class="modal-card" card-index="2">
            This is the Step 2
        </div>
        <div class="modal-card" card-index="3">
            This is the final State
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" card-change="previous">Previous</a>
        <a href="#" class="btn" card-change="next">Next</a>
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

由于我对 JS 很陌生，因此我想作为一个练习，尝试使其尽可能通用和可重用。理想的情况是有一个 card-modal.js 文件，我可以将它放入我的项目 JS 文件夹中，以便能够随时创建其中一个。

我在两个方向之间犹豫不决： - 扩展 Modal 类（使用咖啡脚本“extends”关键字），因为毕竟是 CardModal“IS A”Modal。- 创建一个单独的类，只处理对那些上一个/下一个按钮的响应。

这两个选项的初始化有什么区别吗？（开发人员必须写什么来实际启动所需的对象）

我只是从更有经验的开发人员那里寻找“你会如何回答”。因此，实际展示“为什么这个解决方案比这个解决方案更好”而获得额外积分。

4

1 回答 1

1

JavaScript 有一个基于函数原型的继承模型；这与您在 Python/Java/等中看到的“传统”基于类的继承模型不同。从绝对意义上讲，它也更难使用和学习（恕我直言）。这就是为什么框架和编译器（如 CoffeeScript）有自己的内置类继承系统。

这些特别的 JS 类继承系统的缺点是它们通常不能与其他 JS 继承系统交叉兼容。在这个特定的实例中，我可以从源代码中看到Modal 类不是 CoffeeScript 类。因此，我强烈建议不要尝试使用 CoffeeScript 来扩展它——那样会很疯狂。

我建议您使用选项 #2 — 构建功能以分别在 prev/next 之间切换。您应该将您的 CardLayout 开发为独立的 Javascript/jQuery，它期望获得一个<div class="card-container">包含N <div class="card" >元素的元素，这样无论该card-container元素位于 DOM 中的哪个位置，您都可以使用setupCardLayout($('.card-container')).

然后，将它与 Bootstrap Modal 集成所需要做的就是监听显示模式的事件

$('#id-of-modal').on 'shown', ()->
    setupCardLayout($(this))
于 2012-06-15T22:15:12.907 回答