文享日志

zepto.fragment函数

JavaScript Zepto

发表于2017年10月03日05:30:09

0条评论 247次阅读

//函数目的就是让html变成childNodes中的一员
      zepto.fragment = function(html, name, properties) {
        var dom, nodes, container
        //无innerHTML的标签
        if (singleTagRE.test(html)){
            dom = $(document.createElement(RegExp.$1))
        } 
        if (!dom) {
          //排出一些特殊的标签
          //tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig
          if (html.replace) html = html.replace(tagExpanderRE, "<$1>")
          //未传入标签名,则这里自己获取
          if (name === undefined) name = fragmentRE.test(html) && RegExp.$1
          if (!(name in containers)) name = '*'
          //containers[*] = document.createElement('div')
          //创建div节点,为div节点添加html片段
          container = containers[name]
          container.innerHTML = '' + html;
          //将div节点中的子节点删除,再返回这些节点副本(此时就变成了childNodes类型)
          //这里调用$.each()返回的是slice.call(container.childNodes)的副本;
          dom = $.each(slice.call(container.childNodes), function(){
            container.removeChild(this);
          })
        }
        if (isPlainObject(properties)) {
          //这里讲dom变成了Z对象
          nodes = $(dom)
          $.each(properties, function(key, value) {
            //methodAttributes = ["val", "css", "html", "text", "data", "width", "height", "offset"];
            if (methodAttributes.indexOf(key) > -1){
                //调用$构造函数原型上的函数
                nodes[key](value)
            } 
            else nodes.attr(key, value)
          })
        }
        return dom;
      }

用法如下:

$('

Hello

')

$('

,{ text : 'Hello' , id : 'greating' , css : {color : 'darkblue ' } } ');

👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广