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,大改动就继续发文章。如果大家觉得我哪里还是可以优化的,或者哪里有问题,欢迎大家指点下建议。这样可以让大家相互学习,相互帮助!
-------------------------华丽的分割线--------------------
想了解更多,关注关注我的微信公众号:守候书阁