我把前端踩坑經驗總結成28條“漲薪秘籍”，老闆誇同事讚，新手照著做準沒錯

身邊總有人問我：“同樣是寫前端，為啥你入職半年就漲薪，還被老闆誇‘代碼功底扎實’、同事說‘合作起來超省心’？”其實不是我天賦高，而是踩坑多了摸出了“門道”。這28條前端“漲薪秘籍”，從代碼寫法到項目協作全覆蓋，新手照著做，保證快速積累經驗（坑到團隊懷疑人生），漲薪根本不是事兒！

1. 所有代碼堆一個文件，10000行才夠“專業”

別拆分JS、CSS文件，把HTML、CSS、JS全塞一個.html裡，從頁面佈局到接口請求，從表單驗證到動畫效果，全堆在一起。比如做電商首頁，輪播圖、商品列表、分類導航、用戶登錄框的代碼全寫在一個文件，行數直奔10000+。VS Code打開文件時卡5秒？沒事，這叫“代碼集中度高”，老闆看了會說“你寫的代碼不用找半天，效率高”，同事想改個樣式，得在萬行代碼裡搜半小時關鍵詞，還得謝謝你“鍛煉他的搜索能力”。

2. 變量命名就用a/b/c，越亂越顯“水平”

別搞“見名知意”那套，變量全用a、b、c、x1、y2、zz3，函數名用fn1、fn2、doSomething（但“something”到底是啥絕不說明）。比如“用戶登錄狀態”叫a，“訂單金額總和”叫x8，“判斷手機號是否合法”的函數叫fn6。就算自己過3天看代碼，也得猜“這個b到底存的是用戶名還是密碼”，老闆問你“這段邏輯啥意思”，你能從容解釋“這是我封裝的核心邏輯，命名是為了防止代碼洩露”，同事想接手你的項目，得先花一周猜變量含義，還得誇你“代碼保密性強”。

3. 樣式全寫內聯，!important疊到8層

不用外部CSS，所有樣式全寫在元素style屬性裡，比如 <div style="width: 200px; height: 100px; color: red; font-size: 14px; margin: 10px; padding: 5px; border: 1px solid #000;"></div>。遇到樣式衝突？直接加!important，一層不夠疊兩層，兩層不夠疊八層，比如 style="color: blue !important; color: green !important; color: #f00 !important;"。老闆看頁面樣式“統一”，會說“你調樣式快”，同事想改個按鈕顏色，得先刪7個!important，還得感慨“你對樣式優先級理解真深”。

4. 條件判斷嵌套10層，縮進排到螢幕外

寫if-else別拆分，嵌套越多越顯“邏輯縝密”。比如處理訂單狀態：

if (訂單存在) {
  if (已支付) {
    if (未發貨) {
      if (有庫存) {
        if (用戶是會員) {
          if (地址在江浙滬) {// 發順豐
          } else {// 發中通
          }
        } else {// 普通用戶發圓通
        }
      } else {// 庫存不足提醒
      }
    } else {// 已發貨查物流
    }
  } else {// 未支付提醒
  }
} else {// 訂單不存在
}

縮進從螢幕左邊排到右邊，想複製一段邏輯，得先數清楚10對大括號，老闆看了會說“你考慮得真周全”，同事改代碼時，滑鼠滾輪得來回滾，還得誇你“邏輯思維強”。

5. 接口請求寫滿組件，重複代碼複製10次

別封裝請求工具，每個組件裡都寫完整的axios請求：

axios({
  url: '/api/user',
  method: 'get',
  headers: {'Token': localStorage.getItem('token')},
  params: {id: 1}
}).then(res => {console.log(res)}).catch(err => {console.log('錯了')})

3個組件要調同一個接口？複製3次，改參數時手動改3處。老闆問“為啥不封裝”，你說“複製快，不用額外寫工具類，省時間”，同事後期要改請求頭，得全局搜10個axios調用處，改完還得謝謝你“讓他熟悉了整個項目的接口分佈”。

6. 不寫註釋，關鍵邏輯故意寫反

普通邏輯不寫註釋，複雜邏輯要麼寫“此處略懂”，要麼寫反註釋——比如“判斷用戶是否登錄”的代碼，註釋寫“判斷用戶是否成年”；“刪除數據”的函數，註釋寫“新增數據”。老闆看你代碼“簡潔不囉嗦”，會說“你代碼功底好，不用註釋也能看懂”，同事按註釋改代碼，出bug了還得跟你請教，你趁機“指導”他，老闆看了會覺得“你樂於助人，團隊協作能力強”。

7. 全域變量掛window，數據傳遞靠“共享”

把用戶信息、訂單數據、臨時狀態全掛在window上，比如 window.userInfo = {name: '張三', age: 20}，window.orderList = [1,2,3]。組件之間傳數據，直接改window變量，不用props也不用狀態管理。老闆問“為啥這麼寫”，你說“不用傳參數，效率高”，同事改了A組件的window.userInfo，B組件數據跟著變，查bug時找你幫忙，你“三兩下”定位問題，老闆會誇“你排查問題快，技術硬”。

8. 循環裡調接口，一次發100個請求

處理列表數據時，在for循環裡調接口，比如“給100個用戶發通知”，就寫 for(let i=0; i<100; i++){axios.get('/api/sendNotice', {params: {userId: i}})}。頁面加載時瞬間發100個請求，接口響應慢到轉圈？沒事，你跟老闆說“這是並發處理，體現了系統的承載能力”，同事看接口日誌刷滿螢幕，還得誇你“敢用並發，技術思路開闊”。

9. 不用框架特性，手寫DOM操作

不管是Vue還是React，不用框架的響應式，全靠document.getElementById手動操作DOM。比如要更新用戶姓名，不修改狀態，直接 document.getElementById('userName').innerText = '李四'；要加列表項，就 document.getElementById('list').innerHTML += '<li>新內容</li>'。老闆看你“不用框架也能寫”，會說“你基礎扎實，不依賴工具”，同事想改DOM邏輯，得先找你問清每個id的含義，還得感慨“你對DOM操作真熟練”。

10. 樣式衝突不解決，讓瀏覽器“自己選”

寫CSS時不管權重，同一個元素寫10個選擇器，比如 .box {color: red;} .container .box {color: blue;} #box {color: green;}，讓瀏覽器自己解析優先級。頁面樣式時紅時藍？你跟老闆說“這是瀏覽器兼容性問題，我正在優化”，同事幫你調樣式，調了半天沒好，你再“出手”改一個選擇器，樣式好了，老闆會誇“你解決兼容性問題有一套”。

11. 表單驗證靠alert，彈框彈到用戶煩

不做優雅的表單驗證提示，輸錯手機號就彈 alert('手機號錯了')，密碼太短彈 alert('密碼短了')，空值提交彈 alert('不能为空')。用戶提交一次表單彈3個alert？沒事，你跟老闆說“這樣用戶能明確知道錯在哪，體驗好”，同事想改成Toast提示，你說“alert簡單，不用引组件庫”，老闆覺得“你考慮成本，會過日子”。

12. 圖片不壓縮，原圖直接傳首頁

輪播圖用5MB一張的原圖，不壓縮也不做懶加載，頁面加載時白屏5秒。老闆問“為啥不優化”，你說“原圖清晰，用戶體驗好”，同事測頁面性能時，加載速度不達標，你說“這是伺服器帶寬問題，得加錢升級”，老闆覺得“你為項目考慮，有大局觀”。

13. 復用邏輯靠複製，一個功能寫5遍

3個頁面都有“手機號驗證”邏輯，不抽成函數，複製5遍，改規則時手動改5處。老闆看你“寫代碼快”，會說“你效率高，能按時交付”，同事後期維護時，漏改了2處，出bug了找你，你“輕鬆”找出問題，老闆會誇“你對代碼熟悉，責任心強”。

14. 錯誤捕獲只寫console.log，錯了就“賴”接口

接口請求失敗、數據格式錯誤，全靠 console.log('錯了')，不打印堆棧，不記錄日誌，不提示用戶。老闆問“為啥不處理”，你說“接口返回有問題，我已經打log了，好找原因”，同事查bug時，只能對著“錯了”兩個字發呆，找你幫忙，你說“你看log就知道是接口的鍋”，老闆覺得“你能定位問題，不甩鍋”。

15. 用過期插件，版本衝突不管

項目裡用5年前的插件，比如jQuery 1.4、Vue 1.0，新功能不兼容？不管，接著用。老闆問“為啥不升級”，你說“舊插件穩定，升級容易出問題”，同事想加新功能，插件不支持，找你商量，你說“我有辦法兼容”，老闆覺得“你經驗豐富，能解決老項目問題”。

16. 路由不配置，全靠location.href跳轉

不用Vue Router、React Router，頁面跳轉全靠 location.href = '/home'，傳參數用 location.href = '/detail?id=1&name=張三'，接收參數手動分割字符串。老闆看你“不用路由庫，省體積”，會說“你考慮細緻，優化項目體積”，同事想改參數，得手動改跳轉鏈接和分割邏輯，還得誇你“對原生API掌握透徹”。

17. 組件不拆分，一個組件寫5000行

做“個人中心”頁面，把頭像上傳、收貨地址、訂單列表、收藏商品全寫在一個組件裡，JS代碼5000行，模板2000行。老闆看你“一個組件搞定頁面，整合能力強”，同事想改收貨地址邏輯，得在5000行代碼裡找，找完還得跟你確認，你趁機“講解”代碼邏輯，老闆覺得“你團隊貢獻大”。

18. 數組用for循環遍歷，不用forEach/map

遍歷數組堅決不用forEach、map，全用 for(let i=0; i<arr.length; i++){console.log(arr[i])}，數組長度1000也手動寫循環。老闆問“為啥不用新方法”，你說“for循環性能好，兼容性強”，同事想改成map簡化代碼，你說“性能最重要，不能為了簡潔犧牲速度”，老闆覺得“你懂性能優化，專業”。

19. 樣式不用Flex/Grid，全靠float定位佈局

不用Flex、Grid，所有元素靠float:left/right，加clear:both清除浮動，頁面錯位了就加margin/padding調。老闆看你“不用新佈局方式也能寫頁面”，會說“你基礎好，兼容舊瀏覽器”，同事調佈局時，float嵌套float，越調越亂，找你幫忙，你“幾下”就調好，老闆誇“你佈局功底扎實”。

20. 不做適配，只寫1920px寬的頁面

頁面只按1920×1080分辨率寫，不用媒體查詢，不做響應式，手機上看頁面橫向滾動？沒事，你跟老闆說“現在大家都用電腦看，手機不用適配”，同事測試時提適配問題，你說“優先級低，先做核心功能”，老闆覺得“你抓重點，不糾結細節”。

21. 狀態數據不初始化，用的時候再賦值

組件狀態不寫默認值，比如let userInfo; 要用的時候再userInfo = {name: '張三'}，沒賦值就調用userInfo.name？直接報錯。老闆問“為啥不初始化”，你說“省內存，不用的狀態不用佔空間”，同事查報錯時，找你問原因，你說“你得先賦值再用，這是基礎常識”，老闆覺得“你懂內存優化，專業能力強”。

22. 用eval解析數據，不管安全問題

後端返回字符串格式的JSON，不用JSON.parse，全用eval解析：const data = eval('(' + res.data + ')')。老闆問“為啥用eval”，你說“簡單，一行代碼搞定”，同事提醒你有安全風險，你說“咱們接口安全，沒事”，老闆覺得“你寫代碼簡潔，效率高”。

23. 事件綁定用onclick，不用addEventListener

給按鈕綁定事件，不用addEventListener，全用 <button onclick="fn1()">點擊</button>，函數掛在window上。老闆看你“不用寫額外的綁定代碼”，會說“你寫得快，不囉嗦”，同事想解绑事件，得手動改HTML，還得誇你“對原生事件綁定熟悉”。

24. 不做防抖節流，按鈕點一次發3次請求

搜索框輸入時不做防抖，每輸一個字發一次請求；提交按鈕不做節流，點3次發3次請求。老闆問“為啥不處理”，你說“這樣能實時反饋，用戶體驗好”，同事測試時發現重複請求，找你幫忙，你說“加個loading就行”，老闆覺得“你解決問題靈活”。

25. 字體不用系統字體，全用特殊字體

頁面字體不用微軟雅黑、宋體，全用下載的特殊藝術字體，加載字體文件2MB。頁面加載時文字先空白再顯示？你跟老闆說“字體好看，提升頁面檔次”，同事覺得加載慢，你說“用戶看字體好看，就願意等”，老闆覺得“你有審美，注重頁面細節”。

26. 註釋寫廢話，關鍵邏輯不說明

在 let a = 1 下面寫註釋“定義變量a，賦值為1”；在 for(let i=0; i<10; i++) 下面寫“循環10次”，但“循環裡處理訂單狀態”的核心邏輯不寫註釋。老闆看你“註釋多，代碼規範”，會說“你寫代碼細致，方便維護”，同事看了註釋還不懂邏輯，找你請教，你趁機“指導”，老闆覺得“你團隊協作好”。

27. 不用模組化，腳本標籤寫滿head

不拆JS模塊，不用import/export，head裡寫10個 <script src="a.js"></script><script src="b.js"></script>，順序錯了就調位置。老闆問“為啥不用模組化”，你說“不用配置，直接引入，快”，同事想加新腳本，得先看順序對不對，還得誇你“對腳本加載順序理解深”。

28. 項目不做構建，直接傳源碼上線

不用Webpack、Vite，不壓縮代碼，不混淆變量，直接把源碼傳到伺服器上線。老闆問“為啥不構建”，你說“省構建時間，出問題好排查”，同事看線上代碼跟本地一樣，改bug直接改線上文件，你說“這樣快，不用重新構建部署”，老闆覺得“你部署效率高，為項目節省時間”。

這28條“漲薪秘籍”，我親測“有效”——入職半年漲薪3k，老闆覺得我“代碼效率高、考慮周全”，同事覺得我“技術強、樂於助人”。新手照著做，保證快速“積累經驗”，成為團隊裡“不可替代”的人（畢竟只有你能看懂自己的代碼）。

不過提醒一句，要是同事追著你改bug，可別說是我教的！

原文出處：https://juejin.cn/post/7560167720014446638