移动端笔记

function addLoadEvent(func) {    var oldonload = window.onload;    if (typeof window.onload != "function") {        window.onload = func;    } else {        window.onload = function () {            oldonload();            func();        }    }}//经过正则的方式判断是否为数字；var isNumber = /^[0-9]+.?[0-9]*$/;function isNum(obj) {    //console.log(obj);    if (obj == null || obj == undefined) {        return false;    } else {        return isNumber.test(obj);    }}var DS = {};//ready function的实现//调用$(function(){........})DS.$ = ready = window.ready = function (fn) {    if (document.addEventListener) {//兼容非IE        document.addEventListener("DOMContentLoaded", function () {            //注销事件，避免反复触发            //屡次调用会致使这个方法屡次触发，因此在每次调用结束，就取消掉。            document.removeEventListener("DOMContentLoaded", arguments.callee, false);            fn();//调用参数函数        }, false);    } else if (document.attachEvent) {//兼容IE        document.attachEvent("onreadystatechange", function () {            if (document.readyState === "complete") {                document.detachEvent("onreadystatechange", arguments.callee);                fn();            }        });    }};/////******定义一个全局的对象DS，用来存储方法****//////依赖注入。。registry = {//                          key1: value,//                          key2: function() {},//                          key3: {//                                 a: b,//                                  c: function() {}//                                  }////                  }//这里的key1，key2，，，分别对应着不一样的服务，把这些做为实参传到方法的形参里去，经过依赖注入//方法就可使用参数对应的服务和服务对应的方法，对象，参数DS.inject = function (func, registry) {    //registry是保存有服务对象和方法的对象；func是要被注入服务的对象方法    //将方法整个转为字符串，能够就正则对其里面的参数能够进行匹配    var source = func.toString();    var matchers = source.match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m);    //只有matchers的长度大于1才表示，传进去的函数带有形参    if (matchers && matchers.length > 1) {        var args = [];        //获得形参列表转成数组，其实原本就是一个数组        var argnames = matchers.slice(1)[0].split(",");        //这里的args将会获得func里面所拥有的key对应的registry里面的value，value是什么类型，就        //会给这个func里面对应的参数指定为何类型，，        //好比func（key1, key2, key3）{        //        //                              在函数体内就会有对应的        //                                              key1 = value；        //                                              key2 = function（）{}；        //                                              key3 = {        //                                                         a:b，        //                                                          c:function() {}        //                                                      }        //                              在函数体内这些对象和方法能够拿来直接调用，其实就至关于在函数里面new了一个registry，        //                               只不过是经过依赖注入来完成了这一步，这样作能够节省内存空间，        //        //        //                      }        for (var i = 0, len = argnames.length; i < len; i++) {            args[i] = registry[argnames[i].trim()];        }        func.apply(null, args);    }};//dom选择器var $$ = function (selector) {    "use strict";    var arg = makeArray(arguments);    var newArr = [];    if (!document.querySelector(selector)) {        return false;    } else if (document.querySelectorAll(selector).length === 1) {        if (arg[1] != true) {            return document.querySelector(selector);        } else if (arg[1] == true) {            newArr.push(document.querySelector(selector));            return newArr;        }    } else {        return Array.prototype.slice.call(document.querySelectorAll(selector));    }};//原型继承function inherits(a, b) {    var c = function () {    };    c.prototype = b.prototype;    a.prototype = new c;}//获得样式function getCss(ele, attr) {    if (window.getComputedStyle) {        return parseFloat(getComputedStyle(ele, null)[attr]);    } else {        if (attr === "opacity") {            if (ele.currentStyle[attr] === undefined) {                var reg = /alpha\(opacity=(\d{1,3})\)/;                var opacityVal = ele.currentStyle.filter;                if (reg.test(opacityVal)) {                    ele.style.opacity = parseFloat(RegExp.$1) / 100;                    return parseFloat(RegExp.$1) / 100;                } else {                    return 1;                }            }        }        return parseFloat(ele.currentStyle[attr]);    }}//设置样式function setCss(ele, attr, val) {    if (attr === "opacity") {        ele.style.opacity = val;        ele.style.filter = "alpha(opacity=" + val * 100 + ")"    } else {        ele.style[attr] = val;    }}//animate及fadein等动画实现function move(ele, obj, interval, duration, callback) {    window.clearInterval(ele.timer);    //var begin=getCss(ele,attr);    //var interval=15;//每一步时间    var times = 0;//动画累计时间    //var change=target-begin;    var oBegin = {};    var oChange = {};    for (var attr in obj) {        var begin = getCss(ele, attr);        var target = obj[attr];        var change = target - begin;        if (change) {            oBegin[attr] = begin;            oChange[attr] = change;        }    }    function step() {        times += interval;        if (times < duration) {            for (var attr in oChange) {                if (attr === "opacity") {                    var val = (times / duration) * oChange[attr] + oBegin[attr];                    setCss(ele, attr, val)                } else {                    var val = (times / duration) * oChange[attr] + oBegin[attr] + "px";                    setCss(ele, attr, val);                }            }        } else {            for (var attr in obj) {                if (attr === "opacity") {                    var target = obj[attr];                    var val = target;                    setCss(ele, attr, val);                } else {                    var target = obj[attr];                    var val = target + "px";                    setCss(ele, attr, val);                }            }            window.clearInterval(ele.timer);            if (typeof callback === "function") {                callback.call(ele);            }        }    }    ele.timer = window.setInterval(step, interval);}//转数组var makeArray = function (obj) {    if (!obj || obj.length === 0) {        return []    }    if (!obj.length) {        return obj;    }    try {        return [].slice.call(obj);    } catch (e) {        var i = 0;        var j = obj.length;        var a = [];        for (; i < j; i++) {            a.push(obj[i])        }        return a;    }};//定义一个全局的对象，用来存储个人方法。//////*****给元素添加类名***/////DS.addClass = function (selector, name) {    var str = name;    var test = new RegExp(str, "g");    var tClass = selector.className;    if (selector.nodeType !== 1 || tClass.match(test)) {        return    }    var cn = selector.className.trim();    return selector.className = (cn + " " + name).trim();};////******移除元素的指定类名***8///////DS.removeClass = function (selector, name) {    if (selector.nodeType !== 1) return;    var cn = selector.className;    var str = name;    var Ncn = "";    var test = new RegExp(str, "g");    if (!cn.match(test)) return;    var cnL = cn.split(" ");    for (var i = 0; i < cnL.length; i++) {        if (cnL[i] !== str) {            Ncn += cnL[i] + " ";        }    }    return selector.className = Ncn.trim();};////////****************寻找元素的某一父级，并判断该父级是否存在****///DS.parentsUntil = function (selector, name) {    //若是该元素没有父级，或者不存在该元素，    if (!selector.parentNode || !document.querySelectorAll(name)[0]) return;    var pn = selector.parentNode, _selfname;    if (name.slice(0, 1) === "." && pn.nodeType === 1) {        _selfname = new RegExp(name.slice(1), "g");        try {            while (!_selfname.test(pn.className)) {                pn = pn.parentNode;            }        } catch (e) {            return;        }        return pn;    } else if (name.slice(0, 1) === "#") {        _selfname = new RegExp(name.slice(1), "g");        try {            while (!_selfname.test(pn.id)) {                pn = pn.parentNode;            }        } catch (e) {            return;        }        return pn;    } else {        _selfname = new RegExp(name, "i");        try {            while (!_selfname.test(pn.tagName)) {                pn = pn.parentNode;            }        } catch (e) {            return;        }    }    return pn;};/////////**********客户端user-Agent验证************//////////////**********验证当前用户是经过什么浏览器或者什么类型的客户端访问该页面************/////////***if(browser.versions.ios||browser.versions.iPhone||browser.versions.iPad){do what you want}*****/////var browser = {    versions: function () {        var u = navigator.userAgent, app = navigator.appVersion;        return { //移动终端浏览器版本信息            trident: u.indexOf('Trident') > -1, //IE内核            presto: u.indexOf('Presto') > -1, //opera内核            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 || u.indexOf("Adr"), //android终端或uc浏览器            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器            iPad: u.indexOf('iPad') > -1, //是否iPad            webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部        };    }(),    language: (navigator.browserLanguage || navigator.language).toLowerCase()};/////////**********验证当前用户是经过什么浏览器或者什么类型的客户端访问该页面************/////////////************监听事件的注册************////////注册触摸事件//触摸事件后，touched对象会保存四个值// {//      spanX:触摸的起始水平坐标（相对于body）,//      spanY:触摸的起始垂直坐标（相对于body），//      moveX:水平手指划过距离，//      moveY:垂直手指划过距离，//  }var touched = {};//注册触摸开始事件function touchS(event) {    //event.preventDefault();    var touches = event.targetTouches.length;    if (touches == 1) {        //event.preventDefault();        var mytouch = event.targetTouches[0];        touched.moveX = 0;        touched.moveY = 0;        var spanX = mytouch.pageX;        var spanY = mytouch.pageY;        touched.spanX = spanX;        touched.spanY = spanY;    }}//touch控制//触摸move事件触发function touchM(event) {    //event.preventDefault();    var touches = event.targetTouches.length;    if (touches == 1) {        //event.preventDefault();        var mytouch = event.targetTouches[0];        var goX = mytouch.pageX;        var goY = mytouch.pageY;        var moveX = goX - touched.spanX;        var moveY = goY - touched.spanY;        touched.moveX = moveX;        touched.moveY = moveY;    }}function preventTouch(event) {    event.preventDefault();}//添加监听事件，监听touch事件document.addEventListener("touchstart", touchS, false);document.addEventListener("touchmove", touchM, false);//滑动距离小于5 的判断function moveClick() {    return (Math.abs(touched.moveX) < 5 && Math.abs(touched.moveY) < 5) || (touched.moveX == undefined && touched.moveY == undefined);}////////***********监听事件注册结束，页面有触摸事件时触发*************////////获取id,参数表明id所在查询字符串中的位置,,也能够直接传参数的名称function getId(index) {    var href = window.location.href;    //若是不传值，index默认为0    /*if (typeof index === undefined) {     index = 0;     }*/    if (isNum(index)) {        if (href.indexOf("?") > -1) {            var query = href.split("?")[1];            if (query.indexOf("&") > -1) {                var querystring = query.split("&");                if (index > querystring.length - 1) {                    console.warn("can not get query what you find, please check you url is contain the query what needed");                    return null                } else {                    var id = querystring[index];                    return id.split("=")[1];                }            } else {                if (index > 0) {                    console.warn("can not get query what you find, please check you url is contain the query what needed");                    return null                } else if (index == 0) {                    return query.split("=")[1]                }            }        } else {            console.warn("can not get query what you find, please check you url is contain the query what needed");        }    } else if (!isNum(index)) {        if (href.indexOf("?") > -1) {            var query = href.split("?")[1];            if (query.indexOf(index) == -1) {                return            } else {                //if (query.indexOf("&") == -1) {                 //   return query.split("=")[1];                //} else {                    var queryObj = {};                    query.split("&").forEach(function (que) {                        queryObj[que.split("=")[0]] = que.split("=")[1]                    });                    return queryObj[index]                //}            }        }    }}//是否为ios   if(isIos()) {}function isIos() {    return browser.versions.ios || browser.versions.iPhone || browser.versions.iPad}//进度条样式和dom结构DS.$(function() {    var loadingbar = document.createElement("div");    loadingbar.className = "loadingbar";    loadingbar.innerHTML = "<div class='loading'><img src='/addons/tiger_taoke/template/mobile/tbgoods/style9/images/loading.gif'></div>";    document.querySelector("body").appendChild(loadingbar);});//loading进度条开启和结束var loadingAndLoadedservices = {    //进度条开始    loading: function () {        var $loadingbar = $$(".loadingbar");        var $loading = $$(".loading");        console.log($$(".loading"));        $loadingbar.style.display = "-webkit-box";        var nomove = document.createElement("div");        nomove.className = "nomove";        nomove.addEventListener("touchstart", function (event) {            event.preventDefault();        });        if (!$$(".nomove")) {            $$("body").appendChild(nomove);        }    },    //进度条结束    loaded: function (tips, callback, time, opacitytime) {        var $loadingbar = $$(".loadingbar");        var $loading = $$(".loading");        if(tips == "") {            $loadingbar.setAttribute("style", "");            $loading.setAttribute("style", "");        } else {            var style = $loading.style.cssText;            $loadingbar.style.display = "-webkit-box";            $loading.style.cssText = style + "height:30px;width:auto;padding:0 10px;line-height:30px;opacity:0.6;";            $loading.innerHTML = tips;        }        if(DS.alphatime) {            clearTimeout(DS.alphatime);        }        if(DS.hidetime) {            clearTimeout(DS.hidetime);        }        //$$(".loading").style.display = "block";        /*move($$(".loading"), {opacity:0}, 13, 1000, function() {         $$(".loading").style.cssText = "display: none;width: 2rem;height: 2rem;opacity: 0.6;position: fixed;top: 50%;margin-top: -1rem;left: 50%;margin-left: -1rem;z-index: 100;font-size: 12px;color: #fff;background: #000;text-align: center;";         if($$(".nomove")) {         $$(".nomove").remove();         }         });*/        if(typeof time == "undefined") {            time = (tips == "") ? 0 :500;        }        if(typeof opacitytime == "undefined") {            opacitytime = (tips == "") ? 0 :1000;        }        DS.alphatime = setTimeout(function () {            $loading.style.opacity = 0;            $loading.style.transition = "opacity " + opacitytime + "ms";        }, time);        DS.hidetime = setTimeout(function () {            $loadingbar.setAttribute("style", "");            $loading.setAttribute("style", "");            //$$(".loadingbar").style.cssText = "display:none;width: 100%;height: 2rem; -webkit-box-pack: center; -webkit-box-align: center;position: fixed;top: 50%;margin-top: -1rem;z-index: 100;";            $loading.innerHTML = "<img src='/addons/tiger_taoke/template/mobile/tbgoods/style9/images/loading.gif'>";            if ($$(".nomove")) {                $$("body").removeChild($$(".nomove"));            }            if (typeof callback == "function") {                callback();            }        }, opacitytime + time);    }};//不一样页面执行不一样的loadingandloaded方法.//第二个参数为true时执行loading动画，，第三个参数为true执行loaded动画//tips要对用户展现的小提示，，function isLoadingOrIsLoaded(tips) {    "use strict";    var args = makeArray(arguments);    //执行loading动画    function loading(loading) {        loading();    }    //执行loaded动画    function loaded(loaded) {        loaded(tips, args[3], args[4], args[5]);    }    if (args[1] === true && args[2] === true) {        //这里能够作加的loading效果        DS.inject(loading, loadingAndLoadedservices);        setTimeout(function () {            DS.inject(loaded, loadingAndLoadedservices);        }, 3000)    } else if (args[1] === true && args[2] === false || args[2] === undefined || args[2] == "") {        //这里只loading不loaded        DS.inject(loading, loadingAndLoadedservices);    } else if (args[1] == "false" || args[1] == "" || args[1] === undefined && args[2] == "true") {        //这里只loaded不loading        DS.inject(loaded, loadingAndLoadedservices);    }}var ImageLoad = function() {      this.images = [], this.imageUrls = [], this.imagesLoaded = 0, this.imagesFailedToLoad = 0, this.imageLoadingProgress = 0, this.imageLen = 0   };ImageLoad.prototype = {   queueImage: function(a) {      var e = this;      return "[object Array]" === Object.prototype.toString.call(a) ? a.forEach(function(a) {         e.imageUrls.push(a)      }) : this.imageUrls.push(a), this.imageLen = this.imageUrls.length, this   },   preLoad: function(a, e) {      this.loadImages(), this.imageLoadingProgressCallback(a, e)   },   loadImages: function() {      var a = this;      return this.imageUrls.forEach(function(e, i) {         var o = new Image;         o.src = e, o.complete ? (a.images[i] = o, a.imagesLoaded++) : (o.onload = function(e) {            return function() {               a.images[e] = o, a.imagesLoaded++            }         }(i), o.onerror = function() {            a.imagesFailedToLoad++         })      }), this   },   imageLoadingProgressCallback: function(a, e) {      var i = this,         o = setInterval(function() {            var s = Math.floor((i.imagesLoaded + i.imagesFailedToLoad) / i.imageLen * 100);            i.imageLoadingProgress = isNaN(s) ? 100 : s, 100 === i.imageLoadingProgress && (clearInterval(o), setTimeout(function() {               e.call(i), i.imagesLoaded = 0, i.imagesFailedToLoad = 0            }, 300)), a.call(i, i.imageLoadingProgress)         }, 10)   },   getLoadAfterImages: function() {      return this.images   }}, window.ImageLoad = ImageLoad;//isLoadingOrIsLoaded("", true, false);开始加载条//isLoadingOrIsLoaded("要显示的值", false, true, callback, time(显示时间), opacitytime（到渐隐消失进行的时间）)