要想成為一個高級前端工程師，很多人的答案都是：學習，不斷地學習。
學習肯定是要學的，但是我們要怎么學習呢？
學習方式還是挺多的，我更推薦大家多看看比自己水平高的人，寫的代碼。遇到沒見過的內容就立即學習學習。下面就給大家看看，我們為什么要看別人的代碼！
場景1：數組拼接
let arr1 = [ a, b, c ] let arr2 = [ 1, 2, 3 ] /* 把 arr1 和 arr2 拼接到一起 */
普通程序員：
// 寫法1： let arr = arr1.concat( arr2 ) // 寫法2 -- 使用遍歷 let arr = arr1 arr2.forEach( item => { arr.push( item ) })
大神的代碼：
let arr = arr1.push( ...arr2 )
場景2：吸頂效果 -- 網頁中的某個元素，滾動到網頁頂部時，固定在頂部。
普通程序員代碼：
//添加滾動事件 window.addEventListener( 'scroll', this.handleScroll ) //獲取元素距離頂部的距離 handleScroll () { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop var offsetTop = document.querySelector('#searchBar').offsetTop console.log( scrollTop ) //判斷到達頂部的距離，等於0時，給元素添加固定定位，設置top的值 if ( scrollTop > offsetTop ) { document.querySelector('#searchBar').style.position="fixed" document.querySelector('#searchBar').style.top="0" }else{ //當距離大於0時，修改position屬性值 document.querySelector('#searchBar').style.position="relative" } }
大神的代碼：
#searchBar{ position:sticky; top:0 }
值得注意的是，position:sticky;是新增屬性，好多低版本瀏覽器不支持。所以不建議在PC端使用，可以在手機端使用。
場景3：高度設置
普通程序員代碼：
.box{ position:fixed; top:0; bottom:0; left:0; right:0 }
大神的代碼：
.box{ height:100vh; } // vh -> viewport height
場景4：計算高度設置
普通程序員代碼：
// 方法1：使用絕對定位 <div class="box"> <header></header> <div class="content"></div> </div> <style> .box{ position:relative; } header{ position:fixed; top:0; height:40px; width:100%; } .content{ position:absolute; top:40px; width:100%; left:0; } </style> // 方法2：使用 js 動態獲取可視區高度，然后減去上邊高度，動態設置content元素的高度
大神的代碼：
.content{ height: calc( 100%-40px ) }
使用 calc() 函數動態計算高度。
場景5：給根組件添加事件
普通程序員代碼：
// 父組件代碼 <div> <child @btnclick="btnClick" /> </div> <script> export default{ methods:{ btnClick(){ console.log("子組件點擊事件") } } } </script> //子組件代碼 <template> <div @click="clickEvent"> 子組件內容 </div> </template> <script> export default{ methods:{ clickEvent(){ this.$emit( "btnclick" ) } } } </script>
大神的代碼：
// 父組件代碼 <div> <child @click.nactive="btnClick" /> </div> <script> export default{ methods:{ btnClick(){ // 使用 .native 修飾符 給根元素添加事件 console.log("子組件點擊事件") } } } </script>
場景6：js的防抖
普通程序員代碼：
<input @change="search" v-model="val" /> export default{ data(){ return{ val:'' } }, methods:{ search(){ //網絡請求查詢相關數據 //只要input的值 val 改變，就會發送網絡請求 } } }
大神的代碼：
// 如果input輸入框的值改變比較頻繁的時候，就會不斷的向服務器發送網絡請求， // 這樣就會非常損耗性能，所以需要在一定時間內，多次頻繁改變值的時候，只發一次網絡請求 <input @change="search" v-model="val" /> export default{ data(){ return{ val:'' } }, methods:{ search(){ //網絡請求查詢相關數據 //只要input的值 val 改變，就會發送網絡請求 this.debounce(this.searchData,200) }, searchData(){ //向服務器發送網絡請求 }, debounce(func,delay){ let timer = null; return function(...args){ if(timer)clearTimeout(timer) timer = setTimeout(()=>{ func.apply(this,args) }) } } } }
這樣操作的話，就避免同時向服務器發送多次請求，減輕服務器壓力。
場景7：數組去重
普通程序員代碼：
function unique(arr){ var res = [arr[0]]; for(var i=1;i<arr.length;i++){ var repeat = false; for(var j=0;j<res.length;j++){ if(arr[i] == res[j]){ repeat = true; break; } } if(!repeat){ res.push(arr[i]); } } return res; }
大神的代碼：
function unique(arr){ const res = new Map() return arr.filter((item)=> !res.has(item) && res.set(item,1) ) }
利用 ES6 的數組新增方法filter
場景8：css樣式設置全局變量
普通程序員的代碼：
// 假設主色調是 red div{ color:#666 } .active{ color:red; }
一個網站、app或小程序等，都會有一個主色調，頁面多處使用該顏色時，就需要寫很多次。
大神的代碼：
// 創建一個 base.css文件,代碼如下： :root{ --color-text:#666;//普通字體顏色 --color-high-text:red;//高亮文字顏色 } // 樣式文件 @import "assets/css/base.css"; div{ color:var(--color-text) } .active{ color:var(--color-high-text) }
這樣做的好處就是，可以通過base.css修改變量，這樣只需要修改一處就可以控制項目的所有文件，大大節約開發時間。
好了小編今天的文章就到此結束了，喜歡我的可以點個關注哦！