js全局变量 与 const相关, js插件写法

[5Mi]

• 使用window.变量名定义为全局变量，但是注意：调用时候建议写上window.变量名，当然也可以不写
• 当全局变量跟局部变量重名时，局部变量的scope会覆盖掉全局变量的scope，当离开局部变量的scope后，又重回到全局变量的scope，而当全局变量遇上局部变量时，怎样使用全局变量呢？用window.globalVariableName

全局变量的优点：

可以减少变量的个数，减少由于实际参数和形式参数的数据传递带来的时间消耗。

全局变量的缺点：

（1）全局变量保存在静态存贮区，程序开始运行时为其分配内存，程序结束释放该内存。与局部变量的动态分配、动态释放相比，生存期比较长，因此过多的全局变量会占用较多的内存单元。

（2）全局变量破坏了函数的封装性能。函数象一个黑匣子，一般是通过函数参数和返回值进行输入输出，函数内部实现相对独立。但函数中如果使用了全局变量，那么函数体内的语句就可以绕过函数参数和返回值进行存取，这种情况破坏了函数的独立性，使函数对全局变量产生依赖。同时，也降低了该函数的可移植性。

（3）全局变量使函数的代码可读性降低。由于多个函数都可能使用全局变量，函数执行时全局变量的值可能随时发生变化，对于程序的查错和调试都非常不利。
因此，如果不是万不得已，最好不要使用全局变量。

**let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。**也就是说，从ES6开始，全局变量将逐步与全局对象的属性脱钩。

var a = 1;
// 如果在Node的REPL环境，可以写成global.a
// 或者采用通用方法，写成this.a
window.a // 1

let b = 1;
window.b // undefined

上面代码中，全局变量a由var命令声明，所以它是全局对象的属性；全局变量b由let命令声明，所以它不是全局对象的属性，返回undefined

项目中留意到,注意:

//在emc项目的某个api.js中,文件只是存放一些将要export导出的变量或方法
//项目中其实并没用引用api.js文件(只是import它export的方法等),虽然在emc.js(全局common.js)中定义了window.test
//但在这个文件(此文件与emc.js文件是相互独立的)中是没定义window.test的
//所以a 为 undefined
const a = window.test

[5Mi]

// js 插件写法
;(function(undefined) {
    "use strict"
    var _global;
    var plugin = {
        add: function(n1,n2){ return n1 + n2; },//加
        sub: function(n1,n2){ return n1 - n2; },//减
        mul: function(n1,n2){ return n1 * n2; },//乘
        div: function(n1,n2){ return n1 / n2; },//除
        sur: function(n1,n2){ return n1 % n2; } //余
    }
    // 最后将插件对象暴露给全局对象
    _global = (function(){ return this || (0, eval)('this'); }());
    if (typeof module !== "undefined" && module.exports) {
        module.exports = plugin;
    } else if (typeof define === "function" && define.amd) {
        define(function(){return plugin;});
    } else {
        !('plugin' in _global) && (_global.plugin = plugin);
    }
}());

[5Mi]

// 例如一个依赖jq的 滑动拼图验证
;(function(undefined) {
  'use strict'
  var _global

  var SlideImageVerify = function(ele, opt) {
    this.$ele = $(ele)
    this.defaults = {
      oriImg: '',
      tarImg: '',
      coordinate_y: 0,
      verifyCB: function() {}
    }
    this.settings = $.extend({}, this.defaults, opt)
    // this.oriImg
    // this.tarImg
    this.coordinate_y

    this.dragTimerState = false
    this.touchX = 0
    this.disTouchX = 0

    this.pending = false
    this.init()
  }
  SlideImageVerify.prototype = {
    constructor: this,
    init: function() {
      this.initDom()
      this._touchstart()
      this._touchend()
    },
    initDom: function() {
      var slideDom = $(
        '<div class="SIV_box">' +
          '<div class="oriImg">' +
          '<div class="tarImg"></div>' +
          '</div>' +
          '<div class="processBar">' +
          '<div class="tip">请滑动左边滑块完成拼图</div>' +
          '<div class="slideBtn"></div>' +
          '</div>' +
          '</div>'
      )
      this.$ele.append(slideDom)
      this.$oriImg = $('.SIV_box .oriImg')
      this.$tarImg = $('.SIV_box .tarImg')
      this.$slideBtn = $('.SIV_box .slideBtn')
      this.$tip = $('.SIV_box .tip')
      this.radio = this.$oriImg.outerWidth() / 600

      this.$oriImg.css({ 'background-image': 'url(' + this.settings.oriImg + ')' })
      this.$tarImg.css({ 'background-image': 'url(' + this.settings.tarImg + ')', top: this.settings.coordinate_y * this.radio })
    },
    _touchstart: function() {
      var _this = this
      _this.$slideBtn.on('touchstart', function(e) {
        _this.$slideBtn.css('pointer-events', 'none')
        setTimeout(function() {
          _this.$slideBtn.css('pointer-events', 'all')
        }, 400)
        if (_this.dragTimerState || _this.$slideBtn.is(':animated')) {
          _this.touchX = 0
          return false
        }
        if (_this.$slideBtn.css('left') == '0px') {
          _this.touchX = e.originalEvent.targetTouches[0].pageX
          //
          _this._touchmove()
        }
      })
    },
    _touchmove: function() {
      var _this = this
      _this.$slideBtn.on('touchmove', function(e) {
        e.preventDefault()
        if (_this.dragTimerState || _this.$slideBtn.is(':animated')) {
          return false
        } else {
          var curX = e.originalEvent.targetTouches[0].pageX - _this.touchX
          if (curX != 0) {
            if (curX < 0) {
              curX = 0
            } else if (curX >= 270) {
              // 300 - 30
              curX = 270
            }
            _this.disTouchX = curX
            _this.$slideBtn.css({ left: curX })
            _this.$tarImg.css({ left: curX })
          }
        }
      })
    },
    _touchend: function() {
      var _this = this
      _this.$slideBtn.on('touchend', function() {
        _this.$slideBtn.off('touchmove')
        // 校验
        // resetSlide()
        _this.settings.verifyCB && !_this.pending && _this.settings.verifyCB(parseInt(_this.disTouchX / _this.radio));
        _this.pending = true
      })
    },
    resetSlide: function() {
      var _this = this
      _this.$slideBtn.animate({ left: 0 }, 50,function(){
          _this.pending = false
          _this.$tip.text('请重新滑动左边滑块')
      })
      _this.$tarImg.animate({ left: 0 }, 50)
    },
    refreshSlide: function(opt) {
      this.resetSlide()
      this.settings = $.extend({}, this.settings, opt)
      // this.$ele.empty()
      // this.init()
      this.$oriImg.css({ 'background-image': 'url(' + this.settings.oriImg + ')' })
      this.$tarImg.css({ 'background-image': 'url(' + this.settings.tarImg + ')', top: this.settings.coordinate_y * this.radio })
    }
  }
  var inlineCss =
    ".SIV_box *, .SIV_box { margin: 0; padding: 0; box-sizing: border-box; } .SIV_box { padding: 10px 10px 0; /* width: 80%; */ } .SIV_box .oriImg { position: relative; width: 300px; /* height: 150px; */ padding-top: 50%; background-repeat: no-repeat; background-size: contain; background-position: center center; } .SIV_box .tarImg { position: absolute; width: 10%; padding-top: 8%; top: 0; left: 0; background-repeat: no-repeat; background-size: contain; background-position: center center; z-index: 1; } .SIV_box .processBar { position: relative; height: 20px; background-color: #dfe1e2; border-radius: 15px; box-shadow: inset 0 0 5px #ccc; margin: 15px 0; } .SIV_box .slideBtn { position: absolute; z-index: 1; left: 0; top: -5px; height: 30px; width: 30px; border-radius: 50%; background-repeat: no-repeat; background-size: 32px 32px; background-position: -2px -1px; background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAlCAYAAAAuqZsAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQkYxRDU0NUNBRUIxMUU5QjZBOEQ3QzIzQUI0NTNDNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQkYxRDU0NkNBRUIxMUU5QjZBOEQ3QzIzQUI0NTNDNSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCRjFENTQzQ0FFQjExRTlCNkE4RDdDMjNBQjQ1M0M1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCRjFENTQ0Q0FFQjExRTlCNkE4RDdDMjNBQjQ1M0M1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+cXsvywAAA3RJREFUeNq8mM9rE0EUx7Nr0KYighHxYAx4sBV/gYLiX6BIhaIeFH8dFC8KgngQD1o9iAfxpBfRg2JvVQsWqXehKCj4A0wVDzGexAZEmqS1Nfa76cu+fXkzmU1jBsJsZnfffOb73szsm2TCoZzv39oj224+frv30/sPpzOZdGpZeo03M1NZi/Zksuvb74nv1UJhorxhy+a7Fw5se87fuzX8btylTy8O1L49O45vP3j5SGr5yix/ZnaqFHln0ZLuyP/yr5/5N0PXBp+Nvn7oCui1AkQgAMA1B6H/HJbuS0AbXFOwk1ceDK/f1NMrlZGqSEBNUbr/+eN47v7VE/029TybUgP3Rl5AJROQBsMVkzW3AfUGTvXtNoH5JsUkFIwRhFRAA9dq/jxsow/T5PI1tTQoDcjkVs2Nmi0bnK/FlHSf5jZ531SkctwOwaFPCRdRDLMPga65r5lqtuVDulrCoU/03aAYkWJJ4EZwbXKFDcbkapPKaEffnMXnai3u6s5yY/SzLQUucaa5VdpE31w1n6tlCloy8HJ0cPbQ08N/UfNnXdulTakgV62umNxmtFHdLo94qzemE0PrxiLrn2u7pipv4ww+udE0C11nn2uxLby4JncGYKt2ntkfN15aLSYoKsQSgOHTxRZf7VRN2pQiEMt8jFWzrcyydkA1DrrG4tem6lLrVqIZiKuijC2TDWJJusaEywrfDFgu1rYSKDZdmXTeXtoR/LZQIZb5GPPyiQ4Vk2qhODWWAAyJQzPl/ndBbKF/YgnAfry688Q0CTpVAIX+iSUAo+SAFOu0cgTFWep75dcvhRzdNCl3NtVXRX3uzzF/Ie0aFGowRJIR7ObYo3YdvXGJ0/NrmklzCW1iLrlt+P6K065BoR57dPE6FENyUh8JGqYrpTx3pVQOxqcmi+piG6ed2w/Dp5TnCbHP0ycko1wtqnnMtRp/2nscEH1zlojvQcz9TBLzkUVH6V7z92SYoE+uVkPCyzOlTGZFr1xjtDruzJOQhUKxnpXzxNfXTmJqD4a7gQ3GppJJMb7Ka1BqJk4P1NJ3Hc41zjSFwoF58Y8IOByk1oLV5CabQuG2U8zZoJqej1HM0TGU9kEpg1r+F90t/BjKdE6Gb3I+MVwKFMIe2JaDu2bHnSEk5QukZi0u8ZUgYdp61OlyHutSXIGo/BNgAC8vQDkjVFkBAAAAAElFTkSuQmCC'); border: 1px solid #ccc; } .SIV_box .tip { text-align: center; font-size: 12px; line-height: 20px; color: #333; }"
  var styleObj = $('<style type="text/css">' + inlineCss + '</style>')
  $('head').prepend(styleObj)
  _global = (function() {
    return this || (0, eval)('this')
  })()
  if (typeof module !== 'undefined' && module.exports) {
    module.exports = SlideImageVerify
  } else if (typeof define === 'function' && define.amd) {
    define(function() {
      return SlideImageVerify
    })
  } else {
    !('SlideImageVerify' in _global) && (_global.SlideImageVerify = SlideImageVerify)
  }
})()

// 使用时
new SlideImageVerify('#slideImageBox', {
                    oriImg: oriImg, // 整张背景的 图片
                    tarImg: tarImg, // 拼图图块的 图片
                    coordinate_y: coordinate_y, // 拼图图块 垂直距离
                    verifyCB: function(res) {} // 回调
}