Javascript 如何使用原型进行自定义方法和对象操作
老实说,我正在努力理解JavaScript原型,但没有取得多大进展。我不确定如何解释我要做的事情,只是想说我的最终目标是学习如何像jQuery一样遍历DOM,并添加自定义方法来操作正在访问的特定元素 编辑:以下代码已更新,以反映我从迄今为止收到的答案中学到的概念,并显示这些概念与我期望实现的目标之间的差距Javascript 如何使用原型进行自定义方法和对象操作,javascript,prototype,Javascript,Prototype,老实说,我正在努力理解JavaScript原型,但没有取得多大进展。我不确定如何解释我要做的事情,只是想说我的最终目标是学习如何像jQuery一样遍历DOM,并添加自定义方法来操作正在访问的特定元素 编辑:以下代码已更新,以反映我从迄今为止收到的答案中学到的概念,并显示这些概念与我期望实现的目标之间的差距 function A(id) { "use strict"; this.elem = document.getElementById(id); } A.prototype.in
function A(id) {
"use strict";
this.elem = document.getElementById(id);
}
A.prototype.insert = function (text) {
"use strict";
this.elem.innerHTML = text;
};
var $A = function (id) {
"use strict";
return new A(id);
};
var $B = function (id) {
"use strict";
return document.getElementById(id);
};
function init() {
"use strict";
$A('para1').insert('text goes here'); //this works
$A('para1').innerHTML = 'text goes here'; //this does not work
console.log($A('para1')); //returns the object A from which $A was constructed
console.log($B('para1')); //returns the dom element... this is what I want
/*I want to have $A('para1').insert(''); work and $A('para1').innerHTML = '';
work the same way that $B('para1').innerHTML = ''; works and still be able
to add additional properties and methods down the road that will be able
act directly on the DOM element that is contained as $A(id) while also
being able to use the properties and methods already available within
JavaScript*/
}
window.onload = init;
在可能的情况下,请解释为什么您的代码可以工作,以及为什么您认为这是实现这一点的最佳方法
注意:我调查的全部目的是自己了解这一点。。。请不要建议使用jQuery,它会破坏目的 试试这个
var getDOM= function(id) {
this.element= document.getElementById(id);
}
getDOM.prototype.insert= function(content) {
this.element.innerHTML= content;
}
var $= function(id) {
return new getDOM(id);
};
$('id').insert('Hello World!'); // can now insert 'Hello World!' into document.getElementById('id')
试试这个
var getDOM= function(id) {
this.element= document.getElementById(id);
}
getDOM.prototype.insert= function(content) {
this.element.innerHTML= content;
}
var $= function(id) {
return new getDOM(id);
};
$('id').insert('Hello World!'); // can now insert 'Hello World!' into document.getElementById('id')
在My_jquery.prototype中添加您想要在elem上操作的任何方法
在My_jquery中添加您想要在elem上操作的任何方法。prototype您可以使用如下方案:
function $(id) {
return new DOMNode(id);
}
function DOMNode(id) {
this.element = document.getElementById(id);
}
DOMNode.prototype.insert = function(value) {
if (value) {
// If value is a string, assume its markup
if (typeof value == 'string') {
this.element.innerHTML = value;
// Otherwise assume it's an object
} else {
// If it's a DOM object
if (typeof value.nodeName == 'string') {
this.element.appendChild(value);
// If it's a DOMNode object
} else if (this.constructor == DOMNode) {
this.element.appendChild(value.element);
}
}
} // If all fails, do nothing
}
$('id').insert('foo bar');
一些游戏内容:
<div id="d0">d0</div>
<div id="d1">d1</div>
<div id="d2">d2</div>
<script>
// insert (replace content with) string, may or may not be HTML
$('d0').insert('<b>foo bar</b>');
// insert DOMNode object
$('d0').insert($('d1'));
// Insert DOM element
$('d0').insert(document.getElementById('d2'));
</script>
d0
d1
d2
//插入(将内容替换为)字符串,可以是也可以不是HTML
$('d0')。插入('foo-bar');
//插入DOMNode对象
$('d0')。插入($('d1');
//插入DOM元素
$('d0').insert(document.getElementById('d2'));
您可能会发现研究工作原理很有用,它有一些非常好的实践和模式。您可以使用如下方案:
function $(id) {
return new DOMNode(id);
}
function DOMNode(id) {
this.element = document.getElementById(id);
}
DOMNode.prototype.insert = function(value) {
if (value) {
// If value is a string, assume its markup
if (typeof value == 'string') {
this.element.innerHTML = value;
// Otherwise assume it's an object
} else {
// If it's a DOM object
if (typeof value.nodeName == 'string') {
this.element.appendChild(value);
// If it's a DOMNode object
} else if (this.constructor == DOMNode) {
this.element.appendChild(value.element);
}
}
} // If all fails, do nothing
}
$('id').insert('foo bar');
一些游戏内容:
<div id="d0">d0</div>
<div id="d1">d1</div>
<div id="d2">d2</div>
<script>
// insert (replace content with) string, may or may not be HTML
$('d0').insert('<b>foo bar</b>');
// insert DOMNode object
$('d0').insert($('d1'));
// Insert DOM element
$('d0').insert(document.getElementById('d2'));
</script>
d0
d1
d2
//插入(将内容替换为)字符串,可以是也可以不是HTML
$('d0')。插入('foo-bar');
//插入DOMNode对象
$('d0')。插入($('d1');
//插入DOM元素
$('d0').insert(document.getElementById('d2'));
您可能会发现研究如何工作很有用,它有一些非常好的实践和模式。upvots用于非工作代码?请注意,对象继承自其构造函数的原型,而不是它们自己的原型<代码>$没有插入方法,因此上面的代码抛出类型错误。您需要从$function中删除return,然后执行:
(new$('id')).insert('helloworld!')代码>。请参阅@yngum答案的注释,您的答案也一样。是否对非工作代码进行投票?请注意,对象继承自其构造函数的原型,而不是它们自己的原型<代码>$
没有插入方法,因此上面的代码抛出类型错误。您需要从$function中删除return,然后执行:(new$('id')).insert('helloworld!')代码>。请参阅对@yngum的答案的评论,这同样适用于您的答案。我一直在摆弄这段代码,问题是当我按照您当时编写的方式处理它时:$('para1')。innerHTML='this works'//不再工作了
难道你不想维护所有标准方法的可访问性吗?你需要在原型中编写一个html方法,就像在jQuery中一样。@yngum jQuery也不这样工作,你需要做$('#foo')[0]。innerHTML`。是的,我正在试图找到解决这个问题的方法,但我想这就是我必须要做的。我一直在摆弄这段代码,问题是当我按照您当时编写的方式离开它时:$('para1')。innerHTML='this works'//不再工作了
难道你不想维护所有标准方法的可访问性吗?你需要在原型中编写一个html方法,就像在jQuery中一样。@yngum jQuery也不这样工作,你需要做$('#foo')[0]。innerHTML`。是的,我正在试图找到解决这个问题的方法,但我想这就是我必须做的。请看对@yngum答案的评论,这同样适用于你的答案。请看对@yngum答案的评论,这同样适用于你的答案。