编写本身的代码库（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

-------------------------华丽的分割线--------------------
想了解更多，关注关注个人微信公众号：守候书阁