一个项目中，根据自己手头分配到的页面，抽出公共的模块，可以抽成一个模块管理的，用同一个颜色的框圈出。
下面举例说明：
列表页：左边栏目列表模块，下翻到底可以刷列表。右侧媒资展示模块，还有一个计数模块
筛选条件：可以横向或者纵向刷数据，横向刷数据和栏目列表模块一个算法。
搜索条件：往右可以刷数据，同栏目列表模块。媒资模块和一个计数模块
我的片单：媒资展示模块和计数模块
模块都是使用立即执行函数形式返回一个对象，只暴露少部分api出去和其他模块交互，自身属性都是定义为局部变量，不暴露在外。
栏目列表模块
包含拉取数据方法，渲染方法和其他模块交互的api。
该模块的渲染方法抽离出来，公用到筛选和搜索。
媒资模块
包含拉取数据方法，渲染方法和其他模块交互api。
该模块在筛选，搜索完全复用，只管接口和数据的更改。
在片单页面，在渲染部分有一定逻辑更改。
计数模块
只和媒资模块有交互，根据接收到的媒资模块暴露的数据进行渲染，所以只有一个渲染模块。
除了整体模块的规划，还有页面自身内部的模块规划，一般都是根据业务功能规划，这样减少全局对象，使用立即执行函数形式，控制各自的命名空间，达到解耦和复用的目的。
比如这个搜索页面：
键盘由两个对象分别管理：九宫格对象和全键盘对象，操控键盘的交互行为。
搜索框对象：接收来自两个键盘对象的数据，调用搜索接口和展示搜索内容。
媒资列表对象：根据接收到的条件拉取媒资数据，展示和管理媒资部分与用户的交互行为。
搜索结果分类对象：获取到搜索结果数据展示，管理用户在这块区域的交互行为，响应用户行为传递数据给媒资对象，展示对应的媒资数据
计数器对象：接收来自媒资列表对象的数据，进行计数展示。
原文：https://www.cnblogs.com/yaoyao-sun/p/10391011.html