创建复合Javascript / HTML“窗口小部件” [英] Creating composite Javascript/HTML "widgets"

问题描述

我想做的是能够动态创建一个包含其他属性的自包含HTML块。

我不知道该怎么称呼它，因为小部件现在意味着它可以像你的博客上的天赋或徽章一样。我说的是一个可重用，可自定义的复合JS / HTML（/ CSS）对象。

例如，一个简单的日期选择器。

  document.body.appendChild（new DatePicker（））; 
  

会生成

 < div class =datepickername =...> 
< 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> 
  

并且会有像

<$ p $这样的属性p> var d = new DatePicker（）;
d.value =2010-06-21;
d.name =the_datepicker;
d.month = 5;
d.month =六月;
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（）{
 //返回此对象的DOM表示形式
}; 
 
 var picker = new DatePicker（）; 
  

以下是使用此功能的一些方法：

  //直接检索DOM节点
 document.body.appendChild（picker.toElement（））; 
 
 //使用包装器追加，首先查询toElement 
 // DOM是一个像jQuery这样的函数，用附加的方法包装给定的DOM 
 //对象查询toElement。 
 DOM（document.body）.append（picker）; 
  

当然，你总是可以覆盖原生 appendChild 方法，但是，我会不推荐这个。

为了完整起见，这就是你要做的。使用闭包来保持原始 appendChild 方法，并将其替换为首先检查 toElement 的新方法已定义，并检索该对象的元素表示（如果有）。否则，继续按原样添加传入的对象。

 （函数（原始）{
元素。 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（））; 
  

What I would like to do is be able to dynamically a block of self-contained HTML that has additional properties.

I'm not sure what to call it, as "widget" now implies it is something like flair or a badge to put on your blog. I am talking about a reusable, customizable, "composite" JS/HTML(/CSS) object.

For example, a simple date picker.

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

Would generate

<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>

And would have properties like

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;

How can this be (easily) accomplished? What are the best practices for this situation?

解决方案

I like the MooTools approach of doing this. Any JavaScript object can define a toElement method and you can append this object to the DOM using MooTools' wrappers. The wrappers will query the toElement property on the object, and if it exists, then the return value of calling toElement() will be appended to the DOM. For this to work, you would have to use the wrappers for appending to DOM instead of using appendChild directly.

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

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

var picker = new DatePicker();

Here are some ways to go about using this:

// 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);

Of course, you can always overwrite the native appendChild method, however, I would not recommend this.

For the sake of completeness, this is how you would do it though. Use a closure to hold on to the original appendChild method, and replace it with a new method that first checks if toElement is defined, and retrieves the element representation of that object if it does. Otherwise, proceed with adding the passed-in object as it is.

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

Add the object to DOM as in your example:

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

这篇关于创建复合Javascript / HTML“窗口小部件”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！