编写一个简单的原生JavaScript提示插件

近两年，都写的Vue。前段时间，帮后端朋友写几个小页面，由于数据他们自己嵌套，甚至用到后台渲染数据到页面，所以采用zepto的框架，使用require.js做模块化，方便他们看到更直观、熟悉的代码进行数据调用！

某天，他们提出在html添加一个问题提示弹框！看似代码都已经有的情况下，很简单，但简单的事情往往不简单。

由于zepto.js是通过require间接引入的（代码如下），所以在html页面并不能直接使用$写代码。

<script src="assets/js/require.2.1.11.min.js " type="text/javascript " data-main="assets/js/home/login.js" defer async="true "></script>

弹框样式

css代码：

div.toast_data_short {
  width: auto;
  padding: 0.266667rem;
  height: auto;
  line-height: 0.56rem;
  text-align: center;
  color: white;
  font-size: 0.426667rem;
  display: inline-block;
  background: #2f323a;
  position: fixed;
  z-index: 20;
  border-radius: 0.266667rem;
  opacity: 0;
  top: 50%;
  margin-top: -0.8rem;
  z-index: -12;
}

解决方法：

1、再次引入一个zepto.js，同时把require弹框模块的js文件在当前页面再写一遍，然后调用————多一个请求，减弱页面响应性能；代码重复；

2、从CDN找一个现有的文字弹框插件，单独引入使用————依然增加了过多代码，弹框样式不统一，影响用户体验和整体协调性

3、改编一个原生JavaScript的插件——避免再次引入zepto；减少html页面的script代码

介于样式简单，代码较少，最终决定采用第三种方式。编写了一个插件tip.js

插件思路：

1、可执行的闭包格式，防止变量混淆；定义弹框函数，并引入外部传入的参数；初始化执行在body内部加入弹框的div代码

(function() {
  var tipAlert = function(options) {
      this.options = {
          "id": 'body',
          "content": options.content ? options.content : '错误信息',
          "leftPx": 0
      };
      this.init();
    };    
    tipAlert.prototype.init = function() {
        let tipE = document.createElement("div");
        tipE.id = "toast_data_short";
        tipE.className = "toast_data_short";
        document.body.appendChild(tipE);
    };
  window.tipAlert = tipAlert;
})();

2、向弹框加入内容并显示，显示3s后隐藏。函数的prototype属性增加相应的方法，最终完整代码如下

(function() {
  var tipAlert = function(options) {
      this.options = {
          "id": 'body',//弹框加入的位置
          "content": options.content ? options.content : '错误信息',//提示信息
          "leftPx": 0//弹框距离左侧的像素（保证居中）
      };
      this.init();//初始化，写入弹框html代码
      this.Tip();//调用展示弹框，3s后自动消失
    };    
    //创造弹框
    tipAlert.prototype.init = function() {
        let tipE = document.createElement("div");
        tipE.id = "toast_data_short";
        tipE.className = "toast_data_short";
        document.body.appendChild(tipE);
    };
    //显示弹框
    tipAlert.prototype.showTip = function() {
        let leftpx = this.options.leftPx;
        let tipE = document.getElementById("toast_data_short");
        tipE.style.zIndex = 12;
        tipE.style.left = leftpx + "px";
        tipE.style.opacity = 0.85;
    };
    //隐藏弹框
    tipAlert.prototype.hideTip = function() {
        let tipE = document.getElementById("toast_data_short");
        tipE.style.zIndex = -12;
        tipE.style.opacity = 0;
    };
    //调用
    tipAlert.prototype.Tip = function() {
        let tipE = document.getElementById("toast_data_short");
        tipE.innerHTML = this.options.content;
        this.options.leftPx = this.count_leftpx();
        this.showTip();
        window.setTimeout(this.hideTip, 3000);
    };
    //计算距离左侧距离
    tipAlert.prototype.count_leftpx = function() {
        let tipE = document.getElementById("toast_data_short");
        var toast_w = tipE.offsetWidth;
        var body_w = document.body.clientWidth;
        var leftpx = (body_w - toast_w) / 2;
        return Math.floor(leftpx);
    };
  window.tipAlert = tipAlert;
})();

使用方式：在html页面引入tip.js文件

<!-- 引入tip.js -->
    <script src="assets/js/plug/tip.js" type="text/javascript "></script>
    <script type="application/javascript">
        var errorMessage = "[[${errorMessage}]]";//错误信息
        new tipAlert({
            "content": errorMessage
        })
    </script>

该案例，重在总结记录，加深记忆。如果有更好的代码优化方案，欢迎探讨！