深入理解jQuery3.0的domManip函数


Posted in Javascript onSeptember 01, 2016

domManip 这个函数的历史由来已久,从 jQuery 1.0 版本开始便存在了,一直到最新的 jQuery 版本。可谓是元老级工具函数。

domManip 的主要功能是为了实现 DOM 的插入和替换。具体共为以下 5 个函数服务

•内部后插入(append)

•内部前插入(prepend)

•外部前插入(before)

•外部后插入(after)

•替换元素 (replaceWith,1.9.x 之前的版本没有使用 domMainp)

而一个 each 就生成了另外 5 个函数:appendTo、prependTo、insertBefore、insertAfter、replaceAll

jQuery.each( {
  appendTo: "append",
  prependTo: "prepend",
  insertBefore: "before",
  insertAfter: "after",
  replaceAll: "replaceWith"
}, function( name, original ) {
  jQuery.fn[ name ] = function( selector ) {
    var elems,
      ret = [],
      insert = jQuery( selector ),
      last = insert.length - 1,
      i = 0;
    for ( ; i <= last; i++ ) {
      elems = i === last ? this : this.clone( true );
      jQuery( insert[ i ] )[ original ]( elems );
      // Support: Android <=4.0 only, PhantomJS 1 only
      // .get() because push.apply(_, arraylike) throws on ancient WebKit
      push.apply( ret, elems.get() );
    }
    return this.pushStack( ret );
  };
} );

如图

深入理解jQuery3.0的domManip函数

内部调用如图

深入理解jQuery3.0的domManip函数

源码

append: function() {
  return domManip( this, arguments, function( elem ) {
    if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
      var target = manipulationTarget( this, elem );
      target.appendChild( elem );
    }
  } );
},
prepend: function() {
  return domManip( this, arguments, function( elem ) {
    if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
      var target = manipulationTarget( this, elem );
      target.insertBefore( elem, target.firstChild );
    }
  } );
},
before: function() {
  return domManip( this, arguments, function( elem ) {
    if ( this.parentNode ) {
      this.parentNode.insertBefore( elem, this );
    }
  } );
},
after: function() {
  return domManip( this, arguments, function( elem ) {
    if ( this.parentNode ) {
      this.parentNode.insertBefore( elem, this.nextSibling );
    }
  } );
},
replaceWith: function() {
  var ignored = [];
  // Make the changes, replacing each non-ignored context element with the new content
  return domManip( this, arguments, function( elem ) {
    var parent = this.parentNode;
    if ( jQuery.inArray( this, ignored ) < 0 ) {
      jQuery.cleanData( getAll( this ) );
      if ( parent ) {
        parent.replaceChild( elem, this );
      }
    }
  // Force callback invocation
  }, ignored );
}

domManip 的实现

domManip 的主要功能就是添加 DOM 元素,因为添加的位置不同而提供了四个公开函数 append、prepend、before、after,此外还有一个 replaceWith。简单说 domManip 就做了两件事

1.先完成 DOM 节点添加

2.如果添加的 DOM 节点内有 script 标签,需要额外处理下。对于可执行的 script (通过type属性判断)则执行其内的脚本代码,其它的则不执行。

domManip 依赖的一个重要函数就是 buildFragment,为 DOM 插入提高了性能。

domManip 内对 script 节点元素做了特殊处理

1.script 无 type 属性,默认会执行其内的 JS 脚本

2.script 的 type="text/javascript" 或 type="text/ecmascript" ,会执行其内的 JS 脚本

3.script 如果有 src 属性,会执行 $._evalUrl 请求远程的 JS 文件并执行

4.其它不会执行 JS 脚本,有时我们会用 script 来做 html 模板,如 underscore.js,type="text/template" 或 type="text/plain" 这种,其内的 JS 都不会被执行

此外 dataPriv.access( node, "globalEval" ),这一句标示了如果该 script 已经执行过,则不会再次执行。或者说执行后会设置一个 globalEval: true 的标示。

domManip 内部依赖 buildFragment、restoreScript、disableScript、jQuery._evalUrl、DOMEval 这几个小函数,而 restoreScript、jQuery._evalUrl 也仅在 domManip 用到。

// Replace/restore the type attribute of script elements for safe DOM manipulation
function disableScript( elem ) {
  elem.type = ( elem.getAttribute( "type" ) !== null ) + "/" + elem.type;
  return elem;
}
function restoreScript( elem ) {
  var match = rscriptTypeMasked.exec( elem.type );
  if ( match ) {
    elem.type = match[ 1 ];
  } else {
    elem.removeAttribute( "type" );
  }
  return elem;
}
jQuery._evalUrl = function( url ) {
  return jQuery.ajax( {
    url: url,
    // Make this explicit, since user can override this through ajaxSetup (#11264)
    type: "GET",
    dataType: "script",
    cache: true,
    async: false,
    global: false,
    "throws": true
  } );
};

domManip 经历了各个版本的演变

1.

3.0.x 之前版本的 domManip 函数是挂在 jQuery 对象上面的(jQuery.fn.domManip),即通过 $().domManip 方式可以访问;3.0.x 后 domManip 是一个私有函数,外部无法访问

2.

1.2.x 之前 domManip 有 4 个参数;1.3.x ~ 1.9.x 是 3 个参数;2.x 只有 2 个参数;3.x 有 4 个参数

3.

1.9.x 之前的版本 replaceWith 没有使用 domMainp

以上所述是小编给大家介绍的jQuery3.0的domManip函数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
javascript实现2048游戏示例
May 04 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 #Javascript
ES6记录异步函数的执行时间详解
Aug 31 #Javascript
基于angularjs实现图片放大镜效果
Aug 31 #Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 #Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 #Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 #Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 #Javascript
You might like
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
django中的图片验证码功能
2019/09/18 Python
通过python3实现投票功能代码实例
2019/09/26 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
python 装饰器的使用示例
2020/10/10 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
车贷收入证明范本
2014/01/09 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
竞选部长演讲稿
2014/04/26 职场文书
推广普通话演讲稿
2014/05/23 职场文书
毕业证委托书范文
2014/09/26 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
银行求职信模板
2015/03/20 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
开学典礼致辞
2015/07/29 职场文书
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers
vue实现在data里引入相对路径
2022/06/05 Vue.js