自执行函数

/*
            自执行函数
            + 立即执行函数
            + 就是函数自己调用，函数声明完成后，会自己立马执行
            + 特点：
              => 当函数执行完毕后，它会在内存空间里面进行销毁，比普通的函数节省空间
              => 当咱们使用了自执行函数后，会形成一个私有作用域，只有内部使用，外部其他地方使用不了
            + 作用：
              => 适合做一些页面初始化的东西  
              => 适合做页面文件的模块，防止冲突问题
            + 页面模块化历史
              => 之前技术不成熟，前端刚刚处于起步阶段，没有更好的模块解决方案，有很多后端的人员也在做前端
              => 人家在开发的过程中，发现前端连模块都没有觉得特别low，所以他们一起想办法，提出了使用自执行函数来做模块
              => 自执行函数做前端模块业务，使用七八年，直到后面前端出现了自己的模块才慢慢没有使用了
            + 注意点：
              => 当自执行函数和另一个括号连接在一起时会报错，会把两句代码当成一句去执行
              => 给咱们自执行函数前面设置一个分号，可以解决这种问题    
        */

        //推荐这种写法
        // (function(){
        //     console.log('我是自执行函数，初次见面，请大家多多理解!')
        // })()

        // function fn(){
        //     console.log(123)
        // }
        // fn()
        // console.log(fn)

        // let fn = (function(){
        //     console.log(123)
        // })()
        // console.log(fn)

        //自执行函数还可以这样写
        // (function(){
        //     console.log('hello')
        // }())

        console.log('这是函数')
        ;(function(){
            console.log('自执行函数')
        })()

页面功能模块模块
<script src="js/a.js"></script>
    <script src="js/b.js"></script>
    <script>
        //注意点1：如果是使用let声明的变量，如果变量名称相同，会报错，说咱们num变量已经声明过了
        // console.log(num)

        //注意点2：如果是使用var声明的变量，如果变量名称相同，后面的会把前面的给覆盖掉

        console.log(modA.num)
        console.log(modB.num)

        modA.slider()
        modB.cart()

    </script>


a.js
;(function () {
    console.log('这是轮播图模块')
    //自定义下标
    let num = 0
    // var num = 0
    function slider() {
        console.log('这是轮播图的业务逻辑代码')
    }
    //可以把咱们需要给外界使用的东西，可以放在window上
    window.modA = {
        num,
        slider
    }
})()


b.js
;(function () {
    console.log('这是购物车模块')
    //自定义下标
    let num = 1
    //var num = 1
    function cart() {
        console.log('这是购物车的逻辑代码')
    }
    window.modB = {
        num,
        cart
    }
})()