常用 · 前端技術總結

## 一、字母數字排序 ~~~ function mySorter(a, b){ if (/^\d/.test(a) ^ /^\D/.test(b)) return a>b?1:(a==b?0:-1); // ^ 異或（不同為1，相同為0） return a>b?-1:(a==b?0:1); } var pyArray = ["a","d","fa","5","t","fw2","a31","b","e","2fs","4","0"]; console.log(pyArray.sort(mySorter)) ~~~ ## 二、jquery的觀察者模式使用場景：如果頁面有多個setInterval的時候，可以使用觀察者模式，當然還有其他，具體根據項目來 ~~~ (function ($) { var o = $({}); $.subscribe = function () { o.on.apply(o, arguments); }; $.unsubscribe = function () { o.off.apply(o, arguments); }; $.publish = function () { o.trigger.apply(o, arguments); }; }(jQuery)); var startTime = 0; setInterval(function() { startTime++; if(startTime%3 === 0) { $.publish("a", ["a", "b", "c"]); // 輸出abc } if(startTime%2 === 0) { $.publish("b", ['bb']); // 輸出abc } }, 1000); $.subscribe("a", function(e, a, b, c) { console.log(e); console.log(a, b, c); }); $.subscribe("b", function(e, arg1) { console.log(arg1) }); /* //回調函數 function handle(e, a, b, c) { // `e`是事件對象，不需要關注 console.log(a + b + c); }; //訂閱 $.subscribe("/some/topic", handle); //發布 $.publish("/some/topic", ["a", "b", "c"]); // 輸出abc $.unsubscribe("/some/topic", handle); // 退訂 //訂閱 $.subscribe("/some/topic", function (e, a, b, c) { console.log(a + b + c); }); $.publish("/some/topic", ["a", "b", "c"]); // 輸出abc //退訂（退訂使用的是/some/topic名稱，而不是回調函數哦，和版本一的例子不一樣 $.unsubscribe("/some/topic"); */ ~~~ ## 三、div 高度100% ~~~ html,body{height: 100%}; div{height: 100%;} ~~~ ## 四、手動拼裝JSON字符串需要加雙引號 ~~~ '{"name": "tom", "age": 24}' ~~~ ## 五、解板字符串boolean值 ~~~ var flag = 'true'; console.log(eval(flag)); // true; eval會造成性能損耗，不建議使用 console.log(JSON.parse(flag)); // true，可以嘗試 ~~~ ## 六、json變量鍵名 ~~~ // 方式1 var params = {}; var fnum = 'MU1234', anum = 'B1234'; params[fnum] = anum; // 方式2 {[fnum]: anum} // 方式3 請參考es6語法 ~~~ ## 七、在JSON中，前導零是禁止的（在 JSON. 零將被忽略，但在 JSON.parse 它將拋出 SyntaxError）；小數點后必須至少有一位數字。還有前導為0的時候輸出的順序也會發生變化。 ~~~ var foo = { "00": "a", "01": "b", "02": "c", "10": "d", "11": "e", "12": "f" }; for(var i in foo) { console.log(foo[i]); // d e f a b c } ~~~ 排序解決方案：可在鍵名前加個字符 ## 八、巧用bind ~~~ var $ = document.querySelector.bind(document); $('.box').textContent = 'hello world ~'; ~~~ ## 九、兩個字母比較可以先轉為unicode碼 ~~~ console.log('B'.charCodeAt(0) < 'C'.charCodeAt(0)); // true ~~~ ## 十、獲取數據類型 ~~~ function getType(data) { return Object.prototype.toString.call(data).replace(/^\[object (.+)\]$/, '$1').toLowerCase(); } console.log(getType(true)); // boolean console.log(getType(1)); // number ~~~ ## 十一、淡入淡出效果 ~~~ function fadeIn(el) { var opacity = 0; el.style.opacity = 0; el.style.filter = ''; var last = +new Date(); var tick = function() { opacity += (new Date() - last) / 400; el.style.opacity = opacity; el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')'; last = +new Date(); if (opacity < 1) { (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16); } }; tick(); } fadeIn(el); ~~~ ## 十二、添加className ~~~ if (el.classList) el.classList.add(className); else el.className += ' ' + className; ~~~ ## 十三、在元素之前添加html（之后是afterend） ~~~ el.insertAdjacentHTML('beforebegin', htmlString); ~~~ ## 十四、遍歷元素 ~~~ function forEachElement(selector, fn) { var elements = document.querySelectorAll(selector); for (var i = 0; i < elements.length; i++) fn(elements[i], i); } forEachElement(selector, function(el, i){ }); ~~~ ## 十五、判斷是否有class ~~~ if (el.classList) el.classList.contains(className); else new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); ~~~ ## 十六、判斷元素是否是指定元素 ~~~ var matches = function(el, selector) { var _matches = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector); if (_matches) { return _matches.call(el, selector); } else { var nodes = el.parentNode.querySelectorAll(selector); for (var i = nodes.length; i--;) { if (nodes[i] === el) return true; } return false; } }; matches(el, '.my-class'); ~~~ ## 十七、獲取outer寬度（高度同理） ~~~ function outerWidth(el) { var width = el.offsetWidth; var style = el.currentStyle || getComputedStyle(el); width += parseInt(style.marginLeft) + parseInt(style.marginRight); return width; } outerWidth(el); ~~~ ## 十八、刪除class ~~~ if (el.classList) el.classList.remove(className); else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); ~~~ ## 十九、類型轉換優先級 ~~~ // 轉數字 var status = '1'; // (+status) > Number(status) > Math.round(status) > parseInt(status) // 轉字符串 var status = 1; // (''+status) > String(status) > status.toString() > new String(status) ~~~ ## 二十、避免引用類型引起的問題 ~~~ // 數組 var arr1 = [1,2,3], arr2 = arr1.concat([]), arr3 = JSON.parse(JSON.stringify(arr1)); // json對象 var json1 = {name: 'tom', age: 24}, json2 = Object.assign({}, json1), json3 = $.extend({}, json1), // jquery方式 json4 = JSON.parse(JSON.stringify(json1)); ~~~ ## 二一、位操作符技巧 ~~~ // 判斷奇偶 var a = 3; if(!(a&1)) { // 偶數 } else { // 奇數 } // 舍去小數位 ~~~1.567 // 1 ~~~-1.88 // -1 // 配合indexOf返回boolean值 var str = 'hello'; console.log(!!~str.indexOf('j')); // false ~~~ ## 二二、如果已知返回類型，判斷的時候盡量使用===代替==，因為減少了一次js隱式類型轉換的操作 ~~~ var num = 1; if(num === 1) { } ~~~ ## 二三、其他類型轉換為boolean值 ~~~ !!"" // false !!0 // false !!null // false !!undefined // false !!NaN // false !!"hello" // true !!1 // true !!{} // true !![] // true ~~~ ## 二四、規則類型判斷返回，可以使用數組代替switch ~~~ var type = 1; var typeArr = ['開始', '進行中', '打斷', '重新開始', '結束']; console.log(typeArr[type]) ~~~ ## 二五、有時候可以使用字符串代替數組，如星期日到星期六 ~~~ var oDate = new Date(), day = oDate.getDay(), weekStr = '日一二三四五六'; console.log('星期'+weekStr.charAt(day)); ~~~ ## 二六、不使用jQuery給動態追加的元素添加事件 ``` // jQuery使用on監聽 $('body').on('click',?'.el-icon-close',?function(e)?{ // ... }); // js使用事件委托 document.addEventListener('click',?function(e)?{ if(e.target.className === 'el-icon-close')?{ // ... ??} }); ```