JavaScriptオブジェクトの動的メソッド

Question

JavaScriptで簡単なHTMLタグエンジンを作成しようとしています。この考え方は、関数名としてタグ名を使用することですが、関数を実装する必要はありません。 HTMLというオブジェクト内に存在すると仮定します。

それは次のようなものになります。私は、このように関数を実行したいと思います。本質的に

function create_and_append_html_element(params) { 
    var attributes = params.attr; 
    var tag = params.tag; 
    var target = params.target; 
    var content = params.content; 

    var element = document.createElement(tag); 
    if (attributes) $(element).attr(attributes); 
    if (content) $(element).html(content); 
    if (target) $(target).append(element); 
    return element; 
} 

：私は今のところ持っている非常に基本的な実装がこれです

HTML.h1({class:"uberheadline"}, "Hello World"); 
HTML.div({id:"megabox"}); 

をtag変数を指定する必要はありません。出来ますか？もしそうなら、どこで答えを探すのがよいでしょうか？

Answer 1

tagの値が関数に渡されない場合、その値を推論するロジックを記述する必要があります。

Answer 2

私が正しく理解していれば、HTML.h1のような機能を作成してcreate_and_append_html_elementを内部でtagプロパティを自動的に設定するようにしたいとします。

は、次のようにあなたは、このような関数を作成することができ、そうするには、次の

// array of elements separated with space 
$.each("h1 div".split(" "), function(i, tag) { 
    // make the function available as HTML.h1, HTML.div, etc. 
    HTML[tag] = function(attr, content) { 
     return create_and_append_html_element({ tag:  tag // pass tag through 
               attr: attr, 
               content: content }); 
    }; 

}); 

私は正確な構文とどのようなものをHTML.h1機能の署名が（それが(attr, content)のように見える）しているのかわからないが、あなたのことができもちろんそれを変更してください。

Answer 3

あなたは次の操作を行うCAそれの文字列名によって動的にメソッドをコールする場合：

HTML.h1({class:"uberheadline"}, "Hello World"); 
HTML.div({id:"megabox"}); 

var methodToCall = 'h1'; 

if(typeof(HTML[methodToCall]) === 'function') { 
    HTML[methodToCall](); // run function 
} 

Answer 4

OK、私は亀裂を取ったので、私は退屈していました。最後の行は、取得しようとしていた場所です。

// Using a tag whitelist 
    var tags = [ 
    'div', 'b', 'a', 'i', 'link', 'script', 'p', 'em', 'span' // ... and so on 
    ] 

    // HTML constructor 
    function _HTML() { 
    } 

    // Your magic create/append function 
    function create_append(tagname, params) { 
    params.target.append (document.createElement(tagname)); 
    }; 

    // Patch prototype with one closure per tag name in whitelist 
    for (var i=0; i<tags.length; i++) { 
    var tagname = tags[i]; 
    _HTML.prototype[tagname] = function(tagname) { 
     return function (params) { 
      return create_append(tagname, params); 
     } 
    }(tagname); 
    } 

    // Export user-accessible object 
    var HTML = new _HTML; 

    // Now you can do this! 
    HTML.div({target:$('body')}); 

Full jsFiddle here。