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

2018-05-30 阅读 1120 收藏 0 原链:www.yaya12.com
分享到:

前端必备图书《Vim实用技巧(*2版)Vim技术图书以思维的速度来编辑图书新版根据Vim 7.4更新》 >> >> 

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

查看代码  github.com/Heyff12/pro…    wapmanage

某天,他们提出在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>

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

回到顶部