html定义不同的类,html – 使用不同的子类型创建自定义元素

可以做的是使用< td>类型扩展：

所有扩展都共享相同的原型祖先. v0示例：

//common cell

var cellProto = Object.create( HTMLTableCellElement.protoype )

cellProto.sharedMethod = function () { ... }

//typed cell

var cellStringProto = Object.create( cellProto )

cellStringProto.specificMethod = function () { ... }

cellStringProto.sharedMethod = function () { ... }

document.registerElement( 'data-string', { prototype: cellStringProto, extends: 'td' } )

这样,所有细胞都延伸相同的细胞.元素,共享一个共同的原型,但有自己的方法实现.

您可以覆盖共享方法,而共享方法可以调用派生原型对象的特定方法.

请在此处查看运行示例：

//table

var tableProto = Object.create( HTMLTableElement.prototype )

tableProto.createdCallback = function ()

{

console.info( 'data-table created' )

}

document.registerElement( 'data-table', { prototype: tableProto, extends: 'table' } )

//cell

var cellProto = Object.create( HTMLTableCellElement.prototype )

cellProto.createdCallback = function ()

{

console.info( 'cell created' )

}

cellProto.attachedCallback = function ()

{

console.info( 'cell attached' )

if ( typeof this.renderContent === 'function' )

this.renderContent()

}

//cell string

var cellStringProto = Object.create( cellProto )

cellStringProto.createdCallback = function ()

{

console.info( 'data-string created' )

}

cellStringProto.renderContent = function ()

{

console.info( 'data-string render' )

this.innerHTML = '"' + this.textContent.trim() + '"'

}

document.registerElement( 'data-string', { prototype: cellStringProto, extends: 'td' } )

table {

border-collapse: collapse ;

}

td, th {

border: 1px solid gray ;

padding: 2px

}

Test Table Extension v0

Id	Name	Age
1	An	20
2	Bob	31 注意：如果您不想要类型扩展,也可以使用自定义标记.我们的想法是拥有一个共同的原型和共享它的不同自定义元素(感谢标准的原型继承).