Web 前端 MV* 框架模板语法设计

2015-03-23 12:02:00 +08:00
 vilic

正在为自己的 MV* 框架 Drop 设计 0.2 版的模板语法. 0.1 版因为时间比较紧迫, 最初的设计和实现总共只用了十来天, 就用到了项目上, 发现了不少问题. 0.2 版希望能较好地解决, 于是慢慢在推敲相关设计, 并参照了 Angular 2 (不过 Drop 本身 decorator 的概念也和 Angular 的 directive 有相似之处).

目前相关内容都是放到 issue 里的, 有兴趣的同学可以看看 0.2 版介绍草稿 (英) 来了解还在设计中的 Drop 0.2 版的语法. 最重要的是, 有兴趣的同学可以参与到初期设计中来.

造这个轮子一方面是因为不大有耐心阅读别人的源码 (得治), 造成对诸如 Angular 之类的框架没有底, 不知道内部实现的瓶颈在哪儿, 用起来不安心 (说到这儿想起之前有看到过一文, 建议标注 API 开销大小, 还是挺有用的). 另一方面还是因为对现有的框架不是很满意. (比如为什么要双大括号?)

Angular 来说, 在 Angular 2 的宣讲里其实已经提到了很多 Angular 1.x 的问题, Angular 2 也解决了多数提到的问题, 但有的问题可能还不是很对极个别人的胃口 (比如我).

举个例子:

Angular 1.x, ng-something="..."... 是语句还是表达式, 是由编写 directive 的人决定的, 这样容易给使用者带来困惑. 于是在 Angular 2 中, 使用了 [属性]="表达式"(事件)="语句" 这样的形式. 挺好, 但是感觉还不够一般化.

于是在 Drop 0.2 版中, 我暂且想到这样一种形式, 使用一个符号来区分表达式和语句:

[*click doSomething]
<div>click me!</div>

[*click :doSomething()]
<div>click me!</div>

<!-- 或者另一种风格 -->
<div *click="[doSomething]">click me!</div>
<div *click=":doSomething()">click me!</div>

欢迎在 0.2 版介绍草稿 (英) 等 issues 下参与讨论, 提供使用案例或者语法改进 (虽然估计评论区依旧会空空如也 T-T).

2697 次点击
所在节点    程序员
6 条回复
WildCat
2015-03-23 12:08:29 +08:00
有 React 了……别造轮子了
vilic
2015-03-23 12:21:36 +08:00
@WildCat React 挺好的, 但是 Drop 不是 React 的轮子.
cdffh
2015-03-23 12:24:25 +08:00
帮老万顶
adjusted
2015-03-23 13:12:04 +08:00
没virtual Dom现在好意思叫框架,纯TX
tabris17
2015-03-23 13:50:39 +08:00
自己用自己爽就可以了,反正我是不会去重复学习这些所谓的模板的
vilic
2015-03-23 14:12:50 +08:00
@adjusted Virtual DOM 只是内部实现方式, 不知道你是从哪里看出来没有用到类似技术的? 另外有没有 Virtual DOM 和是不是框架有半毛钱关系?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/178763

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX