Javascript 动态声明变量

这个项目只是为了让我自己满意，所以我并不是真的在寻找其他图书馆来完成这个任务。我正在尝试创建一个HTML元素库：

var ElementLibrary = function() {};
(function() {
    var _concatArray = [,'Element'];
    var _varArray = [
        'html',
        'head', 'title', 'base', 'link', 'meta', 'style',
        'script',
        'body', 'section', 'nav', 'article', 'aside', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hgroup', 'header', 'footer', 'address', 'main',
        'p', 'hr', 'pre', 'blockquote', 'ol', 'ul', 'li', 'dl', 'dt', 'dd', 'figure', 'figcaption', 'div',
        'a', 'em', 'strong', 'small', 's', 'cite', 'q', 'dfn', 'abbr', 'data', 'time', 'code', 'var', 'samp', 'kbd', 'sub', 'sup', 'i', 'b', 'u', 'mark', 'ruby', 'rt', 'rp', 'bdi', 'bdo', 'span', 'br', 'wbr',
        'ins', 'del',
        'img', 'iframe', 'embed', 'object', 'param', 'video', 'audio', 'source', 'track', 'canvas', 'map', 'area', 'svg', 'math',
        'table', 'caption', 'colgroup', 'col', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th',
        'form', 'fieldset', 'legend', 'label', 'input', 'button', 'select', 'datalist', 'optgroup', 'option', 'textarea', 'keygen', 'output', 'progress', 'meter',
        'details', 'summary', 'command', 'menu'
    ];
    var _l = _varArray.length;
    for (var i = 0; i < _l; i++) {
        _concatArray[0] = _varArray[i];
        ElementLibrary.prototype[_concatArray.join('')] = document.createElement(_varArray[i]);
        ElementLibrary.prototype[_varArray[i]] = function() {
            return this[_concatArray.join('')].cloneNode(false);
        };
    }
})();

var ElementLibrary=function（）{}；
（功能（）{
变量_concatArray=[，'Element']；
var\u varArray=[
“html”，
“标题”、“标题”、“基础”、“链接”、“元”、“样式”，
“脚本”，
“正文”、“章节”、“导航”、“文章”、“旁白”、“h1”、“h2”、“h3”、“h4”、“h5”、“h6”、“hgroup”、“页眉”、“页脚”、“地址”、“主要”，
‘p’、‘hr’、‘pre’、‘blockquote’、‘ol’、‘ul’、‘li’、‘dl’、‘dt’、‘dd’、‘figcaption’、‘div’，
“a”、“em”、“strong”、“small”、“s”、“cite”、“q”、“dfn”、“abbr”、“data”、“time”、“code”、“var”、“samp”、“kbd”、“sub”、“sup”、“i”、“b”、“u”、“mark”、“ruby”、“rt”、“rp”、“bdi”、“bdo”、“span”、“br”、“wbr”，
"ins","del",，
“img”、“iframe”、“embed”、“object”、“param”、“video”、“audio”、“source”、“track”、“canvas”、“map”、“area”、“svg”、“math”，
“table”、“caption”、“colgroup”、“col”、“tbody”、“thead”、“tfoot”、“tr”、“td”、“th”，
“表单”、“字段集”、“图例”、“标签”、“输入”、“按钮”、“选择”、“数据列表”、“optgroup”、“选项”、“文本区域”、“键根”、“输出”、“进度”、“仪表”，
“详细信息”、“摘要”、“命令”、“菜单”
];
var _l=_varArray.length；
对于（变量i=0；i<\u l；i++）{
_concatArray[0]=_varArray[i]；
ElementLibrary.prototype[_concatArray.join（“”）]=document.createElement（_varArray[i]）；
ElementLibrary.prototype[_varArray[i]]=function（）{
返回此[_concatArray.join（“”）].cloneNode（false）；
};
}
})();

我最初开始写它的方式最终会超过400行，所以我想用一种更简洁的方式来写。好消息是，它部分有效。如果我这样做：

var el = new ElementLibrary();
el.pElement // <---that is correctly a paragraph element

var el=newelementlibrary（）；
el.pElement/在该循环中创建的函数不引用“\u concatArray”的“冻结”版本。它们都共享对同一数组的引用

将它们包装到另一个函数中：

ElementLibrary.prototype[_varArray[i]] = (function(ca) {
  return function() {
    return this[ca.join('')].cloneNode(false);
  };
})(_concatArray);

简单地使用字符串连接来形成属性名（换句话说，
\u varArray[i]+“Element”
）似乎就不会那么奇怪了。我还将对此进行一次尝试。这两个建议似乎都在纠正同一个问题；今天早上我没有喝足够的咖啡，以致于意识到：-）看起来问题仍然存在，但你发现了一些问题。它们似乎引用了相同的东西。@Llepwryd它们肯定引用了相同的数组；这就是JavaScript的工作原理。我添加了一个提琴，但即使做了一些更改，我仍然有同样的问题。也许_varArray是问题的根源，但我不知道为什么所有属性都声明正确。+1我收回它，您的两个建议的组合修复了它。：）@Llepwryd您将遇到与“_tempElement”完全相同的问题。JavaScript变量的作用域在函数级别。如果您没有像上面的代码那样将这些函数包装到另一个函数中，那么所有这些函数都将共享同一个变量。（编辑ah OK good:-）
var ElementLibrary = function() {};
(function() {
    var _varArray = [
        'html',
        'head', 'title', 'base', 'link', 'meta', 'style',
        'script',
        'body', 'section', 'nav', 'article', 'aside', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hgroup', 'header', 'footer', 'address', 'main',
        'p', 'hr', 'pre', 'blockquote', 'ol', 'ul', 'li', 'dl', 'dt', 'dd', 'figure', 'figcaption', 'div',
        'a', 'em', 'strong', 'small', 's', 'cite', 'q', 'dfn', 'abbr', 'data', 'time', 'code', 'var', 'samp', 'kbd', 'sub', 'sup', 'i', 'b', 'u', 'mark', 'ruby', 'rt', 'rp', 'bdi', 'bdo', 'span', 'br', 'wbr',
        'ins', 'del',
        'img', 'iframe', 'embed', 'object', 'param', 'video', 'audio', 'source', 'track', 'canvas', 'map', 'area', 'svg', 'math',
        'table', 'caption', 'colgroup', 'col', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th',
        'form', 'fieldset', 'legend', 'label', 'input', 'button', 'select', 'datalist', 'optgroup', 'option', 'textarea', 'keygen', 'output', 'progress', 'meter',
        'details', 'summary', 'command', 'menu'
    ];
    var _l = _varArray.length;
    for (var i = 0; i < _l; i++) {
        var _temp = _varArray[i];
        var _tempElement = _temp + 'Element';
        (function(t, te) {
            ElementLibrary.prototype[te] = document.createElement(t);
            ElementLibrary.prototype[t] = function() {
                return this[te].cloneNode(false);
            };
        })(_temp, _tempElement);
    }
})();

var el = new ElementLibrary();
alert(el.p());

ElementLibrary.prototype[_varArray[i]] = (function(ca) {
  return function() {
    return this[ca.join('')].cloneNode(false);
  };
})(_concatArray);