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

详解 Weex JS Framework 的编译过程

2016-08-31 756

之前写了一篇文章《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-08-31

849

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

2016-08-31

916

资源下载

更多资源

腾讯云软件源

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

Spring

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

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。