Question

一个简单的JavaScript小部件设计问题。我最近才开始使用javascript工作。作为我工作的一部分，我打算创建大量可重用的代码;所以对我来说，javascript小部件似乎是最好的方式。然而，我面临着设计困境，我无法找到正确的答案。

我有一个简单的javascript小部件，它改变了html组件中的字符串。所以我的小部件有点像这样：

(function() {
    var convertString = function() {
         $(".classForHtmlComponentsIWantToHandle").each(function(index, element) {
             //js_fu stuff done with string fetched from "element"
         });
    };

    var _somePrivateHelperMethod() {
        //some work that would have been impossible without this helper method
    };

    GloballyDefinedNamespace.StringUtils = {convert : convertString};
}());

这允许我稍后再打电话

GloballyDefinedNamespace.StringUtils.convert();

现在，如果您在上面的widget-ish函数中注意到，我将从DOM中提取所有HTML组件，我想要更改字符串。有趣的是，HTML将具有相同的css类的span和div以及具有css类的文本框组件。

两者都有不同的方式来提取它们的值并重新设置新值。根据我的经验，如果这是一个改变字符串的小部件，那么它应该关心的是传入的对象以统一的方式“保持”字符串，然后基于对象的期望，我的小部件应该能够盲目操作。

“如果它听起来像一只鸭子，像鸭子一样走路，那就是一只鸭子”。有点儿。

如此有效，我希望能够不用担心区分“元素”对象是我的小部件中的文本框或跨度。而是将其包装成通用包装器。

然而人们告诉我，在javascript小部件中，通常的惯例是在小部件中处理组件特定的东西。我不相信，因为我坚信编程接口而不是细节。所以我处于冲突中。

在我上面的例子中，我不认为突出的困境会对这个问题产生正义，但在更大范围内，这经常会成为我的问题。

我想听听大家的意见，关于如何在我的小部件中为HTML DOM构建组件独立性？是一个创建具有相同接口的javascript包装器对象的解决方案然后css - 单独选择它们然后进行方法调用如下？

(function() {
    var locateAllComponents = function() {
         $(".generic-class").each(function(index, element) {
             //wrap element into suitable wrapper that has common interface for getter
             //setter.
             GloballyDefinedNamespace.StringUtils.convert(wrappedElement);
         });
    };

}())

任何见解和答案都将受到高度赞赏。

Answer 1

您正在尝试强制使用javascript的概念。

编程到接口适用于OOP，但对于其他语言类型，这是一个坏主意。

你可以看看jquery如何使用.text（）（http://api.jquery.com/text/）和.val（）（http://api.jquery.com/val/），你会看到你想要抽象出来的东西，它们放入两个不同的函数，有一个原因。

小部件可能很有用，但代价是膨胀和性能，所以你需要看看你在做什么，并确保你没有太高的价格。

所以，从小处开始，或许可以使用可以处理表单元素的小部件，看看你能在对象中合理地做些什么，但是你会发现，如果是API用户或API，它会在某些时候变得非常有用开发人员创建函数以传入您的小部件，以获得其他功能。

但是，所有这些都会影响性能，所以当你工作时，做一些单元测试，这样你就可以看看性能的变化，以帮助指导哪些变化值得付出代价。

您可能希望从查看JQuery UI小部件开始，看看他们做了什么，而不是无缘无故地重新发明轮子。

将OOP概念转换为Javascript小部件

1 个答案: