Hybird框架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

时间: 2024-10-27 11:11:33

Hybird框架UI重构之路:二、事出有因的相关文章

Hybird框架UI重构之路:三、工欲善其事,必先利其器

上篇回顾:Hybird框架UI重构之路:二.事出有因 工欲善其事,必先利其器,事是重构的目标,器是开发环境. 这篇文章将讲述重构时的UI框架的目录结构,且需要使用的开发工具. 目录结构 demo : 开发框架的模板(单页模式) demo-muti : 开发框架的模板(多页模式) demo-scene : 示例模板.一个完整的示例,目的是给使用者稍作修改就可以使用在项目上. demo-template : 给使用者使用的开发模板. demo-whole : 可在PC上演示的示例模板 dist :

Hybird框架UI重构之路:四、分而治之

上文回顾:Hybird框架UI重构之路:三.工欲善其事,必先利其器 上一篇文章有说到less.grunt这两个工具,是为了css.js分模块使用的.UI框架提供给使用者的时候,是一个大的xxx.js.xxx.css,但在开发时候,必须划分模块. CSS模块划分 1.variables.less 这里面是一些样式的变量.函数 例: 字体: @baseFontSize: 20px; 圆角: .rounded-corners (@radius: 5px) { border-radius: @radiu

Hybird框架UI重构之路:五、前端那点事儿(HTML、CSS)

上文回顾 :Hybird框架UI重构之路:四.分而治之 这里讲述在开发的过程中,一些HTML.CSS的关键点. 单页模式的页面结构 在单页模式中,弱化HTML的概念,把HTML当成一个容器,BODY中显示的主体内容才是页面,一个HTML容器中可以存放1个或者多个页面,每个页面放置于section中.而一个页面(section)中必有主体内容(content),也有可能包含头部内容.底部内容,甚至一些侧滑菜单等. 所以,以我们通常看到的一个移动应用的界面中包含了顶部Title和主体内容的页面代码如

Hybird框架UI重构之路:六、前端那点事儿(Javascript)

上文回顾 :Hybird框架UI重构之路:五.前端那点事儿(HTML.CSS) 这里讲述在开发的过程中,一些JS的关键点. 换肤 对于终端的换肤,我之前一篇文章有说了我的想法. 请查看:http://www.cnblogs.com/lovesong/p/4122262.html iscroll的问题 1.使用iscroll的页面里面有表单元素,当键盘弹出再缩回后,页面拖不到最顶地方. 这个在android上总出现,使用的iscroll版本是4.2.5. 这原来是个很棘手的问题,导致了有input

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

这两年在支撑公司的Hybrid框架的运维发展,让人确认这种移动开发方式确实是一条不错的路.混合应用这种开发方式降低开发难度,极大的提高开发效率,最重要的一点效果可以接近原生应用.框架的本身是需要持续不断发展的,这里开始我讲述我重构Hybird框架的UI的这三个月(2014-11——2015-1),而在重构之前,预先调查了目前所了解的几个混合应用的框架,师其长技以自强. PS:Hybrid应用是web页面与原生壳(Android.IOS)的结合最后打成安装包的应用. 重构的前奏曲: ApiClou

Volley框架源码浅析(二)

尊重原创 http://write.blog.csdn.net/postedit/25921795 在前面的一片文章Volley框架浅析(一)中我们知道在RequestQueue这个类中,有两个队列:本地队列和网络队列 /** The cache triage queue. */ private final PriorityBlockingQueue<Request<?>> mCacheQueue = new PriorityBlockingQueue<Request<

Android 项目重构之路:界面篇

在前一篇文章<Android项目重构之路:架构篇>中已经简单说明了项目的架构,将项目分为了四个层级:模型层.接口层.核心层.界面层.其中,最上层的界面,是变化最频繁的一个层面,也是最复杂最容易出问题的一个层面,如果规划不好,很容易做着做着,又乱成一团了. 要规划好界面层,至少应该遵循几条基本的原则: 保持规范性:定义好开发规范,包括书写规范.命名规范.注释规范等,并按照规范严格执行: 保持单一性:布局就只做布局,内容就只做内容,各自分离好:每个方法.每个类,也只做一件事情: 保持简洁性:保持代

我的编程之路(二十) 新的环境、新的开始

被其他项目组借用了三个星期,这周终于要给自己的项目组干活了,之前就听同事说过省厅,这次终于要去了,有点激动哈: 1.挤公交 星期二跟着同事一起去省厅,那个公交呀,真是挤呀,以前还庆幸自己上班不用挤公交呢,唉~~~看来这一个多月都要重复着早上7点20起床,7点50挤半个多小时公交的生活了~~~ 2.同事 还记得刚来公司的时候,强哥就跟我说,zqq(一个女生)就做的很好,对自己要求很高,一直在省厅那边,上次我们项目组聚会,第一次见到本人,也见到不少其他同事,那次还自己把自己灌醉了,幸亏宝强哥把我送了

Android Studio重构之路,我们重新来了解一下Google官方的Android开发工具

Android Studio重构之路,我们重新来了解一下Google官方的Android开发工具 记得我的第一篇博客就是写Android Studio,但是现在看来还是有些粗糙了,所有重构了一下思路,覆写了一篇 Google主推-Android开发利器--Android Studio,这可能是最全的AS教程! Android Studio,自Google2013年发布以来,就倍受Android开发者的喜爱,我们本书,就是基于Android Studio来进行案例演示的,大家都知道,Android