如何在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