大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

很多人都來問我：我平時寫的東西都是后臺管理系統，根本就沒啥亮點的東西，我也沒啥進步，我該咋辦呢？

后臺管理不丟人

其實據我了解，大部分前端在公司其實就是做后臺管理系統，偶爾做做移動端，那么大家都是做后臺管理，你要怎么比別人強呢？其實就是一個點：你如何把后臺管理系統做得更好

其實我也做過一段時間的后臺管理系統，我總結了幾點我的心得，分享給大家~

多封裝組件

封裝是一個很普遍的操作，但是卻很少人去做好這件事，我現在做后臺管理系統的話我會做到極致的封裝，只要是一個東西有兩處地方復用到了，我肯定會抽取封裝起來，在這個過程中，我也學到了很多 Vue3 的 API，也發現很多封裝組件的技巧，比如

• shallowRef 節省性能
• computed 的 getter 和 setter
• 組件 props 類型的拓展
• 組件封裝的更加方便使用
• 模板的極致復用
• 命令式使用彈窗

多封裝 Hooks

對于一些業務性的邏輯代碼，或者共用的邏輯代碼，都要有抽取成 Hooks 的意識，這有利于于后續代碼的可維護性，并且抽取共用的 Hooks，有利于代碼可復用性，提高代碼開發效率，鍛煉你的邏輯封裝能力，我最近封裝了很多 Hooks，比如

• useClickoutside：點擊目標區域以外觸發事件
• useCommandComponent：命令式使用組件
• createModal：命令式使用彈窗
• useTemplate：本組件復用彈窗
• useGlobalState：局部狀態管理
• useVirtualList：虛擬滾動
• 等等。。。

多考慮邊界條件

我發現很多人在做后臺管理也好，做其他的東西也好，其實總是會考慮得沒那么周全，其中一點就是，總是不考慮邊界條件，不去考慮兜底，比如：

• 組件的參數兜底檢驗補全
• hooks的參數兜底補全
• 接口請求數據出錯、接口報錯的兜底
• 某些代碼記得加 try catch 進行兜底
• 代碼執行先后順序問題，怎么去控制按照順序去執行

多想想產品優化

其實優化不止是代碼優化，也有產品優化，有時候其實產品經理想出來的點子，也是不合理的，這個時候你可以去提出自己的見解，讓整個產品更好，當然代碼的優化也是必須做的，比如：

• 防抖節流
• 長列表的虛擬滾動
• 大文件的分片上傳
• 多請求時的控制并發
• 使用合適的 API ，節省性能
• 多使用設計模式，提高代碼健壯性

多想想怎么提高效率

你要知道，后臺管理系統其實業務難度是有限的，但是其實你可以不要局限于項目，而是要經常去想想：

• 你能怎么在項目中去讓自己進步
• 你要怎么樣去提升自己的開發效率
• 你要怎么樣去提升整個團隊的開發效率

就比如我，我在開發后臺管理系統的時候，我會做這些事：

• 發現某些別人不合理的開發習慣，可以記下來，反饋給團隊
• 為了團隊開發規范，開發一些小工具，來助力團隊的規范
• 為了團隊成員開發的效率，開發一些小工具，幫他們提升開發效率
• 多為團隊的組件庫工具庫貢獻，這樣也能提升整個團隊的開發效率
• 主動去封裝一些比較難的組件，提升團隊開發效率，使自己進步

多搞配置化

我記得我一年前去面試一個高級前端工程師的崗位時，面試官就問我一個問題：假如你開發一個后臺管理系統，你怎么讓你的團隊成員更輕松去開發呢？ 我當時回答說：制定規范！ 然后面試官我沒體會到他真正的意思

現在我算是領會到了，面試官的意思是：你要怎么開發一個后臺管理系統，讓你的組員無腦地開發

那其實我覺得，把一些事情做成配置化，這樣才能讓別人開發的時候，更加方便、更加無腦~

其實后臺管理無非就幾個東西：

• 表單
• 表格
• 圖表

那么可以做相對應的配置器，讓其他人只需要傳入配置，就可以生成想要的頁面效果，比如：

• 表單配置器
• 表格配置器
• 圖表配置器

多看看別人怎么做的

github 上有很多很出名的后臺管理系統，大家可以去看看人家是怎么寫的，為啥你寫的像入門級，人家寫的像大佬級別，可以多看看多學學，我推薦給你們vben-admin，我從這個后臺管理項目中真的學到好多東西！