当Weex遇上Vue.js 2.0

2020-02-27 298浏览

1.当 Weex 遇上 Vue.js 2.0 马天翼（早弦）
2.● 男 ● 1994 ● 爱好: 女 ● 国立武汉大学 ● @weibo:马天翼mfe ● 阿里巴巴单身伪前端开发
3.
4.相遇之前 weex 1.0 时代
5.总体流程 .we 指令通信编译 bundle .js iOS & Android engine 解析与执行页面渲染 js framework weex 页面
6.Bundle 编译 webpack 打包
7.为什么使用 .we 文件而不是直接写 .js 文件？ 1. 我们的用户群 2. 预处理的能力主要是还是因为简单易用。
8.JS Framework 1. 2. 3. 如何解析 Bundle 字符串？如何将内容映射到内存模型？哪些信息要与 Native 进行通信？
9.解析 Bundle ● ● ● eval new Function Native new Function
10.内容映射到内存模型改变宽高滚动行为表单输入 MVVM 行为结果
11.与 Native 通信增加元素、调整元素普通行为结果 Native 请求数据、打开视频需要反馈的行为结果 Native 回调
12.渲染方式 append tree or node 首屏 tree ，非首屏 node 商品列表的展示？游戏场景的展示？视频组件的展示？
13.与 Native 通信增加元素、调整元素普通行为结果 Native 请求数据、打开视频需要反馈的行为结果 Native 回调
14.任务中心 TaskCenter 普通参数 MVVM 任务分发 Native 函数参数任务中心回调
15.总体流程 .we 指令通信编译 bundle .js iOS & Android engine 解析与执行页面渲染 js framework weex 页面
16.相遇之后 weex 2.0 时代
17.一个 .vue 文件的骄傲 .vue 文件渲染成 weex 页面
18.总体流程 .vue 编译 bundle .js 解析与执行 vue 2.0 core weex runtime 指令通信 iOS & Android engine 页面渲染 weex 页面
19.Bundle 编译差异 render function vue-loader
20.与 web 版本 vue 2.0 的差异点 ● DOM ● BOM ● Layout ● scoped ● scroll ● background-image ● 适配问题
21.DOM & BOM ● 不支持 DOM 操作 ● 仅支持部分事件类型 ● 不支持事件冒泡 ● 没有 window、 document、screen、 history、location、navigator 等对象
22.DOM & BOM ● 不支持 DOM 操作 ● MVVM 大法好！ ● 仅支持部分事件类型 ● 未来会有更多 ● 不支持事件冒泡 ● 新版本已经支持 ● 没有 window、 document、screen、 ● 使用 weex.config 或者内置模块 history、location、navigator 等对象
23.Flexbox ● Weex 官方指定布局系统 ● 规范明确 ● 布局适用大部分情况 ● 面向未来
24.其他差异 ● 样式作用域默认是 scoped ，即只在当前组件生效 ● 只有 scroller 组件默认有滚动效果 ● 不能设置背景图 ● 与 Native 原生组件共存的适配问题
25.内存差异 ● web 时代，内存能吃吗？ ● weex 时代，内存够吃吗？
26.内存问题点开几次页面以后，App 崩溃了，一脸懵逼？需要探测移动端 js 引擎的内存工具！
27.内存小课堂 native 内存 jscore 内存 jsfm 内存
28.内存小课堂 Global object native 内存 object object object
29.苹果爸爸赐给我们的内存工具 ● macOS Safari 新版 ● iOS 10 以上 ● 本地构建的 App，非商店下载https://webkit.org/downloads/
30.
31.
32.
33.
34.全世界都羡慕我们 ——Vue.js 谢谢