【青訓營】月影老師告訴我寫好JavaScript原則與技巧大總結
theme: channing-cyan
YK菌花了十幾天的時間總結了月影老師三個小時的課程,對大部分案例都進行了自己的復現,並且進行了一些思考,今天來對之前博文,以及月影老師關於《如何寫好JS》的課程做一個全面的總結。
BB一句:還記得上完課在打卡的課程意見中,我寫到:光月影老師的課我就能寫八篇博文! 沒想到,我竟然真的寫到了,這是第八篇!!!
我們一共講了寫好JavaScript的七個原則或技巧,它們分別是:
各司其責
首先要做到各司其責,如果遇到純UI展示類的操作,頁面樣式的切換,動畫之類的,我們可以優先考慮使用CSS來操作,而不是JavaScript!解決bug的最好方式就是不寫程式碼~
保證正確
我們寫出來的程式碼最重要的是要保證正確,不能寫一個不正確的程式碼。在遇到一些比較複雜的情況,考慮演算法的數學模型,最好能給予證明,保證程式碼的數理正確性。
風格優先
實際的團隊專案開發中,為了更好的合作,通過設定程式碼規範校驗來統一風格,增加程式碼可讀性是很有必要的。也就是 風格優先
我們處理一些數字上的操作通過考慮的更加底層一點,這樣可以提升我們程式碼的執行效率,使用位運算就是一個不錯的提升效率的選擇,但是我們不能一味的追求極致的效率而犧牲了程式碼的可讀性,程式碼的可讀性和效率也是同樣重要的!
當然,我們要依據使用場景來權衡可讀性與效率的問題,沒有絕對正確的答案。
封裝函式
我們定義函式的時候,要做好封裝函式,儘量不要讓一個函式直接處理一個外部的變數,最好把這個變數變成一個引數,傳遞給函式。 封裝函式的時候要做好資料抽象與過程抽象。
做好資料抽象,把用到的一些資料進行分離出來,在函式外部定義一個物件陣列,將其傳入函式中使用,將資料解耦出來,提高函式的可複用性。
過程抽象
不但可以進行資料抽象,還可以進行過程抽象,將一些操作抽象出來成一個單獨的函式,也就是將操作行為從函式中解耦出來,需要的地方進行引入(只關心做什麼What to do 不關心怎麼做 How to do),同樣可以提高程式碼的複用性。
在我們的程式碼庫中,儘量多寫沒有副作用的純函式,無侵入式的程式碼。可以使我們的程式碼具有更好的可維護性。
JavaScript即可以寫命令式(How to do)的程式碼,也可以寫宣告式(What to do)的程式碼,處理複雜邏輯時,推薦使用宣告式,抽象程度更高,拓展性更強
元件封裝
在進行元件封裝時,將HTML解耦進行模板化,將JavaScript解耦進行外掛化,將通用的元件模型抽象出來形成元件框架,增加元件的複用性、靈活性。
妙用特性
最後,JavaScript有很多自己的特性,諸如正則、JSON、陣列上的各種方法等。我們在編寫程式碼的時候妙用特性可以極大的提高我們的工作效率。
相關博文
【青訓營】月影老師告訴我寫好JavaScript的三大原則——各司其責
【青訓營】月影老師告訴我寫好JavaScript的三大原則——元件封裝
【青訓營】月影老師告訴我寫好JavaScript的三大原則——過程抽象
【青訓營】月影老師告訴我寫好JavaScript的四大技巧——風格優先
【青訓營】月影老師告訴我寫好JavaScript的四大技巧——保證正確
【青訓營】月影老師告訴我寫好JavaScript的四大技巧——封裝函式
【青訓營】月影老師告訴我寫好JavaScript的四大技巧——妙用特性
也可以關注專欄: 【青訓營筆記專欄】
- 從校園到職場 | YK菌的2022年中總結
- 【青訓營】月影老師告訴我寫好JavaScript的三大原則——元件封裝
- 【青訓營】月影老師告訴我寫好JavaScript原則與技巧大總結
- 2022屆秋招,從被拒到上岸 | 談談YK菌在2021年的經歷與收穫
- 【TS】快速上手(四)配置選項 - 編譯選項compilerOptions
- 【LeetCode】圖解反轉連結串列 - 迭代 - 遞迴
- 【LeetCode】最大子序和從O(N^3)到O(N) - 暴力初探 - 分而治之 - 線上處理
- 【JS】JavaScript基礎知識自我檢查大過關(第三關)函式定義與呼叫
- 【Vue】高階系列(六)Vue-cli配置代理 -demo3-GitHub使用者查詢-axios
- 【Vue】高階系列(五)元件間通訊
- 【Vue】高階系列(四)Vue模組化實戰-demo2-任務清單todoList
- 【TS】快速上手(二)型別宣告
- 【Vue】高階系列(三)Vue模組化實戰-demo1-動態評價頁面
- 【Vue】高階系列(二)Vue相關小知識
- 【Vue】高階系列(一)Vue元件定義與使用 - 非單檔案元件 - 單檔案元件 - VueComponent
- 【Vue】基礎系列(十一)Vue指令-常用內建指令-自定義指令-全域性指令-區域性指令
- 【Vue】基礎系列(九)動畫與過渡-trasition-enter-leave
- 【Vue】基礎系列(八)生命週期 - 初始化顯示 - 更新狀態 - 死亡狀態 - 父子元件
- 【Vue】基礎系列(七)v-model - 自動收集資料 - 表單資料自動更新
- 【Vue】基礎系列(六)事件處理 - 繫結監聽 - 事件修飾符 - 按鍵修飾符