如何在JavaScript中制作模块化常量

Question

我是封装的坚信者，使用javascript很难做到这一点。 我希望能够使用未在全局级别定义的常量，但无法完成此示例：

html

<!DOCTYPE html>
<body>
 <p>
  <b>some examples</b>
 </p>
 <p>
  <script>some.STRING</script><br>
  <script>some.ARRAY.join(' - ')</script>
 </p>
</body>

javascript

// some.js
var some = (function () {
        return {
            STRING: 'some string',
            ARRAY: ["some", "data", "in", "an", "array"]
        };
    }
);

我希望输出包含下面的两行

some string
some - data - in - an - array

jsfiddle： https ://jsfiddle.net/p3kgpx70/4/

Answer 1

将表达式放在脚本中不会将其值添加到页面中。 您需要调用一个函数来做到这一点。 页面加载时，可以使用document.write() 。

<script>
document.write(some.STRING);
document.write(some.ARRAY.join(' - ');
</script>

document.write()是老式的。 最好使用诸如document.getElementById()类的DOM操作函数并将其分配给.innerHTML 。

您也没有正确分配some 。 您需要调用该函数以获取对象。

var some = (function () {
        return {
            STRING: 'some string',
            ARRAY: ["some", "data", "in", "an", "array"]
        };
    }
)();

或者您可以忘记IIFE，而直接分配对象。

var some = {
    STRING: 'some string',
    ARRAY: ["some", "data", "in", "an", "array"]
};

Answer 2

这是一个小提琴： https://jsfiddle.net/p3kgpx70/6/ : https://jsfiddle.net/p3kgpx70/6/

// some.js
var some = (function () {
        return {
            STRING: 'some string',
            ARRAY: ["some", "data", "in", "an", "array"]
        };
    }
)();
element.innerHTML += some.STRING + "</br>";
element.innerHTML += some.ARRAY.join(' - ');

错误＃1：IIFE必须包装在(function(){})()
错误＃2：将表达式放入脚本中不会将其值添加到页面中。 您必须更改DOM才能将值写入页面。 如果将它放在p元素中，则document.write(some.STRING) （@ Barmar）将引发错误。 因此，我在some变量定义之后使用了element.innerHTML来写入值。
#3 （不是一个真正的错误：不是的var ，你可以用const做some常数。

现在，更加不容错过！

// some.js
const object = {};
Object.defineProperty(object, "some", {get: function () {
        return {
            STRING: 'some string',
            ARRAY: ["some", "data", "in", "an", "array"]
        };
    }})

element.innerHTML += object.some.STRING + "</br>";
element.innerHTML += object.some.ARRAY.join(' - ');
object.some.STRING = 6;
console.log(object.some); // still not changed

在第一个代码块中，如果我设置some.STRING = 6，则值将被更改。 如果要使其不可变，则必须使object = {}为常量，然后将属性some的getter等于您的函数。 每次你得到的价值object.some ，它仍然是相同的，即使你改变的值object.some这样的： object.some.STRING = 6; 。 那是因为您发明了神奇的功能。 我为你写了包装纸。

在JavaScript中，您无法设置全局变量的getter / setter （无父项）。 抱歉。

Answer 3

在您的示例中，您将“ some”声明为一个函数，而不是一个对象。 您宁愿：

// some.js
var some = (function () {
    return {
        STRING: 'some string',
        ARRAY: ["some", "data", "in", "an", "array"]
    };
 }
)();

最后两个括号用于执行该函数，并让“ some”成为该对象。

但是，“ some”仍然是可以轻松操纵的window属性。 仅解决了一个语法上的问题，但未提供封装。 您可以这样做：some.Array ='foo'; 最近在您的脚本中，那会很好。 ES6关键字“ const”并不能阻止这种情况：“ const”仅禁止重新分配变量，而不能对其进行修改。 因此，“ const some”将无法使这些值真正恒定。

如果您真的很喜欢封装，则应该检查javascript和模块模式中的闭包，还应该了解一些使用browserify或webpack模块化构建javascript的方法。

如何在JavaScript中制作模块化常量

问题描述

3 个解决方案

解决方案1
1 2016-10-13 08:11:05

解决方案2
0 已采纳

解决方案3
0 2016-10-13 08:18:15

如何在JavaScript中制作模块化常量

问题描述

3 个解决方案

解决方案1 1 2016-10-13 08:11:05

解决方案2 0 已采纳

解决方案3 0 2016-10-13 08:18:15

解决方案1
1 2016-10-13 08:11:05

解决方案2
0 已采纳

解决方案3
0 2016-10-13 08:18:15