模塊和組件的抽象規劃經驗
阿新 • • 發佈：2019-02-17
局部變量 變量 技術 http 算法 命名空間 執行函數 ron 調用
一個項目中，根據自己手頭分配到的頁面，抽出公共的模塊，可以抽成一個模塊管理的，用同一個顏色的框圈出。
下面舉例說明：
抽出公共模塊
列表頁：左邊欄目列表模塊，下翻到底可以刷列表。右側媒資展示模塊，還有一個計數模塊
篩選條件：可以橫向或者縱向刷數據，橫向刷數據和欄目列表模塊一個算法。
搜索條件：往右可以刷數據，同欄目列表模塊。媒資模塊和一個計數模塊
我的片單：媒資展示模塊和計數模塊
模塊規劃方案
模塊都是使用立即執行函數形式返回一個對象，只暴露少部分api出去和其他模塊交互，自身屬性都是定義為局部變量，不暴露在外。
欄目列表模塊
包含拉取數據方法，渲染方法和其他模塊交互的api。
該模塊的渲染方法抽離出來，公用到篩選和搜索。
媒資模塊
包含拉取數據方法，渲染方法和其他模塊交互api。
該模塊在篩選，搜索完全復用，只管接口和數據的更改。
在片單頁面，在渲染部分有一定邏輯更改。
計數模塊
只和媒資模塊有交互，根據接收到的媒資模塊暴露的數據進行渲染，所以只有一個渲染模塊。
除了整體模塊的規劃，還有頁面自身內部的模塊規劃，一般都是根據業務功能規劃，這樣減少全局對象，使用立即執行函數形式，控制各自的命名空間，達到解耦和復用的目的。
比如這個搜索頁面：
鍵盤由兩個對象分別管理：九宮格對象和全鍵盤對象，操控鍵盤的交互行為。
搜索框對象：接收來自兩個鍵盤對象的數據，調用搜索接口和展示搜索內容。
媒資列表對象：根據接收到的條件拉取媒資數據，展示和管理媒資部分與用戶的交互行為。
搜索結果分類對象：獲取到搜索結果數據展示，管理用戶在這塊區域的交互行為，響應用戶行為傳遞數據給媒資對象，展示對應的媒資數據
計數器對象：接收來自媒資列表對象的數據，進行計數展示。
模塊和組件的抽象規劃經驗