可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · •...
Transcript of 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · •...
![Page 1: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/1.jpg)
可 Web 编程的NativeUI 设计与实现
——张袁炜
![Page 3: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/3.jpg)
About Me
• @张袁炜
• 直达号、⺴⽹网址导航、百度⾳音乐
• 前端、Node.js、Android
• Arduino、RaspberryPI
• https://github.com/zhangyuanwei
![Page 4: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/4.jpg)
Outline• ⼀一个 Hybrid App 的进化史
• Native UI 实现原理
• 架构设计
• UI构建
• 布局系统
• Web 样式⽀支持
• 事件机制
• 性能优化
• 前端框架设计
![Page 5: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/5.jpg)
⼀一个App的进化
![Page 6: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/6.jpg)
分享
⽀支付摄像头
地理位置
⼀一个App的进化
![Page 7: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/7.jpg)
分享
⽀支付摄像头
地理位置
⼀一个App的进化
体验
交互 动画性能
![Page 8: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/8.jpg)
⼀一个App的进化
![Page 9: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/9.jpg)
⼀一个App的进化
![Page 10: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/10.jpg)
⼀一个App的进化
单⻚页⾯面应⽤用?
⼿手势跟随?
CSS3 硬件加速?
改 WebKit ?
![Page 11: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/11.jpg)
⼀一个App的进化
WebView
WebView
WebView
Native
![Page 12: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/12.jpg)
background page // 系统原⽣生事件, // 新activity创建的时候触发webview_regist // activity销毁的时候触发webview_unregist // var _events = ['webview_register', var bridge = window.lc_bridge; var webViews = {}; var status = { ACTIVE: 1, PAUSED: 2, STOPPED: 3, KILLED: 0 }; // 监听activity webView创建事件 document.addEventListener('webview_reg if (!(event.origin in webViews)) { webViews[event.origin] = { origin: event.origin, status: status.ACTIVE, data: event.data }; } });
⼀一个App的进化
WebView
WebView
WebView
![Page 13: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/13.jpg)
内存泄露
代码重构
多⻚页⾯面通讯
![Page 14: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/14.jpg)
理想架构?
• 性能好(媲美Native)
• 定制性强(媲美Web)
• 学习成本低(最好为零)
![Page 15: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/15.jpg)
⻚页⾯面增强
• 底层为 WebView
• 覆盖透明 Native 组件层
• Native 组件替换 Web 组件WebView
Native
![Page 16: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/16.jpg)
⻚页⾯面增强
![Page 17: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/17.jpg)
⻚页⾯面增强
是否有Native
提取数据/样式
创建 Native 组件
⻚页⾯面加载
结束
初始化组件交互
隐藏 Web 组件
![Page 18: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/18.jpg)
Blend UI 系统架构
Native
Javascript APIZepto
Widget Factory
Title Tab Dialog Toast …
Javascript <-> Native bridgeBrowser
App
![Page 19: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/19.jpg)
Blend UI 系统架构
Native
View Text TextInput Image …
Javascript <-> Native bridge
Queue
Element Animation
View Text TextInput Image … AlphaAnimation …
AlphaAnimation …
Title Tab Dialog Toast …
![Page 20: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/20.jpg)
Dialog
UI 构建
提⽰示信息
提⽰示内容
确定 取消
![Page 21: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/21.jpg)
UI 构建
提⽰示信息
提⽰示内容
确定 取消
![Page 22: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/22.jpg)
UI 构建
提⽰示信息
提⽰示内容
确定 取消
View
View ViewView
Text Text
Text
View
Text
View
![Page 23: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/23.jpg)
Javascript <-> Native bridge
UI 构建createView("tag":string, "type":string, “config”:object) 根据给定的 config 配置,创建⼀一个类型为 type 的基础 GUI 组件,并指定 tag。
addView("parentTag":string, "childTag":string, “index”:number) 添加 childTag 所指定的 View 到 parentTag 所指定 View 的 index 位置。
removeView("parentTag":string, "index": number) 从 parentTag 所指定 View 删除 index 位置的⼦子 View。
updateView("tag":string, "type":string, “config”:object) 更新 tag 所指定的 View。
![Page 24: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/24.jpg)
Blend UI 系统架构
Native
View Text TextInput Image …
Javascript <-> Native bridge
Queue
Element Animation
View Text TextInput Image … AlphaAnimation …
AlphaAnimation …
Title Tab Dialog Toast …
![Page 25: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/25.jpg)
Blend UI 系统架构
Native
Javascript <-> Native bridge
Tag Map View Tree CssNode Tree
View Text TextInput
Image AlphaAnimation
CssNode
Android View System
BorderDrawable
![Page 26: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/26.jpg)
CSS LayoutCssNodepublic void addChildAt(CSSNode child, int i) public void removeChildAt(int i)
public void setFlexDirection(CSSFlexDirection direction) public void setJustifyContent(CSSJustify justifyContent) public void setAlignItems(CSSAlign alignItems) public void setAlignSelf(CSSAlign alignSelf) public void setPositionType(CSSPositionType positionType) public void setWrap(CSSWrap flexWrap) public void setFlex(float flex) public void setMargin(int spacingType, float margin) public void setPadding(int spacingType, float padding) public void setBorder(int spacingType, float border) public void setPositionTop(float positionTop) public void setPositionBottom(float positionBottom) public void setPositionLeft(float positionLeft) public void setPositionRight(float positionRight) public void setStyleWidth(float width) public void setStyleHeight(float height)
![Page 27: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/27.jpg)
CSS Layout
public void calculateLayout() public boolean hasNewLayout() public void markLayoutSeen()
public float getLayoutX() public float getLayoutY() public float getLayoutWidth() public float getLayoutHeight()
CssNode
![Page 28: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/28.jpg)
CSS LayoutCssNode
View
View
Text
View
Text
View
View View
Text Text
Node
Node
Node
Node
Node
Node
Node Node
Node Node
![Page 29: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/29.jpg)
CSS LayoutCssNode
flex:1 border:1 flexDirection: column
border:1 justifyContent: center
Node
Node
Node
Node
Node
Node
Node Node
Node Node
border:1 justifyContent: space-between
![Page 30: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/30.jpg)
CSS LayoutCssNode
Node
Node
Node
Node
Node
Node
Node Node
Node Node
calculateLayoutx:0y:0width:400height:300
x:1y:1width:398height:40
x:1y:260width:398height:42
https://github.com/zhangyuanwei/CSSLayout
![Page 31: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/31.jpg)
Blend UI 系统架构
Native
Javascript <-> Native bridge
Tag Map View Tree CssNode Tree
View Text TextInput
Image AlphaAnimation
CssNode
Android View System
BorderDrawable
![Page 32: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/32.jpg)
Border Drawable
![Page 33: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/33.jpg)
Border Drawable
![Page 34: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/34.jpg)
BorderDrawable
Border Drawable
https://github.com/zhangyuanwei/BorderDrawable
![Page 35: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/35.jpg)
Blend UI 系统架构
Native
Javascript <-> Native bridge
Tag Map View Tree CssNode Tree
View Text TextInput
Image AlphaAnimation
CssNode
Android View System
BorderDrawable
![Page 36: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/36.jpg)
Blend UI 系统架构
Native
View Text TextInput Image …
Javascript <-> Native bridge
Queue
Element Animation
View Text TextInput Image … AlphaAnimation …
AlphaAnimation …
Title Tab Dialog Toast …
![Page 37: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/37.jpg)
事件机制Javascript <-> Native bridge
webView.loadURL(“javascript:XXXX”);
(function(){ var event = document.createEvent(“Event");
// 事件固定名称为 "boost" ,⽅方便 Js 统⼀一监听 event.initEvent("boost", false, false);
// 事件数据 event.data = someData;
// 事件源的 Tag event.origin = “originTag";
// 具体的事件类型 event.boostEventType = "touchend"; document.dispatchEvent(event); })();
![Page 38: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/38.jpg)
事件机制Element
document.addEventListener("boost", function (e) {
var target = getElementByTag(e.origin); if (!target) { return; } assert(target instanceof Element, target);
var event = { type: e.boostEventType, target: target, data: e.data, };
target.dispatchEvent(event); }, false);
![Page 39: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/39.jpg)
Blend UI 系统架构
Native
View Text TextInput Image …
Javascript <-> Native bridge
Queue
Element Animation
View Text TextInput Image … AlphaAnimation …
AlphaAnimation …
Title Tab Dialog Toast …
![Page 40: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/40.jpg)
Queue
性能优化var view = boost.createElement("VIEW"); view.style.position = "absolute";view.style.top = 100;view.style.left = 100;view.style.width = 200;view.style.height = 200;view.style.backgroundColor = "#ff6600"; var text = boost.createElement("TEXT"); text.style.color = "#000000";text.style.fontSize = 20;text.value = "hello world"; view.appendChild(text);boost.rootElement.appendChild(view);
![Page 41: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/41.jpg)
Queue
性能优化var view = boost.createElement("VIEW"); // createView view.style.position = "absolute"; // updateViewview.style.top = 100; // updateViewview.style.left = 100; // updateViewview.style.width = 200; // updateViewview.style.height = 200; // updateViewview.style.backgroundColor = "#ff6600"; // updateView var text = boost.createElement("TEXT"); // createView text.style.color = "#000000"; // updateViewtext.style.fontSize = 20; // updateViewtext.value = "hello world"; // updateView view.appendChild(text); // addViewboost.rootElement.appendChild(view); // addView
![Page 42: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/42.jpg)
Queue
性能优化
addViewcreateViewupdateViewupdateViewcreateView
Timer
updateView
callQueue
![Page 43: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/43.jpg)
Queue
性能优化function queue(callback) { var list = []; var running = false;
function flush() { running = false; callback(list); list = []; }
return function (cmd) { list.push(cmd); if (!running) { setTimeout(flush, 0); running = true; } }; }
![Page 44: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/44.jpg)
Queue
性能优化
addViewcreateViewupdateViewupdateViewcreateView
Timer
updateView
callQueue
![Page 45: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/45.jpg)
Queue
性能优化
addViewcreateViewupdateViewcreateView
Timer
updateView
callQueue
![Page 46: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/46.jpg)
callQueue
window.lc_bridge.callQueue("commands": jsonString);
[ // 第⼀一个命令 { "tag": string, // 需要调⽤用函数的⺫⽬目标 Tag "method": string, // 函数名 "args": [ // 参数列表 object, // 参数 1 object, // 参数 2 ... ] },
// 第⼆二个命令 { ... },
// ... ]
Queue
性能优化
![Page 47: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/47.jpg)
Queue
性能优化
addViewcreateViewupdateViewcreateView
Timer
updateView
callQueue
![Page 48: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/48.jpg)
Js
性能优化
addViewcreateViewupdateViewupdateViewcreateView
addViewcreateViewupdateViewupdateViewcreateView
Native
反射
![Page 49: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/49.jpg)
性能优化
addViewcreateViewupdateViewupdateViewcreateView
提取
switch (methodId) { case 80: addView(); break; case 81: createView(); break; case 82: updateView(); break; default: break;}
![Page 50: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/50.jpg)
Blend UI 系统架构
Native
View Text TextInput Image …
Javascript <-> Native bridge
Queue
Element Animation
View Text TextInput Image … AlphaAnimation …
AlphaAnimation …
Title Tab Dialog Toast …
![Page 51: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/51.jpg)
Dom API 模拟var view = boost.createElement("VIEW");
view.style.position = "absolute";view.style.top = 100;view.style.left = 100;view.style.width = 200;view.style.height = 200;view.style.backgroundColor = "#ff6600";
boost.rootElement.appendChild(view);
var text = boost.createElement("TEXT");
text.style.color = "#000000";text.style.fontSize = 20; text.value = "hello world";
view.appendChild(text);
Dom API模拟
Style 属性
![Page 52: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/52.jpg)
事件模拟view.addEventListener("touchend", function (event) { text.value = "doun't touch me!"; view.style.top = Math.random() * 400; view.style.left = Math.random() * 400; },false);
Dom事件
![Page 53: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/53.jpg)
HTML & CSS 解析
类 HTML ⽀支持CSS 样式⽀支持
![Page 54: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/54.jpg)
CSS 选择器实现
jQuery/Zepto⽀支持
![Page 55: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/55.jpg)
前端框架
Native
NativeObject
EventTarget
NativeElement
View Text TextInput Image … AlphaAnimation …
Title Tab Dialog Toast …
Element
CustmerElement
StyleSheet
XmlParser StyleParser jQuery/Zepto Widget
Selector
![Page 56: 可 Web 编程的NativeUI 设计与实现velocity.oreilly.com.cn/2015/ppts/zhangyuanwei.pdf · • 前端、Node.js、Android ... 个 App的进化 ... XmlParser StyleParser jQuery/Zepto](https://reader033.fdocuments.net/reader033/viewer/2022042400/5f0f2b717e708231d442d4bc/html5/thumbnails/56.jpg)
Thanks