详解 Weex JS Framework 的编译过程-低调大师

详解 Weex JS Framework 的编译过程

2016-08-31 715

之前写了一篇文章《Weex 框架中 JS Framework 的结构》概述了 JS Framework 的整体结构，其中编译过程写的有些简略，这里再详细介绍一下。

一句话概括 JS Framework 的编译过程就是： 将 JS Bundle 转换成 Virtual DOM 发送到原生模块渲染。

这个过程涉及三种数据类型：JS Bundle 、Virtual DOM 、Vm 。

JS Bundle 是由 .we 文件转换过来的，会被视为代码而执行。
Virtual DOM 是描述页面结构的 JSON 数据，用于给原生模块发送消息。
Vm 是 View Model 的简写，属于 MVVM 结构中的一部分，会执行模板编译、数据绑定等操作。

简化版的 Vm 构造函数如下：

// html5/default/vm/index.js
function V

微信关注我们

原文链接：https://yq.aliyun.com/articles/59935

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Weex 框架中 JS Framework 的结构

Weex 具有移动端跨平台的特性，JS Framework 是其中比较关键的一层。首先来看一下 JS Framework 在 Weex 中的位置：从图中可以看出 Weex 整体的工作流程。首先开发者可以声明式的定义组件，形成 .we 文件，通过 weex-toolkit 提供的工具将 .we 文件转为 JS Bundle。JS Framework 接收并执行 JS Bundle 的代码，并且执行数据绑定、模板编译等操作，然后输出 json 格式的 Virtual DOM 传递给移动端，同时也提供了 callNative 和 callJS 接口，方便 JS Framework 和 Native 的通信。同样的一份 json 数据，在不同平台的渲染引擎中能够渲染成不同版本的 UI，这也是 Weex 可以实现动态化的原因。简而言之，JS

2016-09-01

811

这是 Weex Tips 系列文章中的一篇，汇总目录在这里。首先建议先看一下有关组件定义的官方文档，其中介绍了生命周期。在 Weex 项目里有个 issue 专门描述了 Weex 的生命周期，里面有几张很清晰的图，我这里只讲一下用法。如果想了解组件的编译细节可以参考：《详解 Weex JS Framework 的编译过程》。如果看完了上边的链接，对 Weex 生命周期的理解应该很到位了，可以简单总结成这么一张图：注：在新版本的 JS Framework（>0.15.6）中才支持 destroyed 生命周期。生命周期的用法 <script> module.exports = { data: {}, methods: {}, init: function () { con

2016-09-01

879

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。