V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xingo
V2EX  ›  程序员

花一个小时,用 36 行写了一个最简单的 js 双向绑定

  •  
  •   xingo · 2017-03-09 21:07:12 +08:00 · 3273 次点击
    这是一个创建于 2826 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    前几天看到这一贴说有没有只做双向绑定的框架,今天读完日语没啥事情,就用一个小时实现了一下这个简单的函数

    preview

    好评在 npm 上下载哦

    截图上没有表现出来的是 object.value 手动修改 也会使所有的 dom 刷新 value

    用的原理和 Vue 是一样的 稍稍参考了一下 Vue 的实现

    当然 github 在这里 https://github.com/xingoxu/twoWayBinding ,欢迎大力点星(逃)

    11 条回复    2017-03-10 13:14:55 +08:00
    qihboy
        1
    qihboy  
       2017-03-09 21:42:50 +08:00
    39 export default twoWay;

    明明是 39 行 /smile
    xingo
        2
    xingo  
    OP
       2017-03-09 21:47:28 +08:00
    @qihboy 空行去掉好伐啦(
    chemzqm
        3
    chemzqm  
       2017-03-09 22:22:13 +08:00
    曾经写过一个 https://github.com/chemzqm/reactive-lite
    还搞的各种文档和测试
    只是用了 react 后,再没管过它了
    fyibmsd
        4
    fyibmsd  
       2017-03-09 22:29:53 +08:00
    有什么用
    xingo
        5
    xingo  
    OP
       2017-03-09 22:31:27 +08:00
    @chemzqm 哇, 我这个只是写着玩一下的,试试自己能不能够实现双向绑定
    anuan
        6
    anuan  
       2017-03-09 22:39:02 +08:00
    老夫只用 jquery
    chemzqm
        7
    chemzqm  
       2017-03-09 23:17:13 +08:00
    @xingo #5 双向绑定写起来方便,但是灵活性和可控性太差了,还是基于 VirtualDom 的单向数据流更靠得住些
    xream
        8
    xream  
       2017-03-10 00:01:35 +08:00
    @anuan #6 想到那张神图
    markx
        9
    markx  
       2017-03-10 00:08:44 +08:00
    其实写得挺好的, 但是我还是忍不住想说一句,代码不换行读起来不舒服啊! minify 成一行岂不更好?
    xingo
        10
    xingo  
    OP
       2017-03-10 00:12:30 +08:00 via Android
    @markx 我一般是这么想的,如果匿名函数只有一句话,我是不愿意换行的, if 什么的也是一样 不过我刚发现我自己 forEach 那边应该不换行,怎么就换行了呢。。。拿 jsfiddle 写的 233
    KIDJourney
        11
    KIDJourney  
       2017-03-10 13:14:55 +08:00 via Android
    @fyibmsd 没什么用,除了业务什么都不要写最好。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1196 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 23:16 · PVG 07:16 · LAX 15:16 · JFK 18:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.