摘要：前言这个系列的上一篇文章编写自己的代码库常用实例的实现与封装总结了个常见的操作。前序修改以及写法优化此处修改之前提交函数已经发现的，基于这个系列上篇文章的提供的函数。
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，大改动就继续发文章。如果大家觉得我哪里还是可以优化的，或者哪里有问题，欢迎大家指点下建议。这样可以让大家相互学习，相互帮助！
-------------------------华丽的分割线--------------------
想了解更多，关注关注我的微信公众号：守候书阁
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84693.html
摘要：是一款轻量级易扩展的播放器，是为解决一些中小型的视频业务场景。同时各插件由于是面向的播放器接口，插件不知道插件的存在，因此能极大地降低各插件功能间的耦合。 larkplayer 是一款轻量级 & 易扩展的 html5 播放器，是为解决一些中小型的视频业务场景。这些业务不一定需要大而全的解决方案，并且他们往往有自己的定制化需求。 背景 为什么要编写 larkplayer？（注意，这里面有...
摘要：是一款轻量级易扩展的播放器，是为解决一些中小型的视频业务场景。同时各插件由于是面向的播放器接口，插件不知道插件的存在，因此能极大地降低各插件功能间的耦合。 larkplayer 是一款轻量级 & 易扩展的 html5 播放器，是为解决一些中小型的视频业务场景。这些业务不一定需要大而全的解决方案，并且他们往往有自己的定制化需求。 背景 为什么要编写 larkplayer？（注意，这里面有...
摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...
阅读 3116·2023-04-25 19:09
阅读 3845·2021-10-22 09:54
阅读 1693·2021-09-29 09:35
阅读 2859·2021-09-08 09:45
阅读 2171·2021-09-06 15:00
阅读 2737·2019-08-29 15:32
阅读 1010·2019-08-28 18:30
阅读 344·2019-08-26 13:43
