澳门新萄京:自定义标签在IE6,方今上学JS的觉悟
分类:澳门新萄京最大平台

自定义标签在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。

本文由 埃姆杰 翻译。未经许可,制止转载! 爱尔兰语出处:Future Insights。

内容提要

利用过多单独组件创设应用程序的主张并不特殊。Web Component的产出,是重新回忆基于组件的应用程序开垦方式的好时机。咱们得以从那几个进程中收益,了然如何使用现成技巧形成目的,并且在现在做出自个儿的前端Web应用。  

        未来总的来讲,小编觉着学习jquery反而使本人走了弯路,用jquery是相比较有利,也并不是怀恋包容性难题了,而且调用很轻便优雅,不过,反而小编对原生js感到更是面生了,也致使了后头认为完全离不开jquery了,想去写一个XXX组件,想了一晃,思路有了,然后写的时候碰到各样难点,然后就又重临jquery了。

内容提要

行使过多单身组件创设应用程序的主张并不新鲜。Web Component的产出,是双重回忆基于组件的应用程序开垦方式的好机会。大家能够从那个进程中收益,精晓什么运用现成手艺成功目标,並且在今后做出自个儿的前端Web应用。

内容提要

应用过多独自己建构件营造应用程序的主张并不新鲜。Web Component的产出,是重新回忆基于组件的应用程序开采情势的好时机。大家能够从这么些进度中受益,驾驭什么接纳现成本事产生目标,何况在未来做出本人的前端Web应用。

怎样是组件?

软件开拓是一个语义丰裕(术语日常持续两个乐趣)的园地。很肯定,这里的“组件”是三个很泛的称为,所以有不可缺少指明大家想要表明的,在前端Web应用的语言意况中的意思。

前者Web应用中的组件,是指部分安排为通用性的,用来创设相当的大型应用程序的软件,那么些零部件有两种表现格局。它能够是有UI(顾客分界面)的,也得以是作为 “服务”的纯逻辑代码。

因为有视觉上的表现格局,UI组件更易于了然。UI组件简单的事例富含按键、输入框和文本域。不论是秘Luli马包状的菜系开关(无论你是或不是喜欢)、标签页、日历、选项菜单或然所见即所得的富文本编辑器则是某个一发高等的例子。

提供服务类型的零件可能会令人难以精通,那体系型的事例富含跨浏览器的AJAX补助,日志记录大概提供某种数据长久化的机能。

依据组件开垦,最根本的正是组件能够用来组成任何零件,而富文本编辑器正是个很好的事例。它是由开关、下拉菜单和一些可视化组件等结合。另一个例子是HTML5上的video成分。它一律带有开关,也还要包括三个能从录制数据流渲染内容的因素。

         从今年暑假的时候,作者决定离开jquery了,jquery是一把双刃剑,开拓的时候是利于,不过,作为三个初大方,小编以为那是特别不利的。

何以是组件?

软件开垦是二个语义丰盛(术语平日持续一个情趣)的领域。很显著,这里的“组件”是四个很泛的称呼,所以有须要指明我们想要表明的,在前面二个Web应用的言语意况中的意思。

前端Web应用中的组件,是指部分企划为通用性的,用来营造比较大型应用程序的软件,那一个组件有二种表现情势。它能够是有UI(客户分界面)的,也足以是用作 “服务”的纯逻辑代码。

因为有视觉上的表现方式,UI组件更易于驾驭。UI组件简单的例证满含按键、输入框和文本域。不论是赫尔辛基包状的菜单开关(无论你是还是不是喜欢)、标签页、日历、选项菜单恐怕所见即所得的富文本编辑器则是一些更高端的例证。

提供服务类型的零部件也许会令人难以知晓,那体系型的例子包涵跨浏览器的AJAX帮助,日志记录只怕提供某种数据长久化的效果。

基于组件开辟,最重视的正是组件能够用来整合任何零件,而富文本编辑器正是个很好的例子。它是由按键、下拉菜单和局地可视化组件等组成。另二个例证是HTML5上的video成分。它一样包括开关,也还要含有一个能从摄像数据流渲染内容的要素。

什么样是组件?

软件开采是四个语义丰盛(术语经常持续三个意味)的园地。很显然,这里的“组件”是三个很泛的称之为,所以有不可或缺指明大家想要表明的,在前端Web应用的言语遭遇中的意思。

前者Web应用中的组件,是指部分设计为通用性的,用来创设相当大型应用程序的软件,那么些零部件有二种表现情势。它能够是有UI(客户分界面)的,也得以是作为 “服务”的纯逻辑代码。

因为有视觉上的表现情势,UI组件更易于理解。UI组件轻巧的事例富含开关、输入框和文本域。不论是希腊雅典包状的菜系开关(无论你是或不是喜欢)、标签页、日历、选项菜单只怕所见即所得的富文本编辑器则是部分进一步高等的例子。

提供服务类型的机件大概会令人难以精通,那种类型的例证包蕴跨浏览器的AJAX协助,日志记录只怕提供某种数据持久化的效应。

依据组件开拓,最主要的正是组件能够用来构成任何零件,而富文本编辑器正是个很好的例证。它是由按键、下拉菜单和局地可视化组件等构成。另二个例子是HTML5上的video成分。它同样包罗开关,也还要包蕴三个能从摄像数据流渲染内容的因素。

怎么要营造组件?

既然如此现在早已精通组件的乐趣,就看看使用组件的点子创设前端选拔的补益。

         然后就从头下载JS的电子书,大概是团结相比较躁动吧,看书真心看不进来,我要么喜欢边看边写代码这种。写了一段时间,慢慢的以为最初叶的痛感逐步回来了,当然,也遇到了N多的标题。

怎么要构建组件?

既是将来已经知道组件的情趣,就看看使用组件的不二等秘书籍创设前端接纳的益处。

缘何要营造组件?

既是未来曾经了然组件的乐趣,就看看使用组件的诀要创设前端采纳的功利。

模块

你或者听大人说过 “组件是后天模块”的布道。好啊,谢谢它,大家又要解释这里的术语!

您只怕会以为“组件”的说教更为符合用来描述UI,而“模块”更相符描述提供劳动的功效逻辑。而对此自己的话,模块和组件意思周边,都提供组织、聚集和打包,是与某些功效单位相关的。

        到寒假的时候,决定自个儿的毕设不选用以后成熟的JS库,反而自个儿来写三个不完善的库,那样学习的越多,当然,也相比较费时间。

模块

你大概听他们说过 “组件是天然模块”的说教。好呢,感激它,我们又要表达这里的术语!

你大概会以为“组件”的说法更为适合用来陈述UI,而“模块”更符合描述提供服务的意义逻辑。而对此笔者来讲,模块和组件意思周围,都提供团体、集中和包装,是与有个别意义单位有关的。

模块

你恐怕据他们说过 “组件是天然模块”的传教。好啊,感激它,大家又要讲明这里的术语!

你只怕会感到“组件”的传道更为符合用来陈说UI,而“模块”更切合描述提供服务的法力逻辑。而对此笔者来说,模块和零部件意思相近,都提供团体、聚焦和包裹,是与某些意义单位有关的。

高内聚

又是叁个软件工程的高频词! 大家将有关的一些功用公司在同步,把一切封装起来,而在组件的事例中,就或然是不非亲非故系的效果逻辑和静态能源:JavaScript、HTML、CSS以及图像等。那正是大家所说的内聚。

这种做法将让组件更易于保证,而且这么做之后,组件的可信性也将提升。同期,它也能让组件的功用鲜明,增大组件重用的恐怕。

        起头写的感觉真是痛心啊,什么都不懂,所以就去看了看tangram的源码,为何看tangram呢,其实原因对比好笑,那时候校招的时候作者面试百度前端,被刷掉了,那时面试官让自身看看它们百度应用的JS库tangram,笔者就想看看它们特别库到底有何样了不起的。。。

高内聚

又是贰个软件工程的高频词! 我们将相关的有的功力团体在一道,把全部封装起来,而在组件的例子中,就大概是不毫无干系系的效果与利益逻辑和静态财富:JavaScript、HTML、CSS以及图像等。那便是大家所说的内聚。

这种做法将让组件更便于有限补助,并且这么做之后,组件的可相信性也将进步。同不常间,它也能让组件的职能明显,增大组件重用的只怕。

高内聚

又是一个软件工程的高频词! 我们将有关的一部分职能公司在协同,把一切封装起来,而在组件的例证中,就恐怕是城门失火的机能逻辑和静态财富:JavaScript、HTML、CSS以及图像等。这就是大家所说的内聚。

这种做法将让组件更便于有限支撑,何况这么做之后,组件的可相信性也将巩固。同时,它也能让组件的功力料定,增大组件重用的可能性。

可重用

你看见的身体力行组件,特别是Web Component,更关怀可采取的主题素材。成效鲜明,达成清晰,API易于明白。自然就会有利于组件复用。通过创设可选拔组件,我们不光保持了 D奥迪Q3Y(不要再一次造轮子)原则,还获得了相应的利益。

此地要唤醒: 不要过分尝试创设可采取组件。你更应当关怀应用程序上所须求的这多少个特定部分。假如之后相应须求应时而生,可能零部件的确到了可选择的境界,就花一点额外时间让组件重用。事实上,开垦者都欢愉去成立可采取效用块(库、组件、模块、插件等),做得太早将会让您后来难熬不堪。所以,摄取基于组件开拓的别的利润,况且接受不是负有组件都能重用的事实。

        写那一个库,首先采用了命名空间,笔者比较喜欢toper,所以自身首先定义了贰个变量:

可重用

你看见的亲自过问组件,极度是Web Component,更保护可选择的主题素材。功用明显,达成清晰,API易于驾驭。自然就能够有利于组件复用。通过营造可采取组件,大家不光保证了 DENVISIONY(不要再一次造轮子)法则,还得到了相应的补益。

此处要唤醒: 不要过度尝试营造可选取组件。你更应有关爱应用程序上所必要的这一个特定部分。假使之后相应需求应运而生,只怕零部件的确到了可选取的程度,就花一点外加时间让组件重用。事实上,开辟者都爱好去创制可选取功能块(库、组件、模块、插件等),做得过早将会让您后来悲哀不堪。所以,摄取基于组件开拓的其余受益,何况接受不是有所组件都能重用的真情。

可重用

您看见的亲自过问组件,特别是Web Component,更爱惜可选用的主题材料。作用肯定,达成清晰,API易于明白。自然就能够拉动组件复用。通过营造可选用组件,大家不光保证了 DHighlanderY(不要再一次造轮子)标准,还拿走了对应的收益。

此地要晋升: 不要过于尝试创设可接纳组件。你更应有关注应用程序上所急需的那一个特定部分。假若以后相应须要现身,也许零部件的确到了可选用的境界,就花一点附加时间让组件重用。事实上,开采者都欢快去创建可选取功用块(库、组件、模块、插件等),做得太早将会让您后来哀痛不堪。所以,摄取基于组件开辟的其余利润,而且接受不是具有组件都能重用的真实情状。

可互换

二个功力明确好组件的API能令人自由地转移其里面包车型大巴效果与利益达成。倘诺程序内部的零件是松耦合的,那实在能够用多个组件轻巧地更迭另一个零部件,只要依据一样的 API/接口/约定。

假令你选取GoInstant提供的实时效劳劳务组件,那她们下一周闭馆服务那样的消息会影响到你。可是,只要提供了一样的数码同步API,你也足以自行营造利用叁个 FirebaseComponent 组件也许 PubNubComponent 组件。

var tp = tp || {};

可互换

一个效果与利益明确好组件的API能令人自由地转移其内部的功用完结。假诺程序内部的零件是松耦合的,那其实能够用贰个组件轻松地更迭另四个零部件,只要依据同样的 API/接口/约定。

假若你选用GoInstant提供的实时坚守服务组件,那她们下周关门服务那般的音信会影响到你。不过,只要提供了长期以来的数码同步API,你也足以自行创设利用二个 FirebaseComponent 组件恐怕 PubNubComponent 组件。

可互换

二个功能鲜明好组件的API能令人随便地转移其里面包车型大巴作用实现。若是程序内部的机件是松耦合的,这实在可以用叁个组件轻巧地更迭另二个零部件,只要遵从大同小异的 API/接口/约定。

假如你利用GoInstant提供的实时作用服务组件,那他们下周关门服务那般的音讯会影响到你。然则,只要提供了同样的数额同步API,你也足以自行创设利用七个 FirebaseComponent 组件只怕 PubNubComponent 组件。

可组合

从前也探究过,基于组件的架构让组件组合成新组件尤其便于。那样的规划让组件尤其留意,也让别的零件中营造和暴露的功能更加好利用。

不管是给程序增加效果,依旧用来制作完整的次第,尤其目迷五色的职能也能邯郸学步。那正是这种情势的最首要利润。

是否有必不可缺把所有事物资调剂换来组件,事实上决计于你自身。未有任何理由令你的次序由 你自己澳门新萄京:自定义标签在IE6,方今上学JS的觉悟。 的组件组合成你最惊叹的功能 ,乃至 最花哨的功能。而那些零部件又反过来构成任何零件。假诺您从那几个点子中赢得了好处,就主张地去坚韧不拔它。然则要专注的是,不要用同一的法子把事情变得复杂,你并无需过分关怀怎样让组件重用。而是要爱惜突显程序的功能。

        这种措施也是以史为鉴了tangram的写法,采取对象字面量的款型。这样具备toper定义的秘诀都位于了tp这些私有空间内了,比方对DOM的操作就位于tp.dom中。

可组合

事先也讨论过,基于组件的架构让组件组合成新组件特别便于。那样的设计让组件越来越小心,也让其余零件中营造和揭露的效应越来越好应用。

随意是给程序加多效果,依旧用来创制完整的次序,特别目不暇接的效用也能如法泡制。那就是这种方式的根本收益。

是或不是有供给把具有的事物调换来组件,事实上决定于你协和。未有任何理由令你的主次由 你自己 的零部件组合成你最惊叹的功能 ,乃至 最花哨的功能。而那一个组件又反过来构成任何零件。借使您从那么些主意中获取了好处,就想方设法地去百折不挠它。但是要留神的是,不要用平等的格局把事情变得复杂,你并无需过分关怀如何让组件重用。而是要爱惜展现程序的作用。

可组合

事先也商量过,基于组件的架构让组件组合成新组件尤其轻巧。那样的安顿性让组件越发留意,也让其他零件中营造和暴光的机能更加好应用。

澳门新萄京:自定义标签在IE6,方今上学JS的觉悟。无论是给程序增加效果,依然用来塑造完整的顺序,特别复杂的效劳也能萧规曹随。那就是这种方法的根本收益。

是否有必不可缺把具备的东西调换来组件,事实上决意于你本人。未有任何理由让您的程序由 你自己 的零件组合成你最惊叹的功能 ,乃至 最花哨的功能。而那一个零件又扭曲构成任何零件。倘令你从这几个艺术中拿走了功利,就想方设法地去坚定不移它。不过要专一的是,不要用同样的章程把业务变得复杂,你并无需过分关怀怎么样让组件重用。而是要关切呈现程序的效用。

当今就从头营造组件

在 Caplin Systems 创设基于组件的自有应用程序时,作者利用了几条原则和施行。那几个标准由 BladeRunnerJS(BRJS) 开源工具集支撑。它被称作”BladeRunnerJS” 是因为我们将次第功效都封装在称作 Blades 的事物中。Blade是足以在某些应用中收音和录音的作用特色,不过不得以在前后相继间重用。当功效真的 变得进一步通用的时候,我们将相应的定义移到库文件中,供各种程序直接纳。特定应用中的组件(blade)和大家先后间的通用组件能够应用,大家要是找到最佳满意急需的任何库和框架。

那正是说,以往怎样库和框架能够协理我们创设组件呢?

在调控创设利用时应使用何种才干时,只须要探视流行的 TodoMVC 网址就足以看出巨量可供选择的前端库和框架。你大概会以为任何一种方案都能用来营造基于组件的应用程序。不过,他们个中的一部分方案内置了对组件的支撑。当中相比闻名的是AngularJS、Ember 和 React。

       由于这一个库完全皆认为毕设做的,所以这当中的大队人马文件皆以为兑现毕设的一点职能而写的。

将来就起来构建组件

在 Caplin Systems 营造基于组件的自有应用程序时,小编利用了几条法规和执行。这个原则由 BladeRunnerJS(BRJS) 开源工具集支撑。它被称作”BladeRunnerJS” 是因为大家将次第成效都封装在称作 Blades 的事物中。Blade是足以在有些应用中援引的功力特色,不过不能够在程序间重用。当功能真的 变得更其通用的时候,大家将相应的定义移到库文件中,供种种程序间接纳。特定应用中的组件(blade)和我们前后相继间的通用组件可以运用,大家即便找到最佳满意要求的任何库和框架。

那正是说,未来哪些库和框架能够协理大家创设组件呢?

在支配营造利用时应选用何种能力时,只须要探视流行的 TodoMVC 网址就足以看出多量可供选用的前端库和框架。你可能会感到任何一种方案都能用来创设基于组件的应用程序。但是,他们内部的一对方案内置了对组件的支撑。在这之中对比盛名的是AngularJS、Ember 和 React。

今昔就开头营造组件

在 Caplin Systems 创设基于组件的自有应用程序时,小编使用了几条法规和实施。这么些条件由 BladeRunnerJS(BRJS) 开源工具集支撑。它被称作”BladeRunnerJS” 是因为大家将前后相继成效都封装在称作 Blades 的事物中。Blade是能够在有些应用中选定的作用特色,可是无法在程序间重用。当作用真的 变得进一步通用的时候,我们将相应的定义移到库文件中,供各个程序间采纳。特定应用中的组件(blade)和大家前后相继间的通用组件能够使用,大家尽管找到最棒满意须求的任何库和框架。

那便是说,以后怎么库和框架能够支持大家塑造组件呢?

在决定营造利用时应运用何种本事时,只须求探视流行的 TodoMVC 网址就能够看来多量可供选拔的前端库和框架。你也许会以为任何一种方案都能用来营造基于组件的应用程序。可是,他们之中的局地方案内置了对组件的扶助。其中相比较显赫的是AngularJS、Ember 和 React。

零件间是什么样通讯的?

在深入示例在此以前有需要轻便地关系组件间通讯的标题。固然组件之间是“独立”、“模块化”的,他们又是什么相互通讯的啊?

最精晓的答案正是让组件间互动援用并透过他们中间的API交互。那样做的难点就在于,这种做法会让组件互相注重。长时间内只怕好在,一段时间今后,你在更改程序的时候程序会失控,修改多少个组件就能够对另贰个零部件爆发巨大的震慑。决定移除二个不可能推动预期价值组件或许会令你的应用程序甘休职业,因为它背后会有数个零部件重视于它。

此刻,实施方案是提供松耦合的,让组件之间非常少可能大概不精通相互的方案。组件并不直接开立别的零件,在他们供给通讯的时候,他们通过“接口/约定”或许经过 “服务”。大家在创设BEvoqueJS程序时思考了重重这一个地点的东西,何况应用 ServiceRegistry 访谈用于组件间通信的劳动也许是Web API如此的能源。Angular和Ember选拔了劳动和借助于注入消除那类难题。

      作者利用的组织是core 组件的章程,tp.core.js(压缩后为tp.core-min.js),而别的的机件每一个组件叁个文件,而组件之间或然存在依附关系,这种信任关系就透过AMD消除。

组件间是怎么着通讯的?

在深入示例在此之前有不可缺少轻巧地关系组件间通讯的主题材料。假诺组件之间是“独立”、“模块化”的,他们又是什么样相互通讯的啊?

最显眼的答案正是让组件间互动引用并透过她们之间的API交互。那样做的题目就在于,这种做法会让组件相互信任。长时间内或者辛亏,一段时间今后,你在退换程序的时候程序会失控,修改一个组件就能够对另三个组件发生不小的震慑。决定移除二个不可能拉动预期价值组件也许会令你的应用程序截至工作,因为它背后会有数个零部件正视于它。

那会儿,建设方案是提供松耦合的,让组件之间少之又少依然差不离不清楚互相的方案。组件并不直接开立别的零件,在她们必要通讯的时候,他们通过“接口/约定”或然经过 “服务”。大家在创设B途睿欧JS程序时记挂了成都百货上千那个地方的东西,何况采纳 ServiceRegistry 访谈用于组件间通信的劳动也许是Web API那样的财富。Angular和Ember接纳了劳动和信任注入消除那类难点。

零件间是怎样通讯的?

在深刻示例此前有须求轻便地关乎组件间通讯的难题。假若组件之间是“独立”、“模块化”的,他们又是何等相互通讯的呢?

最鲜明的答案便是让组件间互为引用并通过他们中间的API交互。那样做的主题素材就在于,这种做法会让组件相互正视。长时间内或然幸好,一段时间今后,你在改换程序的时候程序会失控,修改二个零部件就能对另贰个零件产生巨大的熏陶。决定移除多个不能带来预期价值组件可能会令你的应用程序结束工作,因为它背后会有数个零部件重视于它。

那时候,建设方案是提供松耦合的,让组件之间少之又少依然大致不晓得相互的方案。组件并不直接开立别的零件,在她们必要通信的时候,他们通过“接口/约定”大概经过 “服务”。大家在创设B奥迪Q5JS程序时思虑了过多那么些地点的东西,何况应用 ServiceRegistry 访谈用于组件间通信的劳务恐怕是Web API如此的能源。Angular和Ember选拔了劳动和依赖注入化解那类难点。

演示组件my-avatar

为了显得我们怎么着用那一个库和框架创设最宗旨的零部件,大家成立了一个带有UI,用于取回和出示用户头像的简易示例。在或许的事态下,该器件会有 my-avatar 标签,会从以下两特天性中获得头像:

  • service 允许设置三个服务。举个例子 twitter 或者 facebook
  • username 用于取回该顾客名相对应的头像

      在并未有写这一个库从前,就算是本人动用jquery,每一个JS文件小编皆以平昔在HTML文件中动用script标签写进去的,近来后需求采取这种异步模块加载的章程,倘诺要使用非焦点模块,那么需求:

示范组件my-avatar

为了显得大家怎么用这一个库和框架构建最基本的机件,大家树立了贰个含有UI,用于取回和展现客商头像的简约示例。在只怕的事态下,该器件会有 my-avatar 标签,会从以下三个本性中得到头像:

  • service 允许设置三个服务。举个例子 twitter 或者 facebook
  • username 用于取回该客商名相对应的头像

示范组件my-avatar

为了突显大家怎么着用这几个库和框架营造最大旨的零件,我们树立了七个含有UI,用于取回和展现客商头像的简练示例。在只怕的情景下,该器件会有 my-avatar 标签,会从以下五个属性中收获头像:

  • service 允许设置三个服务。比如 twitter 或者 facebook
  • username 用于取回该客户名相对应的头像

AngularJS

AngularJS 或许是后天用于构建程序最风靡的前端应用方案了。作为创作者的谷歌(Google),重新思虑HTML,思虑什么重新发明,满足最近Web开采的急需。

Angular中能够动用自定义指令概念组件。之后,你能够利用 HTML 标识注脚自定义组件。

查看代码演示: 

本条例子体现了应用Angular指令的大致程度。值scope 定义了从  my-avatar 成分中收获,而且之后用来构建相应的img标签和渲染成客商头像的质量。

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

})

AngularJS

AngularJS 大概是明日用于营造程序最流行的前端技术方案了。作为创作者的谷歌,重新思量HTML,考虑怎么注重新发明,满意方今Web开采的必要。

Angular中得以接纳自定义指令概念组件。之后,你能够运用 HTML 标识证明自定义组件。

翻开代码演示: 

这几个例子突显了动用Angular指令的简易程度。值scope 定义了从  my-avatar 成分中赢得,並且之后用来营造相应的img标签和渲染成客商头像的品质。

AngularJS

AngularJS 恐怕是明日用来创设程序最盛行的前端施工方案了。作为创笔者的Google,重新思索HTML,思考怎么重新发明,满足近来Web开荒的急需。

Angular中得以应用自定义指令概念组件。之后,你能够行使 HTML 标识评释自定义组件。

查阅代码演示: 

以那一件事例显示了利用Angular指令的简练程度。值scope 定义了从  my-avatar 元素中获得,并且之后用来创设相应的img标签和渲染成顾客头像的性质。

Ember

框架与库的纠纷旷日长久,总的来说框架是强制你按某种格局做工作,所以它是邪恶的。很显明,Angular是个框架,而Ember的笔者,Yehuda Katz和TomDale也很乐意把Ember看作框架。

Ember 有对它称作组件的内建支持。Ember Components背后的眼光是竭尽的向Web Components看齐,当浏览器支持允许时,就能够好低价地迁移到Web Components中。

查看代码演示: 

地点的事例中采纳了 handlebars 做模板,所以成分的定义不是同等种语法。

      使用use方式,它会活动去下载tp.a.js和tp.b.js,下载落成之后,实践回调函数。

Ember

框架与库的争辩旷日长久,总的来讲框架是挟持你按某种方式做专门的学问,所以它是穷凶极恶的。很醒目,Angular是个框架,而Ember的笔者,Yehuda Katz和汤姆Dale也很情愿把Ember看作框架。

Ember 有对它称作组件的内建扶助。Ember Components背后的视角是尽恐怕的向Web Components看齐,当浏览器扶助允许时,就能够很实惠地迁移到Web Components中。

翻看代码演示: 

地方的事例中央银行使了 handlebars 做模板,所以成分的定义不是同样种语法。

Ember

框架与库的争论旷日漫长,总的来讲框架是威逼你按某种方式做作业,所以它是阴毒的。很掌握,Angular是个框架,而Ember的撰稿人,Yehuda Katz和TomDale也很乐意把Ember看作框架。

Ember 有对它叫做组件的内建辅助。Ember Components背后的观点是拼命三郎的向Web Components看齐,当浏览器辅助允许时,就足以很有益于地搬迁到Web Components中。

查阅代码演示: 

下面的例子中动用了 handlebars 做模板,所以成分的概念不是同一种语法。

React

React 即使是个新人,可是却早已有无数的拥护者。它由Twitter开拓,况兼一度到家用于Instagram的UI和某些推特的UI。

利用React营造组件的推荐介绍方式是应用叫做 JSX 的东西来定义它们。那是一种“推荐在React上选择的JavaScript语法转变”。请不要就此分心。他们曾在文书档案中提议,那几个主见正是用来帮衬你在JavaScript中写出HTML标识的。

本人不是说你并无法向来在HTML中加多标签,而必需选拔JSX创立和煦的组件。可是,只要你定义了三个零件,你就足以接纳那几个组件创制别的零件。

翻开代码演示: 

因此,组件使用的宣示语法必要相应的HTML成分和对 React.RenderComponent 的调用。

      一样,在tp.a.js中,也不能够接纳普通的JS的写法了,而要使用:

React

React 即便是个新人,但是却早已有比比较多的拥护者。它由照片墙开拓,何况一度完善用于Twitter的UI和一部分Facebook(Facebook)的UI。

接纳React构建组件的推荐介绍方式是选用叫做 JSX 的事物来定义它们。那是一种“推荐在React上应用的JavaScript语法转变”。请不要就此分心。他们早已在文书档案中提出,这一个主张就是用来援救您在JavaScript中写出HTML标志的。

自家不是说你并不得以平素在HTML中增多标签,而必需利用JSX成立和煦的组件。可是,只要您定义了一个零件,你就能够使用那一个组件创立别的零件。

翻看代码演示: 

故而,组件使用的扬言语法需求相应的HTML成分和对 React.RenderComponent 的调用。

React

React 尽管是个新人,不过却早已有数不完的拥护者。它由Facebook开荒,而且一度圆满用于推特的UI和部分推特(TWTR.US)的UI。

选取React构建组件的推荐介绍格局是使用叫做 JSX 的事物来定义它们。那是一种“推荐在React上行使的JavaScript语法调换”。请不要为此分心。他们已经在文书档案中提出,这么些主见正是用来援助您在JavaScript中写出HTML标志的。

本身不是说你并不得以一贯在HTML中加多标签,而必需运用JSX创立协和的组件。然而,只要您定义了二个零部件,你就足以采用那一个组件创设其余零件。

翻开代码演示: 

故此,组件使用的注明语法需求相应的HTML成分和对 React.RenderComponent 的调用。

未来:Web Component和其他

Web Component才是前景!正如名字所代表的这样,他们承诺将带来能够将功用封装成组件的浏览器原生支持。

自个儿将轻巧显示Web Component並且演示我们明日得以怎么利用它。特别无时或忘的剧情请参谋本文末尾的 “外界财富” 一节。

他们提供的效果与利益包含:

 

未来:Web Component和其他

Web Component才是以后!正如名字所表示的那样,他们承诺将带动能够将功用封装成组件的浏览器原生帮助。

本人将轻易展现Web Component並且演示我们现在能够怎么使用它。越来越深刻的剧情请参照他事他说加以考察本文末尾的 “外界能源” 一节。

她俩提供的效果与利益包蕴:

未来:Web Component和其他

Web Component才是前景!正如名字所代表的那么,他们承诺将推动能够将功用封装成组件的浏览器原生协助。

自己将轻松呈现Web Component并且演示大家前些天得以什么使用它。更尖锐的剧情请参见本文末尾的 “外界财富” 一节。

他俩提供的效能包罗:

自定义成分

我们在上边境海关怀的是用Angular、Ember和React创设 my-avatar 的例子。也许的事态下,那样的办法将以页面上照旧模板上增多的自定义成分表示。Web Component包涵通过自定义元素获取的原生支持– 相对是Web Component标准的骨干组成都部队分。

概念新成分,包含会见成分生命周期的片段事件例如曾几何时创造(createdCallback)、什么时候增加在DOM树上(attachedCallback)、什么时候从DOM树上分离(detachedCallback),哪一天成分属性改造(attributeChangedCallback(attrName, oldVal, newVal))。

自定义成分的四个最首要的一些便是有力量从原始成分增添,由此得到原有元素相应的效果。示例中大家扩大了 <img>元素 。

最终,我们所写的代码中,自定义成分正在並且侧向去做的正是将复杂的东西抽象化,让顾客关怀于单个组件爆发的价值,进而用来创设越发助长的作用。

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),哪天成分属性改换(attributeChangedCallback(attrName, oldVal, newVal))。

自定义成分的二个生死攸关的一些正是有力量从原本成分增加,因此获得原有成分相应的成效。示例中大家扩展了 <img>元素 。

最终,大家所写的代码中,自定义成分正在並且偏侧去做的就是将复杂的事物抽象化,让顾客关注于单个组件发生的股票总值,进而用来构建尤其助长的效果。

自定义成分

我们在地点关怀的是用Angular、Ember和React塑造 my-avatar 的事例。大概的意况下,那样的秘籍将以页面上依旧模板上增加的自定义成分表示。Web Component满含透过自定义成分猎取的原生协理– 相对是Web Component标准的中坚组成都部队分。

概念新成分,满含拜候成分生命周期的片段事件举例哪一天创造(createdCallback)、曾几何时增添在DOM树上(attachedCallback)、哪一天从DOM树上分离(detachedCallback),哪一天元素属性改动(attributeChangedCallback(attrName, oldVal, newVal))。

自定义成分的贰个根本的一些便是有本事从原本成分扩充,因此得到原有成分相应的效果。示例中大家扩展了 <img>元素 。

末尾,我们所写的代码中,自定义成分正在何况偏向去做的正是将复杂的事物抽象化,让客商关怀于单个组件产生的价值,从而用来营造特别助长的成效。

Shadow DOM

还记得iframe们吧?大家还在动用它们,是因为他俩能保障组件和控件的JavaScript和CSS不会潜移暗化页面。 Shadow DOM 也能提供那样的保证,并且未有iframe带来的承负。正式的说法是:

Shadow DOM的统一图谋是在shadow根下遮蔽DOM子树进而提供包装机制。它提供了成立和保持DOM树之间的功效界限,以及给这个树提供相互的功效,从而在DOM树上提供了更加好的功效封装。

     define的首先个参数是该零件的名字(需求独一,所以自身要么听从命名空间的秘技写的),第二个参数是这么些组件所依靠的机件,第七个参数是回调函数,约等于当重视的零件下载完毕现在,回调试行,而tp.modules.add就足以将以此模块加载到总体库中,那样的话技巧选拔tp.use调用。

Shadow DOM

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

Shadow DOM的策动是在shadow根下隐敝DOM子树进而提供包装机制。它提供了树立和保全DOM树之间的功用界限,以及给这么些树提供互相的作用,进而在DOM树上提供了更加好的职能封装。

Shadow DOM

还记得iframe们吧?大家还在使用它们,是因为她们能保险组件和控件的JavaScript和CSS不会影响页面。 Shadow DOM 也能提供这么的掩护,并且未有iframe带来的承受。正式的传教是:

Shadow DOM的宏图是在shadow根下遮蔽DOM子树进而提供包装机制。它提供了创立和保持DOM树之间的功用界限,以及给这几个树提供相互的职能,进而在DOM树上提供了越来越好的成效封装。

HTML导入

我们长日子从前就能够导入JavaScript和CSS了。 HTML导入功效提供了从另外HTML文书档案中程导弹入和起用HTML文书档案的手艺。这种简单性同有时候代表可以很有益地用一些零部件营造另一些零部件。

最终,那样的格式很精粹,适合可选拔组件,何况能够用你最欣赏的包管理实施方案公布(举个例子: bower、 npm 或者 Component)。

      这种艺术自己在tangram中从未看见,小编是看了天猫商城的KISSY之后攻读到的,也正是所谓的AMD(异步模块定义)。

HTML导入

咱俩长日子在此之前就足以导入JavaScript和CSS了。 HTML导入功效提供了从另外HTML文书档案中程导弹入和选定HTML文书档案的力量。这种轻便性同有时间表示能够很有利地用有个别组件创设另一对组件。

终极,那样的格式很可观,符合可选取组件,并且能够用你最心爱的包管理建设方案公布(举个例子: bower、 npm 或者 Component)。

HTML导入

大家长日子从前就能够导入JavaScript和CSS了。 HTML导入功用提供了从其余HTML文书档案中导入和起用HTML文档的本领。这种轻巧性同一时候意味着可以很有益于地用一些零部件创设另一部分零件。

末段,那样的格式很杰出,相符可选择组件,何况能够用你最欣赏的包管理技术方案发布(比方: bower、 npm 或者 Component)。

模板

大家中的多数个人早已运用像handlebars、mustache大概underscore.js中的模板那样的缓和方案(就疑似大家在地点的Ember示例中用的相同)。Web Component通过 template元素 提供了模版的原生辅助。

原生模板令你可以证明分类为“遮蔽DOM”可是剖判成HTML的标记片段。他们在页面加载时并未有用处,然则能够在运作时实例化。他们得以 被搜寻到 ,可是在插入活动的DOM树前不会加载任何有关财富。

      权且英特尔的完毕格局是经过setInterval,不过将要被重构澳门新萄京 10

模板

大家中的许四人曾经应用像handlebars、mustache或许underscore.js中的模板那样的建设方案(如同我们在地点的Ember示例中用的均等)。Web Component通过 template元素 提供了模版的原生援助。

原生模板让您能够申明分类为“掩盖DOM”不过剖判成HTML的号子片段。他们在页面加载风尚未用处,不过能够在运转时实例化。他们能够被搜索到 ,不过在插入活动的DOM树前不会加载任何相关能源。

模板

大家中的许多人已经使用像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并非库和框架的中期时域信号。

      作者事先写了一篇日记来兑现英特尔,当然,作用低下,反正大家看看就行了

Platform.js

只是,就疑似每趟提到新特点同样,大家无法明显浏览器是还是不是援助那个特点。

澳门新萄京 13

以致于2015年一月十十四日,Web Component 的浏览器协助情形

同样,我们也能通过有些玄妙的相配代码,开头利用一些Web Component所提供的效果。

澳门新萄京 14

有了包容库的Web Component援助情状

好新闻是八个最早进的浏览器厂商谷歌和Mozilla正在大力周密宽容库 ,支持大家运用Web Component。

以下示例展示使用platform.js后大家可以怎么定义作为img成分扩充的my-avatar成分。最佳的是它能用到原生img成分的装有功效。

查阅代码演示: 

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

注:借令你对platform.js感兴趣,也能够看看 bosonic。

原生技能的支撑目标正是给大家提供相应的创设基础。所以Web Component并非库和框架的末日实信号。

Platform.js

不过,就如每一次提到新特色同样,大家无法显著浏览器是或不是支持这几个特点。

澳门新萄京 15

直至二〇一六年3月二十二日,Web Component 的浏览器补助情形

一样,大家也能透过某些美妙的相配代码,发轫利用一些Web Component所提供的效用。

澳门新萄京 16

有了包容库的Web Component扶助意况

好消息是八个最初进的浏览器商家谷歌和Mozilla正在大力全面宽容库 ,帮忙大家接纳Web Component。

以下示例体现使用platform.js后我们能够怎么定义作为img成分扩张的my-avatar元素。最好的是它能用到原生img成分的具备机能。

查看代码演示: 

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

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

原生本事的帮忙指标就是给我们提供对应的创设基础。所以Web Component而不是库和框架的末尾非功率信号。

Polymer

Polymer 是演示创设基于原生Web Component效能的极品示例。它提供了增选的编写制定用来创制自定义的Polymer成分,何况提供了比很多为主的UI组件,让您可以制造和煦的应用程序。

澳门新萄京 17

下边你能够旁观 my-avatar 成分的归纳成立进度,同有的时候候大家也博得了想要的标识。

查阅代码演示: 

Google正在推抢动Polymer。请查看 Polymer getting started guide 查看更多示例。

      然后正是事件了,事件是三个比较恼火的职业,东西比非常多,作者把它位于了tp.event那一个空间中。

Polymer

Polymer 是演示创设基于原生Web Component作用的拔尖示例。它提供了增选的机制用来创立自定义的Polymer成分,并且提供了十分的多着力的UI组件,让您能够成立和煦的应用程序。

澳门新萄京 18

上面你能够看看 my-avatar 成分的简易制造进度,同一时候大家也获得了想要的标记。

翻开代码演示: 

谷歌(Google)正在大力推动Polymer。请查看 Polymer getting started guide 查看越多示例。

Polymer

Polymer 是演示创设基于原生Web Component功效的特等示例。它提供了增选的机制用来制造自定义的Polymer成分,何况提供了累累为主的UI组件,让您能够创制自个儿的应用程序。

澳门新萄京 19

下边你能够看见 my-avatar 成分的简短创立进度,同临时候大家也收获了想要的标识。

查看代码演示: 

Google正在拉扯动Polymer。请查看 Polymer getting started guide 查看更加的多示例。

X-Tag和Brick

Mozilla开荒了和睦的自定义成分包容库,叫做 X-Tag。X-Tag是贰个为启用Web Component举办多项宽容的库,并就要提供对Web Component的一体化扶助。

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

查阅代码演示:

Mozilla同有的时候间还成立了二个叫 Brick 的库,在那之中满含X-Tag,提供“一组用来实惠火速塑造Web应用程序的UI组件”,使用与Google的Polymer相似的不二秘诀。

      首先是足够和移除事件监听器,由于IE和非IE选择的主意差异样,IE选择attach伊夫nt和detech伊芙nt,非IE选用add伊芙ntListener和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组件”,使用与Google的Polymer相似的情势。

X-Tag和Brick

Mozilla开采了谐和的自定义元素宽容库,叫做 X-Tag。X-Tag是多个为启用Web Component进行多项宽容的库,并将要提供对Web Component的一体化扶助。

以下正是利用X-Tag的 my-avatar 自定义组件,与规范文书档案拾叁分看似:

查阅代码演示:

Mozilla同不常候还成立了叁个叫 Brick 的库,当中包涵X-Tag,提供“一组用来方便火速创设Web应用程序的UI组件”,使用与谷歌(Google)的Polymer相似的格局。

总结

使用基于组件的架构创设应用程序有成都百货上千实惠,你能从现有的框架中学到,也能在创设前端Web应用程序时从举荐的Web Component中上学到。

这场组件化Web王国的旅程,让大家在面前境遇框架和工具的选用时犹豫不决不决。可是,Web Component会是终极的点灯!

Web Component会提供创设应用程序的原生统一的章程。现成的框架很有非常的大可能率会转而选用Web Component只怕表明什么与它一起使用。Ember的政策是让迁移到Web Component特别有益于,而Instagram的React则是躬体力行整合的好例子,已经有贰个 ReactiveElements示范它了。因为Angular和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越发有帮忙,而Instagram(Twitter)的React则是身体力行整合的好例子,已经有三个 ReactiveElements 演示它了。因为Angular和Polymer都以谷歌的类型,他们很有希望会走到一同。

总结

使用基于组件的架构构建应用程序有广大功利,你能从现成的框架中学到,也能在营造前端Web应用程序时从推荐的Web Component中读书到。

这场组件化Web王国的旅程,让大家在面临框架和工具的取舍时拖泥带水不决。不过,Web Component会是最终的点灯!

Web Component会提供营造应用程序的原生统一的主意。现成的框架很有希望会转而使用Web Component或然注脚什么与它贰只使用。Ember的计谋是让迁移到Web Component尤其方便人民群众,而推文(Tweet)的React则是身先士卒整合的好例子,已经有叁个 ReactiveElements 演示它了。因为Angular和Polymer都以Google的类型,他们很有相当的大可能率会走到一块儿。

表面能源(乌Crane语)

  • 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

 

     也便是在二个函数内部去看清是或不是是IE,然后相应的进行相应的函数,可是那样,要是加上的风浪监听器相当多,每趟都if什么的,笔者个人认为相当差,所以自身前边增添了一个帮手函数:

外界能源(匈牙利(Magyarország)语)

  • 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

外表财富(塞尔维亚(Република Србија)语)

  • 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,关于动画的。

       好啊,貌似又超时了,先就这么吗,以为每一遍写这种日志都会损耗数不完时光。

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:澳门新萄京:自定义标签在IE6,方今上学JS的觉悟

上一篇:澳门新萄京:网页无图再不是期待,好程序猿 下一篇:没有了
猜你喜欢
热门排行
精彩图文