模板编程

知道了以上细节，加之Vdt模板本来就支持JS语法，使得我们可以在定义模板时，采用编程的方式更灵活地定义模板。

例如：有一个组件Button，它既可以返回button标签，又可以返回a标签，我们可以如下这么做：

  1. // 根据组件的tag属性，返回不同的标签
  2. // 由于Vdt模板默认返回最后一个标签元素，所以我们必须
  3. // 在模板最后定义一个标签，这里采用宏函数来定义标签
  4. var Button = function(attr) {
  5.     // attr === self.get() 返回的是组件的全部属性，我们将不需要
  6.     // 作为html元素的tag和children去掉
  7.     var props = {};
  8.     for (var key in attr.props) {
  9.         if (key !== 'tag' && key !== 'children') {
  10.             props[key] = attr.props[key];
  11.         }
  12.     }
  13.     return h(attr.props.tag, props, attr.props.children);
  14. };
  16. <Button props={self.get()} />
  1. var Button = Intact.extend({
  2.     template: template,
  3.     defaults: function() {
  4.         return {tag: 'button'}
  5.     }
  6. });
  1. var Button = self.Button;
  2. <div>
  3.     <Button>button标签</Button>
  4.     <Button tag="a">a标签</Button>
  5. </div>
Intact.extend({
    template: template,
    _init: function() {
        this.Button = Button;
    }
});