在不丢失原型的情况下返回函数上的元素
Returning element on function without losing prototype
>有人知道如何创建一个返回元素而不会丢失其原型的函数吗?我正在尝试创建函数来创建一个新元素并将其作为元素返回。此函数将具有操作该元素的方法。当我返回该元素时,原型将无法工作。如果我在该函数中不使用return
,则原型可以正常工作,但该函数返回this
对象。看看这个代码:
function ObjEl(tagName, id) {
'use strict';
this.node = document.createElement(tagName);
if (typeof id === 'string' && id.match(/^[a-zA-Z'd'_'-]+$/)) {
this.node.setAttribute('id', id);
}
// return this.node;
}
ObjEl.prototype.atr = function (key, val) {
'use strict';
this.node.setAttribute(key, val);
return this;
};
如果我取消注释return this.node;
,当我调用test = ObjEl('div', 'test');
时,它会返回<div id="test"></div>
,但这段代码不起作用:
test = ObjEl('div', 'test').remove();
看起来很奇怪,但这是否实现了您想要做的事情?
var ObjEl=function ObjEl(tagName, id) {
'use strict';
this.node = document.createElement(tagName);
if (typeof id === 'string' && id.match(/^[a-zA-Z'd'_'-]+$/)) {
this.node.setAttribute('id', id);
}
// return this.node;
}
ObjEl.prototype.atr = function (key, val) {
'use strict';
this.node.setAttribute(key, val);
return this;
};
var oldObjEl=ObjEl;
ObjEl=function (){
return new oldObjEl(arguments[0],arguments[1]);
}
可能的选项
(我知道)使用 JavaScript 实现这种行为的两种最佳方法是创建一个包装对象,在内部管理与相关元素的处理,即类似于 jQuery(见下文);或者直接使用所需的附加功能扩展每个元素 DOM 节点。 例如:
var extend = function( elm ){
elm.attr = extend.attr;
};
extend.attr = function(){
// your code here
};
var elm = extend(document.getElementById('div'));
您还可以添加到某些元素的源构造函数的原型中,即 HTMLElement,但这不会跨浏览器工作,并且可能会给其他代码带来问题。通常不赞成弄乱基本构造函数。
我选择的方式
过去,我使用以下粗略片段将许多不同的接口(有选择地)组合到同一个对象中。然而,它不是经验丰富的代码,并且可以从适当的设置和拆卸管理中受益匪浅 - 以避免内存泄漏的风险 - 因为它基本上只是一堆闭包。
var harmony = function(){
if( !(this instanceof harmony) ) { return new harmony(); }
};
harmony.prototype.borrow = function( owner, descriptor ){
var i, dlen = descriptor.length, item;
for ( i=0; i<dlen; i++ ) {
if ( (item = owner[descriptor[i]]) && item.apply ){
this.borrowMethod( owner, descriptor[i] );
}
else {
this.borrowAttribute( owner, descriptor[i] );
}
}
return this;
};
harmony.prototype.add = function( owner, methods ){
for ( var i in methods ) { this.addMethod( owner, i, methods[i] ); }
return this;
};
harmony.prototype.addMethod = function( owner, name, method ){
this[name] = function(){ return method.apply( owner, arguments ); };
return this;
};
harmony.prototype.borrowMethod = function( owner, name ){
this[name] = function(){ return owner[name].apply( owner, arguments ); };
return this;
};
harmony.prototype.borrowAttribute = function( owner, attributeName ){
var self = this; self[attributeName] = function(){
if ( arguments.length ) { owner[attributeName] = arguments[0]; return self; }
return owner[attributeName];
};
return self;
};
用法
上面可以用来包装一个元素,从本机对象借用方法,并使用你自己的方法进行扩展。这是我的意思的粗略想法,这绝不是最终的代码。
var ElementHarmony = function(elm){
var self = harmony()
.borrow( elm, ['innerHTML', 'getElementsByTagName'] )
.add( elm, {
getElement: function(){
return elm;
},
attr: function( name, value ){
if ( arguments.length > 1 ) {
this.setAttribute( name, value );
return self;
}
else {
return this.getAttribute( name );
}
}
})
;
return self;
}
/// create our example element and wrap with a harmony instance
var elm = ElementHarmony(document.createElement('span'))
.innerHTML('<b>hello</b>')
.attr('style', 'border: 1px solid red')
;
/// find the bold tag inside, and modify it's style
var bold = ElementHarmony(elm.getElementsByTagName('b')[0])
.attr('style', 'background: orange')
;
/// use getElement() to get back to the original element,
/// when passing to native methods.
(document.body||document.documentElement).appendChild(elm.getElement());
使用 harmony 对象,您可以从所有者对象借用方法和属性,但是属性将转换为方法,即 innerHTML()
.如果你知道你的代码只会在现代浏览器上执行,你可以改变这种行为来利用getters和setters......但是,那是另一回事了。
迪德尔迪德尔
这是小提琴。
http://jsfiddle.net/K2Xux/
- 使用返回函数sinde.attr()jquery元素
- 从自执行函数返回函数的Javascript性能命中率
- Node Express Handlebars帮助程序未返回函数的结果
- 未在Firefox中执行PageMethod的返回函数
- 对返回函数的函数感到困惑
- 从承诺返回不返回函数会导致警告
- 从函数返回函数而不调用返回的函数
- Javascript,闭包中的返回函数如何与外部函数连接
- 为什么Coderbyte.com's的Javascript模板喜欢返回函数的原始参数
- 对象函数返回函数而不是值
- 从外部函数(数组)了解返回函数(x)
- 从Javascript类对象返回函数
- 调用Typescript setter don't返回函数,尽管关联的getter可以工作
- 使用依赖注入在 JavaScript 中返回函数
- 通过单击JSP和javascript加载两个返回函数
- 需要说明:无法理解返回函数的javascript
- 简单的onClick返回函数不起作用
- 为什么这个闭包返回函数
- JS函数返回函数供以后使用-未定义参数
- Coffeescription类中的方法返回函数而不是字符串