0

正直なところ、私はJavaScriptプロトタイプを理解しようとしていますが、あまり進歩していません。私がやろうとしていることを説明する方法が正確にはわかりませんが、最終的な目標の一部は、jQueryと同様にDOMをトラバースする方法を学び、アクセスされている特定の要素を操作するカスタムメソッドを追加することです。

編集：以下のコードは、これまでに受け取った回答から学んだ概念を反映し、それらが私が達成しようとしているものに達していない場所を示すために更新されました。

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の使用を提案しないでください。目的が損なわれます。

4

3 に答える 3

1

これを試して。

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')
于 2012-08-31T02:27:07.743 に答える
1 
var $ = function(id) {  
    return new My_jquery(id);  
}  

function My_jquery(id) { 
    this.elem = document.getElementById(id);
}

My_jquery.prototype = {
   insert : function(text) { this.elem.innerHtml = text; return this;}
}

$('para1').insert('hello world').insert('chaining works too');

My_jquery.prototypeにelemで操作したいメソッドを追加します

于 2012-08-31T02:59:23.050 に答える
1

次のようなスキームを使用できます。

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>

MyLibraryがどのように機能するかを研究することは有用であると思うかもしれません、それはいくつかの非常に良い実践とパターンを持っています。

于 2012-08-31T03:04:13.167 に答える