深耕业务——商品列表底部分销商品资源广告位
时间:2022-09-14 | 标签: | 作者:Q8 | 来源:网络
小提示：您能找到这篇{深耕业务——商品列表底部分销商品资源广告位}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的深耕业务——商品列表底部分销商品资源广告位内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！ |
作为深耕的业务，我们就从一个我遇到的复杂需求开始做个引子。栗子如下（可先看图片过个眼瘾）：
需求列表如下基本要求：
更高要求：
当大家看到产品的 PRD ，看了这个需求和要求之后，每个人根据自己的程序开发经验和设计经验上，每个人都能给出不同的解决方案。其实呢，每个解决方案都是一种方式，只是在不同的角度上实施以及设计的思维上不同。So，我想分享给大家的，也是经过我的思考后以及完善的一种解决方案，拿出来仅供参考。 电商运营年会到底什么是业务分享实施方案前，先讨论一下到底什么是业务；而程序员写代码都是服务于业务的么？ 在老板眼中，业务就是赚钱的工具；在销售员眼中，业务就是必须完成的指标；在产品的眼中，业务就是需要实现完成的需求。。。每个人对业务的理解都不一样，但是，有谁考虑过，在前端开发工程师眼中的业务到底是什么？？
下面是我站在前端的角度去理解业务，如下：
So，在我的理解里，前端所写的业务拆分成为6大部分：
在简单的业务需求中，可能我拿到的后端数据，就直接可以渲染视图层，然后就完善功能。从开发的成本和复杂度考量上，是不值得去做业务拆分。所以，在复杂的业务需求中以及兼顾拆分和维护中，这种业务方法论就可以大展手脚了。以下就是我拿开头的例子，详细解析围绕业务的 6 大部分的设计。 具体实现步骤第一步：基本组件的划分结构划分：本次组件划分的规则是先上下、再左右、由外至内；划分结果是 BackHeader
GoodsList
GoodsCard
功能划分： 顶级容器：错误隔离，灰度控制，埋点数据及控制，ajax 请求。 视图展示：分发数据，组件回调 第二步：实施
在 react 中，最核心、也就最灵活的处理视图变化的方式呢，就将驱动视图的数据做成可配的；所以第一步，根据结构的划分，将需求做成数据的配置，代码如下：
render() {const{goodsList,pageIndex,size}=this.state;if(!goodsList.length) {return<divref={node=>this.fenxiaoRef=node}/>;
}return(<divclassName="fenxiao-recommend "ref={node=>this.fenxiaoRef=node}><BlockHeaderonGoodsChange={this.handlerClick}/><GoodsListContainersize={size}pageIndex={pageIndex}goodsList={goodsList}/></div>);
}
顶级容器组件在 DidMount 时，做灰度控制，ajax 获取数据驱动视图。BlockHeader 接收 props onGoodsChange 回调，请求数据，再分发数据。 计算当前可展示的商品数量 size ；获取顶层容器 ref 获取容器获取容器宽度。代码如下：
/*** 计算展示多少卡片* 返回值* size*/computedStyle=()=>{
const{fenxiaoRef}=this;
if(!fenxiaoRef) {
return;
}
const{width}=fenxiaoRef.getBoundingClientRect();
letsize=Math.floor(width/144);
this.setState({size});
}
根据 size 获取商品的个数 goodsList ，并监听 window resize ；其中以下集中情况则不予以请求
埋点数据：曝光 曝光埋点的基本需求是，当商品出现在浏览器的视口中后（即用户的视口），发送黄金令箭！曝光一个商品发送一支令箭！ 那么问题来了，如何判断当前分销商品列表广告位（分销商品 DOM 元素）出现在用户的视口呢？ 我采用了一种比较 low ，也是最常规的解决方案：以浏览器视口左下角为原点坐标，向上为正，向下为负； 获取当前 DOM 距离页面顶部的距离，即 const { top } = node.getBoundingClientRect() ，获取视口高度 document.ocumentElement.clientHeight ；
// 以页面右下角为原点，计算分销商品是否 曝光exportfunctionisExposure(node) {if(!node) {returnnull;
}// 视口高度constclientHeight=ddcocument.documentElement.clientHeight;const{top}=node.getBoundingClientRect();returnclientHeight>top;
}
总结“小公司写代码，大公司改代码”好多年前就听说过这么一句话，但是作为程序猿来说，最大的痛点就是：别人不写文档，别人不写注释，以及写文档，写注释！所以在原有系统的维护当中，尽最大可能做到：
|
上一篇：淘宝有好货文章创作流程
下一篇：淘宝卖家店铺信息即将下线，商家想要查询信息
版权声明：以上主题为“深耕业务——商品列表底部分销商品资源广告位"的内容可能是本站网友自行发布，或者来至于网络。如有侵权欢迎联系我们客服QQ处理，谢谢。
打开微信扫码或长按识别二维码
小提示：您应该对本页介绍的“深耕业务——商品列表底部分销商品资源广告位”相关内容感兴趣，若您有相关需求欢迎拨打我们的服务热线或留言咨询，我们尽快与您联系沟通深耕业务——商品列表底部分销商品资源广告位的相关事宜。
关键词：分销商品资源