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  ,如需转载请自行联系原作者

相关文章
|
9月前
|
JavaScript 前端开发 API
|
8月前
|
自然语言处理 安全 JavaScript
HarmonyOsNEXT【ArkUI超全解析】新手必看的方舟UI框架指南!
本文是HarmonyOS NEXT方舟UI框架新手指南,涵盖ArkTS开发核心知识点。从UI与组件基础概念到声明式开发优势,再到ArkTS代码实战,包括组件创建、属性设置、事件绑定等。通过实例解析自定义组件开发流程,提供避坑技巧与代码风格建议,助你快速掌握ArkUI框架精髓,轻松构建高效、美观的HarmonyOS应用界面。适合初学者及希望转型声明式开发的开发者学习参考。
|
11月前
|
JavaScript 前端开发 API
如何在React.js中使用Shadcn/UI
学习如何在React.js中使用Shadcn/UI构建轻量且可定制的现代化界面。Shadcn/UI为React.js打造,提供核心组件和Tailwind CSS支持,帮助你创建独特的UI,避免大型框架的臃肿。本文介绍安装、配置及与Apipost集成的方法,适合希望提升React.js项目的开发者。通过定制主题和优化性能,你可以高效地开发出功能强大的应用。
|
11月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
426 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
10月前
|
Android开发 UED iOS开发
Harmony os next~UI开发与ArkUI框架
鸿蒙OS的UI开发基于ArkUI框架,采用声明式编程,简化开发流程。五大核心组件(Text、Button、List、Grid、Flex)助力高效布局,支持数据绑定与动态更新。事件响应机制灵敏,适合构建交互丰富的应用。实战技巧包括规范命名、样式复用和调试方法。掌握这些,轻松开发鸿蒙应用。下期预告:分布式开发,记得带上烤冷面!
356 0
|
11月前
|
前端开发 数据安全/隐私保护 开发者
FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
嗨,大家好,我是小华同学。今天为大家介绍一个轻量级、响应式的前端UI框架——FirstUI。它提供丰富的组件库,包括按钮、输入框、下拉菜单等,帮助开发者快速构建美观、功能丰富的用户界面。FirstUI的核心理念是“简单、快速、高效”,适合各种Web应用开发,如企业网站、电商平台和个人博客。其体积小、加载快,支持响应式设计,并且易于定制。FirstUI拥有活跃的社区支持,开发者可以轻松找到帮助并分享经验。欢迎关注我们,获取更多优质开源项目和高效工作学习方法。
490 0
|
安全 JavaScript 前端开发
Javascript框架库漏洞验证
Javascript框架库漏洞验证
3838 0
Javascript框架库漏洞验证
|
JavaScript 前端开发
常用的 JavaScript 框架和库
常用的 JavaScript 框架和库
411 7

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    676
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    284
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    252
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    199
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    306
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    448
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    196
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    140
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    208
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    282