我想做的是能够动态地生成具有附加属性的自包含 HTML block 。
我不确定如何调用它,因为“小部件”现在暗示它是一种类似于天赋或徽章的东西,可以放在您的博客上。我说的是可重用、可定制、“复合”的 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;
这如何(轻松)完成?针对这种情况的最佳做法是什么?
最佳答案
我喜欢 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);
当然,您始终可以覆盖 native 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());
关于javascript - 创建复合 Javascript/HTML "widgets",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3089629/