造轮子 {Drop} 心得, 因为 {{Angular}} 和 {{Ember}}

欢迎关注, 当然现在还不怎么能投入生产...

最近重构自己的手机 Web 应用 (词焙), 在选择框架时犯了迷糊, 然后一般自己犯迷糊的时候, 就会跟着心情走, 造轮子又是调剂情操的好方式.

为什么要写 Drop? 原因很傻, 但是嘿嘿嘿.

Drop 的核心思路 - 修饰器 (Decorators)

其实最开始的想法跟这个一点边也没有, 两年前写了一篇文章关于 "动态" 模板的憧憬阐述了下三年前的想法. 思路其实和 Ember 类似, 组件, 以至于后来看到 Ember 的时候还感到很亲切.

但是... 现在比较赶时间, 我需要尽快做出能够用到下一代词焙上的框架 (呵呵呵需求这么急我还不用现成的也真的够了), 那么多嵌套看起来都头大了... 怎么破?

两点: 1. 远离嵌套; 2. 把重活儿交给浏览器做.

在主体思想的引道下, 决定了 Drop 的模板风格:

{#modifier abc}
{@attribute "value"}
{%processor "value"}
<!-- 还在考虑再加一两种, event 和类似于 processor 但是不修饰任何元素的修饰器 -->
<div>被修饰的元素</div>

解析起来简直爽翻了, 好吧其实也没那么爽, 为了能够准确判断字符串/正则等, 专门翻了 ECMA 标准挨个把几种字面量的正则写出来了, 实在不能看, 很长很长...

不过解析思路倒是非常简单的, 首先替换每一个修饰器为 <drop type="xxx" name="yyy">zzz</drop> 这样的字符串, 然后 innerHTML, 然后 getElementsByTagName.

能自定义吗? 这年头自定义都不能够那说啥! 不仅可以自定义还可以覆盖原有修饰器.

原有顺手写的修饰器可以参考 https://github.com/vilic/drop/blob/master/lib/decorators.ts (哦哈哈, 忘了说是 TypeScript 写的.)

Modifier 是最特殊的修饰器, 因为它可以对当前 scope 进行操作. 典型的应用是 #each, #scope. 前者很好理解咯, 循环数组用的, 后者是修改当前 scope 用的, 算是 Modifier 的最小应用.

数组操作是个很痛苦的事情, 为此前些天刚写好第一个版本很快又推到重来过一次. 今天终于写好了 insert 和 remove, 虽然现在的数据操作还很难用, 之后会增加 Helper.

绑定属性啦... 从此告别 ng-xxx.

输出文本或者 HTML 啦...

这个是最常规的修饰器了, 一般都靠它. 不过也顺手搞了一些奇怪 (但是实用) 的用法, 比如:

<!-- 在当前 scope 添加一个名叫 abc 的值, 初始化为 123. -->
{%var abc = 123}
{abc}

当然, 你也可以在 decorators.ts 文件中找到这个 Processor 的定义.

其实很容易理解了, 类似于作用域的一些个东西. 为了避免性能问题, 在 Decorator 初始化的时候, 会计算出其依赖的表达式的完整键值, 如果是数组元素, 则替换为一个类似 ":123" 的 ID, 原因不说了, 数组操作又是一把老泪.

这次造轮子, 自己还是挺满意的, 也乐在其中. 这几天妹子都不开心了, 觉得我太... 果然还是得做这种实际意义不是很大的事情才能让自己全身心地投入其中.

不过由于 Drop 还在很早期很早期的阶段, 节制写这篇文章的时候连 %if 都没有 (不过很快就有了哈哈哈). 我觉得还是很有潜力可以挖掘的, 虽然这中间免不了数次重构... T-T

欢迎大家关注 Drop 这个小项目, 也期待它能有成熟的时候.

顺便推荐下另外一个已经没有更新的项目, 因为现在已经有 TypeScript, 也基本用不上它了. 不过倒是一个表现了 JS 可塑性的好玩具, 也算是我为数不多的非造轮子的项目之一. http://vilic.github.io/vejis

扫码关注w3ctech微信公众号