同步 AMP 的 on 和 bind 语法

[yenshih]

要解决什么问题

MIP 的 on 和 bind 语法与 AMP 有很大差距，急需跟上。

需要同步的功能：

• eventName:targetId[.methodName[(arg1=value, arg2=value)]]
  • 事件调用方式支持特定的参数名，并对类型敏感，如 foo='bar' foo=true foo=1 我们完全不支持这个功能，目前是直接传递字符串，由事件目标元素自行解析 是否要使用更贴近 JS 的调用方式？如 .method({ foo: 'bar' })
  • 支持引用 event 对象，如 foo=event.data
  • 同一事件的多目标调用使用 , 隔开，多事件使用 ; 隔开 目前我们都使用空格，可读性较差
  • 支持在组件中注册默认事件，methodName 可以省略
• 全局行为
  • show hide toggleVisibility 实现上是处理元素的 hidden 属性，这个属性带有 display: none !important; 的样式，toggleVisibility 的名字有些误导人
  • scrollTo(position: `top` | `bottom` | `center`, duration: number)
  • focus
  • toggleClass
• 全局事件
  • input-debounce
  • input-throttle
• 全局事件目标
  • AMP.navigateTo(url: string, target: '_blank' | '_top', opener: boolean) 实现存疑，已经有 viewer.open() 了，也需要考虑 <mip-shell> 的场景 url 还支持 AMP 的一系列宏定义 https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md
  • AMP.closeOrNavigateTo(url: string, target: '_blank' | '_top', opener: boolean) AMP 实现这个功能是为了多页的 “后退” 场景，似乎也跟 <mip-shell> 冲突
  • AMP.goBack() <mip-history> 有类似功能，可以修改其实现集成进来，或废弃 <mip-history>
  • AMP.scrollTo(id: string, position: `top` | `bottom` | `center`, duration: number) ease-scroll.js 中有 MIP 的 scrollTo() 实现，可以直接调用
  • AMP.setState() 与 MIP.setData() 类似，但支持引用 event 对象，我们可能需要一个 MIP.setState() 的别名
  • AMP.pushState() 与 AMP.setState() 类似，但会把 state 额外 push 到 history 的栈中，如果 history 有回退，则 <amp-state> 中的状态也会回退 一个 on 中只能有一个 setState 或 pushState，并且这两个在其他事件前优先触发
• <amp-state>
  • 通过 <amp-state> 上的 id 作为命名空间来引用数据 目前我们是合并所有 <mip-data> 的数据，都用 m 来引用，明显不如 AMP 的实现 有了命名空间后，甚至可以实现组件局部数据管理，如 this.state 和 this.setState()
  • 通过 src 属性远程获取数据
  • refresh 事件，重置 <amp-state> 的数据
  • 设置属性为 null 后可以移除该属性
  • AMP.printState()
• amp-bind
  • 类似 angular 的 [attr]= 单向数据绑定，还支持特殊的 [text] [class] [hidden] [width] [height]
  • 支持写受限制的 JS 表达式，功能比较强大，parser 通过 jison 从 BNF 文法生成的，具体功能可以看 https://amp.dev/documentation/components/amp-bind?format=websites#expressions
  • <amp-bind-macro> 实现表达式宏，可以复用绑定的表达式
  • 合理的绑定报错信息

描述一下你理想中的解决方案

描述你的备选方案

补充信息

• on 和 bind 分别代表事件驱动和数据驱动，如果冲突了怎么办？直接调用别的组件里的事件，导致两种数据来源，这是一种优秀的实践么？

[clark-t]

分工上我负责 on 语法解析升级和 MIP 大对象的方法实现，@yensih 负责 mip-bind 升级

on 目前事件的绑定和触发机制基本 OK，主要问题在于 on 表达式解析比较弱，比如 event.xxx 的传参，MIP.setData() 等方法对表达式的支持不好，所以 on 这块的升级重点主要是写个解析器，覆盖原有功能的同时，增加对 event 参数、算数表达式的解析，改成 String -> AST -> Function。如果可能的 话，最好能够实现解析规则的扩展，后续可以考虑 mip-script 直接在这个规则基础上进行扩充，减小 mip-script 体积。

功能

预计 on 语法即将支持的功能包括：

• 简单表达式支持
  • 计算表达式
  • 三元运算符
  • 部分全局函数以及成员函数（白名单控制）
• event 表达式，接收组件抛出的 Custom Event
  • 这里可能得考虑一下数据的隔离问题
• MIP.(navigateTo|goBack|scrollTo|setState) 等等（白名单控制）

需要考虑的问题

需要考虑对现有逻辑的兼容问题。目前 on 表达式在解析出方法调用时，会把括号中的内容（包括参数、逗号）的一整个文本作为唯一参数传入方法中由接收的方法进行解析，目前有限支持的 event 表达式直接将结果序列化成文本传入方法。所以需要考虑升级之后方法的参数设置问题。

我的想法是，第一参数保持字符串不变，方法的第二参数接收 AST 或者是直接计算好的结果。

[clark-t]

已上线