OOPs概念轉換成Javascript部件

一個簡單的JavaScript小部件設計問題。最近我已經開始使用JavaScript了。作爲我工作的一部分，我打算創建大量可重用的代碼;所以對我來說，JavaScript小部件似乎是最好的方式去。但是我面臨着設計困境，我無法找到正確的答案。OOPs概念轉換成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();

現在，如果你會在我的窗口小部件上下的功能注意到，我提取所有的HTML組件從DOM ，我想改變字符串。有趣的是，HTML將具有相同css類的span和div以及具有css類的文本框組件。

兩者都有不同的方式提取它們的值並設置新值。根據我的經驗，如果這是一個改變字符串的小部件，那麼它應該關心的是傳入對象，它以統一的方式「持有」字符串，然後基於對象期望，我的小部件應該能夠盲目操作。

「如果它聽起來像一隻鴨子，像鴨子一樣走路，那麼它就是一隻鴨子」。之類的事情。

如此有效，我希望能夠不用擔心在我的小部件中區分作爲文本框或跨度的「元素」對象。而是將其包裝成通用包裝。

然而，人們告訴我，在JavaScript小部件中，通常的約定是照顧小部件內的特定組件。我不相信，因爲我堅信編程接口而不是細節。所以我處於衝突中。

在我上面的例子中，我不認爲突出的困境對這個問題是公平的，但是從更大的範圍來看，這經常會成爲我的問題。

我想聽聽大家的意見，關於如何在我的小部件中爲HTML DOM創建組件獨立性？是一個解決方案創建具有相同接口的JavaScript包裝對象，然後單獨選擇它們，然後進行方法調用如下？

(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); 
     }); 
    }; 

}())

任何見解和答案將不勝感激。

來源

2012-02-16 Priyank

你正試圖強制JavaScript的概念，它是外國的。

編程接口適用於OOP，但對於其他語言類型，這是一個壞主意。你可以看看jQuery如何使用.text（）（http://api.jquery.com/text/）和.val（）（http://api.jquery.com/val/），你會看到你想抽象他們把它們放到兩個不同的函數中，出於某種原因。

小工具可能很有用，但代價是膨脹和性能，所以你需要看看你在做什麼，並確保你沒有太多的代價。因此，從一個可以在表單元素上工作的小部件開始，看看你可以在對象內合理地做些什麼，但是你會發現，在某些時候，如果API用戶或者API開發人員創建函數以傳遞到您的小部件，以獲得附加功能。

但是，所有這些都會影響性能，因此，在您工作時，請執行一些單元測試，以便查看性能變化以幫助指導哪些更改值得。

您可能想先看看JQuery UI小部件，然後看看他們做了什麼，而不是僅僅因爲沒有理由重新發明輪子。

來源

2012-02-16 16:50:15

OOPs概念轉換成Javascript部件

回答

相關問題