组件化的Web王国,JavaScript高级程序设计

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

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

原文出处:
司徒正美   

莫不以往前端组件化之路都以自定义标签,但那东西早在20年前,JSTL已在搞了。未来Web
Component还唯有webkit帮助。但三个组件库,还索要1个奇异的标识它们是一块的。不过这些XML已经帮大家解决了,使用scopeName,如”<xxx:dialog>”。在本人继续往下想什么处理如何为这么些标签绑定数据,与其余零件通信,管理生命周期,等等大事从前,作者还有一个只好面对的难题,就是什么包容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

     
 还记得本人大二的时候开头接触JS,那几个时候从教室借了N多的图书,然后面看边用editplus写,然后蒙受标题,种种DEBUG,在做项目标时候,种种兼容性难点,真是忧伤啊。由于品种必要及早写完,所以就先河接触了jquery,照旧从体育场馆抱了几本书,然后下载了jquery源码,然后面看书籍边写代码,看了几章之后,觉得貌似不难,然后就从网上下载了jquery的文档,对照着文档,对其调用搞得到底相比清楚了。

第11章, DOM扩展

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

       
以往总的来说,作者觉得学习jquery反而使本身走了弯路,用jquery是比较便于,也并非考虑包容性难点了,而且调用极度简单优雅,不过,反而作者对原生js感觉越来越面生了,也导致了后面感觉完全离不开jquery了,想去写二个XXX组件,想了一下,思路有了,然后写的时候遭遇各样题材,然后就又回到jquery了。

选择符 API

Selector API
Level1
着力措施querySelector 、querySelectorAll,兼容的浏览器可以动用 Document,Element 实例调用它们,辅助浏览器:IE8+,Firefox3.5+,Safari3.1+,chrome,Opera10+

内容提要

采用过多单身组件创设应用程序的想法并不特出。Web
Component的面世,是双重纪念基于组件的应用程序开发方式的好机遇。我们可以从这么些进程中受益,通晓哪些运用现有技术做到目标,并且在以往做出本人的前端Web应用。

       
 从二零一八年暑假的时候,作者说了算离开jquery了,jquery是一把双刃剑,开发的时候是便宜,不过,作为三个初学者,作者以为那是很不利于的。

querySelector方法

收下三个 CSS接纳符,再次来到与该方式匹配的率先个要素

通过 Document类型调用该函数,会在文档范围查找匹配成分,通过 Element类型调用该函数,只会在该因素后代范围内搜索

注:传入不被扶助的采纳符会抛出荒唐

例:

//取得body 元素
var body = document.querySelector(“body”);
//取得ID 为”myDiv”的元素
var myDiv = document.querySelector(“#myDiv”);
//取得类为”selected” 的第一个元素
var selected = document.querySelector(“.selected”);
//取得类为”button” 的第一个图像元素
var img = document.querySelector(“img.button”);

怎么样是组件?

软件开发是二个语义充足(术语平时持续一个意思)的天地。很显著,这里的“组件”是壹个很泛的名叫,所以有必不可少指明大家想要表明的,在前端Web应用的语言环境中的意思。

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

因为有视觉上的表现格局,UI组件更易于精晓。UI组件简单的例子包蕴按钮、输入框和文本域。不论是奥克兰包状的菜单按钮(无论你是不是喜欢)、标签页、日历、选项菜单恐怕所见即所得的富文本编辑器则是有的进一步高档的例证。

提供服务类型的机件或者会让人为难明白,那连串型的例子包罗跨浏览器的AJAX扶助,日志记录恐怕提供某种数据持久化的成效。

依照组件开发,最首要的就是组件可以用来构成任何零件,而富文本编辑器就是个很好的例子。它是由按钮、下拉菜单和一些可视化组件等整合。另三个例证是HTML5上的video成分。它同样包含按钮,也还要富含2个能从录制数据流渲染内容的要素。

       
 然后就起来下载JS的电子书,大概是祥和相比急躁吧,看书真心看不进入,作者恐怕喜欢边看边写代码那种。写了一段时间,逐步的以为最起首的感到渐渐回来了,当然,也赶上了N多的题材。

querySelectorAll方法

与querySelector接收一样的参数,可是回去的是多少个NodeList实例,具体点就是,重返的值实际上是带有全部属性和方法的 NodeList。

组件化的Web王国,JavaScript高级程序设计。与querySelector类似,可以调用querySelectorAll的类型蕴涵Document、DocumentFragment、Element

例:

//取得某<div>中所有<em>元素(类似getElementsByTagName("em"))
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selectored");
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");

要博取再次来到的NodeList的因素,可以运用item方法或方括号法

注:传入不被辅助的挑选符会抛出荒唐

Selector API
Level2
正规为Element类型新增了三个办法matchesSelector,接收一个参数,CSS拔取符,若调用成分与该采纳符匹配再次来到true,否则重回false

注:到二〇一三年年中还没有浏览器协理此方法,不过,IE9+通过msMatchesSelector,Firefox3.6+通过mozMatchesSelector,Safari5+和Chrome通过webkitMatchesSelector支持该措施

怎么要营造组件?

既是将来早就知道组件的情趣,就看看使用组件的方法打造前端采用的补益。

       
到寒假的时候,决定本身的毕设不应用今后成熟的JS库,反而自个儿来写贰个不完美的库,这样学习的越多,当然,也比较费时间。

卷入该办法代码:

function matchesSelector(element,selecrot){
     if(element.matchesSelector){
          return element.matchesSelector(selector);
     }else if(element.msMatchesSelector){
          return element.msMatchesSelector(selector);
     }else if(element.mozMatchesSelector){
          return element.mozMatchesSelector(selector);
     }else if(element.webkitMatchesSelector){
          return element.webkitMatchesSelector(selector);
     }else {
          throw new Error("Not supported");
     }
}
if(matchesSelector(document.body,"body.page1")){
     //操作
}

模块

你可能听外人讲过 “组件是天生模块”的说教。好啊,多谢它,大家又要诠释这里的术语!

您只怕会认为“组件”的说法更是契合用来讲述UI,而“模块”更符合描述提供劳务的作用逻辑。而对于自身的话,模块和零部件意思相近,都提供协会、聚焦和包装,是与有些功效单位相关的。

       
起先写的感觉到真是痛苦啊,什么都不懂,所以就去看了看tangram的源码,为啥看tangram呢,其实原因相比搞笑,当时校招的时候小编面试百度前端,被刷掉了,当时面试官让自家看看它们百度利用的JS库tangram,作者就想看看它们格外库到底有啥样惊天动地的。。。

要素遍历

对于元素间空格,IE9及以前并不会回来文本节点,其他浏览器都会,为此Element
Traversal规范新定义属性:

childElementCount:重回子成分个数,不包蕴文件节点和注释

firstElementChild:firstChild元素版

lastElementChild:lastChild元素版

previousElementSibling:previousSibling元素版

nextElementSibling:nextSibling元素版

采纳上述因素得以无需顾虑空白文本节点

协理Element Traversal规范的浏览器IE9+,Firefox3.5+,Safari4+,Chrome和Opera10+

高内聚

又是二个软件工程的高频词! 我们将有关的有些职能公司在协同,把全体封装起来,而在组件的例子中,就或者是休戚相关的效应逻辑和静态能源:JavaScript、HTML、CSS以及图像等。那就是大家所说的内聚。

那种做法将让组件更便于保证,并且这么做之后,组件的可依赖性也将增强。同时,它也能让组件的作用肯定,增大组件重用的大概性。

       
写那个库,首先选用了命名空间,作者相比较喜欢toper,所以作者首先定义了二个变量:

HTML5

组件化的Web王国,JavaScript高级程序设计。H5新增了比比皆是API,致力于简化CSS类的用法

可重用

您见到的示范组件,特别是Web
Component,更关切可拔取的难题。成效鲜明,已毕清晰,API易于明白。自然就能促进组件复用。通过创设可拔取组件,我们不仅保持了 DPRADOY(不要再一次造轮子)标准,还取得了对应的利益。

此处要升迁: 不要过于尝试打造可采取组件。你更应该关怀应用程序上所急需的那多少个特定部分。固然以往相应须要出现,大概零部件的确到了可接纳的地步,就花一点外加时间让组件重用。事实上,开发者都喜爱去创设可采用功效块(库、组件、模块、插件等),做得太早将会让您后来难熬不堪。所以,吸取基于组件开发的其余利益,并且接受不是独具组件都能重用的事实。

var tp = tp || {};

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+

可互换

一个效果肯定好组件的API能令人自由地转移其内部的效用完成。假如程序内部的零件是松耦合的,那其实可以用一个组件轻易地更迭另3个零部件,只要听从千篇一律的 API/接口/约定。

若是你使用GoInstant提供的实时出力劳动组件,那他们下一周闭馆服务如此的音讯会影响到你。不过,只要提供了扳平的数码同步API,你也得以活动创设利用3个 FirebaseComponent 组件只怕 PubNubComponent 组件。

       
那种办法也是借鉴了tangram的写法,选择对象字面量的花样。那样全体toper定义的方法都放在了tp这些私有空间内了,比如对DOM的操作就位于tp.dom中。

2、classList属性

H5为拥有因素添加了classList属性,是新集合类型DOMTokenList的实例。DOMTokenList有length属性,可以经过item方法和方括号法访问成分,别的定义的艺术:

add(value):将加以的字符串值添加到列表中,已存在不添加

contains(value):列表是或不是留存给定值,是,重返true,否,重回false

remove(value):移除给定字符串

toggle(value):列表若已存在,移除,不设有,添加

例:

<div class="bd user disabled">..</div>
//删除"disabled"类
div.classList.remove("disabled");
//切换"user"类
div.classList.toggle("user");

可组合

事先也研究过,基于组件的架构让组件组合成新组件越发便于。那样的规划让组件尤其注意,也让别的零件中营造和揭示的功能更好应用。

随便是给程序添加效果,如故用来营造完整的程序,特别扑朔迷离的效应也能萧规曹随。那就是这种办法的要害利益。

是或不是有必不可少把装有的东西转换到组件,事实上取决于你协调。没有任何理由让你的程序由 你自己 的组件组合成你最惊叹的功能 ,乃至 最花哨的功能。而那一个零部件又扭曲构成任何零件。若是您从那几个方法中得到了好处,就想方设法地去锲而不舍它。不过要注意的是,不要用同一的主意把业务变得复杂,你并不须求过分关心怎么样让组件重用。而是要关注显示程序的效益。

     
 由于那一个库完全是为毕设做的,所以那中间的不少文书都以为促成毕设的一些意义而写的。

典型管理

document.activeElement属性,始终拿到当前DOM拿到了关节的元素,成分得到大旨方式:页面加载,用户输入(日常通过tab),代码中调整focus方法。

文档刚加载完,document.activeElement保存document.body,加载时期为null

document。hasFocus方法,分明文档是还是不是取得主旨

贯彻那三个属性浏览器IE4+,Firefox3+,Safari4+,Chrome,Opera8+

前几日就从头打造组件

在 Caplin
Systems 营造基于组件的自有应用程序时,小编动用了几条标准和推行。这一个原则由 BladeRunnerJS(BRJS) 开源工具集支撑。它被称作”BladeRunnerJS”
是因为大家将顺序效能都封装在称作 Blades 的事物中。Blade是能够在某些应用中选定的功效特色,可是不得以在程序间重用。当功能真的
变得尤为通用的时候,大家将相应的定义移到库文件中,供各类程序间使用。特定应用中的组件(blade)和大家先后间的通用组件可以利用,大家借使找到最好满意必要的任何库和框架。

那么,今后哪些库和框架可以帮忙我们打造组件呢?

在控制营造利用时应采用何种技术时,只须要探视流行的 TodoMVC 网站就足以见到大批量可供采用的前端库和框架。你可能会觉得任何一种方案都能用来创设基于组件的应用程序。可是,他们中间的某个方案内置了对组件的帮忙。其中比较盛名的是AngularJS、Ember
和 React。

     
小编利用的结构是core+组件的艺术,tp.core.js(压缩后为tp.core-min.js),而其他的零件每一种组件贰个文件,而组件之间或者存在依靠关系,那种借助关系就因此英特尔消除。

H5扩展了HTMLDocument

零件间是哪些通讯的?

在深远示例此前有必不可少不难地提到组件间通讯的难点。如果组件之间是“独立”、“模块化”的,他们又是何等相互通讯的吗?

最明显的答案就是让组件间互动引用并透过她们之间的API交互。那样做的难题就在于,那种做法会让组件相互珍惜。长时间内只怕幸而,一段时间以后,你在改动程序的时候程序会失控,修改1个零部件就会对另一个零部件暴发极大的影响。决定移除3个不大概带来预期价值组件只怕会让你的应用程序为止工作,因为它背后会有数个零部件看重于它。

此刻,化解方案是提供松耦合的,让组件之间很少可能大约不精晓相互的方案。组件并不直接创立其他零件,在他们须要通讯的时候,他们经过“接口/约定”或然通过 “服务”。我们在营造BLacrosseJS程序时考虑了很多这么些地点的事物,并且利用 ServiceRegistry 访问用于组件间通讯的劳务如故是Web
API这么的能源。Angular和Ember选择了劳务和借助注入化解那类难点。

     
在并未写那几个库此前,即使是自小编使用jquery,每两个JS文件作者都以直接在HTML文件中动用script标签写进去的,而方今亟需拔取那种异步模块加载的不二法门,即使要使用非大旨模块,那么须要:

1、readyState属性

值:loading –>
正在加载,complete –> 加载达成

支持的浏览器IE4+,Firefox3.6+,Safari,Chrome,Opera9+

演示组件my-avatar

为了体现我们怎么样用那个库和框架营造最中心的机件,我们创制了二个暗含UI,用于取回和出示用户头像的简要示例。在或然的气象下,该零件会有 my-avatar 标签,会从以下七个个性中取得头像:

  • service 允许设置二个劳务。例如 twitter 或者 facebook
  • username 用于取回该用户名绝对应的头像
tp.use(["tp.a","tp.b"],function(a,b) {

})

二,包容形式

AngularJS

AngularJS 可能是现行用来打造程序最流行的前端解决方案了。作为创小编的谷歌(Google),重新考虑HTML,考虑怎么重新发明,满足近年来Web开发的必要。

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

翻开代码演示: 

这些事例体现了应用Angular指令的简易程度。值scope 定义了从
 my-avatar 成分中收获,并且之后用来构建相应的img标签和渲染成用户头像的属性。

     
使用use方式,它会活动去下载tp.a.js和tp.b.js,下载已毕将来,执行回调函数。

3、head属性

H5新增document.head属性,获得<head>成分,协理浏览器Chrome,Safari5+

Ember

框架与库的顶牛旷日持久,总的来说框架是强制你按某种格局做工作,所以它是邪恶的。很精通,Angular是个框架,而Ember的撰稿人,Yehuda
Katz和汤姆Dale也很乐意把Ember看作框架。

Ember 有对它叫做组件的内建接济。Ember
Components背后的观点是不择手段的向Web
Components看齐,当浏览器帮忙允许时,就可以很便利地迁移到Web
Components中。

翻开代码演示: 

上边的事例中应用了 handlebars 做模板,所以元素的概念不是一样种语法。

      同样,在tp.a.js中,也不只怕运用普通的JS的写法了,而要使用:

字符集属性

H5新增charset属性,表示文档实际行使字符集,可更改,协助浏览器IE,Safari,Chrome,Opera。Firefox帮衬Characterset

defaultCharset属性,表示根据暗中同意浏览器和操作系统设置,显然用啥字符集,支持浏览器IE,Safari,Chrome

可以自定义非标准属性,要添加前缀data-,dataset属品质够访问,dataset是DOMStringMap的实例

React

React 就算是个新人,可是却已经有众多的帮助者。它由非死不可开发,并且一度圆满用于Instagram的UI和部分Facebook的UI。

运用React营造组件的引荐形式是接纳叫做 JSX 的东西来定义它们。那是一种“推荐在React上运用的JavaScript语法转换”。请不要为此分心。他们一度在文档中指出,那么些想法就是用来协助你在JavaScript中写出HTML标记的。

自作者不是说您并不得以一贯在HTML中添加标签,而必须利用JSX创立和谐的零部件。不过,只要您定义了二个零部件,你就能够运用那几个组件创立其余零件。

翻看代码演示: 

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

 

布置标记

未来:Web Component和其他

Web
Component才是前景!正如名字所表示的那样,他们承诺将拉动可以将功用封装成组件的浏览器原生辅助。

自家将简单展现Web
Component并且演示大家未来可以怎么采用它。越发深远的情节请参考本文末尾的 “外部财富” 一节。

她们提供的成效包含:

define("tp.a",["tp.c","tp.d"],function(c,d) {
   tp.modules.add("tp.a",function() {

    });
});

1、innerHTML属性

读形式,重返与调用成分的全部子节点对应的HTML标记,包含属性,注释,文本节点

写方式,依据指定值创设DOM树,然后用那么些DOM树替换原先全体子节点

注:设置的HTML字符串,会透过分析

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

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

自定义成分

大家在下面关心的是用Angular、Ember和React打造 my-avatar 的事例。大概的气象下,那样的办法将以页面上大概模板上加上的自定义成分表示。Web
Component包括通过自定义成分取得的原生帮衬– 相对是Web Component标准的着力组成部分。

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

自定义成分的二个主要的局部就是有力量从原来成分伸张,因此拿到原有成分相应的成效。示例中我们扩展了 <img>元素 。

末尾,大家所写的代码中,自定义成分正在并且倾向去做的就是将复杂的东西抽象化,让用户关切于单个组件发生的价值,从而用来营造特别充足的意义。

   
 define的率先个参数是该器件的名字(须求唯一,所以小编要么遵守命名空间的主意写的),第三个参数是其一组件所依赖的零件,第多个参数是回调函数,相当于当正视的组件下载已毕之后,回调执行,而tp.modules.add就足以将以此模块加载到整个库中,那样的话才能应用tp.use调用。

2、outerHTML属性

读方式,重回与调用元素的全部子节点对应的HTML标记

写情势,依据指定值创制DOM树,然后用这么些DOM树替换原先成分

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

Shadow DOM

还记得iframe们吧?大家还在采纳它们,是因为她俩能确保组件和控件的JavaScript和CSS不会影响页面。 Shadow
DOM 也能提供这么的维护,并且没有iframe带来的担当。正式的传教是:

Shadow
DOM的设计是在shadow根下隐藏DOM子树从而提供包装机制。它提供了树立和保持DOM树之间的功效界限,以及给那几个树提供相互的功效,从而在DOM树上提供了更好的功用封装。

     
那种办法本人在tangram中尚无观望,作者是看了天猫商城的KISSY之后上学到的,约等于所谓的速龙(异步模块定义)。

3、insertAdjacentHTML方法

收下八个参数:要插入的职位,要插入的HTML文本,第四个参数必须是下列值之一

“beforebegin”,在近来因素之前插入紧邻的同辈元素

“afterbegin”,在当下成分插入壹个新的子成分或在首先个子成分以前插入新的子成分

“beforeend”,在现阶段成分以下插入1个新的子成分或在结尾壹个子成分之后插入新的子成分

“afterend”,在当下成分之后插入贰个同辈成分

HTML导入

笔者们长日子从前就能够导入JavaScript和CSS了。 HTML导入功能提供了从任何HTML文档中导入和选定HTML文档的能力。这种不难性同时代表可以很便宜地用一些零部件打造另一些零部件。

最后,那样的格式很优秀,适合可采用组件,并且可以用你最喜悦的包管理化解方案发表(例如: bower、 npm 或者 Component)。

     
一时英特尔的贯彻情势是透过setInterval,不过即将被重构皇家赌场手机版 10

肆,内存品质难题

拔取上述的章程可能引致浏览器内存占用难点。调用方法是,最好手工删除被轮换来分的有着事件处理程序

注:尽量收缩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方法:接收3个参数,要检测的节点,重返调用此形式的节点是还是不是带有检测节点

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

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

掩码

节点关系

1

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

2

居前

4

居后

8

包含

16

被包含

模板

大家中的许多个人曾经采纳像handlebars、mustache只怕underscore.js中的模板那样的缓解方案(就好像大家在上边的Ember示例中用的同等)。Web
Component通过 template元素 提供了模版的原生支持。

原生模板让你可以评释分类为“隐藏DOM”然而解析成HTML的号子片段。他们在页面加载时并未用处,可是能够在运作时实例化。他们得以
被搜寻到 ,但是在插入活动的DOM树前不会加载任何相关能源。

     
作者事先写了一篇日记来完毕AMD,当然,功效低下,反正我们看看就行了

插入文本

尚未纳入H5规范的性质

Platform.js

不过,就像每一次提到新天性一样,大家无法显然浏览器是还是不是协助那么些特色。

皇家赌场手机版 11

直至二零一四年七月21十三日,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并不是库和框架的末尾信号。

     
然后就是事件了,事件是2个比较恼火的作业,东西比较多,小编把它放在了tp.event那几个空间中。

1、innerText

<div id="content">
     <p>This is a <strong>paragraph</strong> with a list following it.</p>
     <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
     </ul>
</div>

对<div>成分而言innerText再次来到:(不自然带有原始代码的缩进)

This is a paragraph with a list following it. 

Item 1 

Item 2 

Item 3

使用innerText设置:

div.innerText = "hello world!";

结果:

<div id="content">hello world!</div>

注:innerText也会对文件中的HTML语法字符(>,<,”,&)进行编码

扶助的浏览器IE4+,Safari3+,Chrome,Opera8+。Firefox不协助,但支撑类似属性textContent属性,textContent是DOM
Level 3规定的三个属性,IE9+,Safari3+,Chrome,Opera10+也支撑textContent

Polymer

Polymer 是演示打造基于原生Web
Component功用的最佳示例。它提供了拔取的建制用来创设自定义的Polymer成分,并且提供了不少基本的UI组件,让你可以创立本身的应用程序。

皇家赌场手机版 13

下边你可以看来 my-avatar 成分的总结创造进度,同时咱们也取得了想要的标志。

翻开代码演示: 

谷歌正在使劲推进Polymer。请查看 Polymer getting started
guide 查看越多示例。

     
首先是加上和移除事件监听器,由于IE和非IE采纳的不二法门差距,IE拔取attach伊芙nt和detech伊夫nt,非IE采取add伊夫ntListener和remove伊夫ntListener,而且IE只扶助冒泡(从日前成分冒泡到根成分),而非IE辅助冒泡和破获(从根元素捕获到当下成分)。最开端自身是那般做的:

2、outerText

而外成效范围扩充到了涵盖调用它的节点之外,outerText与innerText基本一致

X-Tag和Brick

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

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

查看代码演示:

Mozilla同时还创建了二个叫 Brick 的库,其中包括X-Tag,提供“一组用来方便火速营造Web应用程序的UI组件”,使用与谷歌的Polymer相似的法门。

tp.event.on = function(element,event,fn) {
        if (window.attachEvent) {
            //IE
            //第三个参数_realFn是为了修正this
            var realFn = function(e{fn.call(element,e);};
            _realEventCallbackFns[fn] = realFn;
            element.attachEvent("on" + event,realFn);
        } else if (window.addEventListener) {
            element.addEventListener(event, fn,false);
        } else {
            element["on" + event] = fn;
        }
};

第12章,DOM2和DOM3

DOM1级首要定义HTML和XML文档底层结构。DOM2和DOM3则在此基础引入越来越多互动能力,协理更尖端的XML天性。

总结

运用基于组件的架构打造应用程序有广大利益,你能从现有的框架中学到,也能在创设前端Web应用程序时从推荐的Web
Component中学习到。

这场组件化Web王国的旅程,让大家在面临框架和工具的采用时意马心猿不决。可是,Web
Component会是终极的点灯!

Web
Component会提供打造应用程序的原生统一的办法
。现有的框架很有或然会转而接纳Web
Component只怕表明什么与它一起使用。Ember的政策是让迁移到Web
Component特别便利,而Facebook的React则是出现说法整合的好例子,已经有壹个 ReactiveElements 演示它了。因为Angular和Polymer都以谷歌(Google)的系列,他们很有只怕会走到一道。

   
 约等于在3个函数内部去看清是不是是IE,然后相应的实践相应的函数,然则如此,要是加上的轩然大波监听器很多,每便都if什么的,小编个人感觉很不佳,所以本身背后添加了3个声援函数:

DOM2级:

基本:在1级基础上,为节点添加越来越多格局和性情

视图:为文档定义了依照样式音讯的例外视图

事件:表明了怎样利用事件与DOM文档交互

体制:定义了怎么着以编程格局来做客和更改CSS样式消息

遍历和范围:引入了遍历DOM文档和拔取其一定部分的新接口

HTML:在1级基础上,添加更加多属性,方法和新接口

外表资源(英文)

  • Eric Bidelman – Google I/O 2014 – Polymer and Web Components change
    everything you know about Web
    development
  • Ryan Seddon – Web Directions – Web Components, The Future of Web
    Development
  • Addy Osmani – LXJS – Componentize The Web: Back To The
    Browser!
  • WebComponents.org a place to discuss and evolve web component
    best-practices
var _listeners = {},
        _addEventListener,
        _removeEventListener;
    if (window.attachEvent) {

        var _realEventCallbackFns = {};
        _addEventListener = function(element,event,fn) {
            //第三个参数_realFn是为了修正this
            var realFn = function(e) {fn.call(element,e);};
            _realEventCallbackFns[fn] = realFn;
            element.attachEvent("on" + event,realFn);
        };
        _removeEventListener = function(element,event,fn) {
            element.detachEvent("on" + event,_realEventCallbackFns[fn]);
        };
    } else if (window.addEventListener) {
        _addEventListener = function(element,event,fn,capture) {
            element.addEventListener(event, fn,capture);
        };
        _removeEventListener = function (element,event,fn,capture) {
            element.removeEventListener(event,fn,capture);
        };
    } else {
        _addEventListener = function(element,event,fn) {
            element["on" + event] = fn;
        };
        _removeEventListener = function(element,event) {
            delete element["on" + event];
        };
    }

检测浏览器是或不是支持DOM模块:

var supportsDOM2Core = document.implementation.hasFeature("Core","2.0");
var supportsDOM3Core = document.implementation.hasFeature("Core","3.0");
var supportsDOM2HTML = document.implementation.hasFeature("HTML","2.0");
var supportsDOM2Views = document.implementation.hasFeature("Views","2.0");
var supportsDOM2XML = document.implementation.hasFeature("XML","2.0");

         
 那样,整个判定只需求实施一遍,前边调用的时候只需求动用_add伊夫ntListener即可,当然,由于应用了闭包,tp.event命名空间之外是不行访问那多少个函数的。

针对XML命名空间变化

<!-- 不加前缀:-->
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example XHTML page</title>
    </head>
    <body>
        Hello World!
    </body>
</html>
<!-- 加前缀:-->
<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <xhtml:head>
        <xhtml:title>Example XHTML page</xhtml:title>
    </xhtml:head>
    <xhtml:body>
        Hello World!
    </xhtml:body>
</xhtml:html>

错落使用三种语言,命名空间用途才可以显示

DOM2级焦点为大多数DOM1级方法提供一定于命名空间的本子搞定难题

           那那样,tp.event.on就变得极度简单了:

一,Node类型变化

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

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

namespaceUEscortI:命名空间UEscortI或(未指定意况下)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=””

tp.event.on = function(element,event,fn) {
        _addEventListener(element,event,fn,false);
         };

DOM3级在此基础再引入:

isDefaultNamespace(namespaceU奥德赛I),指定的namespaceU君越I是不是是当前节点的暗中同意命名空间

lookupNamespaceUEnclaveI(prefix),再次回到给定的prefix的命名空间

lookupPrefix(namespaceUGL450I),重返给定的namespaceU帕杰罗I的前缀

         
而且这么还有3个功利,从前的章程只可以使用冒泡格局,但未来,可以运用捕获,当然,只可以非IE才能采用,这样在后头使用事件代理一些非冒泡的风云的时候越发有用,比如blur和focus事件。

2、Document类型变化

含蓄下列与命名空间有关的主意:

createElementNS(namespaceU奥迪Q7I,tagName):使用给定的tagName创制一个属于命名空间namespaceU兰德酷威I的新因素

createAttributeNS(namespaceULacrosseI,attributeName):使用给定的attributeName创造3个属于命名空间namespaceU奥迪Q5I的新特色

getElementsByTagNameNS(namespaceU奥迪Q5I,tagName):重返属于命名空间namespaceU中华VI的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","*");

注:只有在文档中存在五个命名空间的时候,这几个与命名空间有关的艺术才是必需的

         
 除了事件监听器,还亟需事件风波的丰盛,删除等,也等于add,fire,remove等,那里就背着了。

3、Element类型变化

首要涉及操作性情,新增方法如下

getAttributeNS(namespaceU途乐I,localName):取得属于命名空间namespaceU奇骏I且名为localName的性状

getAttributeNodeNS(namespaceURI,localName):取节点

getElementsByTagNameNS(namespaceU陆风X8I,tagName):重临属于命名空间的tagName成分的NodeList

hasAttributeNS(namespaceU奥德赛I,localName):明确当前因素是不是有1个名为localName的特征,而且该性格的命名空间是namespaceU路虎极光I。注意:DOM2主干,也增多一个hasAttribute方法,用于不考虑命名空间的情事

removeAttributeNS(namespaceU福睿斯I,localName):删除天性

setAttributeNS(namespaceULX570I,qualifiedName,value):设置属于命名空间且名为qualifiedName的本性值为value

setAttributeNodeNS(attNode):设置属于命名空间的性状节点

注:除第三个参数外,这几个点子与DOM1级相关措施效果一样

         
在运用事件代理的时候,咱们平常要博得到事件的目的成分,而IE和非IE又是不平等的,所以要求独自写一个函数:

肆,NamedNodeMap类型变化

新增方法多数情状只针对特征应用

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

其他变化

         
常用的效力自然依然阻止事件冒泡以及阻碍暗中同意事件的爆发,很不满,IE和非IE处理方式如故不相同等的,比如阻止冒泡IE接纳的是cancelBubble,而任何浏览器采取的是stopPropagation,所以如故必要写:

1、DocumentType类型

增产属性:publicId,systemId,internalSubset,前多个象征文档类型申明中的音讯段,在DOM1中不大概访问

使用:document.doctype.publicId

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

就算没啥用的说

tp.event.preventDefault = function(event) {
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    };
    tp.event.stopPropagation = function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    };

2、Document类型

转移中绝无仅有与命名空间毫不相关的形式:importNode(),用途:从2个文档中获取3个节点,将其导入到另三个文档

注:各个节点都有多少个ownerDocument属性,使用appendChild时传出的节点属于差距文档,则会出错,importNode则不会

与Element的cloneNode方法拾叁分相似,接收八个参数,要复制的节点,是或不是复制子节点的布尔值

DOM2级视图添加defaultView属性,指向拥有给定文档的窗口,除IE外,都匡助,IE协理等价属性:parentWindow

DOM2级主旨为document.implementation对象规定七个新章程:createDocumentType(成立新的DocumentType节点,接收几个参数:文档类型名称,publicId,systemId),creteDocument(接收多个参数:针对文档成分的namespaceURAV4I,文档成分标签名,新文档的文档类型)

DOM2级HTML为document.implementation新增方法createHTMLDocument,接收三个参数:新创设的文档的标题,唯有Opera和Safari协助

       
 事件这一块儿实际上本人做了N多东西,可是由于讲不完,所以临时不说了。

3、Node类型

唯一三个与命名空间毫不相关变化,isSupported方法用于明确当前节点有所啥能力,接收三个参数:天性名,版本号,存在于hasFeature相同的题目

指出:最好如故接纳能力检测显然有些性格是不是可用

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

isSameNode是还是不是同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重命名),数据键,数据值,源节点,目标节点

        注意一下啊,由于JS变量成效域没有block,所以请不要选用上边这种:

四,框架变化

var arr = new Array();
if(xxx) {
   for(var i = 0,len = arr.length ; i < len; i++) {

   }
} else {
   for(var i = 0,len = arr.length ; i < len; i++) {

   }
}

样式

概念样式格局:<link/>包涵外部文件,<style/>定义嵌入样式,style本性定义针对一定成分样式

//确定浏览器是否支持DOM2级定义CSS能力
var supportsDOM2CSS = document.implementation.hasFeature("CSS","2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2","2.0");

style天性中指定的别的CSS属性都将突显为这一个style对象的性能,对于使用短划线(background-image)的CSS属性,必须改换为驼峰大小写格局

注:float为js保留字,无法经过轻重写转换,DOM2级样式规定,对应对象属性名应是cssFloat,Firefox,Safari,Opera,Chrome都扶助,IE资助styleFloat

      那样使用变量i已经被再次定义了,所以须要把变量i定义在if之前,即:

一,DOM样式属性和办法:

cssText:访问style个性中的CSS代码

length:CSS属性数量

parentRule:CSS信息的CSSRule对象

getPropertyCssValue(propertyName):重回给定属性值的CSSValue对象

getPropertyPriority(propertyName):若给定的习性使用了!important设置,再次回到important,否则,再次来到空串

getPropertyValue(propertyName):再次来到给定属性的字符串值

item(index):重临给定地方的CSS属性名称

removeProperty(propertyName):从样式中删除给定属性

setProperty(propertyName,value,priority):将给定属性设置为相应的值,并加上优先权标志(important或二个空手)

var arr = new Array(),
    i;

操作样式表

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

利用于文档的具备样式表通过document.styleSheets集合来代表,通过length可以知道样式表数量,通过方括号法和item方法可以访问每贰个样式表

          事件将来,当然就是DOM了,感觉每一个库在这么些上边都做了过多干活。

1、CSS规则

CSSRule对象表示样式表中每一条规则,实际上是三个供别的各个类型继承的基类型,常见的是CSSStyleRule类型

       
 首先是ready的论断,关于那么些可以看自身其它一篇日记:

贰,成立规则

行使insertRule方法,接收多少个参数:规则文本,在哪里插入规则的目录

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

提出:拔取以前介绍过的动态加载样式表的技术

       
 那里自个儿最主要讲一下tp.dom.query,约等于询问咋做的,首先看望常用的查询有:#aa,.aa,input。

三,删除规则:慎用

deleteRule接收2个参数:要删减的条条框框的职位

       
 #aa那种比较不难,因为JS提供了API,也等于document.getElementById;input那种也相比较好搞,因为JS有document.getElementsByTagName;不过.aa这种措施就相比纠结了,因为JS没有提供API,幸亏,在一部分浏览器中依旧提供了API:document.getElementsByClassName,而那几个尚未提供那几个API的就相比喜剧了,只可以遍历全体节点,相当于应用document.getElementsByTagName(*):

遍历

DOM2级遍历和界定定义了逐四回历DOM结构的类型:NodeIterator,Tree沃克,那些种类执行深度优先遍历(深搜)

          笔者那时写了壹个扶持函数:

NodeIterator类型

可以使用document.createNodeIterator方法创建实例,接收伍个参数:root(源点),whatToShow(要访问的节点的数字代码),filter(NodeFilter对象,或意味着应当接受或拒绝某种特定节点的函数),entityReferenceExpansion(布尔值,是不是要壮大实体引用)

whatToShow是多个掩位码,以常量格局在NodeFilter类型中定义

NodeFilter.SHOW_ALL:突显全数

NodeFilter.SHOW_ELEMENT:突显成分节点

NodeFilter.SHOW_ATT瑞虎IBUTE:性故事情节点,由于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对象唯有三个主意:acceptNode(),再次来到NodeFilter.FILTELX570_ACCEPT或者NodeFilter.FILTER_SKIP,NodeFilter是二个虚幻类型,无法直接创立实例,要求时可以创立1个暗含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()

var _getElementsByClassName = null;
        if(document.getElementsByClassName) {
                _getElementsByClassName = function(str) {
                    var fetchedEles = document.getElementsByClassName(str),
                        eles = [];

                    for(var i = 0, len = fetchedEles.length; i < len; i++) {
                        eles.push(fetchedEles[i]);
                    }
                    return eles;
                };
        } else {
            _getElementsByClassName = function(str,openClassScan) {
                var eles = [],
                    allElements = document.getElementsByTagName("*"),
                    i;
                if(openClassScan) {
                    for (i = 0; i< allElements.length; i++ ) {
                        if (tp.dom.containClass(allElements[i],str)) {
                            eles.push(allElements[i]);
                        }
                    }
                } else {
                    for (i = 0; i< allElements.length; i++ ) {
                        if (str === allElements[i].className) {
                            eles.push(allElements[i]);
                        }
                    }
                }
                return eles;
            };
        }

TreeWalker

NodeIterator的更尖端版本除了NodeIterator的五个章程外,还提供用于在不一样倾向遍历DOM的章程:

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

firstChild():到目前节点的率先身材节点

lastChild():到当下节点的末尾多少个子节点

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

previousSibling():到近年来节点的上2个同辈节点

采用document.createTree沃克方法,与document.createNodeIterator类似接收4各参数:根节点,要显示的节点类型,过滤器,是或不是增加实体引用布尔值

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

Tree沃克类型还有叁本性质:currentNode,通过修改此属性还可以更改搜索源点

           
作者此刻写了3个openClassScan参数,解释一下,那个参数是为了然决类似于<div
class = “a
b”></div>那种,因为若是要辅助通过API查询如class:a,那么需求各样节点都认清是还是不是contain那一个class,比较费时间,而自小编觉着很多时候不须求,所以暗中认可自个儿关闭了。

范围(有点难)

DOM2级在Document类型中定义了createRange方法。属于document对象,使用hasFeature或直接检测该办法,可以规定浏览器是还是不是支持范围

注:新创造的限定间接与创设它的文档关联,只好用于当前文档

各类范围由壹个Range实例表示,下列属性提供了当下限定在文档中的消息:

startContainer:包涵限制起源的节点(选区中率先身材节点的父节点)

startOffset:范围在startContainer中起源的偏移量,若startContainer是文本节点,注释节点,CDATA节点,则startOffset就是限制起源此前跳过的字符数量,否则就是限制中率先个子节点的目录

endContainer:包蕴限制紧要的节点(即选区中最终一个节点的父节点)

endOffset:范围在endContainer中终点的偏移量,与startOffset规则一样

commonAncestorContainer:startContainer和endContainer共同祖先节点在文档树地方最深的不胜

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

一,使用DOM范围达成简单采取

动用selecNode和selectNodeContents方法应用限制选用文档一部分,八个点子都收到一个参数: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);

结果

皇家赌场手机版 14

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

调用selectNodeContainer时,startContainer,endContainer,commonAncestorContainer都是传播的节点,也等于<p>成分,startOffset始终等于0,因为范围从给定节点的第叁身材节点初叶,endOffset等于子节点数量,本例中是2

2、使用DOM范围完毕复杂采用(关键)(难度在那边,解决了这些,之后的操作就没啥大标题,须求再研讨讨论)

三,操作DOM范围中的内容

肆,插入DOM范围中的内容

5、折叠DOM范围

6、比较DOM范围

7、复制DOM范围

8、清理DOM范围

           我把每多少个查询如:tp.dom.query(“#aa
input”)分为三种,一种为简便询问(约等于如查询:#aaa),别的一种是错综复杂查询,每一种复杂查询都是由众多大致询问构成的,比如#aaa
input,就可以切成:#aaa和input。

IE8及更早版本中的范围

IE8及更早版本并不援救DOM范围(IE就是那般拽),匡助类似概念文本范围

           所以,在各样查询的最开始,要求将传递的询问格式化,比如#aa
>input那种格式化为:#aa >
input,两个空格变为3个空格,>两边必须有三个空格等。

第27章,错误处理与调节

应用try-catch,throw语句得到一定的错误信息

格式:

try{
     //可能出错的代码
}catch(error){
     //出错时应该怎么处理的代码
}

finally语句是try-catch语句的可选语句,但finally语句一经使用,无论怎么样都会履行。有了finally语句,catch就成了可选的

注:IE7及更早版本有bug:除非有catch语句,否则不履行finally语句,(又来拽一波了)

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

荒谬类型

Error

EvalError

RangeError

ReferenceError

SyntaxError     //语法错误

TypeError        //类型错误

URIError

Error是基类,其余品类都持续自该类,全数错误类型共享同一组属性

伊娃lError在应用eval是抛出,简单说,就是从未把eval当函数用,就抛出荒谬

RangeError在数值高于相应范围时接触

var item = new Array(-20);     //触发
var item = new Array(Number.MAX_VALUE);     //触发

找不到对象,发生ReferenceError

变量保存意外类型,访问不设有的不二法门,都会抛出TypeError

var o = new 10;
alert("name" in true);
Function.prototype.toString.call("name");
//以上都会抛出TypeError

encodeU智跑I,decodeU牧马人I,会抛出ULX570IError,少见,那两货的容错性高

赶上throw操作符,代码立时甘休实施

throw 1234;
throw "hello";
throw true;
throw {name:"js"};
//以上代码都是有效的

还能创制自定义错误新闻:

throw new Error("some message");
throw new SyntaxError("syntax error");
throw new ReferenceError("reference error");

仍可以够创立自定义错误类型:(通过继承Error)

function CustomError(message){
     this.name = "CustomError";
     this.message = message;
}
CustomError.prototype = new Error();
throw new CustomError("my message");

           我认为:#aa
input那种实际上尽管通过document.getElementById查询之后然后查询它的子孙节点中的全体满足tagName为input的因素;而#aaa
>
input这种就是查询它的孩子节点中是不是有那种满足条件的要素。以往全数工艺流程比较简单了,对于一个扑朔迷离查询,首先举行1个粗略询问,然后依据查询的结果集合,进行一遍遍历,对各类节点查询它的男女节点或子孙节点,将具有满足条件的放入到别的七个数组,即便该数组为空,那么直接回到空数组,否则,继续开展下三遍查询(依然查询孩子节点或子孙节点)。

漏洞分外多事件

其他没有通过try-catch处理的错误都会触发window对象的error事件

         
 我以为,就像此2个效果相比不难的query就够了,不必要完结类似于jquery里面的那样繁复的查询,如若要动用它,其实也很简短,因为jquery的询问引擎sizzle已经开源,完全可以将它到场到这些库,而近期toper也是那般做的,要调用sizzle就应用:

大规模错误类型

类型转换错误

数据类型错误

通信错误

tp.use("tp.dom.sizzle",function(sizzle) {});

调节技术

将新闻记录到控制台

将错误新闻记录到当前页面

抛出荒谬

         
感觉JS的包容性真心很头痛啊,就比如在DOM这一道,为了合作,作者都做了非常短日子。当然,DOM这一块儿肯定不止这么一点内容,权且也不写了。

常见IE错误(IE,最难调试js错误的浏览器,难怪那么拽)

操作终止

失效字符

未找到成员

不解运转时不当

语法错误

系统不能找到指定财富

          除了DOM,对变量类型的判断和浏览器的检测也是很重大的。

       
 首先,类型判定,由于JS是弱类型语言,而有时候是亟需看清它的档次的,当然也能够使用typeof
去判断,目前作者是这么做的:

  

tp.type = tp.type || {};
tp.type.isArray = function(ele) {
    return "[object Array]" === Object.prototype.toString.call(ele);
};
tp.type.isFunction = function(ele) {
    return "[object Function]" === Object.prototype.toString.call(ele);
};
tp.type.isObject = function(ele) {
    return ("function" === typeof ele) || !!(ele && "object" === typeof ele);
};
tp.type.isString = function(ele) {
    return "[object String]" === Object.prototype.toString.call(ele);
};
tp.type.isNumber = function(ele) {
    return "[object Number]" === Object.prototype.toString.call(ele) && isFinite(ele);
};
tp.type.isBoolean = function(ele) {
    return "boolean" === typeof ele;
};
tp.type.isElement = function(ele) {
    return ele && ele.nodeType == 1;
};
tp.type.isUndefined = function(ele) {
    return "undefined" === typeof ele;
};

       
作者看了一晃,不一致的库的论断格局不一致等,小编此时使用的是tangram的判断方式。

        然后就是浏览器判定,笔者是这么写的:

(function() {
    var ua = navigator.userAgent;
    tp.browser.isIe = ua.hasString("MSIE") && !ua.hasString("Opera");
    tp.browser.isFirefox = ua.hasString("Firefox");
    tp.browser.isChrome = ua.hasString("Chrome");
    tp.browser.isWebKit = ua.hasString("WebKit");
    tp.browser.isGecko = ua.hasString("Gecko") && !ua.hasString("like Gecko");
    tp.browser.isOpera = ua.hasString("Opera");
    tp.browser.isSafari = ua.hasString("Safari") && !ua.hasString('Chrome');
    tp.browser.isStrict = ("CSS1Compat" === document.compatMode);
})();

     
 当然,还有浏览器版本的判断,暂且就不贴出来了。那里基本思路就是判断navigator.useAgent重临的字符串中,各种浏览器里面的这几个字符串是不雷同的,当然,这些历程相比较恶心,而且有或许后边某一个浏览器会改变它的userAgent,导致整个判定失效,比如IE,听人家说前面新IE要把userAgent搞成firefox,真心搞不懂,那是要逆天啊?

     
 除了那种判断格局,还是能透过判定是还是不是有某三个函数或某一个变量来判断,那种判断格局自己忘记叫什么名字了,反正此前那种叫浏览器嗅探。

     
 除了代码之外,工具也很要紧,另一篇日记介绍JS工具的:

       
对动画片有趣味的童鞋,可以看看自身的近来上学JS的清醒-2,关于动画的。

     
 好啊,貌似又超时了,先就好像此吗,感觉每一次写那种日志都会损耗不可胜数时间。

Leave a Comment.