抖音小程序开发:ttml和传统html的区别

1 传统 Web 中 HTML 的角色

HyperText Markup Language:用来描述页面结构——标题、段落、图片、表单……

只负责“放什么元素、排在什么层级”,真正的行为靠 JS,视觉靠 CSS。


Hello Web

0

2 TTML 相对 HTML 的区别

能力 TTML 特有 举例对比
数据插值 {{variable}} 直接把 JS data 渲染进模板 {{count}}
事件声明式绑定 bindtap="add" 只写函数名,不内嵌 JS
条件 / 列表指令 wx:if wx:for {{item}}
组件标签集 等对接原生能力
安全沙箱 模板层不能直接写

B. TTML + TTJS 版(声明式 + 双向)



{{count}}
// counter.js
Page({
  data: { count: 0 },
  add() { this.setData({ count: this.data.count + 1 }); }
});

差别

  • TTML 无需直接改 DOM,调用 setData ➜ 框架自动把 count 更新到 {{count}} 位置。

  • 点击事件只写 bindtap=“add”,函数体放在 JS,模板更纯净。

模式 需求 更新流程
原生 DOM 手写 document.* 直接改 DOM(命令式)
小程序 TTML / React 等 写模板 {{count}} + this.setData({count}) 框架比对数据差异自动改视图(声明式)

优点:

逻辑与视图分离,代码量大幅减少;并且这样可以在框架内部做批量更新、虚拟 DOM diff,性能可控,且不易产生 “忘了同步 UI” 的 Bug

代价:
必须走框架限定的 API(如 setData),不能直接任意操作 DOM。

你可能感兴趣的:(JS小程序开发学习,html,前端,javascript)