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

简介:

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

这里讲述在开发的过程中,一些JS的关键点。

换肤

对于终端的换肤,我之前一篇文章有说了我的想法。

请查看:http://www.cnblogs.com/lovesong/p/4122262.html

 
iscroll的问题

1.使用iscroll的页面里面有表单元素,当键盘弹出再缩回后,页面拖不到最顶地方。

这个在android上总出现,使用的iscroll版本是4.2.5。

这原来是个很棘手的问题,导致了有input地方不能用iscroll,不过还好后来有个同事解决了,下面是他的方法:

复制代码
var _focusElem = null;
var _keyboardIsShow = false;

document.body.addEventListener("focus", function(e) {
  _focusElem = e.target || e.srcElement;
}, true);

document.addEventListener("hidekeyboard", function() {

  wrapper.scrollTop = 0; //iscroll的DOM
  _focusElem && _focusElem.blur();
  _keyboardIsShow = false;
}, false);

document.addEventListener("showkeyboard", function() {
  _keyboardIsShow = true;
}, false);

window.addEventListener("resize", function() {
  if (_focusElem && _keyboardIsShow) {
      _focusElem.scrollIntoView(false);
  }
});
复制代码

 

持久化存储

1.localstorage

这个要打成安装包才会持久化存储。

2.sessionstorage

web会话级别(页面关闭即失效,刷新不失效)

 
内存泄露

Javascript内存泄露很容易产生,很多人并不关注这个问题,可能是不在意,或者是根本不知道,但它确实存在。

常见的泄露情况如下:

1.闭包上下文绑定后没有释放。

2.观察者模式在添加通知后,没有及时清理掉。

3.定时器的处理函数没有及时释放,没有调用clearInterval方法

4.视图层有控件重复添加,没有移除。

在单页模式下,内存泄露问题就被放大了。由于单页是一直在一个webview(原生容器)里,不可能销毁webview来回收泄露的内存,而随着用户在单页应用的操作,泄露的内存也将越增越多,机器也会变卡(在低端机比较明显)。

检查泄露工具:

其实很少有检查js内存的工具,我只找到了用chrome开发者工具来检查。

很多人都只用到Elements、Network、Sources这三个功能,Profiles这个查看内存功能应该没多少人用过。

Profiles里面有三个选项

Collect Javascript CPU Profile :

获取一段时间内,页面执行过的函数。

使用步骤:

1.点击start
2.操作页面
3.点击stop,就会有这段时间内执行过的函数。
 
Take Heap Snapshot :

获取当前页堆的快照

使用步骤:

1.直接点击 Take Snapshot,就会有当前页面的堆内存情况。
PS:这里只有堆,之所以不需要栈,是因为栈只是存储变量和引用地址,而堆才是存储对象的,栈的占的内存远小于堆。
 
Record Heap Allocations 

记录某段时间堆使用情况

 

即使是有这个工具,解决内存泄露还是不容易的,原因如下:

1.对象太多,很多情况下无所下手。

PS:有些人说关注array、closure这两种对象,可是实际时候这些对象太多了。

2.有些对象很难找到泄露的原因,特别是一些复杂的控件。

 

总结

这一篇的里面的内容之间并没有相关联地方,只是一些零散关键点。

这一系列总结到此也将告一段落,六篇文章用了过年3天时间才完成,也只是想对自己的工作有个总结,也希望我的想法能告诉大家,一起提升。

 

附加:

最后附加上重构后的UI框架效果图:

 

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

 


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

相关文章
|
19天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
【4月更文挑战第24天】Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它包含中间件系统用于日志、错误处理和静态文件服务,集成多种模板引擎如EJS、Jade、Pug。框架还提供安全中间件提升应用安全,并具有良好的可扩展性,便于项目功能扩展和开发效率提升。
26 3
|
2月前
|
人工智能 前端开发 搜索推荐
前端UI框架的发展:从混沌到秩序的演变
前端UI框架的发展:从混沌到秩序的演变
|
5天前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
9 1
|
11天前
|
设计模式 前端开发 JavaScript
AngularJS是一款由Google收购的JavaScript结构框架
AngularJS是Google收购的JavaScript框架,用于构建动态Web应用,基于MVC模式,强调模块化和双向数据绑定。它简化了视图与模型的同步,通过语义化标签和依赖注入提升开发效率。适用于复杂单页面应用(SPA),但不适合DOM操作密集型或性能要求极高的场景。
18 0
|
12天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript库与框架开发中的作用
【4月更文挑战第30天】TypeScript,微软开发的JavaScript超集,以其强类型和面向对象特性,正成为提升Web项目质量和效率的关键工具,尤其在库和框架开发中。它通过类型系统减少运行时错误,提供内置文档,便于重构,增强IDE支持,以及支持模块化。流行框架如React、Angular已支持TypeScript,未来有望成为开发高质量库和框架的标准语言。随着社区增长,TypeScript将在Web开发领域扮演更重要角色。
|
12天前
|
JavaScript 前端开发 开发工具
【TypeScript 技术专栏】使用 TypeScript 重构 JavaScript 项目
【4月更文挑战第30天】TypeScript 在前端开发中日益流行,因其静态类型检查、增强代码可读性和更好的工具支持。本文讨论如何用 TypeScript 重构 JavaScript 项目,包括评估项目、安装 TypeScript 工具、逐步添加类型注解、处理兼容性问题以及解决重构中遇到的问题。重构后,代码质量、团队协作和可维护性均得到提升。通过实例分析,文章为 TypeScript 重构提供指导,助力构建更可靠的前端应用。
|
13天前
|
开发框架 JavaScript 中间件
深入探索Node.js的Express框架:使用与中间件详解
【4月更文挑战第30天】本文深入探讨了Node.js的Express框架,介绍了其作为Web开发的强大工具,主要聚焦于基本使用和中间件。Express是基于Node.js的Web应用框架,用于构建高效的应用和API。文章详细讲解了如何安装Express,创建简单应用,以及中间件的工作原理和应用,包括中间件的顺序、错误处理和挂载位置。此外,还提到了使用第三方中间件扩展功能。理解Express基础和中间件对于开发高质量Web应用至关重要。
|
13天前
|
开发框架 前端开发 JavaScript
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
|
14天前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
|
1月前
|
JavaScript 前端开发 API
框架分析(3)-Vue.js
框架分析(3)-Vue.js