Hybrid框架UI重构之路:二、事出有因

简介:

上文回顾:Hybird框架UI重构之路:一、师其长技以自强

 

一切的重构都是有原因的,或许为了更快速度、更好体验、更快捷开发等,于是就有了自己的开发目标,简单看看未重构前UI("中国移动式"风格)。

上一篇文章说明调查了这么多类似框架,对比了他们的特点,而比对自身UI,也是存在可优化的地方,于是有了下面几点目标(仅仅UI框架方面,不涉及原生部分)。

(1)规范开发

1.SVN版本控制。之前的UI框架部分是没有进行svn版本控制的,于是会导致个问题——有些文件在多次修改后,连当初的开发者都不知道是不是最新的,存在争议。而加上svn,使得代码更加规范,有利于版本发布(打tag)。

2.职责确认。框架不是一个完成的,需多人协同,所以确立代码模块职责归属很重要,属于谁的就谁改。

(2)依赖库升级

1.zepto

最新版1.2.5的fixed了挺多问题,更换之后效果会好很多。

在这里不得不说一个zepto的库的问题,就是触摸模块(zepto的基础库是没有这个模块的,要自己额外加)。

zepto使用touchstart、touchmove、touchend模拟出tap、longTap等事件,目的为解决click事件的300ms延时,但有个很大的问题是tap事件会“穿透”,“穿透”又会导致一系列问题。我认为最好的办法是使用一个fastclick的库,用回click事件(但是重构的框架不能更换,原因是这个框架已经是第二个版本了,开发者对tap事件使用已成习惯,变革带来的代价太大了)。

PS:穿透:当两个层重叠在一起时,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件。

2.iscroll

原本是想升级到iscroll5,但iscroll5的用法改动太大,没有延续性,并且尝试多次效果不佳,于是次依赖库就不升级了,还是iscroll4。

3.cordova

cordova的版本不是由我决定的,是由原生开发人员决定的。

4.require

这个作为模块文件加载的利器,是单页模式的好工具。

功能:

1.加载js文件

2.提供加载完回调

3.不重复加载

(3)单页模式

在上一篇文章说过了单页模式的优缺点,决定增加单页模式。可能会有人说,现在的业务逻辑和功能那么复杂,用单页模式将不负重堪(因为所有东西都在一个页面上,处于内存的对象将越来越多)。

可是我想说的是,现在功能都是碎片化的(大应用),都可以分为多个组合模块的,每个模块都不会多大,每个模块为一个单页,将单页和多页进行混用,这样模块间互不相干,混合模式有不错的效果!特别如果是轻应用(远程页面,仅web页面),单页有个非常好效果。

而我也用手机测试过,一个单页应用,每次切换会产生大概1MB无法回收的内存,根据现在手机硬件条件(动不动几G的内存),这个消耗我觉得还是可以容忍的。

(4)控件优化

1.删除旧UI中,难用、易错的控件。

PS:不删掉,就会有人用,一用就会有问题反馈,到头又要运维。

2.优化、增加好用的控件

  1. popup (from jingle框架)
  2. 侧边栏组件
  3. Tab组件
  4. 滑动列表

(5)bug修复

PS:什么框架都无法避免的东西。

总结

这一篇文章也是说明重构的一些目标。当然在最初的开发不一定能将所有开发需求都弄清,不过大目标却必须明确,既然目标有了,那么下一篇讲述开发的一些事。

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址:http://www.cnblogs.com/lovesong/p/4296781.html


本文转自 海角在眼前 博客园博客,原文链接: http://www.cnblogs.com/lovesong/p/4296781.html  ,如需转载请自行联系原作者

相关文章
|
10月前
|
自然语言处理 安全 JavaScript
HarmonyOsNEXT【ArkUI超全解析】新手必看的方舟UI框架指南!
本文是HarmonyOS NEXT方舟UI框架新手指南,涵盖ArkTS开发核心知识点。从UI与组件基础概念到声明式开发优势,再到ArkTS代码实战,包括组件创建、属性设置、事件绑定等。通过实例解析自定义组件开发流程,提供避坑技巧与代码风格建议,助你快速掌握ArkUI框架精髓,轻松构建高效、美观的HarmonyOS应用界面。适合初学者及希望转型声明式开发的开发者学习参考。
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
3838 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
Android开发 UED iOS开发
Harmony os next~UI开发与ArkUI框架
鸿蒙OS的UI开发基于ArkUI框架,采用声明式编程,简化开发流程。五大核心组件(Text、Button、List、Grid、Flex)助力高效布局,支持数据绑定与动态更新。事件响应机制灵敏,适合构建交互丰富的应用。实战技巧包括规范命名、样式复用和调试方法。掌握这些,轻松开发鸿蒙应用。下期预告:分布式开发,记得带上烤冷面!
428 0
|
前端开发 数据安全/隐私保护 开发者
FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
嗨,大家好,我是小华同学。今天为大家介绍一个轻量级、响应式的前端UI框架——FirstUI。它提供丰富的组件库,包括按钮、输入框、下拉菜单等,帮助开发者快速构建美观、功能丰富的用户界面。FirstUI的核心理念是“简单、快速、高效”,适合各种Web应用开发,如企业网站、电商平台和个人博客。其体积小、加载快,支持响应式设计,并且易于定制。FirstUI拥有活跃的社区支持,开发者可以轻松找到帮助并分享经验。欢迎关注我们,获取更多优质开源项目和高效工作学习方法。
560 0
|
10月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
339 15
|
10月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
369 11
|
6月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
496 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
9月前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
324 56
|
9月前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
464 55

热门文章

最新文章