jQuery源码分析之parseHTML⽅法
请⾸先阅读以及相关源码
源码如下：
//将字符串转化为节点数组!通过log可以知道
var rsingleTag = (/^<(\w+)\s*\/?>(?:<\/\1>|)$/);
jQuery.parseHTML1 = function( data, context, keepScripts ) {
if ( !data || typeof data !== "string" ) {
return null;
}
//只有两个参数的时候，第⼆个就是是否保存script标签，这时候context就没有传进来!
if ( typeof context === "boolean" ) {
jquery源码在线keepScripts = context;
context = false;
}
//如果只有两个参数那么context就是document对象!
context = context || document;
//如果不是单个标签那么parsed就是null，所谓的单个标签就是<div/>或者<div></div>但是<div>hello</div>不满⾜!
var parsed = ( data ),
//如果keepScripts是false，那么scripts就是
scripts = !keepScripts && [];
// Single tag
if ( parsed ) {
//如果是单个标签就调⽤相应的createElement⽅法，默认上下⽂是document!
return [ ateElement( parsed[1] ) ];
}
//如果不是单个标签就调⽤buildFragment⽅法，把html字符串传⼊，同时上下⽂也传⼊，第三个参数就是scripts!
//如果paseHTML的第三个参数是false，那么这⾥的scripts就是⼀个数组，传递到buildFragment中会把所有的script标签放在⾥⾯
//所以就要收到移除!
parsed = jQuery.buildFragment( [ data ], context, scripts );
if ( scripts && scripts.length ) {
jQuery( scripts ).remove();
}
//buildFragment返回的是⽂档碎⽚，所以要变成数组，调⽤merge⽅法!
( [], parsed.childNodes );
};
var result1=jQuery.parseHTML1("<div>我是内容1</div><script>alert('我是解析出来的js');<\/script><div>我是内容2</div>",document,true); console.log(result1);
//通过firebug可以看到script标签已经添加到页⾯中了!但是必须添加到页⾯中才会执⾏!
$.each(result1,function(i,elem)
{
$(elem).appendTo($("body"));
})
如果我们在调⽤parseHTML时候传⼊的第三个参数是false，那么就和下⾯的逻辑是⼀样的
/
/如果我们parseHTML时候传⼊了false表⽰不保存script标签，那么所有的script标签全部在scripts这个数组中!
var scripts = true && [];
//创建了⼀个⽂档碎⽚!
var parsed = jQuery.buildFragment( [ "<div>我是内容1</div><script>alert('我是解析出来的js');<\/script><div>我是内容2</div>" ], document, scripts );    console.log(parsed);
//从保存script的集合scripts中移除所有的scripts
if ( scripts && scripts.length ) {
//scripts中放的全部是DOM，所以jQuery(scripts)是把其转化为jQuery对象!
jQuery( scripts ).remove();
}
console.log(parsed);
这时候如果没有remove⽅法的调⽤，第⼀个log打印的⽂档碎⽚是有script元素的，但是因为后⾯调⽤remove⽅法，所以这个集合中的script元素全部移除了!如果我们传⼊true表⽰会保存script元素，所以这时候我们不需要给buildFrament传⼊这个数组，因为没有意义，我们后⾯不需要单独操作这个集合移除所有的script!
在⽅法中有这样⼀段代码：
<( this, jQuery.parseHTML(match[1],context && deType ? context.ownerDocument || context : document,true) );
这样造成的结果就是我们我们创建script标签添加到页⾯中，如：
$("<script>alert('我被⽤于创建script标签')<\/script>").appendTo($("body"));
因为这个参数显然满⾜第⼀个字符是<，最后⼀个字符是>，⽽且长度⼤于3!
note:
(1)如果把上⾯的parseHTML1中最后⼀个参数修改为false那么传⼊buildFrament函数的就是⼀个数组，这个数组会放所有的script标签，所以返回的时候会判断这个数组的length，如果有script集合，那么必须⼿动移除!
(2)这个⽅法的作⽤是，如果是<div/>就创建相应的DOM元素，否则就创建⼀个⽂档碎⽚!但是函数的返回值始终是⼀个DOM数组!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。