javascript - 定义的变量范围

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

But my question is, is this correct or may cause issues with $.SPA scope or any chance of overriding it from other scripts ?

$.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 的评论，您还需要使用 define 属性，因为仅卡住是不够的。

(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);