JS基本功系列-采用立即执行函数的方式开发插件

admin 2022年5月12日13:38:19安全开发评论5 views2262字阅读7分32秒阅读模式

多人协作开发插件

这种模式必须要手写熟练!!!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多人协作开发插件</title>
</head>
<body>
<input type="text" id="num1"/>
<input type="text" id="num2"/>

<div class="btn-group">
  <button data-sign="plus">+</button>
  <button data-sign="minus">-</button>
  <button data-sign="mul">*</button>
  <button data-sign="div">/</button>
</div>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
  var test = new Test(
    {
      num1document.getElementById('num1'),
      num2document.getElementById('num2'),
      btnGroupdocument.getElementsByClassName('btn-group')[0]
    }
  )
  test.init();

  //init和bindEvent写在原型里面,这是固定的写法

</script>

</body>
</html>
;(function ({

  var Test = function (opt{
    this.num1 = opt.num1;
    this.num2 = opt.num2;
    this.btnGroup = opt.btnGroup;
  }

  Test.prototype = {//企业级写法
    //执行bindEevent
    initfunction ({
      this.bindEvent();
    },

    bindEventfunction ({
      var btns = this.btnGroup,
        __self = this;
      //下面写事件绑定
      addEvent(btns, 'click'function (e{
        __self.compute.call(__self, e)
      })
    },
    //自己写的插件
    computefunction (e{
      var e = e || window.event,
        tar = e.target || e.srcElement,//考虑到兼容性
        val1 = parseInt(this.num1.value),
        val2 = parseInt(this.num2.value),
        btns = this.btnGroup,
        sign;

      sign = tar.getAttribute('data-sign')

      switch (sign) {
        case 'plus':
          console.log(val1 + val2);
          break;
        case 'minus':
          console.log(val1 - val2);
          break;
        case 'mul':
          console.log(val1 * val2);
          break;
        case 'div':
          console.log(val1 / val2);
          break;
        default:
          console.log('出错了');
      }
    }
  }

  window.Test = Test;

})()

this访问问题

方法一:提升到封闭作用域的最顶端

; (function ({
    var _self;
    
    var Test = function (opt{
        _self = this;
    }
    
    Test.prototype = {
    
    }
    
    window.Test = Test;
})()

方法二:call/apply执行事件处理函数里面的函数 这种方法是常见的套路

bindEvent: function ({
    var btns = this.btnGroup,
        _self = this;

    addEvent(btns, 'click'function (e{
        _self.compute.call(_self, e)
    })
}


原文始发于微信公众号(迪哥讲事):JS基本功系列-采用立即执行函数的方式开发插件

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年5月12日13:38:19
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  JS基本功系列-采用立即执行函数的方式开发插件 http://cn-sec.com/archives/1001268.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: