项目初衷

最初的场景是用户在对购物车的操作中,由于用户对购物车的每次操作(包括选择,调整数量)都需要计算商品的促销和分组的情况,而这段逻辑的计算都需要调用后端的接口,那么瓶颈来了:

  • 请求时间长——一次 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 的一次尝试的更多相关文章

  1. JS调用App方法及App调用JS方法

    做App内嵌H5项目时,经常会遇到js与App的交互,最普遍的就是方法的互相调用,那么如何实现方法的互相调用呢? 写在前面: 如果只是小项目且后期扩大的可能性不大的时候,可以忽略,可如果是长期项目的话 ...

  2. angularjs中安卓原生APP调用H5页面js函数,js写法应注意

    安卓原生app调用js方法,js方法应写在html下的script标签内,不能有任何function包裹,例如angular的controller层,这样APP也是获取不到的: 所以只有放在html中 ...

  3. 背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互

    [源码下载] 背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互 作者: ...

  4. Cordova app 检查更新 ----JS进行调用(二)

    原文:Cordova app 检查更新 ----JS进行调用(二) 1.获取版本号 需要添加 插件 cordova plugin add https://github.com/whiteoctober ...

  5. 微信小程序-02-项目文件之间配合和调用关系

    微信小程序-02-项目文件之间配合和调用关系 我就不说那么多了,我是从官方文档拷贝的,然后加上一些自己的笔记,不喜勿喷 官方文档:https://developers.weixin.qq.com/mi ...

  6. 【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付

    前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...

  7. [转]JS调用Android里面的方法,Android调用JS里面的方法

    FROM : http://blog.csdn.net/hj563308597/article/details/45197709 Android WebView 在公司Android的开发过程中遇到一 ...

  8. Magento中调用JS文件的几种方法

    一.全局调用方法: 通过该方法每个页面都会引用这个JS文件,除非是类似jQuery这样的系统文件,不然不推荐这种方法. 文件路径:/app/design/frontend/default/Your_T ...

  9. 混合app开发--js和webview之间的交互总结

    使用场景:原生APP内嵌套H5页面,app使用的是webview框架进行嵌套 这样就存在两种情况 1.原生app调用H5的方法 2.H5调用app的方法 分别讲解下,其实app与H5之间的交互式非常简 ...

随机推荐

  1. 数据库模型设计PowerDesigner

    Power Designer 是Sybase公司的CASE工具集,使用它可以方便地对管理信息系统进行分析设计,他几乎包括了数据库模型设计的全过程.利用Power Designer可以制作数据流程图.概 ...

  2. jstl 小总结 以及 jstl fn

    1.1.1 JSTL的使用 JSTL是JSP标准标签库.结合EL替换传统页面的<%%> * JSTL如果不会用.也是可以使用<%%>.但是一般在大公司使用JSTL.进入小公司. ...

  3. 【原创】js中input type=file的一些问题

    1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...

  4. .NET LINQ Set 运算

    Set 运算      LINQ 中的 Set 操作是指根据相同或不同集合(或集)中是否存在等效元素来生成结果集的查询操作. 方法 方法名 说明 C# 查询表达式语法 Visual Basic 查询表 ...

  5. Centos7设置关闭防火墙

    CentOS 7.0默认使用的是firewall作为防火墙,要想使用iptables必须重新设置一下. 1.关闭防火墙 [root@localhost ~]# systemctl stop firew ...

  6. eclipse 粘贴字符串自动添加转义符

    eclipse -> Window -> Preferences -> Java -> Editor -> Typing -> 勾选{Escape text whe ...

  7. Swift - 进度条(UIProgressView)的用法

    1,创建进度条 1 2 3 4 var progressView=UIProgressView(progressViewStyle:UIProgressViewStyle.Default) progr ...

  8. 【转载】 删除Win10“这台电脑”中的6个文件夹

    转载地址:http://www.myxzy.com/post-431.html Windows 8.1/windows 10对比windows 7都有一个变化,打开“这台电脑”(或“我的电脑”)后,“ ...

  9. C++静态库与动态库

    C++静态库与动态库 这次分享的宗旨是--让大家学会创建与使用静态库.动态库,知道静态库与动态库的区别,知道使用的时候如何选择.这里不深入介绍静态库.动态库的底层格式,内存布局等,有兴趣的同学,推荐一 ...

  10. node+fis3搭建

    node安装: 到https://nodejs.org/en/download/releases下载编译好的包, 如:https://nodejs.org/download/release/v4.4. ...