菜单

自定义标签在IE6-8的窘况

2019年2月17日 - 金沙前端

自定义标签在IE6-8的泥坑

2015/07/20 · HTML5 ·
IE,
自定义标签

原文出处:
司徒正美   

大概今后前端组件化之路都以自定义标签,但那东西早在20年前,JSTL已在搞了。今后Web
Component还唯有webkit援救。但三个零部件库,还亟需1个不一致常常的标识它们是一块的。不过这么些XML已经帮我们化解了,使用scopeName,如”<xxx:dialog>”。在自个儿继续往下想怎么处理如何为那么些标签绑定数据,与其它零件通信,管理生命周期,等等大事在此之前,小编还有3个不得不面对的难点,就是如何包容IE6-8!

比如说以下三个页面:

图片 1

在chrome, firefox, IE11, IE11的IE6包容方式分别如下:

图片 2
图片 3
图片 4
图片 5

我们会发觉IE6下实际是多出不少标签,它是把闭标签也变为二个独自的因素节点

图片 6

其一AA:DIV标签被开膛破肚,里面子节点全部暴出来,成为其兄弟节点了。因而想包容它,就要费点劲。有个五个情景要求考虑,1是用户已经将它写在页面上,景况同上;2是用户是将它位于字符串模版中,那几个用正则化解。不过正则即使碰撞复杂的属性名,依旧会晕掉。因而我要么打算选用原生的HTML
parser。换言之,字符串,小编如故会将它成为节点。这么办吧?!作者想了诸多方法,后来依旧拔取VML的命名空间法解决!

咱俩将地点的页面改复杂点,再看看效果!

图片 7
图片 8

可以看到其套嵌关系未来完全正确,并且标签名不会大写化,也不会转移多余节点!

好了,大家再判定一下是或不是为自定义标签,或许纯粹地说,那几个节点是还是不是大家组件库中定义的自定义标签。某个情状下,三个页面可以存在多套组件库,蕴含avalon的,ploymer的,可能是一向用Web
Component写的。

avalon的机件库将使用命名空间,这样就好界别开。在IE6-9中,判定element.scopeName是还是不是为aa(那是组件库的命名空间,你可以改个更伟大上的名字),在其余浏览器判定此因素的localName是还是不是以aa:开端就行了!

JavaScript

function isWidget(el, uiName){ return el.scopeName ? el.scopeName ===
uiName: el.localName.indexOf(uiName+”:”) === 0 }

1
2
3
function isWidget(el, uiName){
  return   el.scopeName ? el.scopeName === uiName: el.localName.indexOf(uiName+":") === 0
}

以此难点消除后,大家就足以开搞基于自定义标签的UI库了!

1 赞 1 收藏
评论

图片 9

tp.use(["tp.a","tp.b"],function(a,b) {

})

④ 、NamedNodeMap类型变化

增产方法多数动静只针对特征应用

模块

你只怕传说过 “组件是自然模块”的传道。好啊,感激它,大家又要解释那里的术语!

您恐怕会觉得“组件”的说法更为契合用来讲述UI,而“模块”更适合描述提供劳务的效果逻辑。而对于自个儿的话,模块和零部件意思相近,都提供团体、聚焦和打包,是与有个别意义单位有关的。

       
 那里作者紧要讲一下tp.dom.query,也等于询问怎么做的,首先看望常用的查询有:#aa,.aa,input。

NodeIterator类型

可以使用document.createNodeIterator方法创造实例,接收四个参数:root(起源),whatToShow(要拜访的节点的数字代码),filter(NodeFilter对象,或表示应当接受或拒绝某种特定节点的函数),entityReferenceExpansion(布尔值,是或不是要扩充实体引用)

whatToShow是三个掩位码,以常量情势在NodeFilter类型中定义

NodeFilter.SHOW_ALL:突显全部

NodeFilter.SHOW_ELEMENT:显示成分节点

NodeFilter.SHOW_ATT奥迪Q5IBUTE:性故事情节点,由于DOM结构原因,实际上,那一个值不恐怕运用

NodeFilter.SHOW_TEXT:文本节点

NodeFilter.SHOW_CDATA_SECTION:显示CDATA节点,对HTML没用

NodeFilter.SHOW_ENTITY_REFERENCE:实体引用节点,对HTML没用

NodeFilter.SHOW_ENTITYE:实体节点,对HTML没用

NodeFilter.SHOW_PROCESSING_INSTRUCTION:处理指令节点,对HTML没用

NodeFilter.SHOW_COMMENT:注释节点

NodeFilter.SHOW_DOCUMENT:文档节点

NodeFilter.SHOW_DOCUMENT_TYPE:文档类型节点

NodeFilter.SHOW_DOCUMENT_FRAGMENT:文档片段节点,对HTML没用

NodeFilter.SHOW_NOTATION:符号节点,同上

除NodeFilter.SHOW_ALL外,可以使用按位或操作符组合两个挑选

每一个NodeFilter对象唯有2个艺术:acceptNode(),重回NodeFilter.FILTE锐界_ACCEPT或者NodeFilter.FILTER_SKIP,NodeFilter是一个虚幻类型,不可以一直开立实例,须求时得以创立二个暗含accpetNode方法的靶子,传入createNodeIterator即可

例:

var filter = {
    acceptNode:function(node){
        return node.tagName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
    }
};
var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);
//或者使用一个与acceptNode方法类似的函数
var filter = function(node){
    return node.tagName.toLowerCase() == "p" ?
            NodeFilter.FILTER_ACCEPT :
            NodeFilter.FILTER_SKIP;
};

NodeIterator类型八个紧要方法:nextNode(),previousNode()

React

React 尽管是个新人,可是却已经有许多的跟随者。它由脸谱开发,并且一度完善用于非死不可的UI和一部分非死不可的UI。

应用React创设组件的引进方法是应用叫做 JSX 的事物来定义它们。那是一种“推荐在React上使用的JavaScript语法转换”。请不要因而分心。他们一度在文档中指出,那些想法就是用来提携您在JavaScript中写出HTML标记的。

自己不是说您并不可以直接在HTML中添加标签,而必须接纳JSX创立自身的机件。然则,只要你定义了1个零件,你就足以动用这么些组件成立其余零件。

查看代码演示: 

为此,组件使用的扬言语法必要相应的HTML成分和对 React.RenderComponent 的调用。

          事件将来,当然就是DOM了,感觉各种库在那个下边都做了许多工作。

2、Document类型变化

涵盖下列与命名空间有关的不二法门:

createElementNS(namespaceUHighlanderI,tagName):使用给定的tagName创设三个属于命名空间namespaceUKoleosI的新因素

createAttributeNS(namespaceUEvoqueI,attributeName):使用给定的attributeName创制2个属于命名空间namespaceUENVISIONI的新特点

getElementsByTagNameNS(namespaceU凯雷德I,tagName):再次回到属于命名空间namespaceU奥迪Q5I的tagName成分的NodeList

例:

//创建一个新的svg元素
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
//创建一个属于某个命名空间的新特性
var att = document.createAttributeNS("http://www.somewhere.com","random");
//取得所有XHTML元素
var elems = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml","*");

注:唯有在文档中设有三个命名空间的时候,这一个与命名空间有关的章程才是不可或缺的

为何要打造组件?

既然如此未来早已清楚组件的意趣,就看看使用组件的法子打造前端选取的好处。

     
 行吗,貌似又超时了,先就那样呢,感觉每一趟写那种日志都会消耗不可枚举时日。

① 、使用DOM范围完成不难选用

采纳selecNode和selectNodeContents方法应用限制采纳文档一部分,七个点子都收到2个参数:DOM节点,selectNode选拔一切节点,selectNodeContents采用节点的子节点

例:

<!DOCTYPE html>
<html>
    <body>
        <p id="p1"><b>Hello</b> world!</p>
    </body>
</html>

var range1 = document.createRange();
    range2 = document.createRange();
    p1 = document.getElementById("p1");
range1.selectNode(p1);
range2.selectNodeContainer(p1);

结果

图片 10

调用selectNode时,startContainer,endContainer,commonAncestorContainer都以流传的父节点,相当于document.body,startOffset等于给定节点在其父节点的childNodes集合中的索引,endOffset=startOffset+1,因为只选了3个节点

调用selectNodeContainer时,startContainer,endContainer,commonAncestorContainer都以流传的节点,约等于<p>成分,startOffset始终等于0,因为范围从给定节点的率先身材节点起首,endOffset等于子节点数量,本例中是2

② 、使用DOM范围完结复杂选拔(关键)(难度在此处,解决了那些,之后的操作就没啥大题材,需求再探究切磋)

三 、操作DOM范围中的内容

四 、插入DOM范围中的内容

5、折叠DOM范围

6、比较DOM范围

7、复制DOM范围

8、清理DOM范围

高内聚

又是1个软件工程的高频词! 大家将相关的片段效益集团在同步,把全数封装起来,而在组件的例证中,就只怕是相关的作用逻辑和静态能源:JavaScript、HTML、CSS以及图像等。那就是大家所说的内聚。

那种做法将让组件更便于保险,并且这么做之后,组件的可信性也将拉长。同时,它也能让组件的成效鲜明,增大组件重用的大概。

     
使用use形式,它会自动去下载tp.a.js和tp.b.js,下载达成以往,执行回调函数。

一 、Node类型变化

在DOM2级,包括下列特定于命名空间的属性

localName:不带命名空间前缀的节点名称

namespaceU奔驰M级I:命名空间UEvoqueI或(未钦点处境下)null

prefix:命名空间前缀或(未钦命情状)null

当节点使用了命名空间前缀时,nodeName等于prefix+”:”+localName,如下:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example XHTML page</title>
    </head>
    <body>
        <s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1"
            viewBox="0 0 100 100" style="width:100%; height:100%">
            <s:rect x="0" y="0" width="100" height="100" style="fill:red"/>
        </s:svg>
    </body>
</html>

<html>:localName和tagName=”html”,namespaceURI=”

<s:svg>:localName=”svg”,tagName=”s:svg”,namespaceURI=””

Ember

框架与库的争议旷日持久,总的来说框架是强制你按某种方式做事情,所以它是邪恶的。很备受关注,Angular是个框架,而Ember的撰稿人,Yehuda
Katz和汤姆Dale也很愿意把Ember看作框架。

Ember 有对它称作组件的内建扶助。Ember
Components背后的观点是尽量的向Web
Components看齐,当浏览器协助允许时,就足以很便利地迁移到Web
Components中。

翻看代码演示: 

上边的例证中动用了 handlebars 做模板,所以成分的概念不是同等种语法。

           
作者那儿写了3个openClassScan参数,解释一下,这么些参数是为了化解类似于<div
class = “a
b”></div>那种,因为只要要辅助通过API查询如class:a,那么必要各种节点都认清是或不是contain这么些class,比较费时间,而自个儿觉得很多时候不须求,所以暗中认同本身关闭了。

3、Node类型

唯一2个与命名空间非亲非故变化,isSupported方法用于显然当前节点有所啥能力,接收三个参数:性格名,版本号,存在于hasFeature相同的题材

提出:最好依然采纳力量检测明确有个别天性是不是可用

DOM3级:isSameNode和isEqualNode,接收2个节点参数

is萨姆eNode是还是不是同2个目的,指向的是同三个对象

isEqualNode是不是一律体系,具有格外属性(相同地方,相同值)

例:

var div1 = document.createElement("div");
div1.setAttribute("class","box");
var div2 = document.createElement("div");
div2.setAttribute("class","box");
alert(div1.isSameNode(div1));   //true
alert(div1.isEqualNode(div2));  //true
alert(div1.isSameNode(div2));   //false

DOM3级:setUserData,接收三个参数:要安装的键,实际数据,处理函数

getUserData传入相同的键可以收获数据

处理函数接收六个参数:操作类型(1复制,2导入,3刨除,4重命名),数据键,数据值,源节点,目的节点

内容提要

使用过多单独组件打造应用程序的想法并不杰出。Web
Component的出现,是重复回忆基于组件的应用程序开发格局的好机遇。我们得以从这些历程中受益,驾驭怎么样利用现有技术做到目标,并且在将来做出自身的前端Web应用。

         
 之后写贰个增援函数,判定是或不是是复杂查询,假使是,那么切开查询字符串,切成数组。

二 、创立规则

运用insertRule方法,接收多少个参数:规则文本,在何地插入规则的目录

帮助浏览器:Firefox,Safari,Opera,Chrome。IE8及更早版本扶助类似措施addRule,接收五个必选参数:选用符文本和CSS样式音讯,多个可选参数:插入规则地点

指出:接纳从前介绍过的动态加载样式表的技巧

总结

行使基于组件的架构创设应用程序有过多便宜,你能从现有的框架中学到,也能在打造前端Web应用程序时从引进的Web
Component中上学到。

这场组件化Web帝国的旅程,让我们在面临框架和工具的精选时顾虑太多不决。可是,Web
Component会是终极的点灯!

Web
Component会提供打造应用程序的原生统一的艺术
。现有的框架很有或者会转而拔取Web
Component或然表明什么与它三头使用。Ember的策略是让迁移到Web
Component尤其有利于,而非死不可的React则是现身说法整合的好例子,已经有一个 ReactiveElements 演示它了。因为Angular和Polymer都是谷歌的品类,他们很有只怕会走到一块儿。

var tp = tp || {};

1、DocumentType类型

新增属性:publicId,systemId,internalSubset,前五个代表文档类型评释中的音讯段,在DOM1中不能访问

使用:document.doctype.publicId

internalSubset用于访问文档类型申明中的额外定义

纵使没啥用的说

本文由 埃姆杰 翻译。未经许可,禁止转发! 英文出处:Future Insights。

           作者把每1个查询如:tp.dom.query(“#aa
input”)分为三种,一种为简单询问(相当于如查询:#aaa),别的一种是错综复杂查询,逐个复杂查询都是由许多简短询问构成的,比如#aaa
input,就足以切成:#aaa和input。

1、innerHTML属性

读形式,再次回到与调用成分的全体子节点对应的HTML标记,包蕴属性,注释,文本节点

写形式,依照内定值创制DOM树,然后用那个DOM树替换原先全数子节点

注:设置的HTML字符串,会因而分析

注:限制:在大部浏览器中经过此属性插入<script>成分并不会履行其中的台本,IE8及更早版本可以,条件还挺多

不协助此属性的因素:<col>,<colgroup>,<frameset>,<head>,<html>,<style>,<table>,<tbody>,<thead>,<tfoot>,<tr>,在IE8及更早浏览器<title>也尚未

外部资源(英文)

 

四 、框架变化

Platform.js

可是,似乎每便提到新特点一样,我们无法分明浏览器是还是不是协助这几个特征。

图片 11

直到二零一五年1月2二十三十一日,Web Component 的浏览器匡助境况

如出一辙,我们也能通过一些神奇的非常代码,早先应用一些Web
Component所提供的成效。

图片 12

有了包容库的Web Component接济情形

好音信是五个开头进的浏览器厂商谷歌和Mozilla正在大力周全兼容库
,援救大家运用Web Component。

以下示例呈现使用platform.js后大家能够怎么定义作为img成分增加的my-avatar成分。最棒的是它能用到原生img成分的享有作用。

翻开代码演示: 

点击 HTML5 Rocks Custom Elements
tutorial 以查看创建自定义成分的更加多新闻。

注:如若你对platform.js感兴趣,也得以看看 bosonic。

原生技术的接济目的就是给我们提供对应的营造基础。所以Web
Component并不是库和框架的前期信号。

   
 define的首先个参数是该零件的名字(要求唯一,所以自个儿要么遵守命名空间的艺术写的),第二个参数是其一组件所依靠的机件,第多个参数是回调函数,也等于当吝惜的组件下载已毕今后,回调执行,而tp.modules.add就足以将以此模块加载到方方面面库中,那样的话才能应用tp.use调用。

2、outerHTML属性

读形式,再次回到与调用成分的全部子节点对应的HTML标记

写格局,依照钦点值创设DOM树,然后用这些DOM树替换原先元素

协助的浏览器IE4+,Safari4+,Chrome,Opera8+。Firefox7及前边版本都不协助

如何是组件?

软件开发是三个语义丰裕(术语日常持续五个意思)的天地。很鲜明,那里的“组件”是多少个很泛的称之为,所以有必不可少指明我们想要表明的,在前端Web应用的语言环境中的意思。

前者Web应用中的组件,是指部分布署为通用性的,用来营造较大型应用程序的软件,这几个零部件有三种表现形式。它可以是有UI(用户界面)的,也得以是作为
“服务”的纯逻辑代码。

因为有视觉上的表现方式,UI组件更易于明白。UI组件不难的例子包罗按钮、输入框和文本域。不论是开普敦包状的菜系按钮(无论你是否喜欢)、标签页、日历、选项菜单恐怕所见即所得的富文本编辑器则是局地更是高档的例子。

提供服务类型的零件只怕会令人为难通晓,那连串型的事例蕴涵跨浏览器的AJAX扶助,日志记录恐怕提供某种数据持久化的意义。

按照组件开发,最要害的就是组件可以用来整合任何零件,而富文本编辑器就是个很好的例子。它是由按钮、下拉菜单和一部分可视化组件等整合。另2个事例是HTML5上的video成分。它一样包括按钮,也同时富含1个能从摄像数据流渲染内容的成分。

        注意一下哟,由于JS变量功能域没有block,所以请不要拔取上边那种:

操作样式表

CSSStyleSheet类型表示的是样式表,CSSStyleSheet对象是一套只读接口,CSSStyleSheet继承自StyleSheet

使用于文档的有所样式表通过document.styleSheets集合来代表,通过length能够明白样式表数量,通过方括号法和item方法可以访问每一个样式表

可互换

一个功力肯定好组件的API能令人自由地转移其里面的功能完结。即使程序内部的组件是松耦合的,这其实可以用1个组件轻易地更迭另2个零部件,只要遵从千篇一律的 API/接口/约定。

倘使你采用GoInstant提供的实时功效劳务组件,那她们前一周关门服务这么的信息会影响到您。不过,只要提供了平等的数额同步API,你也可以自动创设利用七个 FirebaseComponent 组件或然 PubNubComponent 组件。

tp.event.getTarget = function(event) {
        return event.target || event.srcElement;
    };

TreeWalker

NodeIterator的更高级版本除了NodeIterator的多少个措施外,还提供用于在差别倾向遍历DOM的艺术:

parentNode():遍历到当下节点父节点

firstChild():到目前节点的首先身长节点

lastChild():到近来节点的末尾两个子节点

nextSibling():到当下节点的下二个同辈节点

previousSibling():到当前节点的上贰个同辈节点

应用document.createTree沃克方法,与document.createNodeIterator类似接收4各参数:根节点,要来得的节点类型,过滤器,是不是扩充实体引用布尔值

不同:filter返回值:除了 NodeFilter.FILTER_ACCEPT,NodeFilter.FILTER_SKIP,还有NodeFilter.FILTER_REJECT,NodeFilter.FILTER_SKIP会进入子节点搜索,而NodeFilter.FILTE翼虎_REJECT则跳过任何子节点树,剪枝算法

Tree沃克类型还有三天性质:currentNode,通过修改此属性仍能更改搜索起源

未来:Web Component和其他

Web
Component才是前景!正如名字所代表的那么,他们承诺将带来可以将效率封装成组件的浏览器原生支持。

自个儿将不难显示Web
Component并且演示大家明日得以怎么拔取它。尤其深远的内容请参考本文末尾的 “外部能源” 一节。

她们提供的作用包罗:

     
 由于这么些库完全是为毕设做的,所以那其中的不少文书都以为落成毕设的某个意义而写的。

大规模错误类型

类型转换错误

数据类型错误

通讯错误

X-Tag和Brick

Mozilla开发了投机的自定义元素包容库,叫做 X-Tag。X-Tag是2个为启用Web
Component举办多项包容的库,并即将提供对Web Component的一体化协理。

以下就是应用X-Tag的 my-avatar 自定义组件,与标准文档十三分好像:

查阅代码演示:

Mozilla同时还成立了二个叫 Brick 的库,其中囊括X-Tag,提供“一组用来便宜迅速打造Web应用程序的UI组件”,使用与谷歌的Polymer相似的方法。

       
 事件这一路实际笔者做了N多东西,然而由于讲不完,所以一时半刻不说了。

1、getElementsByClassName方法

document及具有HTML成分都足以调用该方法

此形式接收3个参数,包括三个或五个类名的字符串,再次来到带有指定类的保有因素构成的NodeList

//取得所有类中包含"username"和"current"的元素,类名先后顺序无关
var allCurrentUsernames = document.getElementsByClassName("username current");
//取得ID为"myDiv"的元素中所有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

在要素上调用,只会再次来到后代成分中的匹配,在document上调用,重临全数

注:因为再次回到的是NodeList,所以,会设有与持有再次来到NodeList的方法同样的性子难点

支撑的浏览器IE9+,Safari3.1+,Firefox3+,Chrome,Opera9.5+

AngularJS

AngularJS 可能是现行用来营造程序最盛行的前端消除方案了。作为创我的谷歌(Google),重新考虑HTML,考虑怎么重新发明,知足近年来Web开发的内需。

Angular中得以行使自定义指令概念组件。之后,你可以利用 HTML
标记注明自定义组件。

查阅代码演示: 

以此例子显示了动用Angular指令的简约程度。值scope 定义了从
 my-avatar 成分中拿到,并且之后用来打造相应的img标签和渲染成用户头像的本性。

           我认为:#aa
input这种实际上即使经过document.getElementById查询之后然后查询它的子孙节点中的全体满意tagName为input的成分;而#aaa
>
input那种就是询问它的孩子节点中是否有那种满意条件的要素。以后全部工艺流程比较不难了,对于一个错综复杂查询,首先举办二个简易询问,然后依照查询的结果集合,进行五回遍历,对各种节点查询它的男女节点或子孙节点,将持有满意条件的放入到其它一个数组,若是该数组为空,那么直接再次回到空数组,否则,继续拓展下五次询问(还是查询孩子节点或子孙节点)。

四 、内存品质难点

利用上述的章程恐怕造成浏览器内存占用难点。调用方法是,最好手工删除被替换来分的全部事件处理程序

注:尽量减弱innerHTML和outerHTML的次数,压缩使用

例:

for(var i = 0, len = values.length;i < len; i++){
     ul.innerHTML += "<li>"+values[i] +"</li>";          //要访问两次innerHTML,一次读,一次写,渣渣的性能
}
//改进版本:
var item = "";
for(var i = 0, len = values.length;i < len; i++){
     item += "<li>"+values[i] +"</li>";                  //构建HTML字符串
}
ul.innerHTML = item;                                     //只进行一次调用,一定程度上提高了性能
document.documentMode;                                   //返回给定页面使用的文档模式的版本号

contains方法:接收三个参数,要检测的节点,再次来到调用此办法的节点是或不是包蕴检测节点

资助的浏览器IE,Safari,Firefox9+,Chrome,Opera。

DOM Level 3
compareDocumentPosition方法也足以显然节点间事关,辅助浏览器IE9+,Safari,Firefox,Chrome,Opera9.5+。重回用于表示多个节点间的涉及的位掩码

掩码

节点关系

1

无关,给定节点不在当前文档中

2

居前

4

居后

8

包含

16

被包含

自定义成分

大家在地点关怀的是用Angular、Ember和React创设 my-avatar 的例子。只怕的情事下,那样的章程将以页面上只怕模板上助长的自定义成分表示。Web
Component包罗经过自定义成分拿到的原生支持– 相对是Web Component标准的大旨组成部分。

概念新成分,包涵走访成分生命周期的一对事件例如哪一天创立(createdCallback)、哪天添加在DOM树上(attachedCallback)、曾几何时从DOM树上分离(detachedCallback),哪天成分属性改变(attributeChangedCallback(attrName, oldVal, newVal))。

自定义成分的一个最紧要的某些就是有力量从原有成分增加,因此得到原有成分相应的成效。示例中大家扩展了 <img>元素 。

终极,我们所写的代码中,自定义成分正在并且倾向去做的就是将复杂的东西抽象化,让用户关心于单个组件暴发的价值,从而用来打造尤其助长的意义。

           
PS:使用了原生的document.getElementsByClassName的自然不受那几个影响的。

任何变化

Shadow DOM

还记得iframe们吧?大家还在接纳它们,是因为她俩能有限帮衬组件和控件的JavaScript和CSS不会影响页面。 Shadow
DOM 也能提供这么的护卫,并且没有iframe带来的负担。正式的说法是:

Shadow
DOM的筹划是在shadow根下隐藏DOM子树从而提供包装机制。它提供了树立和保持DOM树之间的成效界限,以及给这么些树提供相互的职能,从而在DOM树上提供了更好的功用封装。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图