Question

我正在尝试用JavaScript创建一个简单的HTML标记引擎。我们的想法是使用标记名称作为函数名称，但为了做到这一点，不必实现该函数。让我们假设它存在于一个名为HTML的对象中。

看起来应该是这样的：

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

到目前为止，我已经做了一个非常基本的实现：

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;
}

本质上我想运行这样的函数，而不必指定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

如果要通过字符串名称动态调用方法，可以执行以下操作：

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

var methodToCall = 'h1';

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

Answer 4

好吧我很无聊所以我抓了一个裂缝。最后一行是你想要的地方。

  // 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。

JavaScript对象的动态方法

4 个答案: