成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

編寫自己的代碼庫（javascript常用實(shí)例的實(shí)現(xiàn)與封裝--續(xù)）

Atom / 2070人閱讀

摘要：前言這個(gè)系列的上一篇文章編寫自己的代碼庫常用實(shí)例的實(shí)現(xiàn)與封裝總結(jié)了個(gè)常見的操作。前序修改以及寫法優(yōu)化此處修改之前提交函數(shù)已經(jīng)發(fā)現(xiàn)的，基于這個(gè)系列上篇文章的提供的函數(shù)。

1.前言

這個(gè)系列的上一篇文章（編寫自己的代碼庫（javascript常用實(shí)例的實(shí)現(xiàn)與封裝））總結(jié)了34個(gè)常見的操作。但是在開發(fā)中，常見的實(shí)例又何止這么多個(gè)，經(jīng)過這些日子的探索，以及他人的意見，現(xiàn)在得追加一些操作實(shí)例了。希望能幫到大家，也希望如果大家覺得有什么需要追加的，覺得我哪里寫得不好或者寫錯(cuò)了，歡迎評論或者私信我！另外，項(xiàng)目仍然是之前的那個(gè)，代碼已經(jīng)上傳上去了，也歡迎大家在github上面star一下ec-do！
好，下面正式進(jìn)入正文！

特別說明 
ps：下面的的函數(shù)寫法，比如直接這樣寫是會報(bào)錯(cuò)的createKeyExp：function(){}。但我這篇文章是基于這個(gè)系列的上一篇文章的，等于是createKeyExp：function(){}，直接在**ecDo**這個(gè)對象里面。不知道的同學(xué)可以移步到上一篇文章（編寫自己的代碼庫（javascript常用實(shí)例的實(shí)現(xiàn)與封裝））去看，或者直接去上面的github看代碼ec-do。

實(shí)際代碼如下，只是我沒寫出var ecDo={}而已！我為什么這樣封裝，之前也說過，不想聲明太多全局變量。還有一個(gè)要注意的就是下面函數(shù)可能會出現(xiàn)this這個(gè)關(guān)鍵詞，除了特別說明之外，都是指向ecDo這個(gè)對象。

var ecDo={
    createKeyExp：function(){...},
    longestWord:function(){...},
    ...
}
前序：bug修改以及寫法優(yōu)化

此處修改之前提交函數(shù)已經(jīng)發(fā)現(xiàn)的bug，基于這個(gè)系列上篇文章的提供的函數(shù)。

changeCase(大小寫轉(zhuǎn)換函數(shù))修改 
//修改一個(gè)bug,當(dāng)只有一個(gè)字符的時(shí)候。
//沒處理前
ecDo.ecDo.changeCase("a",3)
"a"
//處理后
ecDo.changeCase("a",3)
"A"
upDigit（金額大寫函數(shù)）bug修改 
//處理前
ecDo.upDigit(999900000)
"人民幣玖億玖仟玖佰玖拾元整"
//處理后
ecDo.upDigit(999900000)
"人民幣玖億玖仟玖佰玖拾萬元整"
covArr（求數(shù)組平均數(shù)）修改bug 
//這個(gè)方法，完全是粗心大意寫錯(cuò)了，但是現(xiàn)在改過來了！，直接使用就好
ecDo.covArr([1,2,3])
//2
隨機(jī)碼函數(shù)重命名 
//又是粗心大意，以前這個(gè)方法名是randomNumber，和另一個(gè)函數(shù)重名了！現(xiàn)在命名如下，使用方式不變
//ecDo.randomWord(10)
//"644086665765861"
//ecDo.randomWord(36)
//"g4a0ne8ah5dgau8j58ka10pb9"
randomWord:function (count){
    return Math.random().toString(count).substring(2);
}
removeClass（刪除類名）

之前是只能處理單個(gè)html元素，傳入html集合或者h(yuǎn)tml元素?cái)?shù)組，運(yùn)行會報(bào)錯(cuò)，現(xiàn)在即使傳入的是一個(gè)html集合或者h(yuǎn)tml元素?cái)?shù)組，都可以處理

addClass（增加類名）

之前是只能處理單個(gè)html元素，傳入html集合或者h(yuǎn)tml元素?cái)?shù)組，運(yùn)行會報(bào)錯(cuò)，現(xiàn)在即使傳入的是一個(gè)html集合或者h(yuǎn)tml元素?cái)?shù)組，都可以處理

hasClass（檢測對象是否有哪個(gè)類名）

之前如果傳進(jìn)來的obj本身沒有class屬性，或者class為空的情況下，運(yùn)行會報(bào)錯(cuò)，現(xiàn)在返回fasle

前序：寫法優(yōu)化 sumArr（數(shù)字?jǐn)?shù)組求和） 
//數(shù)字?jǐn)?shù)組求和
sumArr: function (arr) {
    //以前寫法
    //var sumText = 0;
    //for (var i = 0, len = arr.length; i < len; i++) {
       // sumText += arr[i];
    //}
    //return sumText
    //現(xiàn)在寫法
    return arr.reduce(function(pre,cur){return pre+cur})
}
siblings（獲取兄弟節(jié)點(diǎn)）

增加篩選條件，支持標(biāo)簽名，class，id

//之前寫法
ecDo.siblings(obj)
//現(xiàn)在寫法
//返回所有兄弟節(jié)點(diǎn)
ecDo.siblings(obj)
//返回兄弟節(jié)點(diǎn)且兄弟節(jié)點(diǎn)id為‘cur’
ecDo.siblings(obj,"#cur")
//返回兄弟節(jié)點(diǎn)且兄弟節(jié)點(diǎn)class為‘cur’
ecDo.siblings(obj,".cur")
//返回兄弟節(jié)點(diǎn)且兄弟節(jié)點(diǎn)標(biāo)簽為a
ecDo.siblings(obj,"a")
2.字符串操作

好了，說完了上篇的內(nèi)容，接下來說下這篇文章增加的函數(shù)

2-1.找出最長單詞 
//longestWord("Find the Longest word in a String")
//7
//longestWord("Find|the|Longest|word|in|a|String","|")
//7
longestWord:function(str, splitType) {
    var _splitType = splitType || /s+/g,
        _max = 0;
    var strArr = str.split(_splitType);
    strArr.forEach(function (item) {
        if (_max < item.length) {
            _max = item.length
        }
    })
    return _max;
}
2-2.句中單每個(gè)單詞詞首字母大寫

這個(gè)我也一直在糾結(jié)，英文標(biāo)題，即使是首字母大寫，也未必每一個(gè)單詞的首字母都是大寫的，但是又不知道哪些應(yīng)該大寫，哪些不應(yīng)該大寫

//句中單詞首字母大寫 (Title Case a Sentence)
//ecDo.titleCaseUp("this is a title")
//"This Is A Title"
titleCaseUp: function titleCaseUp(str, splitType) {
    var _splitType = splitType || /s+/g;
    var strArr = str.split(_splitType),
        result = "";
    strArr.forEach(function (item) {
        if (_max < item.length) {
            result += this.changeCase(item, 1) + " ";
        }
    })
    return this.trim(result, 4)
}
2-3.字符串過濾 
//過濾字符串(html標(biāo)簽，表情，特殊字符，)
//字符串，替換內(nèi)容（special-特殊字符,html-html標(biāo)簽,emjoy-emjoy表情,word-小寫字母，WORD-大寫字母，number-數(shù)字,chinese-中文），要替換成什么，默認(rèn)"",保留哪些特殊字符
//如果需要過濾多種字符，type參數(shù)使用","分割
//如下栗子,意思就是過濾字符串的html標(biāo)簽，大寫字母，中文，特殊字符，全部替換成*,但是保留特殊字符"%"，"?"，除了這兩個(gè)，其他特殊字符全部清除
//var str="asd    654a大蠢sasdasdASDQWEXZC6d5#%^*^&*^%^&*$""#@!()*/-())_"":"{}?
啊實(shí)打?qū)嵈蟠镭i自行車這些課程";
// ecDo.filterStr(str,"html,WORD,chinese,special","*","%?")
//"asd    654a**sasdasd*********6d5#%^*^&*^%^&*$""#@!()*/-())_"":"{}?*****************"
filterStr:function(str,type,restr,spstr){
    var typeArr=type.split(","),_str=str;
    for(var i=0,len=typeArr.length;i]*>/g, _restr);break;
        case "emjoy": _str=_str.replace(/[^u4e00-u9fa5|u0000-u00ff|u3002|uFF1F|uFF01|uff0c|u3001|uff1b|uff1a|u3008-u300f|u2018|u2019|u201c|u201d|uff08|uff09|u2014|u2026|u2013|uff0e]/g,_restr);break;
        case "word": _str=_str.replace(/[a-z]/g,_restr);break;
        case "WORD": _str=_str.replace(/[A-Z]/g,_restr);break;
        case "number":_str= _str.replace(/[0-9]/g,_restr);break;
        case "chinese": _str=_str.replace(/[u4E00-u9FA5]/g,_restr);break;
      }
    }
    return _str;
}
2-4.創(chuàng)建正則字符 
//創(chuàng)建正則字符,一般是為搜索或者高亮操作
//createKeyExp(["我","誰"])
//"(我|誰)"
createKeyExp：function(strArr) {
    var str = "";
    for (var i = 0; i < strArr.length; i++) {
        if (i != strArr.length - 1) {
            str = str + strArr[i] + "|";
        } else {
            str = str + strArr[i];
        }
    }
    return "(" + str + ")";
}
2-5.關(guān)鍵字加標(biāo)簽 
//簡單關(guān)鍵字加標(biāo)簽（多個(gè)關(guān)鍵詞用空格隔開）
//ecDo.findKey("守侯我oaks接到了來自下次你離開快樂吉祥留在開城侯","守侯 開","i")
//"守侯我oaks接到了來自下次你離開快樂吉祥留在開城侯"
//加完了標(biāo)簽，對i怎么設(shè)置樣式就靠大家了！
findKey:function(str, key, el) {
    var arr = null,
        regStr = null,
        content = null,
        Reg = null,
        _el = el || "span";
    arr = key.split(/s+/);
    //alert(regStr); //    如：(前端|過來)
    regStr = this.createKeyExp(arr);
    content = str;
    //alert(Reg);//        /如：(前端|過來)/g
    Reg = new RegExp(regStr, "g");
    content = content;
    //過濾html標(biāo)簽 替換標(biāo)簽，往關(guān)鍵字前后加上標(biāo)簽
    return content.replace(/]*>/g, "").replace(Reg, "<" + _el + ">$1");
}
3.數(shù)組操作 3-1.獲取對象數(shù)組某些項(xiàng) 
//獲取對象數(shù)組某些項(xiàng)
//var arr=[{a:1,b:2,c:9},{a:2,b:3,c:5},{a:5,b:9},{a:4,b:2,c:5},{a:4,b:5,c:7}]
//getOptionArray(arr,"a,c")
//[{a:1,c:9},{a:2,c:5},{a:5,c:underfind},{a:4,c:5},{a:4,c:7}]
//只獲取某一項(xiàng)的值
//getOptionArray(arr,"a",1)
//getOptionArray(arr,"b",1)
//[2, 3, 9, 2, 5]
getOptionArray:function(arr, keys, type) {
    var newArr = []
    if (!keys) {
        return arr
    }
    //是否只是需要獲取某一項(xiàng)的值
    if (type === 1) {
        for (var i = 0, len = arr.length; i < len; i++) {
            newArr.push(arr[i][keys])
        }
        return newArr;
    }
    var _keys = keys.split(","), newArrOne = {};
    for (var i = 0, len = arr.length; i < len; i++) {
        newArrOne = {};
        for (var j = 0, len1 = _keys.length; j < len1; j++) {
            newArrOne[_keys[j]] = arr[i][_keys[j]]
        }
        newArr.push(newArrOne);
    }
    return newArr
}
3-2.排除數(shù)組某些項(xiàng) 
//排除數(shù)組某些項(xiàng)
//var arr=[{a:1,b:2,c:9},{a:2,b:3,c:5},{a:5,b:9},{a:4,b:2,c:5},{a:4,b:5,c:7}]
//filterOptionArray(arr,"a")
//[{b:2,c:9},{b:3,c:5},{b:9},{b:2,c:5},{b:5,c:7}]
//filterOptionArray(arr,"a,c")
//[{b:2},{b:3},{b:9},{b:2},{b:5}]
filterOptionArray:function(arr, keys) {
    var newArr = []
    var _keys = keys.split(","), newArrOne = {};
    for (var i = 0, len = arr.length; i < len; i++) {
        newArrOne = {};
        for (var key in arr[i]) {
            //如果key不存在排除keys里面,添加數(shù)據(jù)
            if (_keys.indexOf(key) === -1) {
                newArrOne[key] = arr[i][key];
            }
        }
        newArr.push(newArrOne);
    }
    return newArr
}
3-3.對象數(shù)組排序 
    
//對象數(shù)組的排序
//var arr=[{a:1,b:2,c:9},{a:2,b:3,c:5},{a:5,b:9},{a:4,b:2,c:5},{a:4,b:5,c:7}]
//arraySort(arr2,"a,b")  a是第一排序條件，b是第二排序條件
//[{a:1,b:2,c:9},{a:2,b:3,c:5},{a:4,b:2,c:5},{a:4,b:5,c:7},{a:5,b:9}]
arraySort: function (arr, sortText) {
    if (!sortText) {
        return arr
    }
    var _sortText = sortText.split(",").reverse(), _arr = arr.slice(0);
    for (var i = 0, len = _sortText.length; i < len; i++) {
        _arr.sort(function (n1, n2) {
            return n1[_sortText[i]] - n2[_sortText[i]]
        })
    }
    return _arr;
}
4.DOM操作 4-1.預(yù)加載圖片 
//圖片沒加載出來時(shí)用一張圖片（loading圖片）代替，一般和圖片懶加載一起使用
aftLoadImg:function(obj, url, cb) {
    var oImg = new Image(),_this=this;
    oImg.src = url;
    oImg.onload = function () {
        obj.src = oImg.src;
        if (cb && _this.istype(cb, "function")) {
            cb(obj);
        }
    }
}
4-2.圖片滾動(dòng)懶加載 
//圖片滾動(dòng)懶加載
//@className {string} 要遍歷圖片的類名
//@num {number} 距離多少的時(shí)候開始加載 默認(rèn) 0
//比如，一張圖片距離文檔頂部3000，num參數(shù)設(shè)置200，那么在頁面滾動(dòng)到2800的時(shí)候，圖片加載。不傳num參數(shù)就滾動(dòng)，num默認(rèn)是0，頁面滾動(dòng)到3000就加載

//html代碼
//

//

//
....
//data-src儲存src的數(shù)據(jù)，到需要加載的時(shí)候把data-src的值賦值給src屬性，圖片就會加載。
//詳細(xì)可以查看testLoadImg.html

//window.onload = function() {
//    ecDo.loadImg("load-img",100);
//    window.onscroll = function() {
//        ecDo.loadImg("load-img",100);
//        }
//}
loadImg:function(className, num) {
    var _className = className || "ec-load-img", _num = num || 0,_this=this;
    var oImgLoad = document.getElementsByClassName(_className);
    for (var i = 0, len = oImgLoad.length; i < len; i++) {
        if (document.documentElement.clientHeight + document.body.scrollTop > oImgLoad[i].offsetTop - _num && !oImgLoad[i].isLoad) {
            //記錄圖片是否已經(jīng)加載
            oImgLoad[i].isLoad = true;
            //設(shè)置過渡，當(dāng)圖片下來的時(shí)候有一個(gè)圖片透明度變化
            oImgLoad[i].style.cssText = "transition: ""; opacity: 0;"
            if (oImgLoad[i].dataset) {
                this.aftLoadImg(oImgLoad[i], oImgLoad[i].dataset.src, function (o) {
                    setTimeout(function () {
                        if (o.isLoad) {
                            _this.removeClass(o, _className);
                            o.style.cssText = "";
                        }
                    }, 1000)
                });
            } else {
                this.aftLoadImg(oImgLoad[i], oImgLoad[i].getAttribute("data-src"), function (o) {
                    setTimeout(function () {
                        if (o.isLoad) {
                            _this.removeClass(o, _className);
                            o.style.cssText = "";
                        }
                    }, 1000)
                });
            }
            (function (i) {
                setTimeout(function () {
                    oImgLoad[i].style.cssText = "transition:all 1s; opacity: 1;";
                }, 16)
            })(i);
        }
    }
}
5.其它做操 5-1.封裝AJAX 
/*
 * @param {string}obj.type http連接的方式，包括POST和GET兩種方式
 * @param {string}obj.url 發(fā)送請求的url
 * @param {boolean}obj.async 是否為異步請求，true為異步的，false為同步的
 * @param {object}obj.data 發(fā)送的參數(shù)，格式為對象類型
 * @param {function}obj.success ajax發(fā)送并接收成功調(diào)用的回調(diào)函數(shù)
 * @param {function}obj.error ajax發(fā)送失敗或者接收失敗調(diào)用的回調(diào)函數(shù)
 */
//  ecDo.ajax({
//      type:"get",
//      url:"xxx",
//      data:{
//          id:"111"
//      },
//      success:function(res){
//          console.log(res)
//      }
//  })
ajax: function (obj) {
    obj = obj || {};
    obj.type = obj.type.toUpperCase() || "POST";
    obj.url = obj.url || "";
    obj.async = obj.async || true;
    obj.data = obj.data || null;
    obj.success = obj.success || function () {
        };
    obj.error= obj.error || function () {
        };
    var xmlHttp = null;
    if (XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var params = [];
    for (var key in obj.data) {
        params.push(key + "=" + obj.data[key]);
    }
    var postData = params.join("&");
    if (obj.type.toUpperCase() === "POST") {
        xmlHttp.open(obj.type, obj.url, obj.async);
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
        xmlHttp.send(postData);
    } else if (obj.type.toUpperCase() === "GET") {
        xmlHttp.open(obj.type, obj.url + "?" + postData, obj.async);
        xmlHttp.send(null);
    }
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            obj.success(xmlHttp.responseText);
        } else {
            obj.error(xmlHttp.responseText);
        }
    };
}
5-2.數(shù)據(jù)類型判斷 
//數(shù)據(jù)類型判斷
//istype([],"array")
//true
//istype([])
//"[object Array]"
istype:function(o, type) {
    //全部小寫
    var _type = type.toLowerCase();
    switch (_type) {
        case "string":
            return Object.prototype.toString.call(o) === "[object String]";
        case "number":
            return Object.prototype.toString.call(o) === "[object Number]";
        case "boolean":
            return Object.prototype.toString.call(o) === "[object Boolean]";
        case "undefined":
            return Object.prototype.toString.call(o) === "[object Undefined]";
        case "null":
            return Object.prototype.toString.call(o) === "[object Null]";
        case "function":
            return Object.prototype.toString.call(o) === "[object Function]";
        case "array":
            return Object.prototype.toString.call(o) === "[object Array]";
        case "object":
            return Object.prototype.toString.call(o) === "[object Object]";
        case "nan":
            return isNaN(o);
        case "elements":
            return Object.prototype.toString.call(o).indexOf("HTML")!==-1
        default:
            return Object.prototype.toString.call(o)
    }
}
5-3.手機(jī)類型判斷 
//手機(jī)類型判斷
//browserInfo("android")
//false（在瀏覽器iphone6模擬器的調(diào)試） 
browserInfo:function(type) {
    switch (type) {
        case "android":
            return navigator.userAgent.toLowerCase().indexOf("android") !== -1
        case "iphone":
            return navigator.userAgent.toLowerCase().indexOf("iphone") !== -1
        case "ipad":
            return navigator.userAgent.toLowerCase().indexOf("ipad") !== -1
        case "weixin":
            return navigator.userAgent.toLowerCase().indexOf("MicroMessenger") !== -1
        default:
            return navigator.userAgent.toLowerCase()
    }
}
6.小結(jié)

算上上一篇，js常用的小實(shí)例超過50個(gè)了，在我自己日常開發(fā)，常用的小實(shí)例基本都在里面了（操作太過于靈活的可能一時(shí)封裝不了）。可能以后更多的更新并不是增加函數(shù)，而修改優(yōu)化函數(shù)寫法（特別是函數(shù)命名的問題，還有很多是需要改的，命名也是搞得我詞窮了?。蛘呤怯胑s6語法改寫。當(dāng)然，如果真的有值得封裝的小實(shí)例，我也會繼續(xù)更新，小改動(dòng)就不會再發(fā)文章，只更新github，大改動(dòng)就繼續(xù)發(fā)文章。如果大家覺得我哪里還是可以優(yōu)化的，或者哪里有問題，歡迎大家指點(diǎn)下建議。這樣可以讓大家相互學(xué)習(xí)，相互幫助！

-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號：守候書閣

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84693.html

相關(guān)文章

  • larkplayer: 插件化的 HTML5 播放器

    摘要：是一款輕量級易擴(kuò)展的播放器，是為解決一些中小型的視頻業(yè)務(wù)場景。同時(shí)各插件由于是面向的播放器接口，插件不知道插件的存在，因此能極大地降低各插件功能間的耦合。 larkplayer 是一款輕量級 & 易擴(kuò)展的 html5 播放器，是為解決一些中小型的視頻業(yè)務(wù)場景。這些業(yè)務(wù)不一定需要大而全的解決方案，并且他們往往有自己的定制化需求。 背景 為什么要編寫 larkplayer？（注意，這里面有...

    lijy91 評論0 收藏0

  • larkplayer: 插件化的 HTML5 播放器

    摘要：是一款輕量級易擴(kuò)展的播放器，是為解決一些中小型的視頻業(yè)務(wù)場景。同時(shí)各插件由于是面向的播放器接口，插件不知道插件的存在，因此能極大地降低各插件功能間的耦合。 larkplayer 是一款輕量級 & 易擴(kuò)展的 html5 播放器，是為解決一些中小型的視頻業(yè)務(wù)場景。這些業(yè)務(wù)不一定需要大而全的解決方案，并且他們往往有自己的定制化需求。 背景 為什么要編寫 larkplayer？（注意，這里面有...

    linkin 評論0 收藏0

  • 個(gè)人分享--web前端學(xué)習(xí)資源分享

    摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會進(jìn)行總結(jié)或者分享會議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會進(jìn)行總結(jié)或者分享會議！那么今天我就...

    sherlock221 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<