资讯专栏INFORMATION COLUMN

在做移动端开发的时候,一些应该知道的知识

Hegel_Gu / 1266人阅读

摘要:起因一天在群里面朋友问了一个这么一个问题看了之后自己梳理了一遍,在此和大家分享一下,这个就要从客户端开发的过程来讲了原生开发在移动互联网刚兴起的时候,最初的开发模式是通过或开发原生应用,有一些网页跳转的处理,使用之后增加了,安卓使用的是这个

起因

一天在群里面朋友问了一个这么一个问题:

看了之后自己梳理了一遍,在此和大家分享一下,这个就要从客户端开发的过程来讲了;

原生开发

在移动互联网刚兴起的时候,最初的开发模式是通过swift或java开发原生应用,有一些网页跳转的处理,ios使用UIWebView(ios8之后增加了WKWebView),安卓使用的是webview;这个时候业务模式还不是特别复杂,用户也没有那么多,迭代时间的的长短也不是特别强烈。 随着业务的发展,这种开发模式逐渐就出现了一下问题

业务逐渐变得庞大,原生开发需要更多的人员

业务变得更加复杂,多端的功能开发完全是重复的

ios审核发版的时间限制,可能只是一个小的UI的修改,都需要重新发版

hybrid (native+H5)

基于上面的这些困扰,出现了一类似PhoneGap、Ionic的hrbrid应用,他们的作用是把h5开发好的页面,通过打包封装处理到webview里面,最后浏览操作的其实还是h5,只不过这个过程h5可以调取一下原生的功能,而这个h5调用原生功能实现的底层概念叫做jsbridge,或者说jsbridge是native原生与h5通信实现的一个过程。而这PhoneGap、Ionic之类的应用的核心就是它们实现了这么一个过程,并且把接口暴露出来,上层h5调用就好;
简单来说,PhoneGap框架流程就以下三步:
1、js 通过prompt接口往anroid native 发送消息
2、android 本地拦截WebChromeClient 对象的 onJsPrompt函数,截获消息
3、android本地截获到消息以后,通过Pluginmanager把消息分发到目的插件,同时通过jsMessageQueue收集需要返回给js的数据;

引用网上的一张图,一起来看看PhoneGap底层框架类图~~

但是这个模式在取决于WebView的解析渲染效率,在头几年硬件还不死特别硬的时候,h5的渲染及交互不是特别友好,会出现卡顿;

RN、weex (DSL)

由于hybrid的开发成本一套多用和h5发版不需要审核的因素,facebook研究处理相应模式的框架,把对于性能影响的渲染的步骤做了处理,不管是RN还是Weex,他们的开发语言都是js、html、css,只不过在编译的时候,比如RN转换成了相应的Virtual DOM之后,在native的底层实现了一套把virtual DOM转换成原生组件的机制,这个过程是把virtual DOM转换成了类似JSON的语言形式,最后通过自己的解析模式给实现成native的组件,这个性能自然也就会好很多,但是这个实现类似的JSON,也可以叫做DSL,sql语句其实也会DSL,包括html也算是一套DSL语言。
而在ios里面有一个JavaScriptCore的框架,通过它就能实现JS和OC(通过它可以调用和渲染原生模块)交互

总结

架构的模式还在不断的演进,比如最近又流行起来了hybrid的模式。上面的几个问题通过这篇文章也做了个大概的简述,更加深入的东西,还需要不断学习;

欢迎关注玄说前端公众号,后续将推出系列文章《一个大型图形化应用0到1的过程》,此账户也将同步更新

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98487.html

相关文章

  • 基础 - 收藏集 - 掘金

    摘要:的语言的动态性意味着我们可以使用以上种数据类型表示变换过渡动画实现案例前端掘金以下所有效果的实现方式均为个人见解,如有不对的地方还请一一指出。 读 zepto 源码之工具函数 - 掘金Zepto 提供了丰富的工具函数,下面来一一解读。 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目标对象的属性。目标对象的同名属性会被源对象的属性...

    wuaiqiu 评论0 收藏0
  • HTML-CSS

    摘要:但是,从字体上来说雪碧图制作,使用以及相关,图文。由于采用了编译,所以能够保证在浏览器不支持标准布局的情况下,回滚到旧版本的,保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争,但是有一件事是确定的极大的提升了移动端 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 ...

    xiaokai 评论0 收藏0
  • HTML-CSS

    摘要:但是,从字体上来说雪碧图制作,使用以及相关,图文。由于采用了编译,所以能够保证在浏览器不支持标准布局的情况下,回滚到旧版本的,保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争,但是有一件事是确定的极大的提升了移动端 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 ...

    CHENGKANG 评论0 收藏0

发表评论

0条评论

Hegel_Gu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<