前端開發經驗總結和分享

 

我要分享的內容有3點

1. 　　代碼規范
2. 　　mockdata
3. 　　RxJS

 

 

正文

一、代碼規范

 1. vscode 代碼格式化工具 Prettier

配置一致

1.1 vscode安裝Prettier

搜索插件名稱：Prettier - Code formatter

1.2 項目根目錄下添加配置文件.prettierrc

{
    "tabWidth": 2,
    "printWidth": 100,
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all",
    "bracketSpacing": true,
    "overrides": [
        {
            "files": ".prettierrc",
            "options": {"parser": "json"}
        }
    ]
}

 

2. 小函數

堅持定義簡單函數

考慮限制在75行之內

為什么呢？

• 簡單函數更易於測試，特別是當它們只做一件事，只為一個目的服務時。
• 簡單函數促進代碼重用
• 簡單函數更易於閱讀
• 簡單函數更易於維護
• 小函數可避免易在大函數中產生的隱蔽性錯誤，例如與外界共享變量、創建意外的閉包或與依賴之間產生意外耦合等。

 

3. 命名約定

看到名字立刻知道它包含了什么，代表了什么

 

4. 扁平

堅持盡可能保持扁平的目錄結構

 

5. 惰性加載

 

 

二、mockdata

 提前跟后端把接口數據約定好，包括接口名稱，數據字段等

http://mockjs.com/

 因為上一家公司用的框架是Angular，實現方法是把mockdata寫成一個底層服務。Vue應該有也它的實現方式。

https://www.cnblogs.com/famensaodiseng/p/12015281.html

 

三、 rxjs

1. rxjs是什么？

RxJS是一個庫，它通過使用observable序列來編寫異步和基於事件的程序。

它提供了一個核心類型Observable和各種操作符（map, filter, reduce, every, 等等），這些數組操作符可以把異步事件作為集合來處理。

2. rxjs能做什么？

javascript寫前端頁面的時候，除了展示數據UI之外，還需要相應用戶的操作，展示動態的數據，動態加載UI。於是前端的異步有：事件，ajax，動畫，定時器等，處理這些的時候常見的問題有：異步的回調地獄，race condition，內存泄漏，管理復雜狀態，錯誤處理等

（1）回調地獄：按照普通的javascript方法寫，所有的處理寫在某個事件的完成后的回調中，當有多個回調一次執行后1->2->3->4很容易將代碼寫成火箭形，很大一團根本沒法改。

（2）race condition:是指系統出現不恰當的執行時序，而得到不正確的結果。比如搜索框中，每次輸入后發送請求獲取結果展示在搜索框下面，由於網絡或者后端查詢的原因有可能導致最后發送的請求比之前的請求更快的完成了，這時最終展現的並不是最后那個請求的結果。

（3）內存泄漏：當單頁面應用切換頁面時，未在合適的時機移除監聽事件造成內存泄漏

（4）復雜狀態的管理：異步帶來了狀態的改變，可能會使狀態管理變得非常復雜，尤其是某個狀態有多個來源時，比如有些應用，一開始有一個默認值，再通過Ajax獲取初始狀態，存儲在localStorage，之后通過WebSocket獲取更新。這時查詢狀態可能是同步或者異步的，狀態的變更可能是主動獲取也可能是被動推送的，如果還有各種排序、篩選、狀態管理將會更加復雜

（5）錯誤處理：javascript中的try catch只能捕獲同步的錯誤，對於異步的錯誤難以獲取。

promise中可以使用一個全局的catch

 

3. 有了promise，為什么還需要rxjs?

Promise已經解決了很多異步的難點，比如將回調地獄改為了鏈式調用，統一同步和異步代碼，但是promise只有一個結果，並且不可以被提前取消。

 

通過使用rxjs，我們得以將業務邏輯，與流本身的變化規律分離，獲得更高級的表達能力。

這里有一個潛藏的重要問題，就是這些流的具體取值，實際上運行時決定的，我們在編碼期並不知道，但是不妨礙我們在編碼期描述針對流的操作。

 

RxJS項目實戰——請求依賴合並，代碼如下：

https://stackblitz.com/edit/rxjs-jq8wmr

 

 

 

 

 

參考：https://segmentfault.com/a/1190000020268578