定义的变量范围

Question

所以我有以下基本脚本，用于在整个项目中使用的常用功能。让我们用下面的代码调用这个 base.js。

base.js

(function(document, window, undefined, $){

    if (typeof $ === undefined) {
        throw new Error("Site requires jQuery");
    }

    $.SPA = {};

    $.SPA.showAlert = function(msg) {
      alert(msg);
    };

})(document, window, undefined, jQuery);

而且我可以在特定页面中加载不同的脚本。

现在假设我有页面说，dashboard，它使用以下代码加载 dashboard.js -

dashboard.js

$(function() {
    $.SPA.showAlert("Bazzinga");
});

所以我可以毫无问题地访问$.SPA。但我的问题是，这是正确的还是可能导致 $.SPA 范围出现问题或有任何机会从其他脚本覆盖它？

Answer 1

但我的问题是，这是正确的还是可能导致 $.SPA 出现问题 范围或从其他脚本覆盖它的任何机会？

$.SPA 位于全局范围内，因为 $ 具有全局范围。

是的，其他脚本可以覆盖它，因为它们也可以访问这个变量，这对于 JavaScript 中的大多数对象都是如此，因为它被设计为可扩展的。

您可以使用Object.freeze 使对象不可变

Object.freeze($.SPA);

在你的 IIFE 末尾添加这一行

(function(document, window, undefined, $){

    if (typeof $ === undefined) {
        throw new Error("Site requires jQuery");
    }

    $.SPA = {};

    $.SPA.showAlert = function(msg) {
      alert(msg);
    };

    Object.freeze($.SPA);

})(document, window, undefined, jQuery);

编辑：

根据@ArunPJohny 的评论，您还需要使用定义属性，因为单独冻结是不够的。

(function(document, window, undefined, $){

    if (typeof $ === undefined) {
        throw new Error("Site requires jQuery");
    }

    $.SPA = {};

    $.SPA.showAlert = function(msg) {
      alert(msg);
    };
    Object.defineProperty($, 'SPA', {
     enumerable: true,
     configurable: false,
     writable: false,
     value: {}
   });    

    Object.freeze($.SPA);

})(document, window, undefined, jQuery);