博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery.clean()方法源码分析(一)
阅读量:7112 次
发布时间:2019-06-28

本文共 2432 字,大约阅读时间需要 8 分钟。

在jQuery 1.7.1中调用jQuery.clean()方法的地方有三处,第一次就是在我之前的随笔分析jQuery.buildFramgment()方法里面的,其实还是构造函数的一部分,在处理诸如$('<div>123</div>')形式的参数时会首选调用jQuery.buildFramgment()创建文档片段,而这个方法有依赖jQuery.clean()方法来实现dom转换,所以这个方法的第一个用处就是在构造jQuery对象上面。另外两处则是在两个dom操作方法before和after方法中,主要是处理dom相关操作的,相关源码代码如下:

//创建文档碎片后调用转换为domif ( !fragment ) {        fragment = doc.createDocumentFragment();        jQuery.clean( args, doc, fragment, scripts );}//before方法中调用before: function() {        if ( this[0] && this[0].parentNode ) {            return this.domManip(arguments, false, function( elem ) {                this.parentNode.insertBefore( elem, this );            });        } else if ( arguments.length ) {            var set = jQuery.clean( arguments );            set.push.apply( set, this.toArray() );            return this.pushStack( set, "before", arguments );        }    },//after方法中调用after: function() {        if ( this[0] && this[0].parentNode ) {            return this.domManip(arguments, false, function( elem ) {                this.parentNode.insertBefore( elem, this.nextSibling );            });        } else if ( arguments.length ) {            var set = this.pushStack( this, "after", arguments );            set.push.apply( set, jQuery.clean(arguments) );            return set;        }},

方法 jQuery.clean( elems, context, fragment, scripts ) 执行的 8 个关键步骤如下:

1)创建一个临时 div 元素,并插入一个安全文档片段中。
2)为 HTML 代码包裹必要的父标签,然后赋值给临时 div 元素的 innerHTML 属性,从而
将 HTML 代码转换为 DOM 元素,之后再层层剥去包裹的父元素,得到转换后的 DOM 元素。
3)移除 IE 6/7 自动插入的空 tbody 元素,插入 IE 6/7/8 自动剔除的前导空白符。
4)取到转换后的 DOM 元素集合。
5)在 IE 6/7 中修正复选框和单选按钮的选中状态。
6)合并转换后的 DOM 元素。
7)如果传入了文档片段 fragment,则提取所有合法的 script 元素存入数组 scripts,并把
其他元素插入文档片段 fragment。
8)最后返回转换后的 DOM 元素数组。

下面开始源码分析:

clean: function( elems, context, fragment, scripts ) {  ...}

还是先分析一下参数:

elems:保存待转换html字符串的数组

为了更好地理解不如还是在前台调用一下然后再看看源码中执行的结果;现在在html页面执行一段js代码(默认在dom加载之后执行)

$('
123
,<223/a>');

然后再看看源码执行的情况,相信了解jQuery源码或者看过我之前随笔的读者都会知道这段这段代码是怎么一步一步走到clean方法里面的,下面直接看执行的结果看看第一个参数的值是什么?

["
123
,<223/a>"]

通过日志方法看到得到的就是一个数组里面包含着传递进来的字符串标签

context:文档对象,该参数在方法 jQuery.buildFragment() 中被修正为正确的文

档对象(变量 doc) ,稍后会调用它的方法 createTextNode() 创建文本节点、调用方法
createElement() 创建临时 div 元素。

由于是通过buildFragment方法传递进来,之前使用的例子会被修改为文档对象document,即使不是后面也会在做进一步处理

fragment:文档片段,作为存放转换后的 DOM 元素的占位符,该参数在 jQuery.

buildFragment() 中被创建。

下面是在源码中输出此参数的结果

参数 scripts:数组,用于存放转换后的 DOM 元素中的 script 元素

转载于:https://www.cnblogs.com/yy-hh/p/4517223.html

你可能感兴趣的文章
[AngularJS] Using an AngularJS directive to hide the keyboard on submit
查看>>
Git查看、删除、重命名远程分支和tag(转)
查看>>
如何在Node.js中合并两个复杂对象
查看>>
【AtCoder010】B - Boxes(差分)
查看>>
12C -- ORA-01017
查看>>
Compile、Make和Build的区别(as make, build, clean, run)
查看>>
介绍三款串口监控工具:Device Monitoring Studio,portmon,Comspy
查看>>
maven常用命令介绍
查看>>
J2EE之Servlet初见
查看>>
Controller 接口控制器详解
查看>>
linux下apache的使用
查看>>
使用 systemd timer 备份数据库
查看>>
Struts2工作原理及流程
查看>>
oracle数据库获取指定表的列的相关信息
查看>>
维克里拍卖 Vickrey auction
查看>>
Docker镜像的获取与删除
查看>>
Codeforces Round #370 (Div. 2) C. Memory and De-Evolution 水题
查看>>
别说无所谓
查看>>
Puppetmaster高可用和可扩展的方案设计
查看>>
[转载]ASP.NET伪静态页面的实现和伪静态在IIS7.0中的配置
查看>>