ext源码阅读 - DomHelper - createHtml,insertHtml
createHtml参考:http://linder0209.iteye.com/blog/1071818
* 创建html
* @param o
* {tag:string, // 元素的标记名,如果没有,默认为div
children|cn:string|Array|json, // 子结点对应的json数组或字节点的html或单个json
html:string, // 对应的html,如果有cn或children属性就忽略
style:function|string|json, // 元素的样式,可以是函数,字符串,json对象
cls:string, // 元素的class属性的值
htmlFor:string // 元素的For属性,
x:y // x表示其他名字,y表示非函数、非空内容
}
var spec = {
id: 'my-ul',
tag: 'ul',
cls: 'my-list',
style : {width:'20px',height:'30px'},
// append children after creating
children: [ // may also specify 'cn' instead of 'children'
{tag: 'li', id: 'item0', html: 'List Item 0'},
{tag: 'li', id: 'item1', html: 'List Item 1'},
{tag: 'li', id: 'item2', html: 'List Item 2'}
]
};
*/
function createHtml(o){
var b = '',
cn,
attr,
val,
key;
if(typeof o == 'string'){ // 若是 string 类型,直接返回
b = o;
} else if(Ice.isArray(o)){ // 若是 array 类型, 如: [{ tag: 'li', id: 'item0' }]
for(var i=0,len=o.length; i<len; i++){
if(o[i]){
b += createHtml(o[i]);
}
}
} else { // 若是 object 类型
b += '<' + (o.tag = o.tag || 'div'); // 若没有 o.tag 属性,则默认为 div, 如: <div
for (attr in o) {
val = o[attr];
if(!confRe.test(attr)){ // 忽略 tag|children|cn|html,这四个是需自定义属性
if(typeof val == 'object'){ // 若是对象类型, 如: style : {width:'20px',height:'30px'}
b += ' ' + attr + '="'; // 如: style = "
for (key in val) {
b += key + ':' + val[key] + ';'; // 如: width=20px;height:30px
}
b += '"';
} else { // 若不是对象类型, 如: id: 'my-ul'
b += ' ' + ({cls: 'class', htmlFor: 'for'}[attr] || attr) + '="' + val + '"'; // class,for对象处理
}
}
}
if(emptyTags.test(o.tag)){ // 根据xhtml规定,忽略单标签,如: <hr />, <br />等
b += '/>';
} else {
b += '>'; // 如: <div sytle="width=20px;height:30px">
if(cn = o.children){
b += createHtml(cn); // 如: <li id="item0">List Item 0</li><li id="item1">List Item 1</li>
}
b += '</' + o.tag + '>'; // 如: </div>
}
}
return b; // 如: <ol style="width:20px;height:80px;"><li id="item0"></li></ol>
}
/**
* 向DOM中插入一个HTML片段
* @param where 插入的html与el的位置关系--- beforeBegin, afterBegin, beforeEnd, afterEnd.
* @param el 内容元素
* @param html HTML片段
*/
insertHtml: function(where, el, html){
// innerHTML是只读的:col、 colgroup、frameset、html、 head、style、table、tbody、 tfoot、 thead、title 与 tr
// http://www.cnblogs.com/rubylouvre/archive/2009/12/14/1622631.html
var hash = {},
hashVal,
rs,
range,
setStart,
frag,
rangeEl;
where = where.toLowerCase();
hash[beforebegin] = ['beforeBegin', 'previousSibling'];
hash[afterend] = ['afterEnd', 'nextSibling'];
// 为了使后面的代码更易实现,这地方成两部分实现,
// 1. 在当前节点的外边插入,就是if外边
// 2. 在当前节点的里边插入,在if里边做判断
if(el.insertAdjacentHTML){ // ie
// 对ie的table进行单独处理
if(tableRe.test(el.tagName) && (rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html))){
return rs;
}
hash[afterbegin] = ['AfterBegin', 'firstChild'];
hash[beforeend] = ['BeforeEnd', 'lastChild'];
if((hashVal = hash[where])){
el.insertAdjacentHTML(hashVal[0], html);
return el[hashVal[1]];
}
} else { // 旧版 firefox, firefox 11 支持 insertAdjacentHTML
range = el.ownerDocument.createRange();
setStart = 'setStart' + (endRe.test(where) ? 'After' : 'Before');
if(hash[where]){
// setStartAfter() 把该范围的开始点设置为紧邻指定节点的节点之后
// setStartBefore() 把该范围的开始点设置为紧邻指定节点之前
range[setStart](el);
// http://msdn.microsoft.com/zh-cn/library/hh673538(v=vs.85).aspx#createContextualFragment
frag = range.createContextualFragment(html); // http://www.cnblogs.com/rubylouvre/archive/2011/04/15/2016800.html
el.parentNode.insertBefore(frag, (beforebegin == where ? el : el.nextSibling));
return el[(beforebegin == where ? 'previous' : 'next') + 'Sibling'];
} else {
rangeEl = (afterbegin == where ? 'first' : 'last') + 'Child';
if(el.firstChild){
range[setStart](el[rangeEl]);
frag = range.createContextualFragment(html);
if(afterbegin == where){
el.insertBefore(frag, el.firstChild);
} else {
el.appendChild(frag);
}
} else {
el.innerHTML = html;
}
return el[rangeEl];
}
}
throw '非法插入点 -> "' + where + '"';
}
ext源码阅读 - DomHelper - createHtml,insertHtml相关推荐
- CI框架源码阅读笔记4 引导文件CodeIgniter.php
到了这里,终于进入CI框架的核心了.既然是"引导"文件,那么就是对用户的请求.参数等做相应的导向,让用户请求和数据流按照正确的线路各就各位.例如,用户的请求url: http:// ...
- DBFace: 源码阅读(一)
DBFACE: 源码阅读 1. 背景 DBFace框架是可以同时获得人脸检测和关键点定位,相较与人脸检测和关键点定位分开的做法有一定的优势,减少了对原图的crop和resize操作,并且对多人脸的情况 ...
- 应用监控CAT之cat-client源码阅读(一)
CAT 由大众点评开发的,基于 Java 的实时应用监控平台,包括实时应用监控,业务监控.对于及时发现线上问题非常有用.(不知道大家有没有在用) 应用自然是最初级的,用完之后,还想了解下其背后的原理, ...
- centos下将vim配置为强大的源码阅读器
每日杂事缠身,让自己在不断得烦扰之后终于有了自己的清静时光来熟悉一下我的工具,每次熟悉源码都需要先在windows端改好,拖到linux端,再编译.出现问题,还得重新回到windows端,这个过程太耗 ...
- 源码阅读:AFNetworking(十六)——UIWebView+AFNetworking
该文章阅读的AFNetworking的版本为3.2.0. 这个分类提供了对请求周期进行控制的方法,包括进度监控.成功和失败的回调. 1.接口文件 1.1.属性 /**网络会话管理者对象*/ @prop ...
- 源码阅读:SDWebImage(六)——SDWebImageCoderHelper
该文章阅读的SDWebImage的版本为4.3.3. 这个类提供了四个方法,这四个方法可分为两类,一类是动图处理,一类是图像方向处理. 1.私有函数 先来看一下这个类里的两个函数 /**这个函数是计算 ...
- mybatis源码阅读
说下mybatis执行一个sql语句的流程 执行语句,事务等SqlSession都交给了excutor,excutor又委托给statementHandler SimpleExecutor:每执行一次 ...
- 24 UsageEnvironment使用环境抽象基类——Live555源码阅读(三)UsageEnvironment
24 UsageEnvironment使用环境抽象基类--Live555源码阅读(三)UsageEnvironment 24 UsageEnvironment使用环境抽象基类--Live555源码阅读 ...
- Transformers包tokenizer.encode()方法源码阅读笔记
Transformers包tokenizer.encode()方法源码阅读笔记_天才小呵呵的博客-CSDN博客_tokenizer.encode
最新文章
- linux 格式化 dvd,linux 服务器分区格式化相关知识 -mount
- JS设置cookie、读取cookie、删除cookie
- java 读文件夹_java怎么读取读取文件夹下的所有文件夹和文件?
- Linux移植遇到问题记录
- SAP UI5 应用开发教程之六十六 - 基于 OData V4 的 SAP UI5 表格控件如何实现删除功能试读版
- 部门年终总结大屏太难做?FVS开发模式用起来,附年终报告模板
- 容器(container)技术之发展简史
- 安卓加密软件_(安卓)微信聊天加密软件
- java 动态创建数据库和动态连接数据库
- mysql数据库旅游管理系统_JSP+MySQL基于ssm的旅游管理系统
- Windows 10 KB3124200补丁无法安装的临时解决方案
- 【Js】JavaScript数据类型隐式转换
- 启动tomcat服务器,struts2报此错:org.apache.catalina.core.StandardContext.filterStart Exception starting filt
- poi 3.17合并单元格报错 java.lang.IllegalArgumentException: Merged region A1 must contain 2 or more cells
- 海康卫视摄像头yolo检测,转换gps,用高德api借口显示点
- 微信小程序小技巧系列《一》幻灯片,tab导航切换
- 深度学习入门知识整理-训练技巧以及模型调优
- 基于Pubmed数据库的蛋白质修饰后的信息挖掘
- 【知识图谱 赵军 学习笔记】第十章 知识问答与对话
- 需求工程:软件建模与分析 读书笔记三
热门文章
- linux 编写java代码
- python运行界面黑色_在Python中使用open执行轮廓检测后,如何使图像的背景变黑?...
- 江苏省2021年高考成绩查询有分数吗,2021年江苏省高考成绩查询入口
- mysql密码输入多次都不对_mysql 密码不对
- Redis基本数据类型、应用场景、操作指令
- sql08 访问接口没有oraoledb_如何配置交换机和防火墙以访问 Internet?
- RSA加密解密(附源码工程)
- 模板使用自定义类型_自定义虚幻图表_拓展蓝图功能
- 3Y叔的clusterProfiler-book阅读Chapter 3 Universal enrichment analysis
- 数字图像处理与机器视觉_简单自动智能识别物体程序(机器视觉+数字图像处理)...