学习笔记11,最近学习JS的感悟

学习笔记11,最近学习JS的感悟

自定义标签在IE陆-八的窘况

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

原稿出处:
司徒正美   

恐怕今后前端组件化之路都以自定义标签,但那东西早在20年前,JSTL已在搞了。以后Web
Component还唯有webkit辅助。但3个零部件库,还须求二个出奇的标识它们是1块的。可是那个XML已经帮大家解决了,使用scopeName,如”<xxx:dialog>”。在自笔者接二连三往下想怎么处理怎样为那些标签绑定数据,与其他零件通讯,管理生命周期,等等大事此前,小编还有多个只可以面对的题材,就是何许兼容IE陆-8!

譬如说以下二个页面:

图片 1

在chrome, firefox, IE1一, IE1一的IE6兼容格局分别如下:

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

大家会发现IE6下实际是多出过多标签,它是把闭标签也化为3个独门的因新秋点

图片 6

以此AA:DIV标签被开膛破肚,里面子节点全体暴出来,成为其兄弟节点了。由此想包容它,就要费点劲。有个三个状态必要思考,一是用户已经将它写在页面上,意况同上;贰是用户是将它座落字符串模版中,那么些用正则化解。但是正则若是碰撞复杂的属性名,依旧会晕掉。由此小编恐怕打算动用原生的HTML
parser。换言之,字符串,小编还是会将它成为节点。这么办呢?!作者想了很多措施,后来仍旧选取VML的命名空间法化解!

大家将上边的页面改复杂点,再看看效果!

图片 7
图片 8

能够见到其套嵌关系今后完全正确,并且标签名不会大写化,也不会扭转多余节点!

好了,我们再判定一下是还是不是为自定义标签,恐怕纯粹地说,那些节点是还是不是我们组件库中定义的自定义标签。某个情况下,二个页面能够存在多套组件库,包含avalon的,ploymer的,或许是平素用Web
Component写的。

avalon的组件库将动用命名空间,那样就好界别开。在IE六-九中,判定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

     
 还记得自身大2的时候初叶接触JS,那个时候从教室借了N多的书本,然后边看边用editplus写,然后蒙受难题,各个DEBUG,在做项指标时候,各类兼容性难点,真是优伤啊。由于品种供给尽快写完,所以就开端接触了jquery,依旧从教室抱了几本书,然后下载了jquery源码,然后面看书籍边写代码,看了几章之后,觉得貌似简单,然后就从网上下载了jquery的文档,对照着文书档案,对其调用搞获得底比较清楚了。

第11章, DOM扩展

       
未来总的来说,作者认为学习jquery反而使笔者走了弯路,用jquery是对比便利,也绝不思考包容性难题了,而且调用格外不难优雅,不过,反而笔者对原生js感觉特别素不相识了,也促成了后面感觉完全离不开jquery了,想去写四个XXX组件,想了弹指间,思路有了,然后写的时候碰着各类难点,然后就又回去jquery了。

选择符 API

Selector API
Level1
中央措施querySelector 、querySelectorAll,包容的浏览器能够利用 Document,Element 实例调用它们,帮助浏览器:IE捌+,Firefox三.五+,Safari三.一+,chrome,Opera十+

       
 从2018年暑假的时候,小编主宰离开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”);

       
 然后就起来下载JS的电子书,恐怕是温馨相比较躁动吧,看书真心看不进入,笔者大概喜欢边看边写代码那种。写了1段时间,慢慢的觉得最初始的感觉逐步回来了,当然,也碰着了N多的标题。

querySelectorAll方法

与querySelector接收壹样的参数,可是回到的是贰个NodeList实例,具体点即是,再次回到的值实际上是富含全部属性和方式的 NodeList。

与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

注:到201壹年年中还未有浏览器辅助此办法,但是,IE玖+通过msMatchesSelector,Firefox三.陆+通过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")){
     //操作
}

       
初阶写的感到真是痛心啊,什么都不懂,所以就去看了看tangram的源码,为什么看tangram呢,其实原因相比搞笑,当时校招的时候笔者面试百度前端,被刷掉了,当时面试官让自身看看它们百度使用的JS库tangram,作者就想看看它们卓殊库到底有如何惊天动地的。。。

要素遍历

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

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

firstElementChild:firstChild元素版

lastElementChild:lastChild元素版

previousElementSibling:previousSibling元素版

nextElementSibling:nextSibling元素版

采纳上述因素得以不必担心空白文本节点

支撑Element Traversal规范的浏览器IE玖+,Firefox3.伍+,Safari四+,Chrome和Opera十+

       
写那些库,首先使用了命名空间,笔者相比欣赏toper,所以小编第一定义了一个变量:

HTML5

H五新增了诸多API,致力于简化CSS类的用法

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的不二等秘书诀同样的性质难题

帮忙的浏览器IE玖+,Safari三.一+,Firefox3+,Chrome,Opera玖.五+

       
这种方式也是以史为鉴了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方法,鲜明文书档案是不是收获主旨

达成这七个属性浏览器IE肆+,Firefox三+,Safari四+,Chrome,Opera八+

     
小编使用的组织是core+组件的主意,tp.core.js(压缩后为tp.core-min.js),而别的的机件各个组件贰个文本,而组件之间恐怕存在依靠关系,那种依赖关系就透过AMD化解。

H5扩展了HTMLDocument

     
在平素不写那一个库以前,固然是自身利用jquery,每一个JS文件小编都以一直在HTML文件中央银行使script标签写进去的,而前日急需使用那种异步模块加载的法门,就算要利用非主题模块,那么供给:

1、readyState属性

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

支持的浏览器IE四+,Firefox三.陆+,Safari,Chrome,Opera玖+

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

})

二、包容方式

     
使用use方式,它会自行去下载tp.a.js和tp.b.js,下载完毕之后,执行回调函数。

3、head属性

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

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

字符集属性

H五新增charset属性,表示文书档案实际行使字符集,可更改,帮助浏览器IE,Safari,Chrome,Opera。Firefox援救Characterset

defaultCharset属性,表示依照暗许浏览器和操作系统设置,分明用啥字符集,协助浏览器IE,Safari,Chrome

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

 

插入标记

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

    });
});

1、innerHTML属性

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

写格局,依据钦定值创立DOM树,然后用那个DOM树替换原先全数子节点

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

注:限制:在当先四分之二浏览器中通过此属性插入<script>成分并不会实施个中的本子,IE八及更早版本能够,条件还挺多

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

   
 define的率先个参数是该器件的名字(供给唯1,所以小编要么服从命名空间的法门写的),第3个参数是其1组件所正视的组件,第多个参数是回调函数,也正是当信赖的零部件下载完毕之后,回调执行,而tp.modules.add就能够将这一个模块加载到方方面面库中,那样的话才能应用tp.use调用。

2、outerHTML属性

读格局,再次回到与调用元素的全体子节点对应的HTML标记

写形式,依照钦点值创立DOM树,然后用这么些DOM树替换原先成分

支撑的浏览器IE四+,Safari四+,Chrome,Opera八+。Firefox七及此前版本都不帮忙

     
那种艺术自个儿在tangram中绝非看到,小编是看了天猫商城的KISSY之后学习到的,也正是所谓的英特尔(异步模块定义)。

3、insertAdjacentHTML方法

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

“beforebegin”,在此时此刻元素在此以前插入紧邻的同辈成分

“afterbegin”,在当前因素插入二个新的子成分或在首先个子成分以前插入新的子成分

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

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

     
临时英特尔的落到实处际情形势是因此setInterval,不过即将被重构图片 10

4、内部存款和储蓄器品质难点

行使上述的措施恐怕引致浏览器内存占用难题。调用方法是,最佳手工业删除被交流成分的拥有事件处理程序

注:尽量减弱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,Firefox玖+,Chrome,Opera。

DOM Level 3compareDocumentPosition方法也可以明确节点间涉及,扶助浏览器IE九+,Safari,Firefox,Chrome,Opera⑨.5+。再次来到用于表示多少个节点间的关联的位掩码

掩码

节点关系

1

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

2

居前

4

居后

8

包含

16

被包含

     
笔者在此以前写了一篇日记来贯彻速龙,当然,效能低下,反正我们看看就行了

铺排文本

从不纳入H5规范的性情

     
然后便是事件了,事件是贰个比较恼火的事务,东西相比多,小编把它置身了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+,Safari三+,Chrome,Opera8+。Firefox不支持,但支撑类似属性textContent属性,textContent是DOM
Level 三规定的四天性质,IE玖+,Safari3+,Chrome,Opera10+也协理textContent

     
首先是增进和移除事件监听器,由于IE和非IE选用的法子不雷同,IE接纳attach伊夫nt和detech伊芙nt,非IE选择add伊夫ntListener和remove伊芙ntListener,而且IE只协助冒泡(从此时此刻成分冒泡到根成分),而非IE帮助冒泡和破获(从根元素捕获到近期因素)。最开始自作者是这么做的:

2、outerText

除开成效范围扩张到了含蓄调用它的节点之外,outerText与innerText基本雷同

发表评论

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

网站地图xml地图