至于启用,自定义标签在IE6

日期:2019-10-04编辑作者:美高梅老虎机平台

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

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

至于启用,自定义标签在IE6。初稿出处: 司徒正美   

唯恐现在前端组件化之路都以自定义标签,但那东西早在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

必看的 JavaScript 视频

2015/10/30 · 基础本领 · 视频

去年 Sergey Bolshchikov 发起了三个发起,摄像列表已挺足够了。

小提示:

  • 录像均在 Youtube。如有搬运到境内的热心肠童鞋,请在七嘴八舌中留言;
  • Clip Converter:Youtube 录制下载工具

JavaScript 长远之施行上下文栈

2017/05/13 · JavaScript · 进行上下文

原稿出处: 冴羽   

Chrome 调整台不完全指南

2015/01/10 · JavaScript · 1 评论 · Chrome

本文作者: 伯乐在线 - 刘哇勇 。未经作者许可,禁绝转发!
招待出席伯乐在线 专栏撰稿人。

Chrome的开荒者工具已经庞大到没朋友的地步了,特别是其职能充裕界面友好的console,使用方便能够仿佛下功用:

  • 更加高「逼格」更加快「开拓调节和测量检验」越来越强「进级级的Frontender」
  • Bug无处遁形「Console大法好」

至于启用 HTTPS 的一对经历分享(二)

2015/12/24 · 基础能力 · HTTP, HTTPS

原稿出处: imququ(@屈光宇)   

文章目录

  • SSL 版本选取
  • 加密套件选拔
  • SNI 扩展
  • 申明采用

几天前,一人朋友问小编:都说推荐用 Qualys SSL Labs 那个工具测量检验 SSL 安全性,为何有个别安全实力很强的大商家评分也异常的低?小编觉着这么些主题材料应该从双方面来看:1)国内顾客终端情形复杂,比相当多时候降落 SSL 安全布局是为了合作越来越多客商;2)确实有一部分大厂家的 SSL 配置特不规范,越发是计划了一部分分明不应当使用的 CipherSuite。

自家事先写的《至于启用 HTTPS 的一对经历分享(一)》,主要介绍 HTTPS 怎样与局地新出的克拉玛依专门的职业同盟使用,面向的是今世浏览器。而明天那篇作品,更加的多的是介绍启用 HTTPS 进程中在老旧浏览器下也许碰到的主题素材,以及怎么着挑选。

2015

  1. Dr. Axel Rauschmayer: Using ECMAScript 6 today
    • Part 1 [40:44]
    • Part 2 [53:04]
  2. Brendan Eich: ECMAScript Harmony: Rise of the Compilers [19:17]
  3. Andreas Gal: Dirty Performance Secrets of HTML5 | HTML5 质量秘诀 [14:15]
  4. Andre Staltz: What if the user was a function | 假若用户是二个函数? [32:19] ♨

种种实行?

若是要问到JavaScript代码实施顺序的话,想必写过JavaScript的开辟者都会有个直观的回想,这正是种种实行,毕竟

var foo = function () { console.log('foo1'); } foo(); // foo1 var foo = function () { console.log('foo2'); } foo(); // foo2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var foo = function () {
 
    console.log('foo1');
 
}
 
foo();  // foo1
 
var foo = function () {
 
    console.log('foo2');
 
}
 
foo(); // foo2

不过去看这段代码:

function foo() { console.log('foo1'); } foo(); // foo2 function foo() { console.log('foo2'); } foo(); // foo2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function foo() {
 
    console.log('foo1');
 
}
 
foo();  // foo2
 
function foo() {
 
    console.log('foo2');
 
}
 
foo(); // foo2

打字与印刷的结果却是两个foo2。

刷过面试题的都知道那是因为JavaScript引擎并不是一行一行地剖析和推行顺序,而是一段一段地剖判实践。当实践一段代码的时候,会开展一个“筹算专门的学业”,比方第四个例证中的变量升高,和第三个例子中的函数进步。

不过本文真正想让我们想想的是:这几个”一段一段”中的“段”毕竟是怎么划分的吧?

到底JavaScript引擎境遇一段怎么样的代码时才会做’计划专门的学业’呢?

console.log

我们都会用log,但鲜有人很好地利用console.error , console.warn 等将出口到调节台的新闻举办分类整理。
她俩效能界别不大,意义在于将出口到调节台的音信进行分拣,恐怕说让它们更语义化。
种种所表示的语义如下:

  • console.log:普通音讯
  • console.info:提醒类音讯
  • console.error:错误新闻
  • console.warn:警示音讯

当合理利用上述log方法后,能够很有益地在调整台选用查看特定类型的消息。

JavaScript

console.log('一颗红心向太阳','吼吼~'); console.info('楼上药无法停!'); console.warn('楼上嘴太贱!'); console.error('楼上关你毛事?');

1
2
3
4
console.log('一颗红心向太阳','吼吼~');
console.info('楼上药不能停!');
console.warn('楼上嘴太贱!');
console.error('楼上关你毛事?');

图片 10

假诺再合营console.group 与console.groupEnd,能够将这种分类管理的考虑发挥到极致。那相符于在开采三个层面一点都不小模块比非常多很复杂的Web 应用程式时,将各自的log音信分组到以独家命名空间为名称的组里面。

JavaScript

console.group("app.foo"); console.log("来自foo模块的音信 blah blah blah..."); console.groupEnd(); console.group("app.bar"); console.log("来自bar模块的音讯 blah blah blah..."); console.groupEnd();

1
2
3
4
5
6
console.group("app.foo");
console.log("来自foo模块的信息 blah blah blah...");
console.groupEnd();
console.group("app.bar");
console.log("来自bar模块的信息 blah blah blah...");
console.groupEnd();

图片 11

而关于console.log,早就被戏弄坏了。一切都出自Chrome提供了那般三个API:第二个参数能够饱含部分格式化的命令比如%c

比如给hello world 做件美貌的嫁衣再拉出去见人:

JavaScript

console.log('%chello world','font-size:25px;color:red;');

1
console.log('%chello world','font-size:25px;color:red;');

图片 12

举个例子你感觉相当不足过瘾,那就把您能写出来的最华丽的CSS样式都施用上吗,举例渐变。于是你可以获取如下华丽丽的作用:

JavaScript

console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

1
console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

图片 13

各类招大招的节奏啊~

望着上边密集的代码不用紧张,上边console.log()其次个参数全都以纯CSS用来支配样式的,你不会不熟悉。而首先个参数里能够带用百分号最早的转义指令,如上边输出带样式的文字时接纳的%c命令。更详细的吩咐参见官方API文书档案的本条表格。

假如还远远不够过瘾,那我们来log一些图片吧,以至。。。动图?
对,你得先有图,大家拿这张图为例。

JavaScript

console.log("%c", "padding:50px 300px;line-height:120px;backgroundnull:url('') no-repeat;");

1
console.log("%c", "padding:50px 300px;line-height:120px;backgroundnull:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");

图片 14

瞧着地点摇曳的豆比兔是否有种抽它一脸的冲动。

除此,console.table 更是一向以表格的花样将数据输出,无法赞得太多!
借用以前写过的一篇博文里的事例:

JavaScript

var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}]; console.table(data);

1
2
var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];
console.table(data);

图片 15

另外,console.log() 接收不定参数,参数间用逗号分隔,最终会输出会将它们以空白字符连接。

JavaScript

console.log('%c你好','color:red;','小明','你精通小红被阿妈打了么');

1
console.log('%c你好','color:red;','小明','你知道小红被妈妈打了么');

图片 16

SSL 版本采纳

TLS(Transport Layer Security,传输层安全)的前身是 SSL(Secure Sockets Layer,安全套接字层),它最先的多少个版本(SSL 1.0、SSL 2.0、SSL 3.0)由网景集团开荒,从 3.1 发轫被 IETF 标准化并更名,发展于今已经有 TLS 1.0、TLS 1.1、TLS 1.2 多个版本。TLS 1.3 退换会相当的大,近期还在草案阶段。

SSL 1.0 从未公开过,而 SSL 2.0 和 SSL 3.0 都设有安全难点,不引入使用。Nginx 从 1.9.1 初步默许只帮忙 TLS 的三个本子,以下是 Nginx 合法文档中对 ssl_protocols 配置的辨证:

Syntax: ssl_protocols [SSLv2] [SSLv3] [TLSv1] [TLSv1.1] [TLSv1.2];
Default: ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
Context: http, server
Enables the specified protocols. The TLSv1.1 and TLSv1.2 parameters work only when the OpenSSL library of version 1.0.1 or higher is used.

但不幸的是,IE 6 只协理 SSLv2 和 SSLv3(来源),也正是说 HTTPS 网址要匡助 IE 6,就必需启用 SSLv3。仅这一项就能招致 SSL Labs 给出的评分降为 C。

2014

  1. Ilya Grigorik: Website Performance Optimization | 网站质量优化 (Udacity 课程) [1:13:57]
  2. Mark DiMarco: User Interface Algorithms | 用户接口算法 [27:41]
  3. Neil Green: Writing Custom DSLs [29:07]
  4. Philip Roberts: Help, I’m stuck in an event-loop [20:13]
  5. Eric Bidelman: Polymer and Web Components change everything you know about Web development [36:12]
  6. Alex Russell, Jake Archibald: Bridging the gap between the web and apps [48:40]
  7. Scott Hanselman: Virtual Machines, JavaScript and Assembler [25:56]
  8. Jafar Husain: Async JavaScript with Reactive Extensions [26:38]
  9. John-David Dalton: Unorthodox Performance [43:39]
  10. Gary Bernhardt: The Birth & Death of Javascript [29:22]
  11. Addy Osmani: Memory Management Masterclass [55:06]
  12. Reginald Braithwaite: Invent the future, don’t recreate the past [39:16]
  13. Kyle Simpson: Syncing Async [42:25]
  14. Ariya Hidayat: JavaScript and the Browser: Under the Hood [29:13]
  15. Jafar Husain: Version 7: The Evolution of JavaScript [1:11:53]
  16. David Nolen: Immutability: Putting The Dream Machine To Work [22:05]

可实行代码

这将在提起JavaScript的可实行代码(executable code)的种类有怎么着了?

实则很简短,就两种,全局代码、函数代码、eval代码。

比方,当施行到一个函数的时候,就博览会开图谋干活,这里的’准备专门的学业’,让大家用个更标准一点的传道,就称为”实施上下文(execution contexts)”。

console.assert

当您想代码满足有些法则时才输出音讯到调整台,那么你无需写if抑或安慕希表明式来达成指标,cosole.assert正是那样处境下一种很好的工具,它会先对传播的表明式实行预见,唯有表明式为假时才输出相应音信到调控台。

JavaScript

var isDebug=false; console.assert(isDebug,'开采中的log新闻。。。');

1
2
var isDebug=false;
console.assert(isDebug,'开发中的log信息。。。');

图片 17

加密套件选拔

加密套件(CipherSuite),是在 SSL 握手中要求议和的很关键的三个参数。客商端会在 Client Hello 中带上它所支撑的 CipherSuite 列表,服务端会从当中选定两个并经过 Server Hello 重回。要是顾客端帮助的 CipherSuite 列表与服务端配置的 CipherSuite 列表未有交集,会招致力不能及到位商业事务,握手失败。

CipherSuite 包含多样本事,比方认证算法(Authentication)、加密算法(Encryption)、音讯认证码算法(Message Authentication Code,简称为 MAC)、密钥沟通算法(Key Exchange)和密钥衍生算法(Key Derivation Function)。

SSL 的 CipherSuite 协商业机械制具备能够的扩张性,每种 CipherSuite 都亟待在 IANA 注册,并被分配多个字节的标识。全部 CipherSuite 能够在 IANA 的 TLS Cipher Suite Registry 页面查看。

OpenSSL 库协助的全方位 CipherSuite 能够经过以下命令查看:

openssl ciphers -V | column -t 0xCC,0x14 - ECDHE-ECDSA-CHACHA20-POLY1305 TLSv1.2 Kx=ECDH Au=ECDSA Enc=ChaCha20-Poly1305 Mac=AEAD ... ...

1
2
3
openssl ciphers -V | column -t
0xCC,0x14  -  ECDHE-ECDSA-CHACHA20-POLY1305  TLSv1.2  Kx=ECDH        Au=ECDSA   Enc=ChaCha20-Poly1305  Mac=AEAD
... ...

0xCC,0x14 是 CipherSuite 的号码,在 SSL 握手中会用到。ECDHE-ECDSA-CHACHA20-POLY1305 是它的名目,之后几部分各自代表:用于 TLSv1.2,使用 ECDH 做密钥交流,使用 ECDSA 做注明,使用 ChaCha20-Poly1305 做对称加密,由于 ChaCha20-Poly1305 是一种 AEAD 形式,没有供给 MAC 算法,所以 MAC 列展现为 AEAD。

要领会 CipherSuite 的越多内容,能够翻阅那篇长文《TLS 合计解析 与 今世加密通讯公约设计》。由此可见,在配置 CipherSuite 时,请必需参考权威文书档案,如:Mozilla 的引入配置、CloudFlare 使用的布置。

如上 Mozilla 文档中的「Old backward compatibility」配置,以及 CloudFlare 的陈设,都足以很好的相称老旧浏览器,满含 Windows XP / IE6。

前面看来某些大厂家以至帮忙包涵 EXPORT 的 CipherSuite,这一个套件在上世纪由于美利坚联邦合众国开口限制而被削弱过,已被攻占,实在未有理由再使用。

本文由澳门美高梅老虎机平台发布于美高梅老虎机平台,转载请注明出处:至于启用,自定义标签在IE6

关键词:

头顶压缩技巧介绍,入门教程

HTML5中与页面展现相关的API 2015/05/15 · HTML5 ·HTML5 最先的小讲出处:涂根华的博客    在HTML5中,扩大了2个与页面展现...

详细>>

拖拽上传前传,做可信赖交互动画的

HTML5 — 让拖放变的流行起来 2015/12/29 · HTML5 · 4评论 ·拖放 原来的小讲出处: 韩子迟    先上 Demo,尽量用chrome,代...

详细>>

的有的经验分享,浅谈前端工程化

前端优化带来的思辨,浅谈前端工程化 2015/10/26 · 前端职场 · 的有的经验分享,浅谈前端工程化。2评论 ·工程化 原...

详细>>

【美高梅老虎机平台】别人家的面试题,深刻之

别人家的面试题:总结“1”的个数 2016/05/27 · JavaScript· 5 评论 ·Javascript,算法 正文我: 伯乐在线 -十年踪迹。未经我...

详细>>