配合 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之间的交互式非常简 ...
随机推荐
- BZOJ 1923: [Sdoi2010]外星千足虫
Description 给出几个异或方程组求解,\(n \leqslant 2000\) Sol 高斯消元. 直接消元就行,遇到自由元就直接输出,同时记录一下用到的最高行数. 复杂度不科学就可以用 b ...
- Linux pthread
#include <stdio.h> #include <stdlib.h> #include <string.h> #include <pthread.h& ...
- spring quartz分布式任务计划
spring quartz分布式任务计划 环境: 通过maven管理的spring mvc工程,且已经成功连接数据库. 数据库表结构 /*Table structure for table `qrtz ...
- Angular2 架构
1. 说明 Angular 2 是一个用 HTML 和 JavaScript (或者可以编译成JavaScript)来构建应用程序的框架.该框架包含了一系列的库. 在 Angular 里,我们这样 ...
- 创建GitHub博客
1. 创建GitHub账号 GitHub技术博客首先需要GitHub账户,请在官网按照步骤自行注册账号. 2. 创建博客仓库 使用注册的账户登录,然后点击创建仓库,输入项目信息如下所示,注意项目名称规 ...
- 昨天开发引入的两个错误--Parcelable
以下的代码有两处明显的错误,一不小心就会写出如下错误的代码,其中第2个问题调试起来很麻烦: 1 public class AddedBannerInfo implements Parcelable { ...
- SQL入门语句之运算符
运算符是一个保留字或字符,主要用于连接WHERE后面的条件. 一.算数运算符 运算符 描述 + 加法 - 把运算符两边的值相加 - 减法 - 左操作数减去右操作数 * 乘法 - 把运算符两边的值相乘 ...
- springBoot专题3---->springBoot与多数据源的配置
最近有点忙,更新有点慢.今天进来说说一说springBoot中如何配置多数据源. 第一,新建一个名为springBoot-mutidata的maven项目,完整的pom.xml配置如下: <?x ...
- 51nod1130(斯特林近似)
题目链接: https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1130 题意: 中文题诶~ 思路: 直接斯特林公式就好了~ ...
- 第六届福建省大学生程序设计竞赛(FZU2213—FZU2221)
from:piaocoder Common Tangents(两圆之间的公公切线) 题目链接: http://acm.fzu.edu.cn/problem.php?pid=2213 解题思路: 告诉你 ...