移动前端框架重构几个关键问题

1. 是否该废弃iscroll?

我得出的结论是,是该废弃了。那当时为什么要用iscroll?

原因有三个:

1. 因为别人也用了。

2. 为了iPhone上页面滑动更顺畅。

3. 为了用上拉、下拉刷新。

关于这三个原因有几点观点:

1. 人最容易跟风,编程也是。当别人用了的时候,会认为我自己也要用,而不清楚为什么要用,本质为了解决什么。

2. Android上不用iscroll时,页面拖动效果是可以的。

    iPhone上不用iscroll时,页面拖动效果确实有问题。但是!在滑动块加上-webkit-overflow-scrolling:touch;  效果非常好!!

    所以别用iPhone做借口去使用。

3. 本质上,上下拉刷新跟iscroll没什么关系,只是借iscroll间接实现。所以如果作为框架的开发者,就别使用iscroll,可以减少26.1KB(压缩版)js库。如果是普通开发者想偷懒,那就看着用。

Finally:

iscroll该废弃用,明确为什么想用很重要。

2. 效果设计图以什么为准?

我不是做效果设计图的,但是对设计图有点想法。很多框架是以iPhone原生效果做的,这样控件效果、页面风格就跟iPhone一样(Android上也是);也有人会有自己一套设计图风格,既不是Android原生也不是iPhone原生效果。

Finally:

各自应用该有怎么的设计图,像什么没什么好说的。但对于做框架来说,我觉得偏向原生效果总归是好的。

——自己设计的那一套真的比原生还好吗?

3. Android动画效果(页面切换),效果不是很好,特别是Android4.3、4.4?

在iPhone上,由于分配给浏览器的内存多,动画效果是不错的,无论是CSS3还是js控制的。但在Android上,即便是加上GPU加速,可是效果还是不好,特别是Android4.3、4.4,动画还是存在卡顿情况。

有人说把下面:

@-webkit-keyframes slideLeftIn {0% { -webkit-transform: translate3d(100%,0,0)}100% { -webkit-transform: translate3d(0,0,0)}
}
@-webkit-keyframes slideLeftOut {0% { -webkit-transform: translate3d(0,0,0)}100% { -webkit-transform: translate3d(-100%,0,0)}
}
@-webkit-keyframes slideRightIn {0% { -webkit-transform: translate3d(-100%,0,0)}100% { -webkit-transform: translate3d(0%,0,0) }
}
@-webkit-keyframes slideRightOut {0% { -webkit-transform: translate3d(0%,0,0)}100% { -webkit-transform: translate3d(100%,0,0)}
}

改成:

@-webkit-keyframes slideLeftIn {0% { -webkit-transform: translate3d(100%,0,0)}100% { -webkit-transform:none;  }
}
@-webkit-keyframes slideLeftOut {0% { -webkit-transform:none; }100% { -webkit-transform: translate3d(-100%,0,0)}
}
@-webkit-keyframes slideRightIn {0% { -webkit-transform: translate3d(-100%,0,0)}100% {   -webkit-transform:none;  }
}
@-webkit-keyframes slideRightOut {0% {  -webkit-transform:none;   }100% { -webkit-transform: translate3d(100%,0,0)}
}

这样可以加速。但是经过实践检验,根本没什么用,页面卡顿的还是卡顿。

Finally:

既然现实已经如此,那么我们能做的是:

1. 避免使用大片区域的动画效果(特别是单页页面切换)。

2. 不使用单页。

4. 是否不该用单页?

单页的坏处:

1. 增加了开发人员的开发复杂度,是页面DOM变得过于复杂。

2. 存在无法释放的内存(可能是框架本身,或开发者自己弄出来的)。

3. 单页的页面切换效果在Android自带浏览器效果不好。

4. 页面路由问题,当想直接打开某个子页,必须经过主页,然后跳转到子页。存在两层加载中问题。

Finally:

也鉴于在单页中这些痛苦问题,无聊是移动Web,还是Hybrid应用,我觉得都不要使用单页。

5. 对于zepto,是否换回jquery?

zepto和jquery的现状:

1.zepto很久没更新了,而jquery在持续发展。

2.jquery毕竟是大众使用的,群众基础多。

3.很多控件是以jquery为基础,可能无法转换用zepto。

Finally:

zepto作为一个jquery的缩减版,目的是想在移动Web的基础库上有更小的体积。而我在想,真的需要为了减少这么几十kb的大小去使用zepto吗?zepto(54.78KB,包含触摸事件部分),jquery 1.7(91.6KB),这两个数字都是压缩版的。

对于Hybrid 应用来说,这几十KB的问题根本不是问题,都是本地资源,加载速度可以忽略不计。

对于移动Web应用来说,jquery可以使用压缩版和缓存做优化。

所以我觉得,真心使用jquery就可以了。有种有趣的现象,就是有人为了引用某个控件(基于jquery),就同时引入zepto和jquery,这反而增加了资源体积。

6.tap事件?

这是zepto里面根据几个触摸事件模拟出来的事件,为了提高点击事件触发的速度,但是存在经典的“穿透”问题。所以如果只是为了提速,或者废弃使用zepto,完全可以使用fastclick,提高响应速度。

Finally:

回归本质,使用click,在click基础上使用fastclick。

7.字体图标多少为好?

字体图标使用的本质是为了图标在不同设备不失真、可以变颜色等字体能设置属性。绝不是为了这样做更酷,看起来页面没有引用一张图片。

那字体图标内置多少个为好,我认为是尽量少,左右上下等图标,大概10个左右。字体图标越少,体积越小;其他使用图片还可以利用到缓存。

Finally:

不要一股脑加了几百个字体图标作为内置图标, 虽然使用上简单了,但是有很多冗余。

 

总结

这几个问题是在公司框架重构想起的,感触最深的问题。

 

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

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

转载于:https://www.cnblogs.com/lovesong/p/5478116.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/396038.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android 内部共享存储,Android共享内部存储

我现在面对txt文件的类似情况,并做到了这一点.File downloadedFile new File( context.getFilesDir(),"simple.txt" );downloadedFile.setReadable( true,false );downloadedFile.setWritable( true,false ); //set read/write for othersUri downloadFileUri Uri.f…

UiPath: Selectors repair 选择器的修复,即被选择的按钮发生改变如何选择第二按钮...

实现批量注册用户功能时,出现第一个用户注册完时,弹出确认按钮,点击即可,但是第二个用户注册完成时,弹出的按钮与第一个有差异,图形用户界面元素及其父元素的属性都发生改变。所以就点不了按钮,…

《C专家编程》一1.6 它很棒,但它符合标准吗

本节书摘来自异步社区《C专家编程》一书中的第1章,第1.6节,作者 【美】Perter Van Der Linde,更多章节内容可以访问云栖社区“异步社区”公众号查看 1.6 它很棒,但它符合标准吗 不要添乱——立即解散ISO工作小组。 ——匿名人士 …

abap al设置单元格可编辑 oo_excel表格操作: 图形和图表编辑技巧汇总(二)

1. 快速选取图表元素图表创建好以后,我们还需要对某些图表元素进行编辑和格式化。图表区包括整个图表和它的全部元素,当你选取图表区后,你就可以看到8个黑色小方块。要想调整单个的图表对象,首先必须选取该对象,然后更…

trie树查找前缀串_Trie数据结构(前缀树)

trie树查找前缀串by Julia GeistJulia盖斯特(Julia Geist) A Trie, (also known as a prefix tree) is a special type of tree used to store associative data structuresTrie (也称为前缀树)是一种特殊类型的树,用于存储关联数据结构 A trie (pronounced try) g…

我的北航故事

我的北航故事 致 沙航的我 既然是故事,那就一定少不了我们耳熟能详的时间,地点,人物,事件,发展,高潮,结局。经过反复的琢磨,我觉得还是写成日记形式比较适合,一是为了掩盖…

oppo r11 android版本,OPPO R11手机一共有几个版本?各版本都有哪些区别?

OPPO正式发布了新一代R11和R11 Plus两款旗舰手机,那么OPPO R11有几个版本?OPPO R11各个版本有什么区别?下面带来OPPO R11各版本区别对比详细评测,一起来了解下吧!外观方面,采用微弧面设计,全新打磨轻薄“小…

CDB和PDB的创建、连接、启动、关闭

CDB和PDB的创建、连接、启动、关闭 一、CDB和PDB基本管理 基本概念: Multitenant Environment:多租户环境 CDB(Container Database):数据库容器 PD(Pluggable Database):可插拔数据库…

《Java和Android开发学习指南(第2版)》——第2章,第2.10节本章小结

本节书摘来自异步社区《Java和Android开发学习指南(第2版)》一书中的第2章,第2.10节本章小结,作者 【加】Budi Kurniawan,更多章节内容可以访问云栖社区“异步社区”公众号查看 2.10 本章小结本章介绍了Java语言的基础…

控制usb扫码枪_无线也可以很牢靠-世达SATA热熔胶枪评测

作为一名喜欢动手制作的手工达人,往往乐趣就在于动手过程中的成就感。而在对零件进行固定时,热熔胶由于可以包裹裸露的电线线头,固定效果也非常好,相比电焊也更加的简单易操作,因而被很多人选择。但是,多数…

测试驱动开发 测试前移_为什么测试驱动的开发有用?

测试驱动开发 测试前移有关如何更有效地应用TDD的技巧,以及为什么它是一种有价值的技术 (Tips on how to apply TDD more efficiently, and why its a valuable technique) Theres a common pattern we follow when we start a project using TDD. We describe the …

Anaconda管理多版本的python环境

通过Conda的环境管理功能,我们能同时安装多个不同版本的Python,并能根据需要自由切换。下面我将给大家分享一下,新增Python版本,切换,再切回主版本的详细过程。 方法/步骤 1首先确保你的系统里已经安装了Conda&#xf…

父子沪c转大牌过户_机动车异地过户(转籍)

最近我家换了一辆车,导航后台数据统计是去足浴城最多的车主,尬!从想起这个品牌到付定金,也就半天时间,买之前没了解这么透彻。不过,到手驾驶,还是比之前的车舒适很多的,就是容易在不…

android安卓系统2.3 使用说明书,Android2.3操作界面

Android2.3操作界面摩托罗拉XT882的界面相对于原生的Gingerbread还是有了不小的变化,首先最大的感觉就是主色调亮了很多。默认背景在qHD分辨率下非常的清晰,同时整个界面仍然采用了多分屏界面。下方由中国电信定制,状态栏加入了全新的单个状态…

《运营力——微信公众号 设计 策划 客服 管理 一册通》一一1.2 团队岗位介绍...

本节书摘来自异步社区出版社《运营力——微信公众号 设计 策划 客服 管理 一册通》一书中的第1章,第1.2节,作者: 杭州创博通信技术有限公司 , 施瑶君,更多章节内容可以访问云栖社区“异步社区”公众号查看。 1.2 团队岗位介绍 创…

一切都是关于“ –ilities”的

by George Stepanek通过乔治斯蒂芬内克 都是关于“邪恶”的 (It’s all about the “-ilities”) We were “feature complete.”我们“功能齐全”。 Four weeks into a 10-week Free Code Camp project to build an environmental pledge web application, we had gotten al…

1,滑动验证,前后台接口

http://www.geetest.com/install/sections/idx-client-sdk.html 转载于:https://www.cnblogs.com/yexiangwang/p/5481153.html

Linux 下 nginx反向代理与负载均衡

前面几篇记录下nginx的基本运功,代理服务器的访问,这里来试验下nginx的反向代理。 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服…

android 8.1没声音,Android 8.1重大改变!耳机孔不见了

原标题:Android 8.1重大改变!耳机孔不见了今天上午,Android Police爆料称,下一代的Pixel 2将首发Android 8.1。更重要的是,在这个新系统中,谷歌已经做好了放弃3.5mm耳机插口的准备,并将在底层优…

php变量前下滑_PHP变量

变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念。变量可以通过变量名访问。变量是存储数据的“容器”。命名规则变量以 $ 符号开始,后面跟着变量的名称变量名必须以字母或者下划线字符开始变量名只能包含字母数字字符以及下划线(A-Z、a…