讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > js教程 > 正文

0

0

jQuery.buildFragment使用方法及思路分析_jquery

php中文网

php中文网

发布时间：2016-05-16 17:44:15

|

1590人浏览过

|

来源于php中文网

原创

一、jQuery.buildFragment使用方法
1、参数
jQuery.buildFragment( args, context, scripts );2、返回值
return { fragment: fragment, cacheable: cacheable };
二、思路分析
1、处理context参数
根据传入到context参数值的不同，确保context为文档根节点document
2、限制可缓存条件
2.1、字符串小于512字节
2.2、字符串不存在option标签(克隆option标签会丢失选中状态,因此不缓存)
2.3、字符串不存在,标签(IE 6不能把,标签嵌入到文档碎片中)
2.4、字符串不存在checked属性(只针对克隆拥有checked属性节点时丢失选中状态的浏览器，如：Safria）
2.5、字符串中不存在html5标签(只针对不支持html5标签的浏览器)
3、处理args数组
通过jQuery.clean函数格式化处理数组项字符串，并生成dom节点添加到文档碎片中
4、判断缓存值
如果缓存值为由clean函数处理的文档碎片，则数组项字符串略过clean函数处理
5、返回值
函数返回一个对象，保存文档碎片和可缓存状态
三、源码注释分析
【基于jQuery1.8.3】
复制代码 代码如下:

var rnocache = /rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i,
rnoshimcache = new RegExp("]", "i");
jQuery.fragments = {};
jQuery.buildFragment = function( args, context, scripts ) {
var fragment, cacheable, cachehit,
first = args[ 0 ];
// Set context from what may come in as undefined or a jQuery collection or a node
// Updated to fix #12266 where accessing context[0] could throw an exception in IE9/10 &
// also doubles as fix for #8950 where plain objects caused createDocumentFragment exception
// 根据参数context值的不同,确保context为文档根节点document
// jQuery1.8.0版本以后代码相对于之前版本有很大改进,以下是改进地方:
// 针对context参数值为undefined, jQuery对象,DOM元素节点情况改进代码
// 解决了1.8.0版本中context参数为文档片段(#document-fragment)的bug
context = context || document;
context = !context.nodeType && context[0] || context;
context = context.ownerDocument || context;
// Only cache "small" (1/2 KB) HTML strings that are associated with the main document
// Cloning options loses the selected state, so don't cache them
// IE 6 doesn't like it when you put or elements in a fragment
// Also, WebKit does not clone 'checked' attributes on cloneNode, so don't cache
// Lastly, IE6,7,8 will not correctly reuse cached fragments that were created from unknown elems #10501
// html字符串小于512字节
// 克隆option标签会丢失选中状态,因此不缓存
// IE 6不能把,标签嵌入到文档碎片中
// WebKit浏览器(如：Safria)克隆拥有checked属性节点时,也会丢失选中状态,因此不缓存,google最新版本不存在该bug
// 最后,IE6,7、8不会正确地重用由html5标签元素创建的缓存片段
if ( args.length === 1 && typeof first === "string" && first.length first.charAt(0) === "// 如果浏览器能够克隆checked属性和支持html5,或者html字符串中不存在checked和html5标签元素
(jQuery.support.checkClone || !rchecked.test( first )) &&
(jQuery.support.html5Clone || !rnoshimcache.test( first )) ) {
// Mark cacheable and look for a hit
// 如果以上条件都满足，则打上可缓存标记
cacheable = true;
// 将数组项字符串(主要是html字符串)缓存到jQuery.fragment对象的属性列表中，并获取缓存值
// 如果clean函数已经处理过了第二次相同的字符串内容，缓存值则为clean函数处理的文档碎片，字符串解析可以略过clean处理
fragment = jQuery.fragments[ first ];
// 在clean函数处理了第一次字符串(与第二次相同)后，cachehit为true
cachehit = fragment !== undefined;
}
// 判断缓存值
if ( !fragment ) {
fragment = context.createDocumentFragment();
// 通过clean函数处理args数组，将数组每一项字符串都生成dom节点，
// 并且添加到提供的文档碎片(fragment)中，因此返回的对象中的fragment属性
// 保存了参数args数组项字符串生成的dom节点
jQuery.clean( args, context, fragment, scripts );
// Update the cache, but only store false
// unless this is a second parsing of the same content
// 当cachehit为true时，jQuery.fragment[first]为clean函数处理的文档碎片
if ( cacheable ) {
jQuery.fragments[ first ] = cachehit && fragment;
}
}
return { fragment: fragment, cacheable: cacheable };
};

相关文章

javascript库是什么_jQuery还有使用的必要吗

实现MVC中Chosen下拉列表3字符自动完成搜索功能

JavaScript与jQuery实现基于JSON数据的动态关联下拉菜单教程

提升单选按钮交互体验：实现标签区域的全功能选择与取消

在MVC应用中实现Chosen下拉列表的3字符触发自动完成搜索

相关标签:

jquery

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：javascript parseInt() 函数的进制转换注意细节_javascript技巧 下一篇：jQuery.clean使用方法及思路分析_jquery

热门AI工具

更多
DeepSeek

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台
豆包大模型

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型
通义千问

通义千问

阿里巴巴推出的全能AI助手

AI大模型
腾讯元宝

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格
文心一言

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作
讯飞写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具
即梦AI

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成
ChatGPT

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

更多
虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程，阅读下面的文章了解更多详细操作。

29

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法，阅读专题下面的文章了解更多处理方案。

20

2025.12.25

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容，阅读下面的文章了解更多详细内容。后续继续更新。

37

2025.12.25

word转换成ppt教程大全
word转换成ppt教程大全

本专题整合了word转换成ppt教程，阅读专题下面的文章了解更多详细操作。

6

2025.12.25

msvcp140.dll丢失相关教程
msvcp140.dll丢失相关教程

本专题整合了msvcp140.dll丢失相关解决方法，阅读专题下面的文章了解更多详细操作。

2

2025.12.25

笔记本电脑卡反应很慢处理方法汇总
笔记本电脑卡反应很慢处理方法汇总

本专题整合了笔记本电脑卡反应慢解决方法，阅读专题下面的文章了解更多详细内容。

6

2025.12.25

微信调黑色模式教程
微信调黑色模式教程

本专题整合了微信调黑色模式教程，阅读下面的文章了解更多详细内容。

5

2025.12.25

ps入门教程
ps入门教程

本专题整合了ps相关教程，阅读下面的文章了解更多详细内容。

4

2025.12.25

苹果官网入口直接访问
苹果官网入口直接访问

苹果官网直接访问入口是https://www.apple.com/cn/，该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

218

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
方舟订单管理系统

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 3.4万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.2万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.7万人学习

最新文章

更多
如何实现javascript拖放排序_Sortable.js有哪些核心原理
JavaScript如何实现响应式布局_JavaScript如何监听窗口大小变化
怎样使用Fetch API发起请求_它比Ajax好在哪里
如何在 JavaScript 中正确比较本地日期字符串与当前日期
如何在 JavaScript 中正确比较本地日期与当前日期
如何正确向 OpenAI Chat API 传递消息数组（避免 400 错误）
JavaScript 类属性异步赋值导致 undefined 的解决方案
javascript如何实现字符串模板_它比字符串拼接好在哪里
JavaScript如何实现实时通信_WebSocket如何建立连接？
javascript怎样操作URL参数_如何实现路由状态保持
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部