【本文預計閱讀時長 1 min】
假如在同一個目錄下，兩個js裏面可能有同名函數，後面js裏定義的函數會覆蓋前面js定義的函數，爲了避免衝突，要用模塊化的思想解決問題，大家可能都會使用立即執行函數去解決。
如下簡單例子:
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body></body>
<script src='test1.js'></script>
<script src='test2.js'></script>
<script>
js1.func1();
js2.show();
</script>
</html>
test1.js
(function (window) {
function func1() {
console.log("test1.js--func1");
}
function show() {
console.log("test1.js--show");
}
window.js1 = { func1, show }; // 全局暴露js1
})(window)
test2.js
(function (window) {
function func1() {
console.log("test2.js--func1");
}
function show() {
console.log("test2.js--show");
}
window.js2 = { func1, show }; // 全局暴露js2
})(window)
運行結果
test1.js--func1
test2.js--show
使用立即執行函數而不是直接暴露也做到來私有化private的意思，比如有5個函數，我只想暴露1個函數給別人，那麼window.js1 = {你想暴露的1個函數}，這樣別人就只能訪問你暴露的唯一函數，另外4個訪問不了。
除此之外，我們能用其他的方法嗎？既然是解決作用域的問題，那麼我們也可以利用塊級作用域來解決這個問題
ES6中出現了let，在塊級作用域之外調用不到，那麼新的寫法就來了。
test1.js 改爲
{
let func1 = function() {
console.log("test1.js--func1");
}
let show = function() {
console.log("test1.js--show");
}
window.js1 = { func1, show };
}
test2.js 改爲
{
let func1 = function() {
console.log("test2.js--func1");
}
let show = function() {
console.log("test2.js--show");
}
window.js2 = { func1, show };
}
執行效果一樣也是一樣的。
關注、留言，我們一起學習。
===============Talk is cheap, show me the code================