Question

我正在编写一个JS文件，该文件将使用HTML <script>标记作为外部脚本包含在其他页面中。

我想通过设置某些全局变量来选择配置脚本的某些部分。例如，想象一下这样的脚本：

//external.js
var show = false;
$(function() {
    if(show) alert('show');
    else alert('no show');
});

//test.html
<script src="external.js"></script>
<script>show = true</script>

所以我在外部脚本中定义变量及其默认值，但在HTML文件中覆盖它，然后在文档准备就绪时显示警告。

现在这个工作正常，但是一旦我尝试使用async属性异步加载external.js，它就会崩溃。这是因为现在外部脚本实际上可能会在show = true行之后加载，这意味着它将使用默认值再次覆盖自定义值。

我目前对此的解决方案是这样的，但是看起来不必要地复杂起来：

//external.js
var show = false;
$(function() {
    if ( typeof my_init == 'function' ) { my_init(); }
    if(show) alert('show');
    else alert('no show');
});

//test.html
<script async src="external.js"></script>
<script>function my_init() { show = true }</script>

有更好的办法吗？

Answer 1

处理类似这样的事情的典型方法是使用配置对象。类似的东西：

(function (config) {
    $(function () {
        if (config.show) alert('show');
        else alert('no show');
    });
})(window.config || (config = { show: false }));

现在在你的另一个脚本中你可以这样做：

config = { show: true }

这样做是使用提供的config对象（如果已定义），否则使用默认设置show设置为false。

然而，更好的方法是将这一切都包装成一个模块，而不是使用全局变量。

Answer 2

Demeter法则 - 代码组件只应与它们的直接关系进行通信（例如，它们继承的类，它们包含的对象，通过参数传递的对象等）

您应该将配置对象作为参数传递。

允许在外部JS脚本中配置变量的最佳实践

2 个答案: