scriptus框架bulider基础工具类

/大至理清其意思,这段代码,不光可以输入要创建的HTML标签,还可以输入属性,以及子对像.不过下面这句还是没看明白.

var Builder = {

  NODEMAP: {

    AREA: 'map',

    CAPTION: 'table',

    COL : 'table',

    COLGROUP: 'table',

    LEGEND: 'fieldset',

    OPTGROUP: 'select',

    OPTION: 'select',

    PARAM: 'object',

    TBODY: 'table',

    TD: 'table',

    TFOOT: 'table',

    TH: 'table',

    THEAD: 'table',

    TR: 'table'

  },

  // note: For Firefox < 1.5, OPTION and OPTGROUP tags are currently broken,

  //       due to a Firefox bug

  //创建HTML标签类

  node: function(elementName) {

    elementName = elementName.toUpperCase();

   

    // try innerHTML approach

    var parentTag = this.NODEMAP[elementName] || 'div';

    var parentElement = document.createElement(parentTag);

    try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707

      parentElement.innerHTML = "<" + elementName + "></" + elementName + ">";

    } catch(e) {}

    var element = parentElement.firstChild || null;

     

    // see if browser added wrapping tags

    if(element && (element.tagName != elementName))

      element = element.getElementsByTagName(elementName)[0];

   

    // fallback to createElement approach

    if(!element) element = document.createElement(elementName);

   

    // abort if nothing could be created

    if(!element) return;

 

    // attributes (or text)

    if(arguments[1])

      if(this._isStringOrNumber(arguments[1]) ||

        (arguments[1] instanceof Array)) {

          this._children(element, arguments[1]);

        } else {

          var attrs = this._attributes(arguments[1]);

          if(attrs.length) {

            try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707

              parentElement.innerHTML = "<" +elementName + " " +

                attrs + "></" + elementName + ">";

            } catch(e) {}

            element = parentElement.firstChild || null;

            // workaround firefox 1.0.X bug

            if(!element) {

              element = document.createElement(elementName);

              //考虑兼容性,介意在此使用className

              for(attr in arguments[1])

                element[attr == 'class' ? 'className' : attr] = arguments[1][attr];

            }

            if(element.tagName != elementName)

              element = parentElement.getElementsByTagName(elementName)[0];

            }

        }

 

    // text, or array of children

    if(arguments[2])

      this._children(element, arguments[2]);

 

     return element;

  },

  _text: function(text) {

     return document.createTextNode(text);

  },

  _attributes: function(attributes) {

    var attrs = [];

    for(attribute in attributes)

      attrs.push((attribute=='className' ? 'class' : attribute) +

          '="' + attributes[attribute].toString().escapeHTML() + '"');

    return attrs.join(" ");

  },

  _children: function(element, children) {

    if(typeof children=='object') { // array can hold nodes and text

      children.flatten().each( function(e) {

        if(typeof e=='object')

          element.appendChild(e)

        else

          if(Builder._isStringOrNumber(e))

            element.appendChild(Builder._text(e));

      });

    } else

      if(Builder._isStringOrNumber(children))

         element.appendChild(Builder._text(children));

  },

  _isStringOrNumber: function(param) {

    return(typeof param=='string' || typeof param=='number');

  }

}

 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值