編寫自己的代碼庫（javascript常用實例的實現與封裝--續）

Atom 發布于2019-08-20 18:34 / 2059人閱讀

摘要：前言這個系列的上一篇文章編寫自己的代碼庫常用實例的實現與封裝總結了個常見的操作。前序修改以及寫法優化此處修改之前提交函數已經發現的，基于這個系列上篇文章的提供的函數。

1.前言

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

特別說明

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

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

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

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

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

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元素數組，都可以處理

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

之前如果傳進來的obj本身沒有class屬性，或者class為空的情況下，運行會報錯，現在返回fasle

前序：寫法優化 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，id

//之前寫法
ecDo.siblings(obj)
//現在寫法
//返回所有兄弟節點
ecDo.siblings(obj)
//返回兄弟節點且兄弟節點id為‘cur’
ecDo.siblings(obj,"#cur")
//返回兄弟節點且兄弟節點class為‘cur’
ecDo.siblings(obj,".cur")
//返回兄弟節點且兄弟節點標簽為a
ecDo.siblings(obj,"a")

2.字符串操作

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

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

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

//句中單詞首字母大寫 (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#%^*^&*^%^&*$""#@!()*/-())_"":"{}?啊實打實大蠢豬自行車這些課程";
// 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.創建正則字符

//創建正則字符,一般是為搜索或者高亮操作
//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")
//"守侯我oaks接到了來自下次你離開快樂吉祥留在開城侯"
//加完了標簽，對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");
}

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代碼
//
//
//....
//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，大改動就繼續發文章。如果大家覺得我哪里還是可以優化的，或者哪里有問題，歡迎大家指點下建議。這樣可以讓大家相互學習，相互幫助！

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

云服務器 GPU云服務器自己編寫的小程序 php的常用函數庫編寫可維護的javascript 編寫漂亮的代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84693.html

larkplayer: 插件化的 HTML5 播放器

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

lijy91 2019-08-02 16:05 評論0 收藏0
larkplayer: 插件化的 HTML5 播放器

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

linkin 2019-08-23 12:01 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0