如何成為別人嘴裡的高階前端工程師？

阿新 • • 發佈：2021-12-17

要想成為一個高階前端工程師，很多人的答案都是：學習，不斷地學習。

學習肯定是要學的，但是我們要怎麼學習呢？

學習方式還是挺多的，我更推薦大家多看看比自己水平高的人，寫的程式碼。遇到沒見過的內容就立即學習學習。下面就給大家看看，我們為什麼要看別人的程式碼！

場景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)
}