手机浏览器与我的那些事（二）

造轮子第一次使用的移动端UI库是light7.js。在这里记录一下使用的心得：
使用ui库开发为什么很高效，原因之一是ui要求不高的情况下，ui库将用得到的组件都封装好了，你要做的只是简单的传参，调用，但是UI库是怎么封装的呢，这才是重点！
一千个读者就有一千个哈姆雷特，在这里我只针对toast、alert、confirm、loading说下自己的理解
light7.js中封装的思想主要是这这js
https://github.com/lihongxun945/light7/blob/master/js/modal.js，
1在顶层构造一个div
2判断是否有模块，有的话删掉第一个
3构造复用的modal
3.1定义一个数组options
3.2构造options对应的dom结构
基本的套路就是这样的 ，当然light7还考虑了一些复杂的情况  我这里没有具体分析。


随着ui的要求逐步提高，为了满足需求，我开始改动light7.js的源码，一开始还有点效果，到后来已经达不到产品的需求了。于是我开始了造轮子了：
1、light7.js是使用脚本动态生成modal的，那么一开始我就把各种modal写好，使用一个display：none
2、防止重复点击，使用一个boolean的flag,设置不同的ui界面通过传参

eg   :

//html

<div class="toast-overlay hide">
    <div class="toast-div">
        <div class="title">温馨提示</div>
        <div class="toast-hr"></div>
        <div>
            <div class=" hide warning"><span class="iconfont icon-warning e_font14"></span></div>
            <div class=" hide danger"><span class="iconfont icon-danger e_font14"></span></div>
            <div class=" hide success"><span class="iconfont icon-success e_font14"></span></div>
        </div>
        <div class="content toast-message">message</div>
        <div class=" toast-close">关闭</div>
    </div>
</div>

//css

.toast-overlay{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 110000;
    opacity: 1;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
}
.toast-div{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 110000;
    width:...;
    height: ...;
}

//js

$toast = $('.toast');//toat modal 
 $loginBtn.click(function(){

//do something
toast.show(options...);
})
var showToast = true;
function toast(obj, message, time, flag) {
    if (showToast) {
        obj.show();
        if (flag == 'success') {
            oneShow($('.e-success'));
        }
        if (flag == 'warning') {
            oneShow($('.e-warning'));
        }
        if (flag == 'danger') {
            oneShow($('.e-danger'));
        }


        $('.toast-message').text(message);
        showToast = false;
         setTimeout(function () {
        close(obj);
        }, time);
    }
   

}

//可能会有BT的需求要求toast不消失的   所以封装了下面的关闭方法

function close(obj) {
    obj.hide();
    showToast = true;
}