重构之道 触屏篇
Download as PPT, PDF3 likes799 views
该文档讨论了移动网页重构的策略，重点介绍了触屏项目的分类、工具使用和性能优化建议。提出了多种技术手段，如颁厂厂3、异步加载和本地存储等，以提高移动设备的性能和用户体验。文档还强调了避免重复开发以及如何通过设计平衡技术限制的重要性。
![var myLinks = document.getElementsByTagName('a'); for(var i = 0; i < myLinks.length; i++){ myLinks[i].addEventListener('touchstart', function(){this.className ="hover";}, false); myLinks[i].addEventListener('touchend', function(){this.className ="";}, false); } .hover{ border:solid 1px #00f0ff; color:#ffffff; background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,hsl(185,99%,69%)), color-stop(49%,hsl(190,80%,67%)), color-stop(50%,hsl(196,64%,65%)), color-stop(51%,hsl(188,77%,61%)), color-stop(100%,hsl(181,82%,78%))); }](https://image.slidesharecdn.com/random-111129025642-phpapp02/85/-24-320.jpg)
重构之道 触屏篇
- 2. 触屏项目分类 项目总结 ( 分享 ) 工具使用 其他
- 5. 相同点与不同点 WEBAPP NATIVEAPP+WEBAPP 单一页面 使用的 “ APP” 模式，即：把所有页面 HTML 代码写在一起。框架： IUI 、 SENCHA 可以把某些功能模块放在一起，但建议暂时不放一起。 建议不合并，提高打开页面速度和流量
- 6. ?
- 7. 所有触屏都加上 1.<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width"> 2. <meta name="format-detection" content="address=no;email=no" /> WEBAPP 加上 LINK <link rel="apple-touch-icon-precomposed" href="icon.png" > <link rel="apple-touch-startup-image" href="startup.png" /> 横竖屏样式 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 肖像模式样式 <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> // 风景模式样式
- 8. 阻止旋转屏幕时自动调整字体大小 -webkit-text-size-adjust:none; 禁止内容选中 ? -webkit-user-select:none; 禁止图片保存 -webkit-touch-callout:none; http://w3help.org/zh-cn/causes/BX2050
- 9. 关闭自动识别后 , 又希望某些电话号码能够链接到拨号功能 , 可以通过这样来声明 <a href="tel:0755-86013388"> 打电话给我 </a> <a href="sms:1867551***6"> 发短信 </a> ( <a href="sms:1867551***6,13552262668?body= 发消息给我 "> 发短信 </a> ) 或用于单元格： <td onclick="location.href='tel:110'"> 自动大写与自动修正 <input?type="text"?autocapitalize="off"?autocorrect="off"?/>
- 10. 前缀 -webkit-gradient -moz-gradient 先写私有前缀，在写标准。 -webkit-border-radius:6px; border-radius:6px; 圆角大小不同需要分开书写，否则无效果！ -webkit-border-top-left-radius:6px; -webkit-border-bottom-left-radius:6px; ... border-radius:6px 0 0 6px; CSS3 书写顺序和私有前缀
- 11. DOM 节点过多 动画效果无效 （ andriod ） 不建议整页动画，建议针对局部动画。或者避免使用动画效果 -webkit-transform:translateX(-100%); -webkit-transform:translate(-100%,0); CSS3 动画
- 13. 隐藏地址栏 addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); }); 当不满一屏时无效
- 15. 触屏项目分类 工具使用 其他 项目总结 ( 分享 )
- 16. http :// house .3 g . qq . com / html 5/ down . jsp
- 17. 15.3k 20.6k 6.19k 充分利用伪元素 ::before,::after
- 18. 激活输入框时，将屏幕滚动到合适的地方 先拉键盘 获取焦点 滚动屏幕
- 19. 利用 flex box 布局，使中间自动伸缩 然后截断多余文字
- 20. 提高代码的互用性、可移植和后期迭代的维护性 迭代 1 迭代 2 迭代 2
- 21. ?
- 22. 利用 CSS3 transform 实现指定区域滚动。推荐使用 ISCROLL 库
- 23. Touchstart 和 touchend 模拟 hover 状态
- 24. var myLinks = document.getElementsByTagName('a'); for(var i = 0; i < myLinks.length; i++){ myLinks[i].addEventListener('touchstart', function(){this.className ="hover";}, false); myLinks[i].addEventListener('touchend', function(){this.className ="";}, false); } .hover{ border:solid 1px #00f0ff; color:#ffffff; background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,hsl(185,99%,69%)), color-stop(49%,hsl(190,80%,67%)), color-stop(50%,hsl(196,64%,65%)), color-stop(51%,hsl(188,77%,61%)), color-stop(100%,hsl(181,82%,78%))); }
- 25. 触屏项目分类 工具使用 其他 项目总结 ( 分享 ) 项目总结 ( 分享 ) 工具使用
- 26. ?
- 27. less css coffee js
- 28. 避免重复造车轮子，自动化代码
- 29. 触屏项目分类 工具使用 其他 项目总结 ( 分享 ) 项目总结 ( 分享 ) 其他
- 30. 性能考虑 1. 移动设备是 perf-senstive ( 电池、内存、宽带、延迟等 ) 2. 缓存。资源的本地存储 (Localstorage) 3. 图片优化。惰性加载 , 无损压缩 , spirites,dataURI, K-weight 等 4. 用 css3 视觉效果代替图片；用 css3 动态效果代替 JS 5. 语义化 HTML5 模板和 OOCSS 6. 异步。数据异步加载 (ajax) ，模块异步加载，内容延迟加载 7. JS 优化。非阻塞加载、响应性加载、轻量 8. JS 执行效率。 100ms/10ms ，利用 setTimeout 拆分长执行时间的操作 9 。线程。 web worker
- 31. 1. 系统的设计和开发 2. 通过重用降低成本 3. 综合性方案（设计＋技术） 4. 通过设计平衡技术的局限性 共同的挑战
- 32. 路走错了，奔跑是没有用的。
- 33. ? Thanks ！ 微博 :t./imtank twitter:twitter./imtank