移動端筆記

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（到漸隱消失進行的時間）)