项目初衷

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

  • 请求时间长——一次 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. SVN 删除误上传到服务器的文件

    使用Axure软件的时候,不小心把一些无用的文档也提交到了SVN上了. 当更新服务器上的文件到本地,然后删除误提交的文件时,出现了一个错误,见下图:   错误:cannot verify lock o ...

  2. jstl catch if choose标签

    catch标签: catch标签用来处理异常 属性: * var :用来出现异常保存到的变量. 代码: <c:catch var="e"> <% int i = ...

  3. Java JVM类加载机制

    虚拟机的类加载机制是:JVM把描述类的数据从.class文件加载到内存,并对数据进行校验.解析.初始化,最终形成可以被JVM直接使用的Java类型. 加载.连接(验证.准备.解析).初始化.使用.卸载 ...

  4. Python~recursive function递归函数

    尾递归实现循环 def fact(n): if n==1: return 1 else : return n * fact(n-1) raw_input() 字符而非数字 unsupported op ...

  5. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  6. jquery 控件赋值

    input 文本框赋值$("#id").attr("赋值"); input 文本框清空$("#id").attr("") ...

  7. October 22nd Week 43rd Saturday, 2016

    Beware the barrenness of a busy life. 当心忙碌的生活荒芜了人生. Recently I was busy in debugging an equipment, I ...

  8. MySQL源码分析:源码文件结构及主要数据结构

    原文地址:http://blog.itpub.net/30186219/viewspace-1481125/BUILD: 内含在各个平台.各种编译器下进行编译的脚本.如compile-pentium- ...

  9. SpringMVC 常用注解(1)

    /**  * @RequestMapping 除了修饰方法 还可以修饰类  * 1).类定义处:提供初步的请求映射信息,相当于WEB应用的根目录  * 2).方法定义处,提供进一步的细分映射信息,相对 ...

  10. python操作mongodb数据库

    一.MongoDB 数据库操作 连接数据库 import pymongo conn = pymongo.Connection() # 连接本机数据库 conn = pymongo.Connection ...