使用imba.io框架得到比 vue 快50倍的性能基准

// 自定义标签
tag App
  // 属性
  prop items
  // 方法定义
  def addItem
    if @input.value
      items.push(title: @input.value)
      @input.value = ""
  def toggleItem item
    item:completed = !item:completed
// 挂载 Imba.mount(element, into) 
// 如果没有第二个参数，默认挂载到 document.body 上面
Imba.mount <App.vbox items=[] ->
  <form.bar :submit.prevent.addItem>
    <input@input>
    <button> 'add'
  <ul> for item in items
    <li .done=item:completed :tap.toggleItem(item)> item:title

function getEls(sel) {
  // 设置缓存
  if (!getEls.cache) getEls.cache = {};
  
  // 如果缓存中存在 el，直接返回 
  if (getEls.cache[sel]) {
    return getEls.cache[sel];
  }

  // 没有去通过 DOM 查询
  const r = document.querySelectorAll(sel || '☺'),
    length = r.length;
  
  // 缓存并返回元素节点
  return getEls.cache[sel] = (length == 1) ? r[0] : r;
}

// 直接通过 querySelectorAll 获取节点
function getElsByDocument(sel) {
  const r = document.querySelectorAll(sel || '☺'),
    length = r.length;
  return length == 1 ? r[0] : r;
}

// 简单性能测试
function simplePerTest(fn, el) {
  const fnName = fn.name
  console.time(fnName)
  
  // 2000 次操作
  for(let i = 0,len = 2000; i < len; i++) {
    fn(el)
  }
  console.timeEnd(fnName)
}

tag Component
  def render
    <self>
      <h1.title> "Welcome"
      <p.desc> "I am a component"

var Component = Imba.defineTag('Component', function(tag){
  tag.prototype.render = function (){
    var $ = this.$;
    // 返回dom
    return this.setChildren($.$ = $.$ || [
      createElement('h1',$,0,this).flag('title').setText("Welcome"),
      createElement('p',$,1,this).flag('desc').setText("I am a component")
    ]).synced();
  };
});

// 在第一次调用时候 $.$不存在 $.$会等于 后面的数组
// 第二次调用 $.$ 是存在的，无运行时消耗
$.$ = $.$ || 数组

tag.prototype.setChildren = function (new$,typ){

  var old = this._tree_;
  
  if (new$ === old && (!(new$) || new$.taglen == undefined)) {
    return this;
  };
  if (!old && typ != 3) {
    this.removeAllChildren();
    appendNested(this,new$);
  } else if (typ == 1) {
    var caret = null;
    for (var i = 0, items = iter$(new$), len = items.length; i < len; i++) {
      caret = reconcileNested(this,items[i],old[i],caret);
    };
  } else if (typ == 2) {
    return this;
  } else if (typ == 3) {
    var ntyp = typeof new$;
      
    if (ntyp != 'object') {
      return this.setText(new$);
    };
      
    if (new$ && new$._dom) {
      this.removeAllChildren();
      this.appendChild(new$);
    } else if (new$ instanceof Array) {
      if (new$._type == 5 && old && old._type == 5) {
        reconcileLoop(this,new$,old,null);
      } else if (old instanceof Array) {
        reconcileNested(this,new$,old,null);
      } else {
        this.removeAllChildren();
        appendNested(this,new$);
      };
    } else {
      return this.setText(new$);
    };
  } else if (typ == 4) {
    reconcileIndexedArray(this,new$,old,null);
  } else if (typ == 5) {
    reconcileLoop(this,new$,old,null);
  } else if ((new$ instanceof Array) && (old instanceof Array)) {
    reconcileNested(this,new$,old,null);
  } else {
    // what if text?
    this.removeAllChildren();
    appendNested(this,new$);
  };  
  this._tree_ = new$;
  return this;
};

tag Component
  def render
    <self>
      <h1.title> "Welcome"
      # 有 50% 几率 拥有 red class
      <p.desc .red=(Math.random > 0.5)> "IMBA"

var Component = Imba.defineTag('Component', function(tag){
  tag.prototype.render = function (){
    var $ = this.$;
    return this.setChildren($.$ = $.$ || [
      _1('h1',$,0,this).flag('title').setText("Welcome"),
      _1('p',$,1,this).flag('desc').setText("Roulette")
    ],2).synced((
      $[1].flagIf('red',Math.random() > 0.5)
    ,true));
  };
});