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#%^*^&*^%^&*$\\"\'#@!()*/-())_\'":"{}?<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,大改动就继续发文章。如果大家觉得我哪里还是可以优化的,或者哪里有问题,欢迎大家指点下建议。这样可以让大家相互学习,相互帮助!

你可能感兴趣的文章

武汉大魔王 · 8月7日

['a','b']转换成{a:'a',b:'b'} 遍历数组看对象key值在这个里面存不存在对应value 不然就成了三重循环了

+1 回复

守候 作者 · 8月7日

不好意思!今天早上登录github才发现之前的提交失败了,并没有提交到github上面去!现在重新提交了,并且确认提交上去了!大家可以再去看下!

回复

武汉大魔王 · 8月7日

排除数组某些项可以优化一下 不用indexof 降低复杂度

回复

武汉大魔王 · 8月7日

预加载图片那个 之前也处理过 我选择用css给图片设置base64的背景图😄

回复

0

不用indexOf我不知道怎么排除,能写个demo看下吗?css给图片设置base64这个也没有试过

守候 作者 · 8月7日
武汉大魔王 · 8月7日

base64图片可以在线生成的 查一下就明白了

回复

2

多谢指点,我试试

守候 作者 · 8月7日
载入中...
守候 守候

10.6k 声望

发布于专栏

守候书阁

一个前端开发者,记录开发的点滴经历

350 人关注