V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
run27017
V2EX  ›  分享创造

前端的小伙伴进来

  •  
  •   run27017 · 54 天前 · 2740 次点击
    这是一个创建于 54 天前的主题,其中的信息可能已经有所发展或是发生改变。
    分享一下我最近的开发的前端组件库,用 ActiveRecord 风格组织 API 调用:

    > https://github.com/yetrun/ar-front

    项目初期,不吝赐教。
    25 条回复    2021-09-12 12:33:46 +08:00
    xinyana
        1
    xinyana   54 天前 via Android
    无论如何,支持一下
    ss098
        2
    ss098   53 天前
    大概看了一下,前端与 Active Record 相关的类库不太多,想法很棒。

    一直觉得前端没有一个好的本地数据模型,在前端实现 Active Record 某些场景下对数据的处理逻辑可能会更清晰一点,期待能够实现 Relation 部分( hasOne,hasMany )。
    zitup
        3
    zitup   53 天前
    具体使用场景有什么呢
    run27017
        4
    run27017   53 天前
    @zitup 你好,关于使用场景,可以看一下这一节:[开发理念]( https://github.com/yetrun/ar-front#%E5%BC%80%E5%8F%91%E7%90%86%E5%BF%B5).
    run27017
        5
    run27017   53 天前
    @ss098 Relation 部分我目前还没太想明白,主要是后端接口太五花八门了,没有一套统一的标准。怎么统一定义和实现它还没想好。
    qin20
        6
    qin20   53 天前
    graphsql?
    crs0910
        7
    crs0910   53 天前
    唉,复杂度哪怕增加一点点都没动力。前端复杂度现在已经够呛了。
    molvqingtai
        8
    molvqingtai   53 天前
    想法不错,相当于把页面的 api fun 封装到 api 里面了,但是感觉带来复杂度比收益更大
    dax1
        9
    dax1   53 天前
    已赞
    shadowfish0
        10
    shadowfish0   53 天前
    感觉很有趣啊,文档也写的很好,赞一个
    run27017
        11
    run27017   53 天前
    @shadowfish0 Thank you
    run27017
        12
    run27017   53 天前
    @qin20 不是 GraphQL
    run27017
        13
    run27017   53 天前
    @molvqingtai 如果有时间的话,我去整个示例,会更清楚点
    theprimone
        14
    theprimone   53 天前
    TS 支持呢?
    shunia
        15
    shunia   53 天前
    理念和实现都很棒,感觉也有一些潜力,但是对 extend 里的 Vue 风格实在是喜欢不起来。。。

    一些建议:
    1. TypeScript 支持,仅我个人而言,没有 TS 支持的库项目我都不会尝试;
    2. attribute 里的 type 能不能换成 enum,用原生类型感觉会限制当前的实现,比如可以内置实现 ref:Car{ brand, color }, User{ car: Ref(Car) }。可能也限制了用户可能需要的动态扩展能力,比如自行扩展成 UUID,BigNumber 等;
    3. 实例方法里的 this 看的我很慌,如果想写成箭头方法咋整?
    4. 实例方法里,能不能做到只需要 return data,不用手写 this.attributes = data ?
    5. User 提供一个构造参数应该灵活一点: const user = new User({name, age}),实例里没提供这种用法,提供一个 object 的写法不容易漏属性;
    6. this.attributes = data 的具体作用是啥?如果把 save 实现在静态方法里:save(user) {},看起来也是可以的,这样是不是就既可以使用箭头方法,又不需要写 this.attributes = data ?
    yafoo
        16
    yafoo   52 天前 via Android
    支持,感觉在某些场景会很有用
    DrakeXiang
        17
    DrakeXiang   52 天前
    这些貌似 mobx/dva/rematch/recoil 这些都能做到啊。。
    run27017
        18
    run27017   52 天前
    @shunia 你的每个建议都挺好的,我会在后续的版本里考虑添加进去。由于你提的问题有些多,我还是一个一个来回复,一个问题没弄清楚之前就不继续回答另一个了。

    我按照回复起来从简单到难的顺序。5 和 6 可以一起作答。const user = new User({name, age}) 这种形式,嘿嘿,有的,文档开头的示例也有提到。这里就带来了 `this.attributes` 的用法了,你看看能不能接受。

    批量设置属性有两种形式,第一种是通过构造函数:

    const user = new User({ name, age })

    第二种是先从某处获得了模型实例,然后再批量设置属性:

    const user = User.find(id)
    user.attributes = { name, age }

    其实 this.attributes 就是 user.attributes 了,只不过是用在方法里,引用实例要用到 this.

    另一个问题是 save 实现在静态方法里,由于我所做的只是薄封装,具体实现还是需要用户自己来的,所以将 save 实现在静态方法是可以的,像这样

    static: {
    async save (user) {
    const attrs = await axios.put('/user', user.attributes)
    return new User(attrs)
    }
    }

    与实现为实例方法的比较

    actions: {
    async save () {
    const attrs = await axios.put('/user', this.attributes)
    this.attributes = attrs
    }
    }

    以及它们的调用比较:

    static => User.save(user)
    instance => user.save()

    我个人是倾向于后者了。至于每个人具体用哪种,见仁见智。
    hhjs
        19
    hhjs   51 天前
    后端的 Active Record 其实是减少了代码量,降低了复杂度。前端搞这套好像反倒增加了工作量及复杂度,相比增加的工作量和复杂度,带来的优势好像没有很明细
    run27017
        20
    run27017   51 天前
    @hhjs 由于现在实现的功能有限,所以几乎没有带来额外的复杂度。因为前端至少需要组织调用 API,不大可能在视图组件里充斥着各种 axios 调用,除非项目小到没几个接口要调的程度。既然都已经在组织 API 了,何不尝试一下用库简化工作量,并且还能带来额外的功能呢?

    如果觉得复杂了,问题可能出现在两点:

    1. Model.extend 语法让人感觉不自然了。用 Model.extend 是一来是迫不得已的选择,要考虑到实现的干净而没有考虑调用的自然;另一来是与 Vue.extend 很像,我原以为大家会接受这种方式。
    2. 我的文档写得不够好,让人觉得复杂了。

    我想问题可能出现在一吧。
    phpuser
        21
    phpuser   51 天前
    很多年前的 https://github.com/FacultyCreative/ngActiveResource 搭配 Rails 那是真好用。
    run27017
        22
    run27017   51 天前
    @phpuser 赞一个,那年的 Angular 是真的火
    luxTao
        23
    luxTao   45 天前
    感觉有点意思,已 star,我们也有做对 restfulApi 接口的封装,只是针对增删改查,没有你这么复杂
    run27017
        24
    run27017   42 天前
    @luxTao 感谢关注
    weddingSurger
        25
    weddingSurger   41 天前 via Android
    直接 start 毫不吝啬
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2233 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 05:44 · PVG 13:44 · LAX 22:44 · JFK 01:44
    ♥ Do have faith in what you're doing.