Question

越来越难以找到关于如何在各种框架之外使用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>

我很确定这是可能的，但上面的代码没有做我想做的事。

TIA。

Answer 1

在创建对象之前使用原型，并从原型创建新对象。对象退出后，您只需添加方法/属性即可。因此，如果要将方法添加到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();

Answer 2

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

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

您可能还应该注意，尽管javascript是目前最流行的基于Web的文档脚本编写方式，但W3C DOM标准和规范（并且在很大程度上）仍被编写为语言中立。也就是说，它们可以用任何语言实现。

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

Answer 3

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

Function.bind = function(fn, bind) {
  return function() {
    // apply(variable to use as "this" in the function, arguments)
    return fn.apply(bind, arguments);
  };
};

// and if you want to have it as a prototype fn...
Function.prototype.bind = function(bind) {
  // probably a nicer way to do it, but okay
  return Function.bind(this, bind);
}


// dun dun dun
this.childNodes[1].onClick = this.clickMyButton.bind(this);

Answer 4

HTMLDivElement.prototype.clickMyButton = function(){
   alert("clicked");
}

Answer 5

你反对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();

Answer 6

据我所知，你想在这里实现一种子类化。如果“是”，则prototype是您想要实现的错误属性。

以下是将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>

但IE不支持__proto__：）

我如何在div上进行原型设计？

6 个答案: