前端開發(fā)8個(gè)非常經(jīng)典的常用技巧【你學(xué)廢了嘛？】
（給前端大學(xué)加星標(biāo)，提升前端技能.）
作者：紅領(lǐng)巾小莫
https://juejin.cn/post/6890206996008534030
1.如何知道iframe下載完成
定時(shí)器輪詢監(jiān)聽readyState的狀態(tài)，如果是 complete 或者 interactive 說明文件加載完成。
let iframe = document.createElement('iframe');iframe.src = path;iframe.style.display = 'none';document.body.appendChild(iframe);const timer = setInterval(() => {const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') {document.body.removeAttribute(iframe);clearInterval(timer);resolve('success');}}, 1000);
2.常用的全屏居中 JS 函數(shù)
//獲取元素function getElement(ele) {return document.getElementById(ele);}//自動(dòng)居中函數(shù)function autoCenter(el) {var bodyX = document.documentElement.offsetWidth || document.body.offsetWidth;var bodyY =document.documentElement.offsetHeight || document.body.offsetHeight;var elementX = el.offsetWidth;var elementY = el.offsetHeight;el.style.left = (bodyX - elementX) / 2 + "px";el.style.top = (bodyY - elementY) / 2 + "px";}
3.JS實(shí)現(xiàn)deepCopy
function getType(obj) {// 為啥不用typeof? typeof無法區(qū)分?jǐn)?shù)組和對(duì)象if(Object.prototype.toString.call(obj) == '[object Object]') {return 'Object';}if(Object.prototype.toString.call(obj) == '[object Array]') {return 'Array';}return 'nomal';};function deepCopy(obj) {if (getType(obj) == 'nomal') {return obj;} else {var newObj = getType(obj) == 'Object' ? {} : [];for(var key in obj) {// 為啥要用hasOwnProperty？不需要從對(duì)象的原型鏈上進(jìn)行復(fù)制if(obj.hasOwnProperty(key)) {newObj[key] = deepCopy(obj[key]);}}}return newObj;}var object = [{title: 'test',checked: false}];deepCopy(object);
4.生成星級(jí)評(píng)分
const StartScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);const start = StartScore(3);// start => "★★★"
5.JS數(shù)組扁平化之簡(jiǎn)單方法實(shí)現(xiàn)
toString
const arr = [1, 2, 3, [4, 5, [6, 7]]];const flatten = arr.toString().split(',');console.log(flatten);
優(yōu)點(diǎn)：簡(jiǎn)單，方便，對(duì)原數(shù)據(jù)沒有影響 缺點(diǎn)：最好數(shù)組元素全是數(shù)字或字符，不會(huì)跳過空位
join
const arr = [1, 2, 3, [4, 5, [6, 7]]];const flatten = arr.join(',').split(',');console.log(flatten);
優(yōu)點(diǎn)和缺點(diǎn)同toString
flat
const arr = [1, 2, 3, [4, 5, [6, 7]]];const flatten = arr.flat(Infinity);console.log(flatten);
優(yōu)點(diǎn)：會(huì)跳過空位，返回新數(shù)組，不會(huì)修改原數(shù)組
擴(kuò)展運(yùn)算符(...)
const arr = [1, 2, 3, [4, 5]];console.log([].concat(...arr));
優(yōu)點(diǎn)：簡(jiǎn)單，方便 缺點(diǎn)：只能扁平化一層
5.使用 :not() 來精簡(jiǎn)css代碼
// 不使用:not().nav li {border-right: 1px solid #666;}.nav li:last-child {border-right: none;}// 使用:not().nav li:not(:last-child) {border-right: 1px solid #666;}// 或者使用兄弟選擇符~.nav li:first-child ~ li {border-left: 1px solid #666;}
6.文本溢出處理
移動(dòng)設(shè)備相對(duì)來說頁面較小，很多時(shí)候顯示的一些信息都需要省略部分。最常見的是單行標(biāo)題溢出省略，多行詳情介紹溢出省略。現(xiàn)在都用框架開發(fā)了，這種建議需求建議形成一個(gè)基礎(chǔ)組件，方便快捷
//單行.single {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}//多行.more {display: -webkit-box !important;overflow: hidden;text-overflow: ellipsis;work-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2; //指定行數(shù)}
7.Git Flow工作流程
master主分支
伴隨整個(gè)項(xiàng)目周期的分支
功能分支（feature branch）
從master切，顧名思義，開發(fā)每一個(gè)功能的分支，開發(fā)完的功能合并到release分支。
補(bǔ)丁分支（hotfix branch）
從master切，修復(fù)BUG分支，測(cè)試完直接合并到master。
預(yù)發(fā)分支（release branch）
從master切，需要測(cè)試的功能都合并到該分支上進(jìn)行測(cè)試。
一旦開發(fā)完成，就會(huì)把release分支合并到master分支，并刪除原分支。
8.JS實(shí)現(xiàn)列表操作
經(jīng)常使用列表，比如待辦事項(xiàng)列表、購物車等，如果數(shù)據(jù)不太多的話，列表就顯得尤為有用
function list() {this.dataStore = []; //初始化數(shù)組this.clear = clear; //清除列表this.remove = remove; //移除列表中的元素this.find = find; //尋找列表中的元素this.length = length; //返回列表的長(zhǎng)度}function find(element) {for (var i = 0, len = this.dataStore.length; i < len; i++) {if (this.dataStore[i] === element) {return i;}}return -1;}function remove(element) {for (var i = 0, len = this.dataStore.length; i < len; i++) {if (this.dataStore[i] === element) {this.dataStore.splice(i, 1);}}return this.dataStore;}function length() {return this.dataStore.length;}function clear() {this.dataStore = [];}
評(píng)論
圖片
表情