精华内容
下载资源
问答
  • 产品功能模块化怎么写
    2020-09-07 09:42:12

    组件化开发和模块化开发概念辨析

    网上有许多讲组件化开发、模块化开发的文章,但大家一般都是将这两个概念混为一谈的,并没有加以区分。而且实际上许多人对于组件、模块的区别也不甚明了,甚至于许多博客文章专门解说这几个概念都有些谬误。

    想分清这两个概念我觉得结合一下软件的渐进式开发场景更容易理解。但是下面的篇幅会比较长,所以我先说结论,不耐烦的同学可以先看:

    概念区别

    对比

    类别 目的 特点 接口 成果 架构定位
    组件 重用、解耦 高重用、松耦合 无统一接口 基础库、基础组件 纵向分层
    模块 隔离/封装 高内聚、松耦合 统一接口
    更多相关内容
  • Vue模块化开发

    千次阅读 2022-03-12 23:08:47
    全局安装 vue 脚手架3、初始 vue 项目; vue init webpack appname:vue 脚手架使用 webpack 模板初始一个 appname 项目4、启动 vue 项目; 项目的 package.json 中有 scripts,代表我们能运行的命令 npm start ...

    1、npm install webpack -g
    全局安装 webpack
    2、npm install -g @vue/cli-init
    全局安装 vue 脚手架
    3、初始化 vue 项目;
    vue init webpack appname:vue 脚手架使用 webpack 模板初始化一个 appname 项目
    4、启动 vue 项目;
    项目的 package.json 中有 scripts,代表我们能运行的命令
    npm start = npm run dev:启动项目
    npm run build:将项目打包

    5、模块化开发

    • 项目结构

    • 运行流程

    进入页面首先加载 index.html 和 main.js 文件。

    main.js 导入了一些模块【vue、app、router】,并且创建 vue 实例,关联 index.html页面的<div id=”app”>元素。使用了 router,导入了 App 组件。并且使用<App/>标签引用了这个组件。

    第一次默认显示 App 组件。App 组件有个图片和<router-view>,所以显示了图片。但是由于<router-view>代表路由的视图,默认是访问/#/路径(router 路径默认使用HASH 模式)。在 router 中配置的/是显示 HelloWorld 组件。

    所以第一次访问,显示图片和 HelloWorld 组件。

    我 们 尝 试 自 己 写 一 个 组 件 , 并 且 加 入 路 由 。 点 击 跳 转 。 需 要 使 用<router-linkto="/foo">Go to Foo</router-link>标签。

    • Vue 单文件组件

    Vue 单文件组件模板有三个部分;

    <template>
    <div class="hello">
    <h1>{{ msg }}</h1>
    </div>
    </template>
    <script>
    export default {
    name: 'HelloWorld',
    data () {
    return {
    msg: 'Welcome to Your Vue.js App'
    }
    }
    }
    </script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
    font-weight: normal;
    }
    </style>

    Template:编写模板
    Script:vue 实例配置
    Style:样式

    • 导入 element-ui 快速开发

    1、安装 element-ui: npm i element-ui
    2、在 main.js 中引入 element-ui 就可以全局使用了。
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)
    3、将 App.vue 改为 element-ui 中的后台布局
    4、添加测试路由、组件,测试跳转逻辑
    (1) 、参照文档 el-menu 添加 router 属性
    (2) 、参照文档 el-menu-item 指定 index 需要跳转的地址

    • vscode 添加用户代码片段(快速生成 vue 模板)

    文件-->首选项-->用户代码片段-->点击新建代码片段--取名 vue.json 确定
    {
    "生成 vue 模板": {
    "prefix": "vue",
    "body": [
    "<template>",
    "<div></div>",
    "</template>","",
    "<script>",
    "//这里可以导入其他文件(比如:组件,工具 js,第三方插件 js,json
    文件,图片文件等等)",
    "//例如:import 《组件名称》 from '《组件路径》';",
    "",
    "export default {",
    "//import 引入的组件需要注入到对象中才能使用",
    "components: {},",
    "props: {},",
    "data() {",
    "//这里存放数据",
    "return {",
    "",
    "};",
    "},",
    "//计算属性 类似于 data 概念",
    "computed: {},",
    "//监控 data 中的数据变化",
    "watch: {},",
    "//方法集合",
    "methods: {",
    "",
    "},",
    "//生命周期 - 创建完成(可以访问当前 this 实例)",
    "created() {",
    "",
    "},",
    "//生命周期 - 挂载完成(可以访问 DOM 元素)",
    "mounted() {",
    "",
    "},",
    "beforeCreate() {}, //生命周期 - 创建之前",
    "beforeMount() {}, //生命周期 - 挂载之前",
    "beforeUpdate() {}, //生命周期 - 更新之前",
    "updated() {}, //生命周期 - 更新之后",
    "beforeDestroy() {}, //生命周期 - 销毁之前",
    "destroyed() {}, //生命周期 - 销毁完成",
    "activated() {}, //如果页面有 keep-alive 缓存功能,这个函数会触发
    ",
    "}",
    "</script>",
    "<style lang='scss' scoped>",
    "//@import url($3); 引入公共 css 类","$4",
    "</style>"
    ],
    "description": "生成 vue 模板"
    }
    }

    5.Babel
    Babel 是一个 JavaScript 编译器,我们可以使用 es 的最新语法编程,而不用担心浏览器兼
    容问题。他会自动转化为浏览器兼容的代码。
    6.Webpack
    自动化项目构建工具。gulp 也是同类产品。

    安装脚手架工具碰到问题

    1.正常安装时全局文件是在C盘 C:\Users\wuyuecai\AppData\Roaming\npm这个目录,如果使用 vue init webpack vue-demo 无法识别vue命令。原因是没有在环境变量中加入这个目录。

    2.修改默认安装的全局文件的路径

    • npm config set prefix "D:\nodejs\node_global",将来全局安装的东西就会跑到这个文件夹的node_modules文件夹里面去了。
    • npm config set cache "D:\nodejs\node_cache"

    使用 npm list -global 查看全局文件所在目录

    C:\Users\wuyuecai\.npmrc 打开这个文件可以看到我们npm的配置信息

    展开全文
  • 总是感觉自己的程序不够完美,移植性不够好,功能也不好扩展,每次完程序最怕的就是客户要改功能。 如果程序架构的不好,一改会影响到很多功能,哪怕原来是灯每秒闪1次,改成每秒闪3次这种看起来很简单的功能...

    在刚开始从事研发工作的那几年,我主要做单片机软件开发的工作,虽然功能吧都能实现,但是总觉得缺了点什么。

    总是感觉自己写的程序不够完美,移植性不够好,功能也不好扩展,每次写完程序最怕的就是客户要改功能。

    如果程序架构写的不好,一改会影响到很多功能,哪怕原来是灯每秒闪1次,改成每秒闪3次这种看起来很简单的功能。

    对于程序提升这块,如果没有人一个厉害的人带你,真的很难提升。

    主要难在两个方面:

    1.你的认知

    有时候不是你做了越久,写的代码就越好,因为你一直在自己的认知水平内写代码。

    如果不提升你的认知,代码自然也不会提升,所以想要提升代码水平,首先要提升的是你的认知。

    2.找不到好的教程或实例

    终有一天你要做中大型项目的时候就会发现,自己的代码水平和思维要提升了,但是找不到好的教程和方法。

    这块最好的提升办法就是去找那些大佬写的代码,比如说公司比较资深的工程师,有事没事多请他们吃吃饭,喝喝水搞好点关系。

    一般来说都愿意把自己的代码分享给你,然后你再看他们写的代码,有哪些是值得学习的,最重要的是他们实现功能的思维,然后用代码怎么去实现?

    如果别人不愿意分享给你,那可以去挖一下现成稳定的,比如说STM32的标准库,蓝牙协议栈等等。

    我当初的提升方法是在某个公司做产品的时候,正好有个工程师离职了,老大把他写的代码给我来维护。

    当我第一眼看到他代码的时候,觉得写的很复杂,感觉在秀技术,完全没必要这样去写。

    然后我用他的代码拿配套的产品来测试,发现很稳定,我尝试按照我的思维改了以后,就出现了各种问题。

    慢慢地,研究越深,我越是深刻体会这位工程师为什么要那样去写,自己跟他完全不是一个级别的。

    其实他的就是基于模块化编程的思维去做的,当时还没吃透他的代码,我是从那家公司离职后又过了几年才彻底领悟他的代码。

    一、单片机模块化编程怎么实现?

    基于他的这种思维和实现方法,再结合我自己多年经验,最后自己又创新了一个全新的架构。

    这个架构分为2个部分:

    1.内核

    内核主要是用来管理任务的,除了管理还提供了一些队列算法接口,方便产品使用。

    2.模块化编程思维

    对于单片机产品开发来说,我觉得可以分为3层:硬件层、中间层、应用层

    我们先来说说中间层应用层

    中间层:就是不算是真正产品的功能代码,比如说解析某种自定义协议,协议解析完以后的数据才是真正产品功能数据。

    上图就是对云平台协议进行解析,比如说解析wifi是否连接的命令的程序,相对应用层来说,我们只需要”wifi已连接”和”wifi未连接”这两个明确的数据,而不做具体解析程序。

    这样做最大的好处就是,假设我们换了一家云平台,应用层的程序不用改,只需要改硬件层和中间层程序即可,不至于因为换了一家云平台,导致整个产品程序崩盘的问题

    一般来说,如果不是中大项目,我都直接省略中间层,毕竟代码量大了,会浪费批量生产时的时间也浪费单片机资源

    硬件层:我们重点来说说这个,这个真的是很多人痛到不能再痛的痛点,也是很多工作几年工程师一直不知道怎么解决的问题,专门是用来采集单片机输入数据,或者控制硬件电路输出。

    采集信号有很多类型,比如说按键检测、ADC检测、红外信号接收、串口接收、SPI、IIC等这种就是属于硬件层输入数据。

    我拿按键输入来举例,先来看看原理图:

    电路非常简单,就几个按键串上电阻接了单片机引脚,按键按下就会有一个低电平的信号给到单片机,单片机就是通过检测对应引脚是否低电平来判断按键是否按下。

    回到我们程序部分,按键检测过程我就不讲解了,我们的关键在于检测到某个按键按下以后,要怎么把这个值传给应用层。

    那我是使用了回调函数来传递的,这样做的好处就是,真正能做到这个按键硬件层检测代码和应用层产品程序独立,增强移植性。

    我们要使用按键功能的时候,直接注册下按键回调函数就可以了,如下图:

    这样做还是比较灵活的,不管是应用层,还是中间层,哪里需要用到按键功能,我就在哪里调用注册函数。

    Ok,硬件层采集数据基本上都可以用这种方式来处理,这样就能做到真正的模块化,这个也是我以前一直想不通研究了很久的处理方式。

    下面说说控制硬件电路输出,这种输出型的没什么好说的,不涉及到硬件层的采集数据传递到应用层,直接调用硬件层的控制接口就行了。

    比如说我应用层要控制一个LED灯点亮,代码简单到令人发指!

    由于文章篇幅有限,很多代码不方便展示,如果想学程序架构这块的系统教程可以找无际单片机编程拿。

    这套课程的内容我个人认为至少价值3000以上,每节课都为解决产品痛点,没有一个知识点是多余的,凡是看过的小伙伴反馈都如获至宝,原本是录出来卖的,后面工作一忙就没时间去搞。

    现在正好在做这块的,纠结了很久还是开源给大家学习,就当是对我铁粉的一些回馈,原创非常不易,如果你拿了,麻烦也给我点回馈,给我来个赞就行!否则不给,哈哈!

    展开全文
  • 面对业务的不断发展,用户对产品的需求多样,开发同学需要思考怎么样帮助产品和运营实现快速迭代的方案。职业生涯中,开发需要思考如何在业务开发过程中找到自我成长的方法。本文给出了上述两个问题的答案。

    一、背景

    vivo游戏中心是一款垂类的应用商店,为用户提供了多元化游戏的下载渠道。随着游戏中心手游品类的丰富,各品类用户的量级也不断增加,不同游戏偏好的用户核心关注点也不同,从预约、测试、首发、更新到维护,不同游戏生命周期节点的运营需要突出的重点不同。

    针对上述不同业务场景,运营人员为了服务好广大的vivo游戏用户,需要进行精细化运营,以不同的视觉样式呈现给不同用户。比如,针对独立游戏品类的用户,平台如果提供了活动,攻略等内容的透出,能够促进用户更多的下载和消费。活动、攻略等内容以不同视觉样式呈现,运营需要通过实验的方式来验证效果,以确定最终的投放方案。这些需求都需要重新开发。受限于游戏中心APP较长的发版时间,运营的预期效果往往不佳。

    因此,我们希望系统具备以下能力:通过不同视觉样式的抽象与复用,快速灵活的对页面进行布局调整,对不同的人群投放,最终以实验的方式来确定最佳的投放方案。

    怎么样才能实现这些系统功能呢?答案就是模块化。下面为大家介绍一下游戏中心的模块化实践。

    二、什么是模块化

    所谓模块化,其实它是一种模块化的设计思想,即指能针对相同或不同功能、性能、规格的产品,进行功能分析,并设计出一系列的功能模块。

    透过模块的多样选择将产品客制化,可以满足市场许多不同的需求。那么游戏中心模块化就是针对游戏中心相同或者不同功能的视觉样式,进行业务场景分析,并设计出一系列的功能模块。通过模块的多样选择,快速灵活的搭建出不同的页面,来满足不同用户的需求。

    模块化有三个能力:组件化,配置化和实验化。

    • 组件化,即将页面layout拆分成多个组件,对这些组件进行抽象,进而达到复用的目的。组件是UI样式和数据的组合,组件化将UI样式切分成一些独立的,可复用的区域。

    • 配置化,即通过不同组件的拼接,可以快速搭建出各种页面。组件是构成页面的基本单位,因此每个页面都是由若干个组件构成的。组件是抽象的,对外输出是统一,可以根据不同的需求灵活的调整顺序和位置。

    • 实验化,即通过多层试验框架和DMP系统,快速的将不同的页面投放到不同特征的用户手机上,以达到多版本运营的目的。多层实验框架是vivo内部实现的ABtest框架,DMP系统即数据管理平台,可以把它简单理解成一个数据池子,用来接收来自各方的数据,然后再经过融合、处理和优化后再使用这些数据。

    大家可以看到,三个功能分别对应了三个概念。组件化对应了组件,配置化对应了页面,实验化对应了方案。它们是包含的关系,即一个方案包含了若干个页面,而一个页面也包含了若干个组件。

    模块化之前,游戏中心的首页是由顶部的广告banner,导航栏,游戏列表和穿插组件构成的。穿插组件即为横向插入在游戏列表中用于运营推广的由视觉样式和数据组成的广告。从穿插组件的定义来看,其实就是组件化的概念,只是当时把组件化和游戏列表做了相应的区分。穿插组件的视觉样式比较单一,只有专题、视频、热词、活动、论坛等。如图1中,小编推荐,热游驿站,抢先推荐是1*4的游戏专题穿插,类似九宫格(八个热搜词)为热词穿插。

    (图1:模块化前)

    穿插组件按照一定的规律穿插在游戏列表的任何位置,但是广告banner和导航栏是固定的,整个页面布局混乱,形态固定,不易变更。假如把最顶部的banner挪到小编推荐的下方,只能通过发版解决。将专题右上角的“更多”改成“换一换”,或者将游戏列表中某些游戏改为其内容的介绍,也需要通过发版解决。

    模块化之后,利用组件化能力,既可以灵活的调整顺序,也可以动态更改组件的视觉样式,即使是游戏列表,也是可以动态配置。利用多个组件的顺序排列,可以快速搭建出一个页面。

    通过ABtest框架和DMP系统,不同的页面,以投放方案的方式,能够快速呈现给对应的人群,进行多版本的运营。图1和2是模块化前后首页推荐的对比图,虽然从大的样式的没有太大的改变,但是模块化之前的样式相对单一,而模块化之后游戏列表中排列了单游戏大图、金刚位、小喇叭、专题、新游预约、下载榜等组件。

    (图2:模块化后)

    不同的组件可以满足不同的业务场景。例如单游戏大图组件,辅以推荐,可以快速推广新游和热游,满足了不同用户对不同游戏节点的需求;新游预约组件可以从更多角度满足用户对于单款游戏提前订阅内容或关注其实时动态的需求。

    三、怎么实现模块化

    从前面的介绍大家可以看到,模块化通过组件化的方式快速搭建页面并将其投放给不同标签的人群,功能强大且配置灵活,为我们省去了不少的开发成本,那么我们的底层是怎么实现的呢?

    3.1 模型抽象和统一

    根据组件布局,我们可以将组件抽象成两部分:视觉样式和数据;视觉样式可以简单理解为UI样式,即呈现在用户面前的展现形式,我们可以将视觉样式简单概括为模板。

    模板定义了当前组件最基础的形式,比如当前组件是滑块的形式,还是固定的形式;模板上还定义了一些可变的样式,即定义了当前模板哪些位置是可以通过配置来完成的,比如模板的长宽高、组合样式(2*2,1*4)、包含列表的个数等,能够动态配置的程度依赖模板的定义。

    所谓的数据,按照来源分为推荐数据和人工排期数据。推荐数据来自算法和大数据,而人工排期,则是运营在后台配置的。由于推荐数据背后的逻辑比较复杂,本文只讨论人工排期数据。人工排期是一个四维数据。除了数据本身的“业务性”之外,它是有时效性的,游戏中心的广告位展示都是有时间限制的,比如游戏中心首页顶部banner,今天和昨天展示的是不一样的;其次,它是有“空间性”的,即不同的用户可能看到的数据是不一样的;另外,它是有动作性的,即点击后产生的事件。比如点击某个组件,可以是弹出一个悬浮窗,或者切换到到另外一个页面。

    因此,模块化可以简单理解为模板和人工排期的组合。通俗点理解,组件其实像一个类,每个页面上不同的组件即为组件的对象,对象会实例化一些数据和行为。通过组件化的方式,我们不仅解决了端侧和服务端的耦合,同时还实现了组件在不同页面的复用。

    排期数据的组成分为三个层次(即素材、推广物料以及排期)。最底层数据当然就是图片,视频,推荐语,评论等,当然游戏信息中也会包含游戏icon,背景图以及简单的视频,但是此处的图片并不是指游戏icon,而是比icon更精致,用来宣传广告的素材图片,这类数据我们统称为素材。由素材组成了上层的推广物料。

    什么是推广物料呢?推广物料其实就是基于某种目的,按照一定的形式来展示的内容集合。比如banner,其实就是一张图片加上其背后的关联的内容构成,图片是为了吸引用户点击,目的是为了推广背后关联的内容。推广物料加上时间空间和动作属性就变成了排期。素材,推广物料和排期都进行了统一的抽象。

    如下图3,推广物料有Banner、专题、活动、网页等;排期有胶囊banner、游情报,种草机、重磅更新等;如种草机就是网页(内容链接)加上时间组成的;整个结构呈现一个倒金字塔结构。

    (图3)

    原先游戏中心每个资源位的排期数据都是放在不同的地方,比如顶部banner排期,网游banner排期都有各自的表来保存。在这样的情况下,数据库表的数量可能会比较多,对统一拓展来说就更加复杂。假如我需要对顶部banner和网游banner都要增加对不同人群(DMP系统)展示不同数据的时候,通常需要在每一张表中都增加一个DMP的字段来表示当前排期需要展示给用户的标签id。

    模块化之后,我们将游戏中心所有的资源位都当成一个个模块,也就是都可以看成是排期数据,我们只需要两张表就可以做到排期三维数据的展示:排期数据表以及排期关联的具体素材表。因此我们在设计排期表的时候, 将素材信息(如图4中的material_id和material_type)数据保存在排期表中, 将DMP或者其他统一的信息也保存在排期表中, 这样做的好处就是对所有的排期都能生效统一的流程。

    (图4)

    3.2 后台业务流程统一化和可视化

    如此复杂的业务流程,肯定少不了后台的配合。素材,推广物料和排期的统一后,我们也将后台的配置流程标准化。

    具体的配置流程如图5,6。图5偏向于后台的配置流程,是自下而上的配置。而图6是为了方便大家理解,是自上而下的结构。用户层面展示的是某个具体的方案,方案由若干个页面组成,但是会根据用户的画像具体展示,即配置的页面个数不一定是展示的页面个数。页面由若干个组件组成,组件由模板和数据组成…一层层往下分解,可以整体理解模块化的结构组成。

    (图5)

    (图6)

    模块化之前,配置首页banner排期,需要到首页banner的tab栏下,在全部banner排期里面加入相关的排期,然后在首页banner排期里面挑选全部banner排期里面的数据,而配置其他页面的banner排期呢,也是需要在类似的目录结构中做相关操作,彼此之间的banner是割裂的,无法通用;对于运营来讲,配置工作量也增加了不少。

    模块化之后,操作变得非常简单了。在组件层面,通过数据库配置,我们可以将模板的信息事先保存在数据库中。在数据层面,我们把所有的banner数据统一保存在推广物料管理并绑定到排期中,做到复用。在业务组件管理页面中,根据组件应用场景来选择模板,之后配置对应的排期数据。

    如图7,当前重磅更新场景关联的是人工排期(如果关联的是推荐,则是推荐对应的code),配置好样式后整个业务组件也就配置完成了。然后在页面管理中将你想要配置的组件添加到某个页面中,设置好对应的DMP。配置好组件后,在后台页面上可以滚动进行整体页面效果预览。

    (图7)

    如图8。最后可以将页面复用到不同的投放方案中,运营后台通过审核流和上线点检后,最终显示在用户界面端。当前配置流程自下而上,逻辑清晰,符合运营的配置习惯。

    (图8)

    3.3 前端业务流程抽象与统一

    目前,游戏中心首页和新游专区改造成了模块化页面。首页是游戏中心非常重要的分发渠道,模块化要求页面形式多种多样,同时假如模块化改造不被用户认可的时候也要能够动态回退。

    因此首页模块化页面会有三种类型:

    • 纯模块化页面,

    • 穿插模块化页面和

    • H5模块化页面

    所谓纯模块化页面,即页面中的所有元素都是由组件化数据构成。所谓穿插模块化页面,其页面结构为按照一定规律在游戏列表中穿插了若干个组件,和模块化之前的页面组织结构是一模一样的,只是后台的实现方式不一样。

    穿插模块化页面中的列表还有两种不同的形式,分为游戏列表和混合数据流列表。穿插页面可以在一个屏幕中最大效率的展示游戏。

    最后的H5模块化页面,可以认为由H5组件所构成的页面,由我司的悟空建站提供页面。通过多层试验框架和DMP获取不同方案以及不同页面的流程不在此处赘述。这里我们讲一讲整个流程中最为复杂的穿插页面流程,以及我们怎么在如此复杂的流程中抽象和设计。

    (图9)

    3.3.1 流程统一

    从上图(大家无需过分关注流程图里面各个步骤的业务逻辑,流程图只是为了展示原来流程的复杂度)我们可以看出来,用户请求开始,需要经过N个步骤。这么冗长的步骤,如果写在一个service,那么就会造成逻辑混乱,维护性不高和扩展性差的效果,因此我们可以分而治之。图9中,我们用不同的颜色来区分步骤,可以做一个简单的流程归纳。

    归纳后的流程如下图所示。我们可以把提交异步线程池进行归纳,可以理解为获取组件列表和混合数据列表为两个步骤。

    (图10)

    我们再进行归纳和抽象后,整个模块化的页面获取流程就可以简化为四个步骤:初始化阶段、获取组件列表阶段、构建阶段和合并阶段,如图;

    (图11)

    在《金字塔原理》一书中曾说过,读者在阅读文章的时候,必须阅读理解每一句话,并且寻找每句话之间的联系,前前后后反复思考。如果你的文章结构呈现金字塔形,文章的思路自金字塔顶部开始逐渐向下展开,那么读者肯定会觉得你的文章比较容易读懂。这一现象体现了人类思维的基本规律,那么阅读代码其实也是一样的逻辑。好的代码即是一段业务逻辑的注释,通过阅读代码能够大概判断主要的业务流程。在构建阶段, 可以通过组合不同的策略来获取不同的排期数据。策略和组件解耦,当新增策略的时候,无需改动原有的业务逻辑。此处不同的策略也可以采用工厂模式的方法来获取。

    首页的组件展示逻辑是比较复杂的,尤其对于穿插模块化页面。正如前文所述,穿插页面由游戏列表和业务组件构成,即在一个游戏列表中,穿插了各个业务组件。数据列表如果是游戏数据列表, 那么每个游戏都是按照一定的比例来排列的,且需要和组件中推广物料的底层数据是游戏的去重。比如游戏按照网游,单机和独立游戏的比例来展示,假如上一个组件展示过当前游戏,那么这个游戏需要被过滤,且补位游戏也是有一个逻辑,比如网游被过滤了,那么取补位游戏列表中的游戏,其次用网游来补,再次用下面的游戏顶上来。去重逻辑包含两种,一种是能被之前的游戏过滤,也能过滤下面的游戏;另外一种则只能去重下面的游戏,不会被上面的游戏去重。

    (图12)

    在获取业务组件中排期数据(如上图,其中也包含了游戏信息)的时候,还会有获取ABTest信息(不同的用户展示不同的游戏信息),游戏黑白名单过滤,已安装过滤,已曝光过滤,额外信息处理,组件数据组装等过程。每一个排期数据获取都会用不同的Handler来处理。每一个Handler都有自己的处理逻辑,针对如此多的排期以及他们的扩展,如果没有一套处理的统一逻辑,那么简直是灾难。新人在开发新组件中排期数据的时候,可能会遗漏非常多的细节。另外,推广物料之间其实是有一些通用逻辑,如果不将这些逻辑沉淀到领域模型中,逻辑无法复用,将会散落在各个Handler中,我们以下图橙色的步骤来详细说明。

    3.3.2 推广物料的流程统一化

    一方面,我们将获取并处理推广物料的流程统一化。如下图所示流程中,其实基本上就包含了所有推广物料需要处理的步骤逻辑(不重要的步骤已忽略)。统一之后,我们可以将一些通用的逻辑下沉,形成统一的方法调用。比如我们可以根据人工排期,推荐排期等,采用工厂方法的设计模式来屏蔽获取推广物料的逻辑。当然我们为了提升性能,对于人工排期数据,利用统一缓存的方式,通用场景code来获取;接着利用不同过滤策略来过滤掉进入黑灰名单的游戏或者内容。处理完额外信息之后再用列表的数据将组件中重复的数据给去除。

    (图13)

    3.3.3 模型的逻辑抽象与沉淀

    另一方面,我们将统一处理组件和推广物料的逻辑沉淀到对应的领域模型中,如图;

    (图14)

    整个过滤重复数据的流程都是针对组件进行的,那么在组件层面,会有大量的重复逻辑,比如每个组件需要在最后返回的数据个数处理上,不同的组件返回的个数是不一样的,那么这部分逻辑写在组件这个领域模型中会更加妥当。比如已曝光和已安装处理,这个逻辑就可以放在组件层面来处理, 当然放置在Handler层处理也是没有问题的。在推广物料层面,也有一些通用的逻辑,比如1*4个游戏组成的专题和2*2个游戏组成的专题,他们背后都有一套接入推荐系统并兜底的逻辑,也可以沉淀在专题这个领域模型来处理。

    四、写在最后

    当前,很多业务开发的同学,尤其在熟悉了业务之后,通常会陷入一个误区:做业务的基本上就是CRUD,没有什么技术含量。但是在开发的过程中,往往又缺乏相应的思考,导致重复开发。那么如何才能让业务开发变得更有吸引力和技术含量呢?

    游戏中心模块化改造过程中,利用组件的抽象和复用,提升了组件化,配置化和实验化能力,快速的支撑了业务需求,同时通过统一标准流程和利用领域模型知识不断的完善业务代码,提升了代码的维护性和可扩展性。随着业务的不断发展,即使现在非常合理的架构也会变得臃肿,难以扩展,但是如何做好业务的方法论确是不变的。因此做业务开发同学,应该多思考怎么把业务做深做通用,提升快速实现业务价值的能力。

    作者:vivo互联网服务器团队—Chen Wenyang

    展开全文
  • 在定义模块的时候首先要做的就是定义边界,并且对调用接口进行严格的定义和封装,模块内的逻辑不可再暴露在外界,模块间只能通过标准定义的接口进行访问
  • Android 开发:由模块化到组件化(一)

    万次阅读 多人点赞 2016-12-15 01:43:15
    当你看到这的时候,想必心理一阵恶寒:模块化?组件化?到底是什么鬼?有啥区别. 有这种感觉才是对的,模块化和组件化本质思想是一样的,都是"大化小",两者的目的都是为了重用和解耦,只是叫法不一样.如果非要说区别,那么...
  • 网上有许多讲组件化开发、模块化开发的文章,但大家一般都是将这两个概念混为一谈的,并没有加以区分。而且实际上许多人对于组件、模块的区别也不甚明了,甚至于许多博客文章专门解说这几个概念都有些谬误。想分清这...
  • iOS应用组件化/模块化探究

    千次阅读 2019-01-09 14:48:35
    组件是近几年流行起的概念,它是当代码扩张到一定程度时,所采取的一种代码组织架构策略。淘宝、蘑菇街等大厂也在近几年陆续完成了其代码组件的过程。 提到组件,给人的感觉似乎很高大上,很神秘的感觉。但是...
  • Vue实战中的模块化开发

    千次阅读 2020-11-30 16:19:37
    最近从APP开发转向了Web后台管理平台的开发,在经受了半年多的APP开发的折磨之后终于...虽然这种后台管理系统都比较简单,多数页面都是重复重复再重复,但是在开发过程中如果用心去,去总结还是会有很多收获的。 ...
  • Android组件化/模块化开发(一)

    千次阅读 2020-04-27 16:28:59
    啃了两周的项目代码之后,觉得之前留下的摊子确实不好收拾,和产品确认过眼神之后,果断决定重启炉灶。 具体过程就不多啰嗦了,虽然说的是混合开发,不过总体来说仍然是原生为主,部分页面通...
  • 模块化导入和导出

    2020-03-03 21:38:51
    模块化就是将独立的一个功能封装到一个模块(文件)中,模块和模块之间是相互独立、相互隔离。 模块和模块之间虽然是相互独立的,但一个模块可以通过特定的接口公开自己的内部成员,以便让其它的模块可以使用或者...
  • 嵌入式开发框架之模块化编程思想

    千次阅读 2019-08-31 16:04:24
    好久没更新播客了,最新想些自己的编程方面想法。也就是些自己的想法,不一定准确,在这希望能和大家分享下。 相信大家在大学的时候都学过程序...1、 多使用模块化编程的思想,在编写之初,模块需要做什么功能...
  • 目录ES6 前端模块化前言1、前端开发领域发展到目前阶段零件化组件化模块化2、组件化与模块化的关系3、组件化与模块化的特点一、前端模块化是什么二、ES5的模块化1、函数的封装2、对象的封装3、自调函数的封装三、ES6...
  • 软件工程 3:模块化设计

    千次阅读 2020-03-21 17:05:41
    文章目录软件工程 3面向过程:模块化设计模块设计原则:高内聚、低耦合函数设计:不知道如何下手怎么办错误处理:每个函数都有错误处理模块的编译和链接面向对象:万事万物皆对象类:一组相似事物的统称对象:一个...
  • 前端模块化

    千次阅读 2020-10-29 15:15:04
    所谓模块化,就是指根据功能的不同进行划分,每个功能就是一个模块。最终,一个完整的产品是由各个模块组合而成的。 模块化的特点: 独立性。可以针对一个模块单独进行设计、研发,相对工作量和难度变小。 复用性。...
  • 前端模块化开发的价值

    千次阅读 2016-08-09 11:41:38
    本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发。 恼人的命名冲突 我们从一个简单的习惯出发。我做项目时,常常会将一些通用的、底层的功能抽象出来...
  • 虽然市面上也慢慢出现了 Angular、 Avalon 等优秀的前端框架,但是考虑到 SEO 和维护人员并不好招,很多公司还是选择求稳,用套页面的形式制作网页,这对前端的工程化、模块化是一个不小的阻碍。 构建工具的出现 ...
  • 组件化开发和模块化开发概念辨析

    万次阅读 多人点赞 2018-01-29 00:57:06
    组件化开发和模块化开发概念辨析 网上有许多讲组件化开发、模块化开发的文章,但大家一般都是将这两个概念混为一谈的,并没有加以区分。而且实际上许多人对于组件、模块的区别也不甚明了,甚至于许多博客文章专门...
  • 模块化编程将程序功能分解为固件模块/子系统,每个模块执行一个功能,并包含完成该功能所需的所有源代码和变量。 模块化/子系统化有助于协调团队中许多人的并行工作,管理项目各个部分之间的相互依赖关系,并使设计...
  • 模块化开发详细介绍及详细用法

    千次阅读 2018-05-25 23:53:19
    vue的三个特点:Ø MvvmØ 组件化Ø 模块化 模块化是指文件的组织,管理,使用的方式 。 代码的开发阶段:把一个大的文件,拆分成几个小文件,它们之间相互引用,依赖。代码发布之后:把这些小文件打包成一个大...
  • 虽然没有实现,但是代码编程还是要向这个方向发展,也一定会向这个方向发展,这就是所谓的“开发平民”、“开发0门槛“! ( 题外话: 机器编程在未来一定会成为主流,而其核心就是 “独立...
  • 1. 什么是前端工程 自有前端工程师这个称谓以来,前端的发展可谓是日新月异。相比较已经非常成熟的其他领域,前端虽是后起之秀,但其野蛮生长是其他领域不能比的。虽然前端技术飞快发展,但是前端整体的工程生态...
  • css模块化

    千次阅读 2019-06-14 11:09:46
    设计原则 a、可复用能继承要完整 b、周期性迭代 ...但是翻其他地方,这种看上去长得很相似,功能点小,其他地方又找不出有用这种样式的,就不能叫做可复用,所以不要拆除出来。 而单看字体,左黑右红,这...
  • CSS模块化基本思想

    千次阅读 2016-03-14 17:48:30
    模块化的基本概念1.什么是模块模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程。 模块化用来分割,组织和打包软件。每个模块完成一个特定的子功能,所有的模块按某种方式组装起来,成为一个...
  • 模块化与解耦

    千次阅读 2016-02-26 15:18:46
    本文主要讲述了在iOS开发过程中,模块化工程架构的一种组织方式,本文主要讲述基于cocoapods来做模块化的方案,详细讲述了iOS开发怎么进行模块划分的内容,主要会在以下方面做阐述: 为什么要做模块化模块设计...
  • 闲话不多说,下面开始扯正题,最近有个同事问我“模块化、组件化,插件化还有热更新他们之间有什么关系和区别?“ 概述 随着产品的业务不断的增加,我们的APP中代码就会越来越多,这时侯为了方便我们多个成员之间...
  • 【编程之美】详论单片机固件模块化架构设计

    千次阅读 多人点赞 2020-09-11 20:32:03
    关注、星标嵌入式客栈,干货及时送达ID:嵌入式客栈作者:逸君[导读] 为什么本文?最近遇到一些初学单片机的同学,刚刚入手做单片机开发,还没有涉及到使用RTOS,且刚入手直接上RTOS可...
  • 前端中的模块化

    万次阅读 2019-02-09 10:51:57
    当我们要完成一个应用的时候,会根据对应的功能划分为许多不同的模块,就像一个论坛,有发帖的模块,评论的模块,js 中的模块也正是如此,一...通过直白的描述,我们可以知道,模块化的好处就是,抽离代码,重复使用...
  • 组件化、模块化、集中式、分布式、服务化、面向服务的架构、微服务架构 最近最火的词是什么?那大概就是微服务(Microservice)了。最近也火的一踏糊涂的Docker、DevOps也都是围绕着微服务领域的。在微服务领域...
  • 所以就走上Android 模块化之路。 二、小App向模块化App演变过程 模块化架构改造: 初期架构到后期架构 把原App中的网络、图片、UIKIT都放到MAVEN仓库。 抽离BaseActivity 和 公共资源到Common中 逐渐下沉业务Module...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 180,310
精华内容 72,124
热门标签
关键字:

产品功能模块化怎么写