Name: Password: Sign in
LiKy - 一个 Javascript MVVM 框架的实现 中的文章
  • Casual Introduction to LiKy
  • (伪)模型
  • 本文在 署名-非商业性使用-相同方式共享 3.0 版权协议下发布, 转载请注明出自 kyleslight.net

    Casual Introduction to LiKy

    LiKy 是什么

    这是在经过我几番推(an)广(li)之后被问到最多的问题。

    这玩意是一个知道的人在开口之前就无需赘述的东西(是的,贵圈的思维回路已经和外界不在一个次元了)。简单说 MVVM Library 可以让你在处理代码时只关心模型层的东西,然后把一切 handling the UI things 交给这个 Library 就好。所以现在非常多场景的任务(重数据与展示)可以被处理地异常轻巧与简单,以往那种非常脏且累的处理表单,显示表格,保持各处 UI 同步的工作现在一个做 Server 端的同学就可以完成。

    已经有一系列非常流行的 MV* Library/Framework 了,从五年前的 Angular (那个时候还是 MVC Framework),到三年前的 React 再到如今势头正盛的 Vue (以及它们异常快速的迭代版本与辅助工具)发展非常迅速。而 LiKy 是它们中新的一员。

    LiKy 的设计是怎样的

    LiKy 目前仍然是我的一个实验,它的想法最早来自于 Spine

    Spine 的作者写过一本 JavaScript Web Applications,从当时的角度比较详细地介绍了一个 MVC 库的设计与实现(虽然 Spine 已经几乎不再维护了)。 LiKy 的初始版本就是在 Spine 的基础上搭建的,包括 VM 继承,利用 Template 实现单向绑定,以及事件代理。

    从现在的角度来看 Spine 确实非常过时了:Spine 大量依赖 jQuery 与 jQuery Template;混入了很多今天看来并没有什么用的功能;给开发者的接口并不清晰与友好。为此在 Model 写完之后我就没有再继续参考这本书的实现了。

    现在 LiKy 的接口更多地参考了 React 与 Vue 这两个库。首先 React 的设计非常清晰,从 state 访问 model 与 setState 设置状态可以看出 keep the state tiny 的想法,将改变一次性收集起来然后 render 也是从这里面出来的;根元素绑定,自定义事件绑定,模板引擎语法的接口参考了 Vue ( Vue 的设计品味真的非常棒 )。

    虽然 LiKy 参考了这些流行框架好的想法,不过具体实现我还是按照自己的思路来,现阶段的 LiKy 主要由以下几个部分构成:

    • Class : 提供了类的继承;扩展实例与静态属性;方法代理
    • Persistence :提供了远程、本地数据持久化的能力
    • Model : 一个纯数据层,由 Class 产生;增加了静态属性,实例属性合并了 Persistence,增加了实例生命周期的各种钩子,增加了 state 和与之相关的方法接口
    • Selector :一个包装了浏览器原生接口的类 jQuery 接口,提供了 DOM 遍历,内容访问,替换与事件代理能力
    • Template : 一个专门为 LiKy 制作的模板引擎,提供了值替换 + 转义,循环,条件语句
    • ViewModel :LiKy 的核心;由 Model 产生,利用了 SelectorTemplate;提供了单/双向数据绑定与 DOM 事件监听的能力

    其中关于 ViewModel 的实现可以参考 这篇答案

    一开始 LiKy 依赖于 jQuery 与 Whiskers,但是我想保持 LiKy 的轻量与可定制,于是经过了一番探索后通过 SelectorTemplate 解除了依赖。最终的结果就是你看到了一个独立且仅有 13 KB 的库。

    所以我在做什么

    LiKy 无意于挑战目前竞争非常激烈的 MV* Library/Framework 巨头。今天凌晨 Vue 2.0 宣布了很多 激动人心的特性,我知道在我面前又横亘了一个无比强大且值得学习的对手。

    LiKy 初始的目标就是 Just For Fun;其次的目标是在这个过程中体会到这些 MV* Library/Framework 背后的想法与实现从而帮助自己学习(是的我得了一种不自己入手就无法完全理解这玩意的病);最后的目标是,如果确实有人从 LiKy 这个轮子上受到启发甚至玩的开心,当然是最好的事情。

    后续我要做什么

    后续我的首要目标是…毕设 =_=,一个没什么深度除了处理起来比较麻烦外不值一提的东西。

    再往后我想实现一个 Front-End Framework,这玩意的名字暂且叫 Uton-Like,已经列好了 提纲 。这是一个未来可能用于站点 Uton 的布局框架(至于 Uton 是什么 … =_=,它是 梧桐 这个残骸的新版本,一个集成文章分享与小组即时讨论的平台)。

    LiKy 也会继续,主要关注于 Bug 修复 & 性能提升,以及新平台 render 的可能性。

    以上 =_,=

    Copyright (c) 2014-2016 Kyles Light.
    Powered by Tornado.
    鄂 ICP 备 15003296 号