非零基础自学前端最后一遍二 JavaScript基础 7 JavaScript函数 7.17 立即执行函数的使用场景

我不是女神ヾ 2024-03-24 13:15 19阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  二 JavaScript基础
         *  7 JavaScript函数
         *   *  7.17 立即执行函数的使用场景
             *   *  7.17.1 防止全局变量的命名冲突
                 *  7.17.2

![在这里插入图片描述][0460d752c31447f9b00fa787ef36033a.png_pic_center]

#### 二 JavaScript基础 ####

#### 7 JavaScript函数 ####

##### 7.17 立即执行函数的使用场景 #####

###### 7.17.1 防止全局变量的命名冲突 ######

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <script src="./js/xiaoming.js"></script>
      <script src="./js/lilei.js"></script>
      <script src="./js/xm_util.js"></script>
    
      <script>
    
        // 应用场景一: 防止全局变量的命名冲突
    
        // 立即执行函数和普通的代码有什么区别?
        // 在立即执行函数中定义的变量是有自己的作用域的
        (function () {
          
          var message = "Hello World"
          // console.log(message)
        })()
        // console.log(message)
        // var message = "Hello World"
        // console.log(message)
    
      </script>
    
    </body>
    
    </html>

xiaoming.js

// esmodule -> import/export -> es5中立即执行函数
    var xmModule = (function() {
        
      var xmModule = {
        }
    
      var message = "Hello XiaoMing"
      console.log(message)
      console.log(message.length)
    
      xmModule.message = message
      return xmModule
    })()

> 当然es6之后不这样写了，之后用到的是模块的暴露和导入

lilei.js

(function(){
        
      var message = "Hello LiLei"
      console.log(message)
    })()

xm\_util.js

(function() {
        
      console.log(xmModule.message) 
    })()

运行结果

![在这里插入图片描述][2fb34e6a5af54f548963f968fa777fa6.png_pic_center]

###### 7.17.2 ######

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <button class="btn">按钮1</button>
      <button class="btn">按钮2</button>
      <button class="btn">按钮3</button>
      <button class="btn">按钮4</button>
    
      <script>
        // 慢慢来, 反而是快的
    
        // 1.获取一个按钮监听点击
        // 1.拿到html元素
        // var btnEl = document.querySelector(".btn")
        // console.log(btnEl)
        // // 2.监听对应按钮的点击
        // btnEl.onclick = function() {
          
        //   console.log("点击了按钮1")
        // }
    
        // 2.获取所有的按钮监听点击
        // 没有使用立即执行函数
        debugger
        // var btnEls = document.querySelectorAll(".btn")
        // for (var i = 0; i < btnEls.length; i++) {
          
        //   var btn = btnEls[i];
        //   btn.onclick = function() {
          
        //     console.log(`按钮${i+1}发生了点击`)
        //   }
        // }
    
        // 使用立即执行函数
        var btnEls = document.querySelectorAll(".btn")
        for (var i = 0; i < btnEls.length; i++) {
          
          var btn = btnEls[i];
          (function (m) {
          
            btn.onclick = function () {
          
              console.log(`按钮${ m + 1}发生了点击`)
            }
          })(i)
        }
    
        console.log(i)
    
      </script>
    
    </body>
    
    </html>

![在这里插入图片描述][4bfe7d390b8e4f20828e07ecc2ff2f63.png_pic_center]

这是调试的知识，后面会再详细的说

![在这里插入图片描述][087b21b6ba5649adbc1f179d2f3be95f.png_pic_center]

[0460d752c31447f9b00fa787ef36033a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/2c6a56cb9e6b4810b8f24fdeb071ec1c.png
[2fb34e6a5af54f548963f968fa777fa6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/4a3495fbd29d444fbdc79a6ad68f75b3.png
[4bfe7d390b8e4f20828e07ecc2ff2f63.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/f29bd814a05b4c9daf89676320ba6a9f.png
[087b21b6ba5649adbc1f179d2f3be95f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/79b87a37f0e44254869da79729e46210.png