創建複合Javascript/HTML「小部件」

我想要做的就是能夠動態地創建一個具有附加屬性的自包含HTML塊。創建複合Javascript/HTML「小部件」

我不確定該怎麼稱呼它，因爲「小工具」現在意味着它就像是天賦或徽章，放在您的博客上。我正在討論一個可重用，可定製的「複合」JS/HTML（/ CSS）對象。

例如，一個簡單的日期選擇器。

document.body.appendChild(new DatePicker());

會產生

<div class="datepicker" name="..."> 
    <select class="datepicker_monthSelect"> 
     <option value="0">January</option> 
     .... 
    </select> 
    <select class="datepicker_daySelect"> 
     <option value="1">1</option> 
     .... 
    </select> 
    <select class="datepicker_yearSelect"> 
     <option value="2010">2010</option> 
     .... 
    </select> 
</div>

這怎麼可能（容易）完成將有一個像

var d = new DatePicker(); 
d.value = "2010-06-21"; 
d.name = "the_datepicker"; 
d.month = 5; 
d.month = "June"; 
d.day = 21; 
d.year = 2010;

屬性？這種情況的最佳做法是什麼？

來源

2010-06-22 Austin Hyde

我喜歡MooTools這樣做的方法。任何JavaScript對象都可以定義一個toElement方法，並且您可以使用MooTools的包裝器將該對象附加到DOM。包裝將查詢對象上的toElement屬性，如果它存在，則調用toElement()的返回值將被附加到DOM。爲此，您將不得不使用包裝來附加到DOM，而不是直接使用appendChild。

function DatePicker(date) { 
    this.date = date; 
} 

DatePicker.prototype.toElement = function() { 
    // return a DOM representation of this object 
}; 

var picker = new DatePicker();

這裏有一些方法去使用這樣的：

// retrieve the DOM node directly 
document.body.appendChild(picker.toElement()); 

// use a wrapper to append, that queries toElement first 
// DOM is a function like jQuery, that wraps the given DOM 
// object with additional methods like append for querying toElement. 
DOM(document.body).append(picker);

當然，你總是可以覆蓋本地appendChild方法，但是，我會不推薦這個。

爲了完整起見，這是你將如何做到這一點。使用閉包來保留原始方法appendChild，並用一種新方法替換它，該方法首先檢查是否定義了toElement，如果有，則檢索該對象的元素表示形式。否則，繼續添加傳入的對象。

(function(original) { 
    Element.prototype.appendChild = function(child) { 
     if('toElement' in child) { 
      original.call(this, child.toElement()); 
     } 
     else { 
      original.call(this, child); 
     } 
    } 
})(Element.prototype.appendChild);

對象添加到DOM在你的例子：

document.body.appendChild(new DatePicker());

來源

2010-06-22 03:29:50 Anurag

這有幾個不同的選項。

您可以'元素化'元素對象，但是這樣做效率極低，因爲Javascript假裝爲儘可能小的面向對象。（另外，擴展主機對象是yuck。）

但是，我會採用的方法是在DatePicker'class'上定義to_html函數。

該方法在理論上將採用DatePicker的屬性並使用它們來創建HTML。

而且，如果您將此HTML保存在DatePicker中，您可以輕鬆地更新該HTML並在代碼中進一步根據需要訪問其值。

來源

2010-06-22 01:48:12 huntaub

你可能想看看knockout.composite - http://danderson00.blogspot.com.au/2012/08/introducing-knockoutcomposite.html

來源

2012-12-09 01:31:13

創建複合Javascript/HTML「小部件」

回答

相關問題