1.前言
這個系列的上一篇文章（編寫自己的程式碼庫（javascript常用例項的實現與封裝））總結了34個常見的操作。但是在開發中，常見的例項又何止這麼多個，經過這些日子的探索，以及他人的意見，現在得追加一些操作例項了。希望能幫到大家，也希望如果大家覺得有什麼需要追加的，覺得我哪裡寫得不好或者寫錯了，歡迎評論或者私信我！另外，專案仍然是之前的那個，程式碼已經上傳上去了，也歡迎大家在github上面star一下ec-do！
好，下面正式進入正文！
特別說明
ps：下面的的函式寫法，比如直接這樣寫是會報錯的
createKeyExp：function(){}。但我這篇文章是基於這個系列的上一篇文章的，等於是createKeyExp：function(){}，直接在**ecDo**這個物件裡面。不知道的同學可以移步到上一篇文章（編寫自己的程式碼庫（javascript常用例項的實現與封裝））去看，或者直接去上面的github看程式碼ec-do。
實際程式碼如下，只是我沒寫出var ecDo={}而已！我為什麼這樣封裝，之前也說過，不想宣告太多全域性變數。還有一個要注意的就是下面函式可能會出現this這個關鍵詞，除了特別說明之外，都是指向ecDo這個物件。
|
1 2 3 4 5 |
var ecDo={ createKeyExp：function(){...}, longestWord:function(){...}, ... } |
前序：bug修改以及寫法優化
此處修改之前提交函式已經發現的bug，基於這個系列上篇文章的提供的函式。
changeCase(大小寫轉換函式)修改
|
1 2 3 4 5 6 7 |
//修改一個bug,當只有一個字元的時候。 //沒處理前 ecDo.ecDo.changeCase("a",3) "a" //處理後 ecDo.changeCase("a",3) "A" |
upDigit（金額大寫函式）bug修改
|
1 2 3 4 5 6 |
//處理前 ecDo.upDigit(999900000) "人民幣玖億玖仟玖佰玖拾元整" //處理後 ecDo.upDigit(999900000) "人民幣玖億玖仟玖佰玖拾萬元整" |
covArr（求陣列平均數）修改bug
|
1 2 3 |
//這個方法，完全是粗心大意寫錯了，但是現在改過來了！，直接使用就好 ecDo.covArr([1,2,3]) //2 |
隨機碼函式重新命名
|
1 2 3 4 5 6 7 8 |
//又是粗心大意，以前這個方法名是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（數字陣列求和）
|
1 2 3 4 5 6 7 8 9 10 11 |
//數字陣列求和 sumArr: function (arr) { //以前寫法 //var sumText = 0; //for (var i = 0, len = arr.length; i<len;i++){ //sumText+=arr[i]; //} // return sumText //現在寫法 retun arr.reduce(function(pre,cur){return pre+cur}) } |
siblings（獲取兄弟節點）
增加篩選條件，支援標籤名，class，id
|
1 2 3 4 5 6 7 8 9 10 11 |
//之前寫法 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.找出最長單詞
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//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.句中單每個單詞詞首字母大寫
這個我也一直在糾結，英文標題，即使是首字母大寫，也未必每一個單詞的首字母都是大寫的，但是又不知道哪些應該大寫，哪些不應該大寫
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//句中單詞首字母大寫 (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.字串過濾
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
//過濾字串(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.建立正則字元
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//建立正則字元,一般是為搜尋或者高亮操作 //createKeyExp(['我','誰']) //'(我|誰)' createKeyExp：function(strArr) { var str = ""; for (var i = 0; ii < strArr.length; i++) { if (i != strArr.length - 1) { str = str + strArr[i] + "|"; } else { str = str + strArr[i]; } } return "(" + str + ")"; } |
2-5.關鍵字加標籤
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//簡單關鍵字加標籤（多個關鍵詞用空格隔開） //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.獲取物件陣列某些項
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
//獲取物件陣列某些項 //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.排除陣列某些項
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//排除陣列某些項 //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.物件陣列排序
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//物件陣列的排序 //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.預載入圖片
|
1 2 3 4 5 6 7 8 9 10 11 |
//圖片沒載入出來時用一張圖片（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.圖片滾動懶載入
|
1 2 3 4 5 6 7 8 9 10 |
//圖片滾動懶載入 //@className {string} 要遍歷圖片的類名 //<a href='http://www.jobbole.com/members/wx177044490'>@num</a> {number} 距離多少的時候開始載入 預設 0 //比如，一張圖片距離文件頂部3000，num引數設定200，那麼在頁面滾動到2800的時候，圖片載入。不傳num引數就滾動，num預設是0，頁面滾動到3000就載入 //html程式碼 //<img class="load-img" width="528" height="304" /> //<img class="load-img" width="528" height="304" /> //<img class="load-img" width="528" height="304" />.... //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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/* * @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.success = 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;'); 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.資料型別判斷
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
//資料型別判斷 //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.手機型別判斷
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//手機型別判斷 //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，大改動就繼續發文章。如果大家覺得我哪裡還是可以優化的，或者哪裡有問題，歡迎大家指點下建議。這樣可以讓大家相互學習，相互幫助！