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/

// 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以将值写入页面。 document.write(some.STRING)（由@Barmar提出）如果将其放在p元素中，则会抛出错误。所以，我在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

在第一个代码块中，如果我设置了一些.STRING = 6，则该值将被更改。如果你想让它成为不可变的，你必须使object = {}成为常数，然后将属性some的{{1}}等于你的函数。每当您获得getter的值时，即使您更改object.some的值，它仍然是相同的：object.some。这是因为你发明了神奇的功能。我为你写了包装纸。

在JavaScript中，您无法设置全局变量的object.some.STRING = 6; / getter（无父级）。遗憾。

Answer 3

在您的示例中，您要声明某些＆＃39;只是一个功能，而不是一个对象。你宁愿这样做：

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

使用最后两个额外的括号来执行该功能并获得一些＆＃39;成为那个对象。

然而，＆＃39;某些＆＃39;仍然是一个可以轻松操作的窗口属性。只是一个sintactic问题已经解决，但没有提供封装。你可以这样做： some.Array =＆＃39; foo＆＃39 ;; 最近你的脚本，这将是完美的。 ES6关键字＆＃39; const＆＃39;并没有阻止这种情况：＆＃39; const＆＃39;只是禁止重新分配变量，而不是修改变量。所以＆＃39; const some＆＃39;不会努力使这些值真正成为常量。

如果你真的要进行封装，你应该检查javascript和模块模式中的闭包，还应该看一些使用browserify或webpack模块化构建你的javascript的方法。

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

3 个答案: