0

我有一个 JavaScript 框架，可以让一些 HTML5 元素在旧版浏览器中工作，并让用户创建自己的元素。用户创建自己的元素的功能用于另一个 Javascript 文件，例如：

element('myElement').appendStyleColor('red').type('text');

为了确保用户使用我的框架创建元素，我创建了一个用户在文件末尾定义的变量。例如：

using = "myFramework";

如果变量“using”没有值“myFramework”，我必须创建一个测试来显示警报，但我无法让测试工作，因为如果测试成功，它只会在 myFramework.js 中查找文件而不是用户的 JavaScript 文件，如 script.js 文件或 application.js 文件。

我的代码如下：

if (using !== "myFramework") {
     alert("The value 'myFramework' is not defined in the 'using' variable.")   
}

PS：我的Framework并不是真正的framework名称。

** 我不想使用 jQuery **

4

2 回答 2

2

为了确保用户使用我的框架创建元素，我创建了一个用户在文件末尾定义的变量。

拥有一个全局using变量是一种不好的方式来监控元素是否是用你的框架创建的。它非常不可靠，并增加了客户端代码的复杂性。即使using定义了该变量，也无法告诉您他们真的使用该element函数来操作其元素。此外，使用额外的全局变量污染全局命名空间是一种非常糟糕的做法。

无论如何，我不确定为什么拥有这些知识有什么意义，但是您可以简单地在元素本身上设置一个属性，它曾经传递/创建给函数/由element函数创建。

为简单起见，假设您有一个element函数，该函数接受一个tagName作为参数并返回元素的包装版本。

例如

var element = (function () {
    var elCount = 0;

    function element(tagName) {
        return new ElementWrapper(document.createElement(tagName));
    }

    function ElementWrapper(el) {
        this.el = el;
        this.el.setAttribute('data-my-framework', ++elCount);
    }

    return element;

})();

这意味着您可以使用该函数someDOMEl.hasAttribute('data-my-framework')来了解元素是否是使用该element函数创建的。显然，客户端代码总是可以删除该属性，但是您无能为力。

console.log(element('div').el.getAttribute('data-my-framework')); //1
于 2013-09-23T19:15:21.057 回答
0

我建议使用onload事件进行此检查。这可以确保加载所有内容并设置变量：

 window.onload = function() {
    if (using !== "myFramework") {
       alert("The value 'myFramework' is not defined in the 'using' variable.");
    }
 }
于 2013-09-23T19:07:10.390 回答