配合 APP 调用 JS 的一次尝试
项目初衷
最初的场景是用户在对购物车的操作中,由于用户对购物车的每次操作(包括选择,调整数量)都需要计算商品的促销和分组的情况,而这段逻辑的计算都需要调用后端的接口,那么瓶颈来了:
- 请求时间长——一次 HTTPS 的请求对于 web 性能有很大的影响,尤其是对于移动端来说,用户所在的网络状况直接影响请求延时的长短。
- 数据计算量大——少量的计算看起来不会有太多影响,但与之叠加的业务逻辑和大量的数据计算将隐性增加时间的消耗和出错的几率。
- 交互卡顿——上述两个时间上的消耗将直接导致用户操作的障碍,特别是对于购物车中调整数量和选中的操作。
- 多端统一——对购物车的操作是 APP 和 WAP 多端统一的操作,需要收敛管理,如果后端不再适合处理,那么发布统一语言的、多端共同调用的 JS 功能包将是个不错的选择。
抹平差异
APP 中调用 JS 的基本思路就是使用内嵌的 JS 引擎,与 Chrome 的 V8 引擎不同,iOS 使用的是自带的 JavaScriptCore;而 Andriod 则引用了 Duktape。这里还有许多其他的引擎。
由于调用平台不同,JS 引擎也不同,要想使得 JS 在多端输入输出保持一致,需要了解:
- 代码的管理方式
- 对于原生方法的支持
如表格:
| WAP | iOS | Andriod | |
|---|---|---|---|
| 代码管理 | modules | JSContext | duktape.evaluate |
| 原生支持 | caniuse | Safari | duktape |
对于代码的管理,WAP 下支持正常的模块化写法和调用;iOS 提供的 JSContext 能找到 JS 中对应的对象和方法;Andriod 下 duktape-android 只提供了 evaluate 解析字符串并在 runtime 模式下调用(所以 Andriod 下执行较慢)。后两种直接屏蔽了模块化的写法,最终方案只能选择原始的对象管理方法的形式。
对于原生方法的支持,WAP 下由于跟机型和原生浏览器相关,可在 caniuse 上查找;iOS 中的 JavaScriptCore 暂时没查到具体的支持情况,由于 Safari 下使用相同的 JS 引擎,可查询对应版本的 Safari 的支持情况;duktape 由于是开源的,很容易查询。因此只要注意调用方法的兼容,以及跟 APP 端的调试,即可避免。
Tips:本项目在调试中就发现 JavaScriptCore 缺少 Array.prototype.find 原生方法的支持,对 Array.prototype.sort 的实现效果与 V8 也不太一样。
代码调试
项目开发中最困难的地方在于代码的调试,通过本地 node.js 测试的代码不一定能在 APP 的 JS 引擎上跑通(例如对原生方法的支持上)。由于类似在两个不同的 REPL 中调试,目前没有什么太好的版本,只能在调试代码中尽量抛出所有可读异常,然后在 APP 的 JS 引擎中捕捉到的异常信息分析问题。
脚本安全
参考 JSPatch 部署的安全策略,主要分为传输安全和执行安全。
传输安全做了两件事:
- HTTPS 传输——将 JS 文件放在支持 HTTPS 的服务器上,保证传输中泄露和劫持的安全性。
- RSA 校验——在服务端对 JS 文件内容做了 MD5 校验,并发送给 APP。客户端根据公钥解密,保证文件没有被纂改。
执行安全上,由于不像 JSPatch 需要 JS 调用 APP 的功能,安全性上相对较小,只要 APP 对 JS 文件的执行异常做出处理即可不会造成 APP crash。当然这种重要的逻辑,JS 的单测和较高的测试覆盖率是必不可少的。同时 APP 也可对 JS 的执行进行监控上报,对支持 JS 的版本实行灰度发布。
版本控制
这是该项目的红利所在。由于是调用 JS 文件,因此 JS 逻辑的更新免去了 APP 发版的苦恼。新版本的 JS 文件由接口通过文件名控制版本并下发到客户端,客户端校验 MD5 通过后即可使用新的 JS 版本。
后续
在 APP 中调用 JS 的方式无疑缓解了请求资源的消耗和版本控制的烦恼,同时也保证了逻辑的统一。但大规模的使用,必将考虑到 JS 的执行效率、平台的差异以及业务方的需求。实际的效果如何,还需进一步的探讨。
配合 APP 调用 JS 的一次尝试的更多相关文章
- JS调用App方法及App调用JS方法
做App内嵌H5项目时,经常会遇到js与App的交互,最普遍的就是方法的互相调用,那么如何实现方法的互相调用呢? 写在前面: 如果只是小项目且后期扩大的可能性不大的时候,可以忽略,可如果是长期项目的话 ...
- angularjs中安卓原生APP调用H5页面js函数,js写法应注意
安卓原生app调用js方法,js方法应写在html下的script标签内,不能有任何function包裹,例如angular的controller层,这样APP也是获取不到的: 所以只有放在html中 ...
- 背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互
[源码下载] 背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互 作者: ...
- Cordova app 检查更新 ----JS进行调用(二)
原文:Cordova app 检查更新 ----JS进行调用(二) 1.获取版本号 需要添加 插件 cordova plugin add https://github.com/whiteoctober ...
- 微信小程序-02-项目文件之间配合和调用关系
微信小程序-02-项目文件之间配合和调用关系 我就不说那么多了,我是从官方文档拷贝的,然后加上一些自己的笔记,不喜勿喷 官方文档:https://developers.weixin.qq.com/mi ...
- 【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付
前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...
- [转]JS调用Android里面的方法,Android调用JS里面的方法
FROM : http://blog.csdn.net/hj563308597/article/details/45197709 Android WebView 在公司Android的开发过程中遇到一 ...
- Magento中调用JS文件的几种方法
一.全局调用方法: 通过该方法每个页面都会引用这个JS文件,除非是类似jQuery这样的系统文件,不然不推荐这种方法. 文件路径:/app/design/frontend/default/Your_T ...
- 混合app开发--js和webview之间的交互总结
使用场景:原生APP内嵌套H5页面,app使用的是webview框架进行嵌套 这样就存在两种情况 1.原生app调用H5的方法 2.H5调用app的方法 分别讲解下,其实app与H5之间的交互式非常简 ...
随机推荐
- Windows请求连接 Vmware+Ubuntu14被拒绝 的幽怨诉说
最近为了学习Linux,在电脑上装了Vmware然后搭建了Ubuntu14的Linux操作系统 搭建完成以后,我兴冲冲的使用TeraTerm进行友情访问发现被拒绝,我很郁闷. 怎么可以这样呢. 然后调 ...
- NSString 和NSData 转换
NSString 转换成NSData 对象 NSData* xmlData =[@"testdata" dataUsingEncoding:NSUTF8StringEncoding ...
- 使用原生ajax访问后台数据并将其展现在前端页面中(小菜鸟自己整理玩的,大神勿喷)
首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wam ...
- python环境变量自动配置脚本(setx使用)
前言 setx不是windows系统自带的工具,需要到微软官网下载,但是有的系统也会自带.(是官方提供的,可放心食用) set和setx都可以用来配置环境变量.他们的不同点在于,set只是临时的修改环 ...
- 一则奇怪的案例处理:ORA-00257: archiver error. Connect internal only, until freed
前天,业务反应数据库不能连接 在操作系统通过字符串尝试登陆数据库报:ORA-00257: archiver error. Connect internal only, until freed 解决思路 ...
- IOC装配Bean(注解方式)
Spring的注解装配Bean Spring2.5 引入使用注解去定义Bean @Component 描述Spring框架中Bean Spring的框架中提供了与@Component注解等效的三个注解 ...
- 自定义Toast和RatingBar的简单用例
Toast是一个包含用户点击消息.Toast类会帮助你创建和显示这些.Android中的Toast是一种简易的消息提示框. 当视图显示给用户,在应用程序中显示为浮动 向右划动五角星增加 单击按钮显示自 ...
- iOS 消息推送(APNs) 傻瓜式教程
也可以去我的简书页面查看这篇文章 首先: 1.做iOS消息推送需要真机测试 2.做iOS消息推送需要有付费的开发者账号 是否继续看帖? 先学习一下相关的知识吧! 因为中途可能会遇到一些问题,这篇文章或 ...
- zorka源码解读之Instrument实现原理
主要用到三方面技术: beanshell来实现可扩展:告诉zorkaAgent插桩的具体需求,包括插桩的方法和值.插桩的时机.插桩追踪记录方式等. Instrument来通过代理的方式访问JVM,实现 ...
- jquery点击元素之外触发事件
$("#errorMsg_layer").bind("click",function(e){ if($(e.target).closest("#err ...