不用 Vue 语法怎么写 Weex

## slide.md

      
          Raw
        
        
              slide.md
            
          
    不用 Vue 语法怎么写 Weex

Weex Native DOM API 介绍

关于我

ChenYong(题叶)
架构机动组
FP 语言


Weex 是什么
一套构建高性能, 可扩展的原生应用跨平台开发方案.
用 Web 技术在 Native 平台写轻量的快速迭代的页面. 官方推荐使用 Vue 语法.

需要 Vue 比更多的框架

平台需要生态多样性
为了调试等等的方便, 需要有更底层的 API
React 用户数量也很多


Weex 怎样工作
架构图 http://weex.apache.org/images/flow.png
事件 http://wx4.sinaimg.cn/large/62752320ly1fbnuhuh6zmj20zk0qodko.jpg

JS Framework
// { "framework": "Vue" }

// { "framework": "Rax" }

// { "framework": "Legacy" }

// { "framework": "Vanilla" }

默认 Legacy 模式

Framework
打包在 Weex SDK 当中的框架:

Vue
Rax(React)
Legacy(.we)
Vanilla


Vanilla Framework
没有框架, 类似 jQuery
https://github.com/alibaba/weex/blob/dev/examples/vanilla/index.js
https://github.com/yong-chen04/minimal-weex

Native DOM API
http://weex.apache.org/cn/references/native-dom-api.html

Document 方法:
createElement(tagName: string, props: Object?): Element

createComment(text: string): Comment

createBody(tagName: string, props: Object?): Element

fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)

destroy()


Element 类
new Element(type: string, props: Object?)

appendChild(node: Node)

insertBefore(node: Node, before: Node?)

insertAfter(node: Node, after: Node?)

removeChild(node: Node, preserved: boolean?)
clear()


DOM 属性
setAttr(key: string, value: string, silent: boolean?)

setStyle(key: string, value: string, silent: boolean?)

addEvent(type: string, handler: Function)

removeEvent(type: string)

fireEvent(type: string, e: any)


全局变量

document
weex(没有更新)

由 Weex runtime 进行初始化.

DOM 操作~

Todolist 示例
https://segmentfault.com/a/1190000008726905

展望

类库的开发和调试, 最小重现案例
对于特殊的操作, 可以通过 DOM 操作来自己完成
必要的情况下自行开发框架


Thanks.