将OOPs概念转换为Javascript小部件

一个简单的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将有span和DIV，它们具有相同的css类，还有文本框组件和css类

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

“如果它听起来像鸭子，走路像鸭子，那么它就是鸭子”。这类事情

因此，实际上，我希望能够不用担心区分“元素”对象是我的小部件中的文本框还是跨度。而是将其包装到通用包装器中

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

在我上面的例子中，我不认为突出显示的困境能够公正地解决这个问题，但在更大范围内，这对我来说是一个经常出现的问题

我想听听大家对如何在我的小部件中为HTMLDOM构建组件独立性的看法？是否有一种解决方案可以创建具有相同接口的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);
         });
    };

}())

---

如有任何见解和答案，将不胜感激

您试图在javascript上强制使用它所不熟悉的概念

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

您可以查看jquery如何使用.text（）（）和.val（），您将看到，出于某种原因，您想要抽象的内容被放入了两个不同的函数中

小部件可能很有用，但要以膨胀和性能为代价，因此您需要查看您正在做的事情，并确保您不会要求太高的价格

因此，从一个小部件开始，也许可以使用一个可以处理表单元素的小部件，看看您可以在对象中合理地做些什么，但是您会发现，在某个时候，如果API用户或API开发人员创建函数来传递给您的小部件，以获得额外的功能，这将非常有用

但是，所有这些都会影响性能，所以在您工作时，请进行一些单元测试，以便查看性能的变化，帮助您了解哪些变化值得付出代价

不过，您可能想先看看jQueryUI小部件，看看它们做了什么，而不是无缘无故地重新发明轮子