自定义标签在IE6,组件化的Web王国

2019-11-30 作者:web前端   |   浏览(199)

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

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

原稿出处: 司徒正美   

恐怕今后前端组件化之路都是自定义标签,但那东西早在20年前,JSTL已在搞了。将来Web Component还独有webkit帮助。但叁个构件库,还索要二个新鲜的标志它们是一块的。但是这几个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的文书档案,对照着文书档案,对其调用搞获得底相比较清楚了。

本文由 埃姆杰 翻译。未经许可,防止转发! 葡萄牙共和国语出处:Future Insights。

        今后看来,笔者觉着学习jquery反而使小编走了弯路,用jquery是相比低价,也毫不酌量宽容性难题了,并且调用特轻松尊贵,不过,反而小编对原生js以为更是素不相识了,也引致了背后感到完全离不开jquery了,想去写多个XXX组件,想了豆蔻梢头晃,思路有了,然后写的时候遭逢各个难点,然后就又回到jquery了。

内容提要

接收过多单身组件创设应用程序的主见并不新鲜。Web Component的产出,是双重返忆基于组件的应用程序开荒方式的好机会。大家能够从那几个进程中收益,明白哪些运用现存才具做到指标,何况在现在做出本身的前端Web应用。

         从2018年暑假的时候,作者说了算离开jquery了,jquery是后生可畏把双刃剑,开采的时候是造福,不过,作为一个初行家,作者感到那是特别不利于的。

怎么样是组件?

软件开荒是三个语义丰富(术语平时持续一个意思)的世界。很鲜明,这里的“组件”是三个很泛的叫做,所以有尤为重要指明我们想要表达的,在前端Web应用的语言情形中的意思。

前面一个Web应用中的组件,是指部分规划为通用性的,用来塑造超级大型应用程序的软件,那个组件有多种表现格局。它能够是有UI(顾客分界面)的,也能够是充当“服务”的纯逻辑代码。

因为有视觉上的表现格局,UI组件更便于了解。UI组件轻巧的例子富含开关、输入框和文本域。无论是埃及开罗包状的菜系按键(无论你是还是不是喜欢)、标签页、日历、选项菜单恐怕所见即所得的富文本编辑器则是生龙活虎对一发高级的例证。

提供服务类型的零器件大概会令人难以精晓,那体系型的例子包罗跨浏览器的AJAX扶助,日志记录也许提供某种数据长久化的坚决守住。

基于组件开采,最关键的就是组件能够用来整合任何构件,而富文本编辑器就是个很好的例证。它是由按键、下拉菜单和一些可视化组件等整合。另一个事例是HTML5上的video成分。它雷同含有开关,也还要饱含一个能从摄像数据流渲染内容的因素。

         然后就起来下载JS的E-BOOK,大概是和煦相比较急躁吧,看书真心看不走入,作者大概心仪边看边写代码这种。写了豆蔻梢头段时间,稳步的感到最先先的痛感慢慢回来了,当然,也超过了N多的主题材料。

怎么要创设组件?

既是今后曾经知道组件的乐趣,就看看使用组件的形式创设前端接纳的好处。

        到寒假的时候,决定本人的毕设不利用以往成熟的JS库,反而本人来写二个不圆满的库,那样学习的更加多,当然,也比较费时间。

模块

您或许传闻过 “组件是资质模块”的说教。可以吗,感激它,大家又要分解这里的术语!

您大概会感到“组件”的说法更是适合用来说述UI,而“模块”更符合描述提供劳务的功能逻辑。而对于小编的话,模块和零部件意思相近,都提供协会、聚集和包装,是与有个别功效单位有关的。

        发轫写的感觉真是优伤啊,什么都不懂,所以就去看了看tangram的源码,为什么看tangram呢,其实原因相比较好笑,这个时候校招的时候本人面试百度前端,被刷掉了,那个时候面试官让自家看看它们百度行使的JS库tangram,笔者就想看看它们特别库到底有怎么着了不起的。。。

高内聚

又是一个软件工程的高频词! 咱俩将有关的部分效率团体在同盟,把一切封装起来,而在组件的事例中,就也许是连锁的作用逻辑和静态财富:JavaScript、HTML、CSS以致图像等。那正是大家所说的内聚。

这种做法将让组件更便于保险,而且这么做之后,组件的可信性也将加强。同期,它也能让组件的功能明确,增大组件重用的恐怕。

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

可重用

你看来的现身说法组件,特别是Web Component,更关爱可选取的问题。成效显著,达成清晰,API易于了然。自然就会推动组件复用。通过创设可采纳组件,大家不唯有保持了 D奥迪Q5Y(不要再一次造轮子)规范,还拿走了对应的补益。

这里要提示: 不要过度尝试创设可接收组件。你更应有关爱应用程序上所急需的那三个特定部分。倘使以后相应必要现身,也许零器件的确到了可选用的境地,就花一点至极时间让组件重用。事实上,开辟者都钟爱去创建可选取成效块(库、组件、模块、插件等),做得太早将会让您后来难受不堪。所以,吸收基于组件开垦的此外受益,并且选用不是有所组件都能重用的实际意况。

var tp = tp || {};

可互换

二个效果分明好组件的API能令人自由地转移其里面包车型客车职能落成。若是程序内部的机件是松耦合的,那实在能够用三个零构件轻巧地交替另多个组件,只要依照平等的 API/接口/约定。

只要你选择GoInstant提供的实时间效益应劳动组件,那他们下一周闭馆服务与上述同类的音讯会影响到您。可是,只要提供了同等的多寡同步API,你也能够自动创设利用叁个 FirebaseComponent 组件或然 PubNubComponent 组件。

        这种艺术也是以人为鉴了tangram的写法,选用对象字面量的款型。那样有着toper定义的格局都位居了tp那几个私有空间内了,比如对DOM的操作就投身tp.dom中。

可组合

事情发生前也切磋过,基于组件的结构让组件组合成新组件越发便于。那样的安顿让组件特别注意,也让此外构件中创设和暴光的效用越来越好使用。

无论是给程序加多效果,还是用来构建完整的主次,越发眼花缭乱的效应也能依样葫芦。那便是这种方法的基本点利润。

是还是不是有须求把持有的东西调换来组件,事实上决定于你自个儿。未有任何理由令你的次序由 你自己 的构件组合成你最惊叹的功能 ,乃至 最花哨的功能。而这一个零件又反过来构成任何零零件。倘诺您从这么些点子中拿到了功利,就千方百计地去坚定不移它。不过要留意的是,不要用相符的方式把作业变得复杂,你并无需过分关心怎样让组件重用。而是要关爱呈现程序的机能。

       由于那一个库完全部都以为毕设做的,所以那其间的大多文本皆以为兑现毕设的有些效能而写的。

明日就起来构建组件

在 Caplin Systems 创设基于组件的自有应用程序时,作者动用了几条原则和奉行。这个准绳由 BladeRunnerJS(BRJS) 开源工具集支撑。它被称作”BladeRunnerJS” 是因为大家将顺序功用都封装在称作 Blades 的事物中。Blade是足以在某些应用中收音和录音的效果与利益特色,然而不能够在程序间重用。当功用真的 变得进一层通用的时候,大家将相应的定义移到库文件中,供各种程序间接选举取。特定应用中的组件(blade卡塔尔国和大家前后相继间的通用组件能够应用,大家只要找到最佳满意急需的任何库和框架。

那么,今后哪些库和框架能够帮助大家创设组件呢?

在支配构建利用时应接受何种技能时,只须求探视流行的 TodoMVC 网址就足以观察大批量可供采取的前端库和框架。你或者会以为任何风流倜傥种方案都能用来创设基于组件的应用程序。但是,他们中间的生机勃勃部分方案内置了对组件的支撑。当中比较显赫的是AngularJS、Ember 和 React。

      小编使用的布局是core 组件的艺术,tp.core.js(压缩后为tp.core-min.js),而此外的组件每一个组件一个文本,而组件之间大概存在依据关系,这种正视关系就通过英特尔消除。

构件间是怎么通讯的?

在深远示例在此之前有供给轻巧地关系组件间通讯的主题素材。假设组件之间是“独立”、“模块化”的,他们又是哪些相互通讯的啊?

最显眼的答案就是让组件间相互影响援用并透过她们之间的API交互作用。那样做的标题就在于,这种做法会让组件相互注重。短时间内或者幸亏,后生可畏段时间现在,你在更改程序的时候程序会失控,改善贰个组件就能对另二个构件发生相当大的震慑。决定移除二个不可能推动预期价值组件或然会令你的应用程序结束专门的职业,因为它背后会有数个零器件依赖于它。

那个时候,建设方案是提供松耦合的,让组件之间少之甚少依然大约不明了互相的方案。组件并不直接开立别的零零部件,在他们须求通信的时候,他们经过“接口/约定”也许经过 “服务”。我们在构建BTiggoJS程序时寻思了大多那些方面包车型地铁事物,而且利用 ServiceRegistry 访谈用于组件间通讯的服务依然是Web API如此那般的能源。Angular和Ember接受了服务和依靠于注入缓慢解决那类难题。

      在并未有写那个库此前,纵然是本人使用jquery,每二个JS文件我都以一贯在HTML文件中动用script标签写进去的,而近些日子亟需选拔这种异步模块加载的艺术,假使要运用非宗旨模块,那么供给:

以身作则组件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,下载实现之后,实践回调函数。

Ember

框架与库的争辩齐人有好猎者,总体上看框架是强制你按某种格局做工作,所以它是邪恶的。很显著,Angular是个框架,而Ember的撰稿者,Yehuda Katz和汤姆Dale也很乐意把Ember看作框架。

Ember 有对它称作组件的内建援助。Ember Components背后的理念是尽量的向Web Components看齐,当浏览器补助允许时,就足以很有益地搬迁到Web Components中。

查阅代码演示: 

上边的例子中选拔了 handlebars 做模板,所以成分的定义不是如出风流浪漫辙种语法。

      雷同,在tp.a.js中,也无法使用普通的JS的写法了,而要使用:

React

React 纵然是个新人,不过却生龙活虎度有那四个的维护者。它由Facebook开垦,而且已经到家用于推特(TWT昂科威.US卡塔尔的UI和局地Twitter的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() {

    });
});

自定义成分

我们在地点关怀的是用Angular、Ember和React创设 my-avatar 的事例。恐怕的情形下,那样的措施将以页面上照旧模板上加上的自定义成分表示。Web Component包涵透过自定义成分获得的原生帮助– 相对是Web Component标准的主干组成都部队分。

概念新成分,包含拜会成分生命周期的一些事件举个例子曾几何时创设(createdCallback)、何时加多在DOM树上(attachedCallback)、曾几何时从DOM树上抽离(detachedCallback卡塔尔(英语:State of Qatar),哪天成分属性改造(attributeChangedCallback(attrName, oldVal, newVal))。

自定义成分的叁个注重的有的正是有力量从原始成分扩充,因此拿到原有成分相应的职能。示例中大家增加了 <img>元素 。

最后,我们所写的代码中,自定义成分正在並且趋势去做的正是将复杂的东西抽象化,让客商关心于单个组件发生的价值,从而用来塑造尤其助长的意义。

     define的首先个参数是该构件的名字(须求唯大器晚成,所以本人还是服从命名空间的点子写的),第叁个参数是这一个组件所依赖的组件,第八个参数是回调函数,也便是当信任的零部件下载完结未来,回调实践,而tp.modules.add就足以将以此模块加载到全数库中,那样的话技巧采用tp.use调用。

Shadow DOM

还记得iframe们吧?大家还在采纳它们,是因为他们能确定保证组件和控件的JavaScript和CSS不会潜移默化页面。 Shadow DOM 也能提供那样的护卫,况且未有iframe带来的担任。正式的传教是:

Shadow DOM的打算是在shadow根下掩瞒DOM子树进而提供包装机制。它提供了创立和维持DOM树之间的效应界限,以至给这个树提供相互的效果与利益,进而在DOM树上提供了更加好的意义封装。

      这种措施本人在tangram中从未看出,笔者是看了天猫商城的KISSY之后求学到的,也便是所谓的Intel(异步模块定义)。

HTML导入

小编们长日子早先就足以导入JavaScript和CSS了。 HTML导入功用提供了从别的HTML文书档案中程导弹入和选定HTML文书档案的力量。这种简单性同期表示能够很平价地用有些组件营造另一些零器件。

终极,那样的格式很精美,适合可选取组件,何况能够用你最欢娱的包处通晓决方案件发生表(举例: bower、 npm 或者 Component)。

      临时AMD的完结方式是经过setInterval,不过将在被重构图片 10

模板

大家中的许几个人已经使用像handlebars、mustache可能underscore.js中的模板那样的缓和方案(就疑似我们在上边的Ember示例中用的相符)。Web Component通过 template元素 提供了模版的原生帮助。

原生模板令你能够注脚分类为“隐瞒DOM”不过剖判成HTML的标志片段。他们在页面加载时不曾用项,可是足以在运维时实例化。他们得以 被寻觅到 ,可是在插入活动的DOM树前不会加载任何有关财富。

      小编从前写了风姿罗曼蒂克篇日记来兑现英特尔,当然,成效低下,反正我们看看就可以了

Platform.js

而是,就如每便提到新特色同样,大家不能够显明浏览器是或不是扶持那个特点。

图片 11

以至二〇一六年二月二日,Web Component 的浏览器扶助情状

风流倜傥律,大家也能由此一些美妙的合营代码,发轫采纳一些Web Component所提供的职能。

图片 12

有了宽容库的Web Component援助情形

好音讯是三个最早进的浏览器厂家Google和Mozilla正在全力完善包容库 ,支持大家选取Web Component。

以下示例展现使用platform.js后大家得以什么定义作为img元素扩展的my-avatar元素。最佳的是它能用到原生img成分的富有机能。

翻看代码演示: 

点击 HTML5 Rocks Custom Elements tutorial 以查看创造自定义成分的更加多音信。

注:假使您对platform.js感兴趣,也得以看看 bosonic。

原生技能的支撑目标就是给我们提供对应的创设底蕴。所以Web Component并非库和框架的中期功率信号。

      然后就是事件了,事件是二个相比较恼火的作业,东西非常多,小编把它坐落于了tp.event这么些空间中。

Polymer

Polymer 是演示创设基于原生Web Component作用的一级示例。它提供了选取的编写制定用来创建自定义的Polymer成分,况兼提供了成都百货上千着力的UI组件,令你能够成立和睦的应用程序。

图片 13

上边你能够旁观 my-avatar 成分的轻松创设进度,同期我们也博得了想要的符号。

查看代码演示: 

谷歌正在用力推进Polymer。请查看 Polymer getting started guide 查看更加的多示例。

      首先是加多和移除事件监听器,由于IE和非IE采纳的主意不符合,IE选择attachEvent和detech伊夫nt,非IE选取addEventListener和removeEventListener,何况IE只扶植冒泡(从近期因素冒泡到根成分),而非IE协助冒泡和破获(从根成分捕获到近日因素)。最早阶作者是这么做的:

X-Tag和Brick

Mozilla开垦了友好的自定义元素宽容库,叫做 X-Tag。X-Tag是一个为启用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;
        }
};

总结

利用基于组件的结构塑造应用程序有无数功利,你能从现成的框架中学到,也能在构建前端Web应用程序时从引入的Web Component中上学到。

这场组件化Web帝国的旅程,让大家在面对框架和工具的选项时模棱两可不决。可是,Web Component会是终极的点灯!

Web Component会提供塑造应用程序的原生统后生可畏的措施。现存的框架很有超大希望会转而使用Web Component或许注脚怎样与它一起使用。Ember的计策是让迁移到Web Component尤其有助于,而Facebook的React则是自己要作为模范遵循规则整合的好例子,已经有叁个 ReactiveElements 演示它了。因为Angular和Polymer都是谷歌的花色,他们很有望会走到手拉手。

     也正是在一个函数内部去推断是还是不是是IE,然后相应的试行相应的函数,但是如此,要是加上的事件监听器超级多,每一趟都if什么的,小编个人认为十分不佳,所以笔者前边增添了一个增加援救函数:

外界财富(阿拉伯语)

  • 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];
        };
    }

           这样,整个推断只须求实践叁回,前面调用的时候只须要动用_add伊夫ntListener就能够,当然,由于应用了闭包,tp.event命名空间之外是不足访谈那多少个函数的。

           那那样,tp.event.on就变得极度轻易了:

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

          并且这么还会有一个益处,在此以前的艺术只好利用冒泡格局,但未来,能够行使捕获,当然,只好非IE技能动用,那样在背后使用事件代理一些非冒泡的事件的时候特别有用,比方blur和focus事件。

           除了事件监听器,还必要事件风云的丰硕,删除等,也等于add,fire,remove等,这里就不说了。

          在接纳事件代理的时候,我们平常要拿到到事件的靶子成分,而IE和非IE又是分裂等的,所以须要独自写八个函数:

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

          常用的职能自然如故阻止事件冒泡以致阻碍暗中认可事件的发生,十分不满,IE和非IE管理方式还是不平等的,比方阻止冒泡IE采用的是cancelBubble,而任何浏览器接受的是stopPropagation,所以照旧须求写:

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;
        }
    };

         事件那四头其实自身做了N多东西,可是出于讲不完,所以暂时不说了。

        注意一下哟,由于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  ) {

   }
}

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

var arr = new Array(),
    i;

          事件随后,当然正是DOM了,认为各样库在此个上边都做了相当多办事。

         首先是ready的论断,关于那个能够看本人别的生机勃勃篇日记:

         这里笔者入眼讲一下tp.dom.query,也正是查询怎么办的,首先寻访常用的询问有:#aa,.aa,input。

         #aa这种比较容易,因为JS提供了API,也便是document.getElementById;input这种也相比好搞,因为JS有document.getElementsByTagName;可是.aa这种措施就相比较纠缠了,因为JS没有提供API,好在,在部分浏览器中恐怕提供了API:document.getElementsByClassName,而那二个还未提供那个API的就比较喜剧了,只可以遍历全部节点,也正是应用document.getElementsByTagName(*):

          小编那时候写了多少个增加援救函数:

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;
            };
        }

            作者此刻写了一个openClassScan参数,解释一下,那些参数是为了化解相通于<div class = "a b"></div>这种,因为要是要援救通过API查询如class:a,那么须求各样节点都认清是不是contain这些class,比较费时间,而自己觉着超多时候无需,所以私下认可自个儿关闭了。

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

           作者把每二个查询如:tp.dom.query("#aa input"卡塔尔(قطر‎分为三种,风姿浪漫种为简易询问(也正是如查询:#aaa),此外意气风发种是眼花缭乱查询,种种复杂查询都是由众多大约询问构成的,比方#aaa input,就能够切成:#aaa和input。

           所以,在各样查询的最起头,必要将传递的查询格式化,比如#aa >input这种格式化为:#aa > input,多个空格变为1个空格,>两边必得有三个空格等。

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

           我认为:#aa input这种实际上正是经过document.getElementById查询今后然后查询它的子孙节点中的全部知足tagName为input的成分;而#aaa > input这种正是查询它的子女节点中是还是不是有这种满意条件的要素。以往全部流程比较轻易了,对于三个良莠不齐查询,首先进行一个简易询问,然后根据查询的结果会集,举行三回遍历,对每一种节点查询它的儿女节点或子孙节点,将富有满意条件的归入到此外叁个数组,假诺该数组为空,那么直接回到空数组,不然,继续实行下二次查询(依旧查询孩子节点或子孙节点)。

           作者认为,就好像此叁个功力比较容易的query就够了,不必要达成相符于jquery里面的这么繁复的询问,要是要接收它,其实也超级粗略,因为jquery的询问引擎sizzle已经开源,完全能够将它加入到那么些库,而昨日toper也是那般做的,要调用sizzle就选择:

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

          感到JS的宽容性真心很咳嗽啊,就比如在DOM那后生可畏道,为了合作,小编都做了十分短日子。当然,DOM这一块儿无可反对不仅如此一点剧情,方今也不写了。

          除了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,关于动漫的。

       好吧,貌似又超时了,先就像是此啊,认为每一回写这种日志都会花销不知凡几时间。

本文由www.bifa365365.com发布于web前端,转载请注明出处:自定义标签在IE6,组件化的Web王国

关键词: www.bifa3653