javascript - 如何检查 Javascript 中的变量是否在另一个 Javascript 文件中定义，如果没有则显示警报？

Question

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

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

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

using = "myFramework";

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

我的代码如下:

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

P.S:我的框架不是框架的真实名称。

** 我不想使用 jQuery **

Answer 1

For making sure the user is creating the element with my framework, I've created a variable that the user defines at the end of their file.

使用全局 using 变量是监视元素是否是使用您的框架创建的糟糕方法。它非常不可靠，并且增加了客户端代码的复杂性。即使定义了 using 变量，也没有任何信息告诉您他们确实使用了 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