Javascript 如何在div上制作原型？

在各种框架之外找到如何使用javascript的建议变得越来越困难。这有点令人愤怒。。。。但不管怎样

我想通过原型扩展一个div，附加一些额外的功能，在伪代码中，我希望做以下工作

<div id="wrapperDiv">
  <div id="buttonDiv"/>
</div>

<script>
function ExtraFeatures(){
  this.clickMyButton = function(){
     alert("clicked");
  }
  //the idea here is that **this** will reference the div itself after the prototype is set
  this.childNodes[1].onClick = this.clickMyButton;//
}

var wrapperDiv = document.getElementById("wrapperDiv");
wrapperDiv.prototype = new ExtraFeatures;

//so, here I call it manually, but it's also been set as the onclick callback in the child div
wrapperDiv.clickMyButton();

</script>

函数外部特性（）{
this.clickMyButton=函数（）{
警报（“点击”）；
}
//这里的想法是**这个**将在原型设置后引用div本身
this.childNodes[1].onClick=this.clickMyButton//
}
var wrapperDiv=document.getElementById（“wrapperDiv”）；
wrapperDiv.prototype=新的附加功能；
//因此，这里我手动调用它，但它也被设置为子div中的onclick回调
包装器div.clickMyButton（）；

我很确定这是可能的，但是上面的代码并没有达到我想要的效果

---

TIA.

你反对jQuery吗？这可以通过jQuery库和扩展其功能轻松完成。e、 g

(function($){
  $.fn.extend({
    makeBlue: function(){
      return this.filter('div').each(function(i,e){
        $(this).css('background-color','blue');
      }).end();
    }
  });
})(jQuery);

var $div = $('#mydiv');
$div.makeBlue();

---

你反对jQuery吗？这可以通过jQuery库和扩展其功能轻松完成。e、 g

(function($){
  $.fn.extend({
    makeBlue: function(){
      return this.filter('div').each(function(i,e){
        $(this).css('background-color','blue');
      }).end();
    }
  });
})(jQuery);

var $div = $('#mydiv');
$div.makeBlue();

将函数绑定到“this”范围：

将函数绑定到“this”范围：

---

在创建对象之前使用原型，并根据原型创建新对象。一旦对象退出，只需向其添加方法/属性即可。因此，如果您想向DOM对象添加方法，只需将它们添加到函数中即可

我建议这样做：

addMyExtraFeatures(obj) {
    obj.clickMyButton = function () {
        alert("clicked");
    }
  //the idea here is that **this** will reference the div itself after the prototype is set
  obj.childNodes[1].onClick = obj.clickMyButton;//
}

var wrapperDiv = document.getElementById("wrapperDiv");
addMyExtraFeatures(wrapperDiv);

//so, here I call it manually, but it's also been set as the onclick callback in the child div
wrapperDiv.clickMyButton();

---

在创建对象之前使用原型，并根据原型创建新对象。一旦对象退出，只需向其添加方法/属性即可。因此，如果您想向DOM对象添加方法，只需将它们添加到函数中即可

我建议这样做：

addMyExtraFeatures(obj) {
    obj.clickMyButton = function () {
        alert("clicked");
    }
  //the idea here is that **this** will reference the div itself after the prototype is set
  obj.childNodes[1].onClick = obj.clickMyButton;//
}

var wrapperDiv = document.getElementById("wrapperDiv");
addMyExtraFeatures(wrapperDiv);

//so, here I call it manually, but it's also been set as the onclick callback in the child div
wrapperDiv.clickMyButton();

---

据我所知，您希望在这里实现某种子类化。 如果“是”，则

原型

对于您想要实现的目标来说是错误的属性

下面是将ExtraFeatures对象注入特定DIV元素的原型链的代码：

<div id="wrapperDiv">
  <div id="buttonDiv" >ddd</div>
</div>

<script type="text/javascript">

  var wrapperDiv = document.getElementById("wrapperDiv");

  var ExtraFeatures = {
    extraFoo : function(){ alert("clicked"); }
  };

  ExtraFeatures.__proto__  = wrapperDiv.__proto__;
  wrapperDiv.__proto__ = ExtraFeatures;

  wrapperDiv.extraFoo();

  //for( var p in wrapperDiv )
  //  console.log(p);

</script>

ddd
var wrapperDiv=document.getElementById（“wrapperDiv”）；
变量外部特征={
extraFoo:function（）{alert（“clicked”）；}
};
ExtraFeatures.\uuuuu proto\uuuuuuu=wrapperDiv.\uuuuuu proto\uuuuu；
wrapperDiv.\uuuuu proto\uuuuuuu=外部特征；
wrapperDiv.extraFoo（）；
//for（包装器div中的变量p）
//控制台日志（p）；

---

但是IE不支持

\uuu proto\uu

）

据我所知，您希望在这里实现某种子类化。 如果“是”，则

原型

对于您想要实现的目标来说是错误的属性

下面是将ExtraFeatures对象注入特定DIV元素的原型链的代码：

<div id="wrapperDiv">
  <div id="buttonDiv" >ddd</div>
</div>

<script type="text/javascript">

  var wrapperDiv = document.getElementById("wrapperDiv");

  var ExtraFeatures = {
    extraFoo : function(){ alert("clicked"); }
  };

  ExtraFeatures.__proto__  = wrapperDiv.__proto__;
  wrapperDiv.__proto__ = ExtraFeatures;

  wrapperDiv.extraFoo();

  //for( var p in wrapperDiv )
  //  console.log(p);

</script>

ddd
var wrapperDiv=document.getElementById（“wrapperDiv”）；
变量外部特征={
extraFoo:function（）{alert（“clicked”）；}
};
ExtraFeatures.\uuuuu proto\uuuuuuu=wrapperDiv.\uuuuuu proto\uuuuu；
wrapperDiv.\uuuuu proto\uuuuuuu=外部特征；
wrapperDiv.extraFoo（）；
//for（包装器div中的变量p）
//控制台日志（p）；

---

但是IE:）不支持

\uuuu proto\uuuu

。

在扩展DOM对象之前，最好阅读Kangax的以下文章：

您应该注意到Prototype.js库采用了“扩展DOM”策略，但现在已经被放弃，所以在实现它之前请仔细考虑

您可能还应该注意到，虽然javascript是迄今为止最流行的编写基于web文档的脚本的方式，但W3CDOM标准和规范（在很大程度上，现在仍然是）是编写语言中立的。也就是说，它们可以用任何语言实现

---

因此，不假设任何特定的固有方案也是有意义的。因此，您不应假设所有浏览器或用户代理都支持原型继承（一些常用的浏览器或用户代理不支持原型继承），也不应假设那些支持原型继承的浏览器或用户代理将继续以与当前实现方式兼容的方式支持原型继承。

在扩展DOM对象之前，最好阅读Kangax的以下文章：

您应该注意到Prototype.js库采用了“扩展DOM”策略，但现在已经被放弃，所以在实现它之前请仔细考虑

您可能还应该注意到，虽然javascript是迄今为止最流行的编写基于web文档的脚本的方式，但W3CDOM标准和规范（在很大程度上，现在仍然是）是编写语言中立的。也就是说，它们可以用任何语言实现

---

因此，不假设任何特定的固有方案也是有意义的。因此，您不应该假设所有浏览器或用户代理都支持原型继承（一些常用的浏览器或用户代理不支持原型继承），也不应该假设那些支持原型继承的浏览器或用户代理将继续以与当前实现方式兼容的方式支持原型继承。

我反对jQuery:）我意识到我是在向不可转换的人说教，这完全是一个品味的问题，但只要看看上面的代码示例（您的）。这是我见过的最丑的一群公牛！这就好像有人不厌其烦地使用了一种非常可爱而优雅的语言（Javascript），并将其操纵成了一团不洁的混乱。我很感激你的建议，而且我相信它是有效的，但如果它有效，那就意味着必须有一种更直接、更简单的方法来在原生JS中实现它。当我揭开它的时候，回来看看它是什么！：）“在各种框架之外寻找如何使用javascript的建议变得越来越困难。”——问题的第一句话……nnnnnn：同意，尽管我没有通读到“没有框架我绝对不可能这么做”，只是一个强烈的偏好而已@Dredel博士：Javascript和优雅；有趣的概念。我个人使用它是出于纯粹的需要，并且期待HTML5而不是需要