編寫本身的代碼庫（javascript經常使用實例的實現與封裝--續）

時間 2019-11-05

標籤編寫本身代碼 javascript 經常使用實例實現封裝欄目 JavaScript 简体版

原文原文鏈接

1.前言

這個系列的上一篇文章（編寫本身的代碼庫（javascript經常使用實例的實現與封裝））總結了34個常見的操做。可是在開發中，常見的實例又何止這麼多個，通過這些日子的探索，以及他人的意見，如今得追加一些操做實例了。但願能幫到你們，也但願若是你們以爲有什麼須要追加的，以爲我哪裏寫得很差或者寫錯了，歡迎評論或者私信我！另外，項目仍然是以前的那個，代碼已經上傳上去了，也歡迎你們在github上面star一下ec-do！
好，下面正式進入正文！javascript

特別說明

ps：下面的的函數寫法，好比直接這樣寫是會報錯的 createKeyExp：function(){}。但我這篇文章是基於這個系列的上一篇文章的，等因而 createKeyExp：function(){}，直接在 **ecDo**這個對象裏面。不知道的同窗能夠移步到上一篇文章（編寫本身的代碼庫（javascript經常使用實例的實現與封裝））去看，或者直接去上面的 github看代碼 ec-do。

實際代碼以下，只是我沒寫出var ecDo={}而已！我爲何這樣封裝，以前也說過，不想聲明太多全局變量。還有一個要注意的就是下面函數可能會出現this這個關鍵詞，除了特別說明以外，都是指向ecDo這個對象。css

var ecDo={
    createKeyExp：function(){...},
    longestWord:function(){...},
    ...
}

前序：bug修改以及寫法優化

此處修改以前提交函數已經發現的bug，基於這個系列上篇文章的提供的函數。html

changeCase(大小寫轉換函數)修改

//修改一個bug,當只有一個字符的時候。
//沒處理前
ecDo.ecDo.changeCase("a",3)
"a"
//處理後
ecDo.changeCase("a",3)
"A"

upDigit（金額大寫函數）bug修改

//處理前
ecDo.upDigit(999900000)
"人民幣玖億玖仟玖佰玖拾元整"
//處理後
ecDo.upDigit(999900000)
"人民幣玖億玖仟玖佰玖拾萬元整"

covArr（求數組平均數）修改bug

//這個方法，徹底是粗枝大葉寫錯了，可是如今改過來了！，直接使用就好
ecDo.covArr([1,2,3])
//2

隨機碼函數重命名

//又是粗枝大葉，之前這個方法名是randomNumber，和另外一個函數重名了！如今命名以下，使用方式不變
//ecDo.randomWord(10)
//"644086665765861"
//ecDo.randomWord(36)
//"g4a0ne8ah5dgau8j58ka10pb9"
randomWord:function (count){
    return Math.random().toString(count).substring(2);
}

removeClass（刪除類名）

以前是隻能處理單個html元素，傳入html集合或者html元素數組，運行會報錯，如今即便傳入的是一個html集合或者html元素數組，均可以處理前端

addClass（增長類名）

以前是隻能處理單個html元素，傳入html集合或者html元素數組，運行會報錯，如今即便傳入的是一個html集合或者html元素數組，均可以處理java

hasClass（檢測對象是否有哪一個類名）

以前若是傳進來的obj自己沒有class屬性，或者class爲空的狀況下，運行會報錯，如今返回fasleandroid

前序：寫法優化

sumArr（數字數組求和）

//數字數組求和
sumArr: function (arr) {
    //之前寫法
    //var sumText = 0;
    //for (var i = 0, len = arr.length; i < len; i++) {
       // sumText += arr[i];
    //}
    //return sumText
    //如今寫法
    return arr.reduce(function(pre,cur){return pre+cur})
}

siblings（獲取兄弟節點）

增長篩選條件，支持標籤名，class，idgit

//以前寫法
ecDo.siblings(obj)
//如今寫法
//返回全部兄弟節點
ecDo.siblings(obj)
//返回兄弟節點且兄弟節點id爲‘cur’
ecDo.siblings(obj,'#cur')
//返回兄弟節點且兄弟節點class爲‘cur’
ecDo.siblings(obj,'.cur')
//返回兄弟節點且兄弟節點標籤爲a
ecDo.siblings(obj,'a')

2.字符串操做

好了，說完了上篇的內容，接下來講下這篇文章增長的函數es6

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.句中單每一個單詞詞首字母大寫

這個我也一直在糾結，英文標題，即便是首字母大寫，也未必每個單詞的首字母都是大寫的，可是又不知道哪些應該大寫，哪些不該該大寫github

//句中單詞首字母大寫 (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標籤，表情，特殊字符，)
//字符串，替換內容（special-特殊字符,html-html標籤,emjoy-emjoy表情,word-小寫字母，WORD-大寫字母，number-數字,chinese-中文），要替換成什麼，默認'',保留哪些特殊字符
//若是須要過濾多種字符，type參數使用','分割
//以下栗子,意思就是過濾字符串的html標籤，大寫字母，中文，特殊字符，所有替換成*,可是保留特殊字符'%'，'?'，除了這兩個，其餘特殊字符所有清除
//var str='asd    654a大蠢sasdasdASDQWEXZC6d5#%^*^&*^%^&*$\\"\'#@!()*/-())_\'":"{}?<div></div><img src=""/>啊實打實大蠢豬自行車這些課程';
// 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<len;i++){
        if(typeArr[i]==='special'){
        var pattern,regText='$()[]{}?\|^*+./\"\'+';
        if(spstr){
            var _spstr=spstr.split(""),_regText="[^0-9A-Za-z\\s";
            for(var i=0,len=_spstr.length;i<len;i++){
                if(regText.indexOf(_spstr[i])===-1){
                    _regText+=_spstr[i];
                }
                else{
                    _regText+='\\'+_spstr[i];
                }
            }
            _regText+=']'
            pattern = new RegExp(_regText,'g');
        }
        else{
            pattern = new RegExp("[^0-9A-Za-z\\s]",'g')
        }
    }
    var _restr=restr||'';
    switch(typeArr[i]){
        case 'special': _str=_str.replace(pattern,_restr);break;
        case 'html': _str=_str.replace(/<\/?[^>]*>/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.建立正則字符

//建立正則字符,通常是爲搜索或者高亮操做
//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.關鍵字加標籤

//簡單關鍵字加標籤（多個關鍵詞用空格隔開）
//ecDo.findKey('守侯我oaks接到了來自下次你離開快樂吉祥留在開城侯','守侯 開','i')
//"<i>守侯</i>我oaks接到了來自下次你離<i>開</i>快樂吉祥留在<i>開</i>城侯"
//加完了標籤，對i怎麼設置樣式就靠你們了！
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標籤 替換標籤，往關鍵字先後加上標籤
    return content.replace(/<\/?[^>]*>/g, '').replace(Reg, "<" + _el + ">$1</" + _el + ">");
}

3.數組操做

3-1.獲取對象數組某些項

//獲取對象數組某些項
//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}]
//只獲取某一項的值
//getOptionArray(arr,'a',1)
//getOptionArray(arr,'b',1)
//[2, 3, 9, 2, 5]
getOptionArray:function(arr, keys, type) {
    var newArr = []
    if (!keys) {
        return arr
    }
    //是否只是須要獲取某一項的值
    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.排除數組某些項

//排除數組某些項
//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裏面,添加數據
            if (_keys.indexOf(key) === -1) {
                newArrOne[key] = arr[i][key];
            }
        }
        newArr.push(newArrOne);
    }
    return newArr
}

3-3.對象數組排序

//對象數組的排序
//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.預加載圖片

//圖片沒加載出來時用一張圖片（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.圖片滾動懶加載

//圖片滾動懶加載
//@className {string} 要遍歷圖片的類名
//@num {number} 距離多少的時候開始加載 默認 0
//好比，一張圖片距離文檔頂部3000，num參數設置200，那麼在頁面滾動到2800的時候，圖片加載。不傳num參數就滾動，num默認是0，頁面滾動到3000就加載

//html代碼
//<p><img data-src="lawyerOtherImg.jpg" class="load-img" width='528' height='304' /></p>
//<p><img data-src="lawyerOtherImg.jpg" class="load-img" width='528' height='304' /></p>
//<p><img data-src="lawyerOtherImg.jpg" class="load-img" width='528' height='304' /></p>....
//data-src儲存src的數據，到須要加載的時候把data-src的值賦值給src屬性，圖片就會加載。
//詳細能夠查看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) {
            //記錄圖片是否已經加載
            oImgLoad[i].isLoad = true;
            //設置過渡，當圖片下來的時候有一個圖片透明度變化
            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 發送請求的url
 * @param {boolean}obj.async 是否爲異步請求，true爲異步的，false爲同步的
 * @param {object}obj.data 發送的參數，格式爲對象類型
 * @param {function}obj.success ajax發送並接收成功調用的回調函數
 * @param {function}obj.error ajax發送失敗或者接收失敗調用的回調函數
 */
//  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.數據類型判斷

//數據類型判斷
//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.手機類型判斷

//手機類型判斷
//browserInfo('android')
//false（在瀏覽器iphone6模擬器的調試） 
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.小結

算上上一篇，js經常使用的小實例超過50個了，在我本身平常開發，經常使用的小實例基本都在裏面了（操做太過於靈活的可能一時封裝不了）。可能之後更多的更新並非增長函數，而修改優化函數寫法（特別是函數命名的問題，還有不少是須要改的，命名也是搞得我詞窮了！），或者是用es6語法改寫。固然，若是真的有值得封裝的小實例，我也會繼續更新，小改動就不會再發文章，只更新github，大改動就繼續發文章。若是你們以爲我哪裏仍是能夠優化的，或者哪裏有問題，歡迎你們指點下建議。這樣可讓你們相互學習，相互幫助！ajax

-------------------------華麗的分割線--------------------
想了解更多，關注關注個人微信公衆號：守候書閣