js除了立即执行函数，你还可以这么玩 (预计阅读 1 min)

【本文预计阅读时长 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================

js除了立即执行函数，你还可以这么玩 (预计阅读 1 min)

猜你喜欢