我正在學習模塊模式并有一個問題。
我想在任何地方使用“設定”。
script1.js
var MODULE = (function() {
var t = {};
this.settings = { // this == Window
users: ['john', 'emma']
}
return t;
})()
script2.js
MODULE.dom = function() {
var t = this; // this == MODULE
document.querySelector('p').textContent = t.settings.users[0]; // error
function _say() {
return t.settings.users[1] // error
}
return {
say: _say
}
}
MODULE.DOM = MODULE.dom.call(MODULE)
使用時this.settings = {...}，“this”表示視窗，因此代碼不起作用。
使用時t.settings = {...}，“this”表示MODULE，因此代碼可以作業，但是在開發控制臺中撰寫 MODULE 時，設定會暴露在 MODULE 變數中。可以嗎？
我將不勝感激任何幫助，謝謝！
uj5u.com熱心網友回復：
使用時
t.settings = {...}，'this' 表示 MODULE 所以代碼可以作業
這是正確的做法。
但是在開發控制臺中撰寫 MODULE 時，設定會暴露在 MODULE 變數中。可以嗎？
大部分都沒問題。
如果您擔心客戶端能夠輸入變數名并查看運行的代碼 - 沒有辦法避免這種情況。他們可以只查看 devtools 以查看網路請求是什么，以及下載了什么 - 或查看 Sources 面板。
如果您擔心遇到與較大腳本的命名沖突，那么 - 有時，庫會故意將自己分配給視窗以允許代碼的其他部分訪問它們。也許你希望你MODULE是這樣的。如果沒有，那么您應該改用 JavaScript 模塊，它允許在其他腳本中匯入腳本，而不會污染全域命名空間或有任何命名沖突的可能性。例如，你可以做
// script1.js
export const MODULE = {
settings: {
users: ['john', 'emma'];
}
};
// script2.js
import { MODULE } from './script1.js';
// proceed to use MODULE
您可以import { MODULE } from './script1.js';從任何腳本檔案中執行，而不僅僅是script2.js.
就個人而言，我認為 JavaScript 中的 IIFE 模塊模式現在已經基本過時了。對于任何大小合理的腳本，最好在單獨的檔案中撰寫代碼，然后根據需要匯入和匯出。（一個 1000 行的檔案有點難以除錯和重構。十個 100 行的檔案更容易除錯和重構。）
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/504253.html
標籤：javascript