zepto.js使用$.fn.append等方法插入script标签的情况

[fangbinwei]

zepto.js 里有一些关于DOM 节点插入操作的函数. 例如after, append, before, append 等, 它们都是由node.insertBefore来实现的.

在节点插入中还包含下面这段代码, 是用来处理插入script标签的情况

 if (parentInDocument) traverseNode(node, function(el){ 
   if (el.nodeName != null && el.nodeName.toUpperCase() === 'SCRIPT' && 
   // type 为'' 或JavaScript , 不存在外部脚本 
      (!el.type || el.type === 'text/javascript') && !el.src){ 
     var target = el.ownerDocument ? el.ownerDocument.defaultView : window 
     target['eval'].call(target, el.innerHTML) 
   } 
 }) 

之所以需要使用eval()来运行script标签里面的代码是因为,zepto将html片段转换为node节点是通过Element.innerHTML来实现的, 而通过innerHTML插入的script标签是不会执行的.

 container = containers[name] 
 // 利用一个container 的innerHTML将 HTML片段转化为DOM结构 
 container.innerHTML = '' + html 
 // dom 为$.each(elements, callback) return elements,  
 // 即slice.call(container.childNodes)将childNodes转化为Array,以便$(Array)转化为Zepto对象 
 dom = $.each(slice.call(container.childNodes), function(){ 
   // 清空container 
   container.removeChild(this) 
 }) 

https://stackoverflow.com/questions/13390588/script-tag-create-with-innerhtml-of-a-div-doesnt-work
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
https://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml