首页  > 百科 > 正文

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

投稿作者：小美 2025-01-19 06:01:32 5

前言

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

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

实际代码如下，只是我没写出 varecDo={}而已！我为什么这样封装，之前也说过，不想声明太多全局变量。还有一个要注意的就是下面函数可能会出现 this这个关键词，除了特别说明之外，都是指向 ecDo这个对象。

  1.     var ecDo={
  2.         createKeyExp：function(){...},
  3.         longestWord:function(){...},
  4.         ...
  5.     }

前序：bug修改以及写法优化

此处修改之前提交函数已经发现的bug，基于这个系列上篇文章的提供的函数。

changeCase (大小写转换函数)修改

  1.     //修改一个bug,当只有一个字符的时候。
  2.     //没处理前
  3.     ecDo.ecDo.changeCase("a",3)
  4.     "a"
  5.     //处理后
  6.     ecDo.changeCase("a",3)
  7.     "A"

upDigit（金额大写函数）bug 修改

  1.     //处理前
  2.     ecDo.upDigit(999900000)
  3.     "人民币玖亿玖仟玖佰玖拾元整"
  4.     //处理后
  5.     ecDo.upDigit(999900000)
  6.     "人民币玖亿玖仟玖佰玖拾万元整"

covArr（求数组平均数）修改bug

  1.     //这个方法，完全是粗心大意写错了，但是现在改过来了！，直接使用就好
  2.     ecDo.covArr([1,2,3])
  3.     //2

随机码函数重命名

  1.     //又是粗心大意，以前这个方法名是randomNumber，和另一个函数重名了！现在命名如下，使用方式不变
  2.     //ecDo.randomWord(10)
  3.     //"644086665765861"
  4.     //ecDo.randomWord(36)
  5.     //"g4a0ne8ah5dgau8j58ka10pb9"
  6.     randomWord:function (count){
  7.         return Math.random().toString(count).substring(2);
  8.     }

removeClass（删除类名）

之前是只能处理单个html元素，传入html集合或者html元素数组，运行会报错，现在即使传入的是一个html集合或者html元素数组，都可以处理

addClass（增加类名）

之前是只能处理单个html元素，传入html集合或者html元素数组，运行会报错，现在即使传入的是一个html集合或者html元素数组，都可以处理

hasClass（检测对象是否有哪个类名）

之前如果传进来的obj本身没有class属性，或者class为空的情况下，运行会报错，现在返回fasle

前序：写法优化

sumArr（数字数组求和）

  1.     //数字数组求和
  2.     sumArr: function (arr) {
  3.         //以前写法
  4.         //var sumText = 0;
  5.         //for (var i = 0, len = arr.length; i < len; i++) {
  6.            // sumText += arr[i];
  7.         //}
  8.         //return sumText
  9.         //现在写法
  10.         return arr.reduce(function(pre,cur){return pre+cur})
  11.     }  

siblings（获取兄弟节点）增加筛选条件，支持标签名，class，id

  1.     //之前写法
  2.     ecDo.siblings(obj)
  3.     //现在写法
  4.     //返回所有兄弟节点
  5.     ecDo.siblings(obj)
  6.     //返回兄弟节点且兄弟节点id为‘cur’
  7.     ecDo.siblings(obj,'#cur')
  8.     //返回兄弟节点且兄弟节点class为‘cur’
  9.     ecDo.siblings(obj,'.cur')
  10.     //返回兄弟节点且兄弟节点标签为a
  11.     ecDo.siblings(obj,'a')

字符串操作

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

2-1.找出最长单词

  1.     //longestWord('Find the Longest word in a String')
  2.     //7
  3.     //longestWord('Find|the|Longest|word|in|a|String','|')
  4.     //7
  5.     longestWord:function(str, splitType) {
  6.         var _splitType = splitType || /\s+/g,
  7.             _max = 0;
  8.         var strArr = str.split(_splitType);
  9.         strArr.forEach(function (item) {
  10.             if (_max < item.length) {
  11.                 _max = item.length
  12.             }
  13.         })
  14.         return _max;
  15.     }

2-2.句中单每个单词词首字母大写

这个我也一直在纠结，英文标题，即使是首字母大写，也未必每一个单词的首字母都是大写的，但是又不知道哪些应该大写，哪些不应该大写

  1.     //句中单词首字母大写 (Title Case a Sentence)
  2.     //ecDo.titleCaseUp('this is a title')
  3.     //"This Is A Title"
  4.     titleCaseUp: function titleCaseUp(str, splitType) {
  5.         var _splitType = splitType || /\s+/g;
  6.         var strArr = str.split(_splitType),
  7.             result = "";
  8.         strArr.forEach(function (item) {
  9.             if (_max < item.length) {
  10.                 result += this.changeCase(item, 1) + ' ';
  11.             }
  12.         })
  13.         return this.trim(result, 4)
  14.     }

2-3.字符串过滤

  1.     //过滤字符串(html标签，表情，特殊字符，)
  2.     //字符串，替换内容（special-特殊字符,html-html标签,emjoy-emjoy表情,word-小写字母，WORD-大写字母，number-数字,chinese-中文），要替换成什么，默认'',保留哪些特殊字符
  3.     //如果需要过滤多种字符，type参数使用','分割
  4.     //如下栗子,意思就是过滤字符串的html标签，大写字母，中文，特殊字符，全部替换成*,但是保留特殊字符'%'，'?'，除了这两个，其他特殊字符全部清除
  5.     //var str='asd    654a大蠢sasdasdASDQWEXZC6d5#%^*^&*^%^&*$\\"\'#@!()*/-())_\'":"{}?
    啊实打实大蠢猪自行车这些课程';
  6.     // ecDo.filterStr(str,'html,WORD,chinese,special','*','%?')
  7.     //"asd    654a**sasdasd*********6d5#%^*^&*^%^&*$\"'#@!()*/-())_'":"{}?*****************"
  8.     filterStr:function(str,type,restr,spstr){
  9.         var typeArr=type.split(','),_str=str;
  10.         for(var i=0,len=typeArr.length;i<len;i++){
  11.             if(typeArr[i]==='special'){
  12.             var pattern,regText='$()[]{}?\|^*+./\"\'+';
  13.             if(spstr){
  14.                 var _spstr=spstr.split(""),_regText="[^0-9A-Za-z\\s";
  15.                 for(var i=0,len=_spstr.length;i<len;i++){
  16.                     if(regText.indexOf(_spstr[i])===-1){
  17.                         _regText+=_spstr[i];
  18.                     }
  19.                     else{
  20.                         _regText+='\\'+_spstr[i];
  21.                     }
  22.                 }
  23.                 _regText+=']'
  24.                 pattern = new RegExp(_regText,'g');
  25.             }
  26.             else{
  27.                 pattern = new RegExp("[^0-9A-Za-z\\s]",'g')
  28.             }
  29.         }
  30.         var _restr=restr||'';
  31.         switch(typeArr[i]){
  32.             case 'special': _str=_str.replace(pattern,_restr);break;
  33.             case 'html': _str=_str.replace(/<\/?[^>]*>/g, _restr);break;
  34.             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;
  35.             case 'word': _str=_str.replace(/[a-z]/g,_restr);break;
  36.             case 'WORD': _str=_str.replace(/[A-Z]/g,_restr);break;
  37.             case 'number':_str= _str.replace(/[0-9]/g,_restr);break;
  38.             case 'chinese': _str=_str.replace(/[\u4E00-\u9FA5]/g,_restr);break;
  39.           }
  40.         }
  41.         return _str;
  42.     }

2-4.创建正则字符

  1.     //创建正则字符,一般是为搜索或者高亮操作
  2.     //createKeyExp(['我','谁'])
  3.     //'(我|谁)'
  4.     createKeyExp：function(strArr) {
  5.         var str = "";
  6.         for (var i = 0; i < strArr.length; i++) {
  7.             if (i != strArr.length - 1) {
  8.                 str = str + strArr[i] + "|";
  9.             } else {
  10.                 str = str + strArr[i];
  11.             }
  12.         }
  13.         return "(" + str + ")";
  14.     }    

2-5.关键字加标签

  1.     //简单关键字加标签（多个关键词用空格隔开）
  2.     //ecDo.findKey('守侯我oaks接到了来自下次你离开快乐吉祥留在开城侯','守侯 开','i')
  3.     //"守侯我oaks接到了来自下次你离开快乐吉祥留在开城侯"
  4.     //加完了标签，对i怎么设置样式就靠大家了！
  5.     findKey:function(str, key, el) {
  6.         var arr = null,
  7.             regStr = null,
  8.             content = null,
  9.             Reg = null,
  10.             _el = el || 'span';
  11.         arr = key.split(/\s+/);
  12.         //alert(regStr); //    如：(前端|过来)
  13.         regStr = this.createKeyExp(arr);
  14.         content = str;
  15.         //alert(Reg);//        /如：(前端|过来)/g
  16.         Reg = new RegExp(regStr, "g");
  17.         content = content;
  18.         //过滤html标签 替换标签，往关键字前后加上标签
  19.         return content.replace(/<\/?[^>]*>/g, '').replace(Reg, "<" + _el + ">$1 + _el + ">");
  20.     }

数组操作

3-1.获取对象数组某些项

  1.     //获取对象数组某些项
  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}]
  3.     //getOptionArray(arr,'a,c')
  4.     //[{a:1,c:9},{a:2,c:5},{a:5,c:underfind},{a:4,c:5},{a:4,c:7}]
  5.     //只获取某一项的值
  6.     //getOptionArray(arr,'a',1)
  7.     //getOptionArray(arr,'b',1)
  8.     //[2, 3, 9, 2, 5]
  9.     getOptionArray:function(arr, keys, type) {
  10.         var newArr = []
  11.         if (!keys) {
  12.             return arr
  13.         }
  14.         //是否只是需要获取某一项的值
  15.         if (type === 1) {
  16.             for (var i = 0, len = arr.length; i < len; i++) {
  17.                 newArr.push(arr[i][keys])
  18.             }
  19.             return newArr;
  20.         }
  21.         var _keys = keys.split(','), newArrOne = {};
  22.         for (var i = 0, len = arr.length; i < len; i++) {
  23.             newArrOne = {};
  24.             for (var j = 0, len1 = _keys.length; j < len1; j++) {
  25.                 newArrOne[_keys[j]] = arr[i][_keys[j]]
  26.             }
  27.             newArr.push(newArrOne);
  28.         }
  29.         return newArr
  30.     }

3-2.排除数组某些项

  1.     //排除数组某些项
  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}]
  3.     //filterOptionArray(arr,'a')
  4.     //[{b:2,c:9},{b:3,c:5},{b:9},{b:2,c:5},{b:5,c:7}]
  5.     //filterOptionArray(arr,'a,c')
  6.     //[{b:2},{b:3},{b:9},{b:2},{b:5}]
  7.     filterOptionArray:function(arr, keys) {
  8.         var newArr = []
  9.         var _keys = keys.split(','), newArrOne = {};
  10.         for (var i = 0, len = arr.length; i < len; i++) {
  11.             newArrOne = {};
  12.             for (var key in arr[i]) {
  13.                 //如果key不存在排除keys里面,添加数据
  14.                 if (_keys.indexOf(key) === -1) {
  15.                     newArrOne[key] = arr[i][key];
  16.                 }
  17.             }
  18.             newArr.push(newArrOne);
  19.         }
  20.         return newArr
  21.     }

3-3.对象数组排序

  1.     //对象数组的排序
  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}]
  3.     //arraySort(arr2,'a,b')  a是第一排序条件，b是第二排序条件
  4.     //[{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}]
  5.     arraySort: function (arr, sortText) {
  6.         if (!sortText) {
  7.             return arr
  8.         }
  9.         var _sortText = sortText.split(',').reverse(), _arr = arr.slice(0);
  10.         for (var i = 0, len = _sortText.length; i < len; i++) {
  11.             _arr.sort(function (n1, n2) {
  12.                 return n1[_sortText[i]] - n2[_sortText[i]]
  13.             })
  14.         }
  15.         return _arr;
  16.     }

DOM操作

4-1.预加载图片

  1.     //图片没加载出来时用一张图片（loading图片）代替，一般和图片懒加载一起使用
  2.     aftLoadImg:function(obj, url, cb) {
  3.         var oImg = new Image(),_this=this;
  4.         oImg.src = url;
  5.         oImg.onload = function () {
  6.             obj.src = oImg.src;
  7.             if (cb && _this.istype(cb, 'function')) {
  8.                 cb(obj);
  9.             }
  10.         }
  11.     }

4-2.图片滚动懒加载

  1.     //图片滚动懒加载
  2.     //@className {string} 要遍历图片的类名
  3.     //@num {number} 距离多少的时候开始加载 默认 0
  4.     //比如，一张图片距离文档顶部3000，num参数设置200，那么在页面滚动到2800的时候，图片加载。不传num参数就滚动，num默认是0，页面滚动到3000就加载
  6.     //html代码
  7.     //
  8.     //
  9.     //
    ....
  10.     //data-src储存src的数据，到需要加载的时候把data-src的值赋值给src属性，图片就会加载。
  11.     //详细可以查看testLoadImg.html
  13.     //window.onload = function() {
  14.     //    ecDo.loadImg('load-img',100);
  15.     //    window.onscroll = function() {
  16.     //        ecDo.loadImg('load-img',100);
  17.     //        }
  18.     //}
  19.     loadImg:function(className, num) {
  20.         var _className = className || 'ec-load-img', _num = num || 0,_this=this;
  21.         var oImgLoad = document.getElementsByClassName(_className);
  22.         for (var i = 0, len = oImgLoad.length; i < len; i++) {
  23.             if (document.documentElement.clientHeight + document.body.scrollTop > oImgLoad[i].offsetTop - _num && !oImgLoad[i].isLoad) {
  24.                 //记录图片是否已经加载
  25.                 oImgLoad[i].isLoad = true;
  26.                 //设置过渡，当图片下来的时候有一个图片透明度变化
  27.                 oImgLoad[i].style.cssText = "transition: ''; opacity: 0;"
  28.                 if (oImgLoad[i].dataset) {
  29.                     this.aftLoadImg(oImgLoad[i], oImgLoad[i].dataset.src, function (o) {
  30.                         setTimeout(function () {
  31.                             if (o.isLoad) {
  32.                                 _this.removeClass(o, _className);
  33.                                 o.style.cssText = "";
  34.                             }
  35.                         }, 1000)
  36.                     });
  37.                 } else {
  38.                     this.aftLoadImg(oImgLoad[i], oImgLoad[i].getAttribute("data-src"), function (o) {
  39.                         setTimeout(function () {
  40.                             if (o.isLoad) {
  41.                                 _this.removeClass(o, _className);
  42.                                 o.style.cssText = "";
  43.                             }
  44.                         }, 1000)
  45.                     });
  46.                 }
  47.                 (function (i) {
  48.                     setTimeout(function () {
  49.                         oImgLoad[i].style.cssText = "transition:all 1s; opacity: 1;";
  50.                     }, 16)
  51.                 })(i);
  52.             }
  53.         }
  54.     }

其它做操

5-1.封装AJAX

  1.     /*
  2.      * @param {string}obj.type http连接的方式，包括POST和GET两种方式
  3.      * @param {string}obj.url 发送请求的url
  4.      * @param {boolean}obj.async 是否为异步请求，true为异步的，false为同步的
  5.      * @param {object}obj.data 发送的参数，格式为对象类型
  6.      * @param {function}obj.success ajax发送并接收成功调用的回调函数
  7.      * @param {function}obj.error ajax发送失败或者接收失败调用的回调函数
  8.      */
  9.     //  ecDo.ajax({
  10.     //      type:'get',
  11.     //      url:'xxx',
  12.     //      data:{
  13.     //          id:'111'
  14.     //      },
  15.     //      success:function(res){
  16.     //          console.log(res)
  17.     //      }
  18.     //  })
  19.     ajax: function (obj) {
  20.         obj = obj || {};
  21.         obj.type = obj.type.toUpperCase() || 'POST';
  22.         obj.url = obj.url || '';
  23.         obj.async = obj.async || true;
  24.         obj.data = obj.data || null;
  25.         obj.success = obj.success || function () {
  26.             };
  27.         obj.success = obj.error || function () {
  28.             };
  29.         var xmlHttp = null;
  30.         if (XMLHttpRequest) {
  31.             xmlHttp = new XMLHttpRequest();
  32.         } else {
  33.             xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
  34.         }
  35.         var params = [];
  36.         for (var key in obj.data) {
  37.             params.push(key + '=' + obj.data[key]);
  38.         }
  39.         var postData = params.join('&');
  40.         if (obj.type.toUpperCase() === 'POST') {
  41.             xmlHttp.open(obj.type, obj.url, obj.async);
  42.             xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
  43.             xmlHttp.send(postData);
  44.         } else if (obj.type.toUpperCase() === 'GET') {
  45.             xmlHttp.open(obj.type, obj.url + '?' + postData, obj.async);
  46.             xmlHttp.send(null);
  47.         }
  48.         xmlHttp.onreadystatechange = function () {
  49.             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
  50.                 obj.success(xmlHttp.responseText);
  51.             } else {
  52.                 obj.error(xmlHttp.responseText);
  53.             }
  54.         };
  55.     }

5-2.数据类型判断

  1.     //数据类型判断
  2.     //istype([],'array')
  3.     //true
  4.     //istype([])
  5.     //'[object Array]'
  6.     istype:function(o, type) {
  7.         //全部小写
  8.         var _type = type.toLowerCase();
  9.         switch (_type) {
  10.             case 'string':
  11.                 return Object.prototype.toString.call(o) === '[object String]';
  12.             case 'number':
  13.                 return Object.prototype.toString.call(o) === '[object Number]';
  14.             case 'boolean':
  15.                 return Object.prototype.toString.call(o) === '[object Boolean]';
  16.             case 'undefined':
  17.                 return Object.prototype.toString.call(o) === '[object Undefined]';
  18.             case 'null':
  19.                 return Object.prototype.toString.call(o) === '[object Null]';
  20.             case 'function':
  21.                 return Object.prototype.toString.call(o) === '[object Function]';
  22.             case 'array':
  23.                 return Object.prototype.toString.call(o) === '[object Array]';
  24.             case 'object':
  25.                 return Object.prototype.toString.call(o) === '[object Object]';
  26.             case 'nan':
  27.                 return isNaN(o);
  28.             case 'elements':
  29.                 return Object.prototype.toString.call(o).indexOf('HTML')!==-1
  30.             default:
  31.                 return Object.prototype.toString.call(o)
  32.         }
  33.     }

5-3.手机类型判断

  1.     //手机类型判断
  2.     //browserInfo('android')
  3.     //false（在浏览器iphone6模拟器的调试） 
  4.     browserInfo:function(type) {
  5.         switch (type) {
  6.             case 'android':
  7.                 return navigator.userAgent.toLowerCase().indexOf('android') !== -1
  8.             case 'iphone':
  9.                 return navigator.userAgent.toLowerCase().indexOf('iphone') !== -1
  10.             case 'ipad':
  11.                 return navigator.userAgent.toLowerCase().indexOf('ipad') !== -1
  12.             case 'weixin':
  13.                 return navigator.userAgent.toLowerCase().indexOf('MicroMessenger') !== -1
  14.             default:
  15.                 return navigator.userAgent.toLowerCase()
  16.         }
  17.     }

小结

算上上一篇，js常用的小实例超过50个了，在我自己日常开发，常用的小实例基本都在里面了（操作太过于灵活的可能一时封装不了）。可能以后更多的更新并不是增加函数，而修改优化函数写法（特别是函数命名的问题，还有很多是需要改的，命名也是搞得我词穷了！），或者是用es6语法改写。当然，如果真的有值得封装的小实例，我也会继续更新，小改动就不会再发文章，只更新github，大改动就继续发文章。如果大家觉得我哪里还是可以优化的，或者哪里有问题，欢迎大家指点下建议。这样可以让大家相互学习，相互帮助！

常见的css框架有哪些

常见css框架：1、Bootstrap框架；2、Foundation框架，一个专业的前端框架；3、Pure框架，优点是渲染快；4、Skeleton框架；5、99lime HTML KickStart框架，适合网站快速开发；6、Kube框架。

本教程操作环境：windows7系统、CSS3版、DellG3电脑。

目前，网络中有许多的前端框架，本着学习的态度认真的搜索了一番，总结一下所看到的前端框架。

1.Bootstrap

基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

2.Foundation

它是众多功能的集合，是Mac/iOS中其他框架的基础。是一个专业的前端框架，提供业务支持、培训和咨询。现已应用于Facebook、Mozilla、Ebay等大型网站。

3.Pure

它是一个轻量级的、响应式的框架。主要特点就是纯css框架，没有任何JavaScript代码，渲染更快。

4.Skeleton（MIT；响应式）

非常漂亮的Web模板，适合响应式、移动友好的开发。

5.99lime HTML KickStart（Free）

适合网站快速开发的极简HTML构建模块。

6.Kube（Free；响应式）

面向专业人员的CSS框架。

推荐学习：《css视频教程》

开发 html元素 运行报错 筛选条件 siblings
本站内容来自用户投稿，如果侵犯了您的权利，请与我们联系删除。联系邮箱：835971066@qq.com

本文链接：http://news.xiuzhanwang.com/post/2650.html

上一篇 企业网站运营有哪些内容

下一篇 贵港贺州企业网站建设

相关文章

发表评论

评论列表

还没有评论，快来说点什么吧~

最新发布

热门文章

热评文章

猜您喜欢

热门标签

友情链接：