页内的模块和组件抽象规划经验

一个项目中,根据自己手头分配到的页面,抽出公共的模块或者组件。

下面举例说明:

抽出公共部分,规划模块和组件

列表页

左边栏目列表模块,下翻到底可以刷列表,每个栏目对应一组媒资数据,每个栏目第一屏媒资数据做缓存,用户切换栏目的时候,可以即时展现,增强首屏体验。

右侧媒资展示模块,往下可以翻页,根据盒子性能规划好每次接口跑的数据量并做好缓存,在翻页达到一定量的时候才跑一次接口(展示loading),增强用户体验。

计数模块,抽成组件,可移植到其他项目或者页面,根据媒资模块传入的数据显示。

 

筛选条件

单行可横向翻页,多行可纵向翻页,横向翻页和栏目列表一个算法,所以抽出翻页组件复用。

优化:筛选条件是做在列表页的,由于dom节点较多,所以在最开始生成后,先移除dom并缓存起来,优化盒子的渲染。用户点击筛选时,在显示dom。

 

搜索页

搜索结果分类往右可翻页,复用栏目列表组件。

媒资模块复用列表页媒资模块。

计数模块复用列表页的计数模块。

键盘模块做成两个灵活控制样式的组件:九宫格和全键盘,在其他项目可以移植使用。

搜索框做成组件,在其他项目也可以使用,包含接口和显示功能。

 

我的片单

媒资模块复用列表页

计数模块复用列表页的计数模块。

 

模块规划方案

模块都是使用立即执行函数形式返回一个对象,只暴露少部分api出去和其他模块交互,自身属性都是定义为局部变量,不暴露在外,最大限度的在其他项目的相似模块可复用。

 组件设计考虑项目更多场景,达到项目间的移植。

 

栏目列表模块

包含拉取数据方法,渲染方法和其他模块交互的api。

该模块的渲染方法抽离出来,根据数据,公用到筛选和搜索。

 

媒资模块

包含拉取数据方法,渲染方法和其他模块交互api。

该模块在筛选,搜索完全复用,只管接口和数据的更改。

在片单页面,在渲染部分有一定逻辑更改。

 

计数模块

样式和计数方式可自定义,把计数单独做成组件,划分得这么小粒度,是因为觉得它是一个功能模块,虽然和媒资模块联系紧密,但说到底,其实是和计数模块接收到的数据联系紧密。

页面内部的模块规划

页面自身内部的模块规划,一般都是根据业务功能规划,这样减少全局对象,使用立即执行函数形式,控制各自的命名空间,达到解耦和复用的目的。

 

比如这个搜索页面:

键盘由两个对象分别管理:九宫格对象和全键盘对象,操控键盘的交互行为。

搜索框对象:接收来自两个键盘对象的数据,调用搜索接口和展示搜索内容。

媒资列表对象:根据接收到的条件拉取媒资数据,展示和管理媒资部分与用户的交互行为。

搜索结果分类对象:获取到搜索结果数据展示,管理用户在这块区域的交互行为,响应用户行为传递数据给媒资对象,展示对应的媒资数据

计数器对象:接收来自媒资列表对象的数据,进行计数展示。

 

posted @ 2019-02-17 14:13  中二的羊  阅读(264)  评论(0编辑  收藏  举报