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

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

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

时间: 2024-08-01 10:00:46

移动前端框架重构几个关键问题的相关文章

[译] 2017 年了,这么多前端框架,你会怎样选择?

本文讲的是[译] 2017 年了,这么多前端框架,你会怎样选择?, 原文地址:Choosing a frontend framework in 2017 原文作者:Taras Mankovski 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:LeviDing 校对者:sunui, warcryDoggie 过去七年来,前端框架生态系统发展蓬勃.我们已经学了很多关于构建和维护大型应用的知识.我们看到了很多新想法的出现.其中一些新想法改变了我们构建 We

jQuery前端框架easyui使用Dialog时bug处理_jquery

最近一直都在用easyui前端框架来开发设计UI,但在使用Dialog时,发现如果页面内容比较多,就会出现问题,首先看一下我的原代码: 复制代码 代码如下:  <input type="button" value="确认预约" id="btnconfirm" onclick="javascript:openconfirmDlg();" />     <div id="confirmd"&g

Vue.js 2.0 和 React、Augular等其他前端框架大比拼_javascript技巧

React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 保持注意力集中在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库. 相似的作用域,我们会用更多的时间来讲这一块的比较.不仅我们要保持技术的准确性,同时兼顾平衡.我们指出React比Vue更好的地方,例如,他们的生态系统和丰富的自定义渲染器. React社区在这里非常积极地帮助我们实现这一平衡,特别感谢来自 React

《Web前端开发最佳实践》——2.2 前端代码重构

2.2 前端代码重构 代码重构是业内经常讨论的一个热门话题.重构指的是在不改变代码外部行为的情况下进行源代码修改,重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来确保重构后的代码逻辑,可对于普遍缺乏自动化测试的前端代码来说,重构之前一定要考虑再三才能下手.我曾经有一次不算太成功的前端重构经历,所幸的是没有导致太大的问题,但教训是惨痛的.此次重构的项目本身没有足够的自动化测试,尤其是针对前端的自动化测试,其实在重构之前也预想到了重构的风险.先来介绍

HTML 5 前端框架jQuery Mobile使用教程

1. 简介 jQuery Mobile是由(MT)Media Temple联合多家移动设备厂商以及软件企业共同发起的针对触屏智能手 机与平板电脑的Web应用的前端开发框架. jQuery Mobile构建于大名鼎鼎的jQuery 以及 jQuery UI类库之上,为前 端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统.拥有出色的弹性,轻量化以及渐进增强特性与可访问 性. jQuery Mobile框架遵循"write less, do more"思想来设计,通过该框架,用

HTML 5前端框架Bootstrap使用教程

1. 简介 Bootstrap是Twitter推出的一个开源的前端框架. Bootstrap由Twitter的设计师Mark Otto和Jacob Thornton合作开发,由动态语言Less写成.它是一套"易用.优雅.灵活.可扩展"的前端工具集,提供了优雅的HTML/CSS 规范. Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括MSNBC(微软全国广播公司)的 Breaking News都使用了该项目. Bootstrap兼容于所有主流浏览器,包括各种

细数2014年5个最流行的前端框架

  现如今快要被各种各样的 CSS 前端框架给淹没了,真做的不错的其实也就那么几个.本文将对比五个我认为是现在最好的框架.这些框架每一个都有自己的优缺点和适用的应用类型, 你需要根据自己的需要来选择不同的框架. 例如,如果你的项目简单,就不需要使用一个复杂的框架.又或者,很多框架都是模块化的,你可以只是用你需要的模块,或者把不同框架的模块混到一起使用. 我将要介绍的这些框架的顺序与它们在 GitHub 的流行程度有关.自然,就是从最流行的 Bootstrap 说起. 提示:在接下的几周或者几个月

对Web开发中前端框架与前端类库的一些思考

  这篇文章主要介绍了对Web开发中前端框架与前端类库的一些思考,本文讲解了前端框架的理解误区.前端框架与前端类库的区别.前端MVC框架思想等内容,需要的朋友可以参考下 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技术选型和架构设计当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道.就好像一个日均pv只有

比BOOTSTRAP还更强大的前端框架TOOLKIT

  目前比较流行的前端框架有Bootstrap.Foundation,这两都有着常用的网页设计组件,并且兼容移动设备,深受大众喜爱,但如果你认为这两个框架的组件依然不够用的话,可尝试今天分享的Toolkit,它内置的UI组件更多.更强大,而且实用流行. Tookit框架特点是使用扁平化设计,并带有很多新鲜的UI组件,配合CSS3动画,使很多组件交互效果变得很漂亮,功能实用强大. 下面来看看一些截图介绍: Tookit 高亮文本提示 Tooltips 提示信息组件(图:左下角) 有动画效果,英文称