1. 全栈程序员必看首页

介绍一个EPG前端框架

全栈程序员-站长 • • 未分类 • 阅读 2

介绍一个EPG前端框架这是一个在原生 js 基础上开发的针对 iptv 行业的交互框架 参考了 android 的 Application 和 activity 实现整个页面的交互及生命周期

  • 1.单页面应用
  • 2.整合焦点逻辑
  • 3.循环列表
  • 4.弹窗
  • 5.滚动器
  • 6.图片懒加载
  • 7.文字跑马灯
  • 8.碎片布局
  • 芒果app版在EPG上的复刻，github地址
    • 效果 请添加图片描述

已完成的功能及版本计划

当前版本0.2.0

version:0.2.0 date:2022-08-21

  • 新增RecycleView控件，
  • 修改findViewById的实现，脱离ViewManager，内嵌至View，View创建需要viewManager
  • 将图片分成两个文件夹，
    • images是在html代码中设置的图片
    • images-js是在js中动态设置的

0.1.0 基本功能

序号 功能 对应名 描述 完成状态 备注
1 应用 Application 整个应用的状态管理 完成
2 键盘 Keyboard 键盘交互 完成
3 页面 Page 单个页面的状态管理 完成
4 页面管理员 PageManager 管理多个页面的 基本功能
5 基础控件 View 和节点交互 完成 后续需要分离节点交互和无关节点的相关操作
6 控件管理员 ViewManager 管理View的 基本完成 内部的buildView方法耦合在这里，不易拓展
7 可上焦控件 ItemView 可以上焦的控件，基本的交互 完成 View子类，包含上焦效果、监听、点击
8 滚动控件 ScrollView 滚动控件 完成 内含滚动器，功能正常，但实现方式不佳，待优化
9 图片控件 ImageView 主要是懒加载 完成 主要在渲染后滚动后判断是否需要加载，一般是配合ScrollView
10 文本控件 TextView 主要是跑马灯 完成 横向和纵向跑马灯
11 组控件 GroupView 主要是给可上焦的控件分组 完成 在组内有对应的就近原则
12 弹窗控件 Dialog 浮在页面的弹窗 完成
13 帧控件 FrameView 主要是包含碎片Fragment 完成
14 碎片 Fragment 碎片，动态加载，有生命周期 完成 需要配合FrameView使用
15 播放器 VideoPlayer 播放器空实现 基本结构，需要调整 内部定义播放器需要什么操作，但无实际实现
16 iptv播放器 IptvPlayer iptv epg原生播放器 基本完成，但未测试 使用iptv规范实现的播放器，只能在iptv规范的设备上使用 ，适配时，可以继承这个
17 数据保存 LocalData 保存数据的工具 完成 使用json格式保存，json所需空间偏大，容易出现cookie长度不够问题
  • 在该版本中，基本功能已完成，对于实际开发基本满足要求，部分功能可以在简单变形之后实现
  • 缺少列表组件
  • 开始积累special_view，和业务结合较为紧密的控件，新的属性也需要支持标签
  • 虚拟节点优化，在后续版本中需要调研，得到对性能提升程度

使用方式可以参考README.md，也可以参考src实现的demo

0.1.1 findViewById改写，控件向内部迭代到有id对应的控件

  • 把控件绑定在viewManager的map中，不利于控件的特殊操作

0.2.0 拓展组件-可循环列表RecycleView

  • 节点可循环使用
  • 滚动效果循环
序号 功能 对应名 描述 完成状态 备注
1 循环列表 RecycleView 列表控件 完成 使用adapter来创建每一个元素

0.2.1 dialog组件布局分离，规范组件的自定义布局形式,并完善已知问题（缺陷）

  • 将布局文件等同于page
  • css和html文件可以使用文件夹区分，在loader中处理
  • 尝试将html和css写在一个文件中，更加清晰的关联布局和样式
  • RecycleView默认设置adapter，加载标签属性，默认上焦，focusable也需要加入
  • 新增气泡控件，是否可以看作自动消失的dialog
0.2.2 完善各个组件标签属性
  • 除了基础属性之外的属性还没有写
  • GroupView、RecycleView等

0.3.0 分离View，新增VElement对象

  • 虚拟节点可以在这个基础上尝试
  • 将节点相关操作及信息单独封装到VElement类中，节点方面的兼容性，可以在这里处理
  • 在View内部新增VElement对象，实现相关操作，另外还有控件级操作，包括appendChild

0.4.0 拓展组件-Toast组件

  • 任意地方可调用
  • 显示位置、时间可设定
  • 样式可调整（可使用template布局）

0.4.1 html loader优化

  • 解析tagName，将tagName解析到属性中的view-type
  • 解析id，将id解析到属性中view-id
  • 可以使用buildView方法和loader结合的方式

0.5.0 拓展组件-动态生成组件（组件名未定）

  • 继承GroupView，使用Adapter生成
  • 尝试relative方式布局，兼容性验证

0.6.0 拓展播放器-Android、Web播放器

不改动业务层的前提，实现播放器在不同环境的调用

  • 对接Android播放器，使用特定关键字调用相关播放方法，实现Android原生和H5交互
  • 对接Web播放器，暂定videojs实现，但videojs无法调用ts文件，待调研

0.7.0 优化工具-LocalData优化

这里的LocalData指，网页可以保存的数据，下次进入时可以使用，目前使用cookie来实现

  • 新增表单形式（使用”&”连接）保存
  • 尝试storage实现
  • 持续在ViewUtil中添加常用（非框架级的）方法

0.8.0 优化组件-使用transform实现滚动

使用top、left实现的滚动存在效率问题，容易出现卡顿，transform是css样式支持，对于效率优化较好，需要尝试及调研

  • 新增transform实现，可以支持选择滚动方式

0.9.0 支持鼠标事件、触摸事件

可以使用鼠标或触摸控制页面，在切换控制方式时，目前会有点问题，比如滚动之后，焦点在屏幕外，此时键盘控制，会滚动回原位置

  • 点击效果，点击之后当前焦点为被点击控件
  • 滚动效果，不改变当前焦点
  • 监听到触摸或鼠标事件时，去除上焦效果
  • 监听到键盘或遥控器事件时，给当前焦点上焦

1.0.0 支持组件扩展

相对于框架中的组件，扩展组件有高度的定制化，使用更直接的优点，需要支持扩展也是很重要的一点

高度的拓展性是一个框架成熟的重要指标

  • 图片跑马灯
  • 加载提示
  • 弹出框
  • 返回顶部
  • 进度条
  • …

开发插件，引入自定义的文件名（例如：.view后缀）

  • 形成该框架特定的开发模式
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/228634.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2026年3月16日 下午6:34
下一篇 2026年3月16日 下午6:34


相关推荐

  • 局域网文件传输软件[通俗易懂]

    局域网文件传输软件[通俗易懂]

    局域网文件传输软件[通俗易懂]在公司实习了一个周，虽然很累，但也感觉有所得，此次项目是做一个局域网两台计算机之间的文件传输。我用的主要控件为winsock控件，用其TCP协议。至于用此控件连接两台计算机书上都有介绍，我主要介绍一下我传送文件的思想和方法：首先，将要传送的文件分成指定大小的N个包，大小不能超过8K因为TCP每次最多发送8K数据，最后一个包可能会小于其它包。然后在每个包加个包头，因为接收端需要通过包头知道传送过来的

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月4日
    39
  • php如何转义字符串,php怎么实现字符串转义？

    php如何转义字符串,php怎么实现字符串转义？

    php如何转义字符串,php怎么实现字符串转义？在 php 中 可以使用 addslashes 函数来实现字符串转义 addslashes 函数可以在指定的预定义字符前添加反斜杠 语法格式 addslashes string 参数 string 指定要转义的字符串 返回转义后的字符串 转义字符是一种特殊的字符常量 转义字符以反斜线 开头 后跟一个或几个字符 转义字符具有特定的含义 不同于字符原有的意义 故称 转义 字符 转义字符的用处 1 将

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月18日
    2
  • sql 求交集_sql求差函数

    sql 求交集_sql求差函数

    sql 求交集_sql求差函数start_num=5end_num=10（数据库值）startend（条件）四种情况：//1、start=6end=8#{start}>=start_numand#{end}<=end_num//2、start=4end=7#{effectiveDate}<=effective_dateand(#{validDate}betweeneffective_dateandvalid_date)//3、

    全栈程序员-站长的头像 全栈程序员-站长
    2025年7月3日
    9
  • Cinemachine（二）制作不会穿墙（会避开障碍物）的摄像头（Cinemachine Collider）

    Cinemachine（二）制作不会穿墙（会避开障碍物）的摄像头（Cinemachine Collider）

    Cinemachine（二）制作不会穿墙（会避开障碍物）的摄像头（Cinemachine Collider）在许多的第三人称游戏中，我们的摄像机往往保持着一定的偏移，跟随着我们的角色。但是常常会出现的一种情况就是，当我们的角色走进室内或者靠近墙边或障碍物的时候，如果这个偏移保持不变的话，我们的摄像机就可能会跑到墙体里，或者看向角色时被墙体或障碍物所挡住。因此这种情况下我们的相机往往需要一些特殊的处理，例如修改偏移量来拉近相机与角色的距离等，来防止上述情况的出现。在以往我们可能需要通过射线检测或者碰撞检测等，然后编写一大堆的代码做一堆复杂的判断来修改我们的摄像机的位置。视频链接：https://www.bi

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月8日
    98
  • resnet残差网络代码_pytorch卷积神经网络

    resnet残差网络代码_pytorch卷积神经网络

    resnet残差网络代码_pytorch卷积神经网络工欲善其事必先利其器，在使用该网络之前要先了解该网络的具体细节，我今天也是第一次查资料，然后加上自己的理解去写这篇学习成长文章。残差模块classResidualBlock(nn.Module):def__init__(self,inchannel,outchannel,stride=1,dowansample=None):super(ResidualBlock,self).__init__()self.left=nn.Sequential

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月6日
    4
  • Java基础语法_java的基本语法有哪些

    Java基础语法_java的基本语法有哪些

    Java基础语法_java的基本语法有哪些Java基础语法

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月21日
    76

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号