说起 Custom Element 那必然会想起那个相似而又以失败告终的 html Component。HTML Component 是在 IE5 开始引入的新技术,用于对原生元素作功能 "增强",虽然仅仅被 IE 所支持,虽然 IE10 也开始放弃它了,虽然掌握了也用不上,但还是不影响我们以研究的心态去了解它的:)
HTC 独有标签
, 根节点.
, 定义元素公开自定义属性 / 特性.
属性
,html 文件中使用的属性名
- NAME
,htc 文件内使用的属性名, 默认与
- INTERNALNAME
一致
- NAME
,属性默认值
- VALUE
,setter 对应的函数名
- PUT
,getter 对应的函数名
- GET
, 定义元素公开自定义事件.
- PUBLIC:EVENT
,公开事件名称,如 onheadingchange
- NAME
,htc 内使用的事件名称,如 ohc. 然后通过
- ID
来触发事件
- ohc.fire(createEventObject())
,订阅事件
- PUBLIC:ATTACH
,订阅的事件名称,如 onheadingchange
- EVENT
,事件处理函数体,如 headingchangehandler()
- ONEVENT
,事件发生的宿主 (
- FOR
,
- element
,
- document
, 默认是
- window
)
- element
, 定义元素公开方法
- PUBLIC:METHOD
,html 文件中使用的方法名
- NAME
,htc 文件内使用的方法名, 默认与
- INTERNALNAME
一致。在 JScript 中实现具体的方法体
- NAME
,设置 HTC 默认配置
- PUBLIC:DEFAULTS
, 添加到 DOM tree 时触发,在 oncontentready 后触发
- ondocumentready
, 添加到 DOM tree 时触发
- oncontentready
, 脱离 DOM tree 时触发, 刷新页面时也会触发
- ondetach
, 当复制 (ctrl-c)element 内容时触发 HTC 全局对象
- oncontentsave
, 所附加到的元素实例
- element
,所附加到的元素实例的 style 属性
- runtimeStyle
,html 的文档对象 HTC 全局函数
- document
,创建事件对象
- createEventObject()
, 订阅事件. 注意:一般不建议使用 attachEvent 来订阅事件,采用
- attachEvent(evtName, handler)
来订阅事件,它会自动帮我们执行 detach 操作,避免内存泄露.
- <PUBLIC:ATTACH>
, 取消订阅事件
- detachEvent(evtName[, handler])
引入. htc
1. 基本打开方式
- CSS ">css" > <style > css - selector {
- behavior: url(file.htc);
- } < /style>/
2. 打开多个
- css ">css" > <style > css - selector {
- behavior: url(file1.htc) url(file2.htc);
- } < /style>/
可以看到是通过 css-selector 匹配元素然后将 htc 附加到元素上,感觉是不是跟 AngularJS 通过属性 E 指定附加元素的方式差不多呢!
3. 自定义元素
- <html xmlns:x>
- <head>
- <style>
- x\:alert{ behavior: url(x-alert.htc); }
- </style>
- </head>
- <body>
- <x:alert>
- </x:alert>
- </body>
- </html>
自定义元素则有些麻烦,就是要为自定义元素指定命名空间
,然后在 html 节点上列出命名空间
- x:alert
。(可多个命名空间并存
- xmlns:x
) 下面我们来尝试定义一个
- <html xmlns:x xmlns:y>
元素来看看具体怎么玩吧!
- x:alert
元素
- x:alert
x-alert.htc
- <PUBLIC:COMPONENT>
- <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="onattach()">
- </PUBLIC:ATTACH>
- <PUBLIC:ATTACH EVENT="ondetach" ONEVENT="ondetach()">
- </PUBLIC:ATTACH>
- <PUBLIC:METHOD NAME="close">
- </PUBLIC:METHOD>
- <PUBLIC:METHOD NAME="show">
- </PUBLIC:METHOD>
- <PUBLIC:PROPERTY NAME="heading" PUT="putHeading" SET="setHeading">
- </PUBLIC:PROPERTY>
- <PUBLIC:EVENT NAME="onheadingchange" ID="ohc">
- </PUBLIC:EVENT>
- <PUBLIC:ATTACH EVENT="onclick" ONEVENT="onclick()">
- </PUBLIC:ATTACH>
- <script language="JScript">
- /*
- * private region
- */
- function toArray(arrayLike, sIdx, eIdx) {
- return Array.prototype.slice.call(arrayLike, sIdx || 0, eIdx || arrayLike.length)
- }
- function curry(fn
- /*, ...args*/
- ) {
- var len = fn.length,
- args = toArray(arguments, 1) return len <= args.length ? fn.apply(null, args.slice(0, len)) : function next(args) {
- return function() {
- var tmpArgs = args.concat(toArray(arguments)) return len <= tmpArgs.length ? fn.apply(null, tmpArgs.slice(0, len)) : next(tmpArgs)
- }
- } (args)
- }
- function compile(tpl, ctx) {
- var k
- for (k in ctx) {
- tpl = tpl.replace(RegExp('\$\{' + k + '\}'), ctx[k]
- }
- return tpl
- }
- // 元素内部结构
- var tpl = '<div class="alert alert-warning alert-dismissible fade in">\
- <button type="button" class="close" aria-label="Close">\
- <span aria-hidden="true">×</span>\
- </button>\
- <div class="content">${raw}</div>\
- </div>'
- var getHtml = curry(compile, tpl)
- /*
- * leftcycle region
- */
- var inited = 0,
- oHtml = ''
- function onattach() {
- if (inited) return oHtml = element.innerHTML
- var ctx = {
- raw: heading + oHtml
- }
- var html = genHtml(ctx) element.innerHTML = html runtimeStyle.display = 'block'runtimeStyle.border = 'solid 1px red'
- }
- function ondetach() {}
- /*
- * public method region
- */
- function show() {
- runtimeStyle.display = 'block'
- }
- function close() {
- runtimeStyle.display = 'none'
- }
- /*
- * public property region
- */
- var heading = ''
- function putHeading(val) {
- if (heading !== val) {
- setTimeout(function() {
- var evt = createEventObject() evt.propertyName = 'heading'ohc.fire(evt)
- },
- 0)
- }
- heading = val
- }
- function getHeading() {
- return heading
- }
- /*
- * attach event region
- */
- function onclick() {
- if (/^\s*close\s*$/.test(event.srcElement.className)) {
- close()
- }
- }
- </script>
- </PUBLIC:COMPONENT>
- x:alert
index.html
- <html xmlns:x>
- <head>
- <title>
- </title>
- <style>
- x\:alert{ behavior: url(x-alert.htc); }
- </style>
- </head>
- <body>
- <x:alert id="a" heading="Hello world!">
- </x:alert>
- <script language="JScript">
- var a = document.getElementById('a') a.onheadingchange = function() {
- alert(event.propertyName + ':' + a.heading)
- }
- // a.show()
- // a.close()
- // document.body.appendChilid(document.createElement('x:alert'))
- </script>
- </body>
- </html>
然后就是槽点了
来源: http://www.cnblogs.com/fsjohnhuang/p/5987853.html