编写自己的代码库（javascript常用实例的实现与封装--续）-白红宇

编写自己的代码库（javascript常用实例的实现与封装--续）

阅读量：6007 次

发布时间：2019-06-20

本文共 12932 字，大约阅读时间需要 43 分钟。

1.前言

这个系列的上一篇文章（）总结了34个常见的操作。但是在开发中，常见的实例又何止这么多个，经过这些日子的探索，以及他人的意见，现在得追加一些操作实例了。希望能帮到大家，也希望如果大家觉得有什么需要追加的，觉得我哪里写得不好或者写错了，欢迎评论或者私信我！另外，项目仍然是之前的那个，代码已经上传上去了，也欢迎大家在github上面star一下！

好，下面正式进入正文！

特别说明

ps：下面的的函数写法，比如直接这样写是会报错的
createKeyExp：function(){}。但我这篇文章是基于这个系列的上一篇文章的，等于是
createKeyExp：function(){}，直接在
**ecDo**这个对象里面。不知道的同学可以移步到上一篇文章（）去看，或者直接去上面的
github看代码。

实际代码如下，只是我没写出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')//返回兄弟节点且兄弟节点标签为aecDo.siblings(obj,'a')

2.字符串操作

好了，说完了上篇的内容，接下来说下这篇文章增加的函数

2-1.找出最长单词

//longestWord('Find the Longest word in a String')//7//longestWord('Find|the|Longest|word|in|a|String','|')//7longestWord: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，大改动就继续发文章。如果大家觉得我哪里还是可以优化的，或者哪里有问题，欢迎大家指点下建议。这样可以让大家相互学习，相互帮助！

-------------------------华丽的分割线--------------------

想了解更多，关注关注我的微信公众号：守候书阁