推荐一款前端数据源管理工具 algeb

懂点代码的大叔 2020-10-30 09:47:48 ⋅ 141 阅读

ALGEB 简介

这是一个比较抽象的库,一开始可能比较难理解。我写它的初衷,是创建可响应的数据请求管理。在传统数据请求中,我们只是把携带ajax代码的一堆函数放在一起,这样就可以调用接口。但是这种方案不是很灵活,无法解决共享数据源,数据没回来时怎么办等等问题。我以前写过一个库databaxe,这个库抽象出了“数据源”这一概念,但是由于内置请求,导致无法灵活的适应各种框架。能否更底层更灵活一些?在研究react hooks之后,我决定做这个尝试,于是写出了这个库。

Algeb的核心理念和hooks一脉相承,简单的说,就是希望开发者可以在应用中以同步代码的形式进行写作,不用担心数据是否存在,只需要按照命令式的语句进行书写,就可以完成操作,而无需考虑数据本身。

安装步骤

安装命令

npm i algeb

API

import { source, query, setup } from 'algeb'

source(fn, default)

创建一个数据源获取对象获取器。

const Book = source(async function(bookId) {
  const res = await fetch(some_url).then(res => res.json())
  const { data } = res
  return data
}, {
  title: 'Book',
  price: 0,
})

我们得到的Book被成为“源”(Source),也就是获取数据的地方,在第一个函数中,你可以做任何操作,只要最终返回数据给我们即可。

  • fn 可以是同步函数,也可以是异步函数,但最终都会被当作异步函数来使用。
  • default 默认值,当fn还处于异步状态时,使用该值作为第一次计算的值进行计算。

query(Source, ...params)

获取源数据。

const [book, fetchBook] = query(Book, bookId)

我们得到一个只有两个值的数组,第一个值是当前Book的真实数据,第二个值是重新获取最新的数据的触发函数(该触发函数只触发请求,不返回结果)。

  • Source 由source或compose创建的源。
  • params 传给source或compose第一个参数函数的参数。

下文会在setup部分详细讲fetchBook的运行机制。

setup(fn)

执行基于源的副作用运算。

setup(function() {
  const [book, fetchBook] = query(Book, bookId)

  render(`
    <div>
      <span>${book.title}</span>
      <span>${book.price}</span>
      <button onclick="${fetchBook}">refresh</button>
    </div>
  `)
})

当执行该语句之后,setup中的函数会被执行。当fetchBook函数被调用,触发数据请求,当数据请求完成后,setup中断函数会被再次执行。 setup的fn必须是同步函数,在第一次执行query时,由于请求刚刚发出,会使用default作为值返回。

这就是 Algeb 的执行机制:通过触发数据源的重新请求,在得到新数据之后,重新执行setup中的函数,从而实现副作用的反复执行。

高级用法

import { compose, affect, select } from 'algeb'

compose(fn)

创建一个基于源的组合获取器,它的作用是在源的基础上封装对该源的更多定义,一般是结合query一起使用。

const Mix = compose(function(bookId, photoId) {
  const [book, fetchBook] = query(Book, bookId)
  const [photo, fetchPhoto] = query(Photo, photoId)

  const total = book.price + photo.price

  affect(() => {
    const timer = setInterval(() => {
      fetchBook()
      fetchPhoto()
    }, 5000)
    return () => {
      clearInterval(timer)
    }
  }, [book, photo])

  return { book, photo, total }
}) 

我们可以同时组合多个源,组合函数必须是同步函数。组合函数返回组合后的复杂对象,还可以在内部提供一些特殊逻辑,比如上面的代码中,规定了每5秒钟更新数据源。

在compose组合函数中,你可以使用hooks(下方详解),也可以query其他Compound Source。总之,compose组合其他源,同时可以使用hooks对不同源之间的重新计算逻辑进行逻辑处理。

它返回最终生成的复合“源”(Compound Source),它和source生产的源一样,可以被query使用,不同的是,query返回的第二个值(函数)将触发组合内所有被依赖源全部重新请求新数据。

const [mix, updateMix] = query(Mix)

当调用updateMix()时,Book和Photo这两个源的数据都会被重新请求。你也可以传入参数来决定只重新请求哪些源

updateMix(Book) // 只重新请求Book源

通过compose我们可以组合不同数据源,组合数据源的数据拉取规则,有利于复用一些特定规则。

affect(fn, deps)

第一个hooks函数,它用于在compose或setup函数中执行一个副作用,它的使用方法和react hooks的useEffect基本一致,但在第二个参数上稍有不同。

  • 如果不传deps,那么affect函数仅在compose函数第一次被执行时会执行
  • 如果传入数组,那么每次执行会进行deps对比(深对比,对比内部对象每个节点上但值),有差异时执行

select(calc, deps)

它用于在compose或setup函数中,采用缓存计算技术得到一个值,和react memo类似,它是否要重新计算值,取决于第二个参数deps是否发生变化。

  • 如果不传deps,那么select仅在第一次进行计算,之后永远使用缓存
  • 如果传入数组,那么每次执行会进行deps对比(深对比,对比内部对象每个节点上但值),有差异时才重新计算并缓存新值

React中使用

import { useQuery } from 'algeb/react'

function MyComponent(props) {
  const { id } = props
  const [some, fetchSome] = useQuery(SomeSource, id)
  // ...
}

Vue中使用

import { useQuery } from 'algeb/vue'

export default {
  setup(props) {
    const { id } = props
    const [_some, fetchSome] = useQuery(SomeSource, id)
    const some = _some.value
    // ...
  }
}

Angularjs中使用

const { useQuery } = require('algeb/vue')

module.exports = ['$scope', '$stateParams', function($scope, $stateParams) {
  const { id } = $stateParams
  const [some, fetchSome] = useQuery(SomeSource, id)($scope)
  $scope.some = some // { value }
  // ...
}]

Angular中使用

import { Algeb } from 'algeb/angular'

@Component()
class MyComponent {
  @Input() id

  constructor(private algeb:Algeb) {
    const [some, fetchSome] = useQuery(SomeSource, this.id)
    this.some = some // { value }
  }
}
 
推荐一款前端数据源管理工具 algeb

全部评论: 0

    我有话说:

    分享一个标星42.4k 的商城管理后台项目模板

    项目简介 mall项目是套电商系统,包括前台商城系统及后台管理系统,基于SpringBoot+MyBatis实现,采用Docker容器化部署。 前台商城系统包含首页门户、商品推荐、商品搜索、商品

    工具集001

      1.  Google项目管理工具 Tables   2. 终端 taskwarrior --- TODO List Taskwarrior is

    最全Mac工具

      MacTool Mac 开源免费工具汇总, 只罗列开源好用的。更全列表请参考awesome-mac 必备 Homebrew - 体验通过命令行安装 Mac 软件的工具(大部分是

    DataGear 1.13.1 发布,数据可视化分析平台

    DataGear 是数据可视化分析平台,使用Java语言开发,采用浏览器/服务器架构,支持SQL、CSV、Excel、HTTP接口、JSON等多种数据,主要功能包括数据管理、SQL

    DataGear 2.0.0 发布,数据可视化分析平台

    DataGear 是数据可视化分析平台,使用Java语言开发,采用浏览器/服务器架构,支持SQL、CSV、Excel、HTTP接口、JSON等多种数据,主要功能包括数据管理、SQL

    DataGear 2.3.0 发布,数据可视化分析平台

    DataGear 是数据可视化分析平台,使用Java语言开发,采用浏览器/服务器架构,支持SQL、CSV、Excel、HTTP接口、JSON等多种数据,主要功能包括数据管理、SQL

    「开源资讯」数据管理与可视化分析平台,DataGear 1.6.1 发布

    数据齿轮(DataGear)是数据库管理系统,使用Java语言开发

    WeCube 2.7.1 发布,站式 IT 架构管理和运维管理工具

    WeCube简介 微众银行在分布式架构实践的过程中,发现将银行核心系统构建于分布式架构之上,会遇到一些与传统单体应用不同的痛点(例如,服务器增多,部署难度大;调用链长,全链路跟踪困难; 系统复杂,问题定位时间长等),在逐步解决这些痛点的过程中,总...

    Netbox 2.9.10 发布,IP 地址与数据中心管理工具

    NetBox 是一个 IP 地址管理(IP address management,IPAM)和数据中心基础设施管理(data center infrastructure management

    Netbox 2.11.1 发布,IP 地址与数据中心管理工具

    NetBox 是一个 IP 地址管理(IP address management,IPAM)和数据中心基础设施管理(data center infrastructure management

    数据结构

    结构,简单的理解就是关系。严格点说,结构是指各个组成部分相互搭配和排列的方式。在现实世界中,不同数据元素之间不是独立的,而是存在特定的关系,我们将这些关系成为结构。 数据结构:是相互之间存在

    推荐 RabbitMQTest 性能测试工具

    软件简介 RabbitMQTest 用于 RabbitMQ 性能测试,可提供对单个队列写入,消费以及对多个队列进行同时读写操作的测试. 可配置连接数,通道数 GitHub: https://github.com/jc...

    Fes.js v0.4.1 版本发布,套优秀的中后台系统前端解决方案

    Fes.js 是套优秀的中后台前端解决方案。提供初始项目、开发调试、Mock接口、编译打包的命令行工具。内置布局、权限、数据字典、状态管理、存储、Api等多个模块。以约定、配置化、组件化的设计思想

    KeePass 2.47 发布,密码管理工具

    KeePass 2.47 发布了。KeePass 是密码管理工具,可以帮助用户记住电子邮件、主页 FTP、论坛等用户名和密码。KeePass 将密码保存在高度加密的数据库中,不让其他人和其他应用

    WeCube 2.7.0 版本发布,站式架构和运维管理工具

    WeCube简介 微众银行在分布式架构实践的过程中,发现将银行核心系统构建于分布式架构之上,会遇到一些与传统单体应用不同的痛点(例如,服务器增多,部署难度大;调用链长,全链路跟踪困难; 系统复杂,问题定位时间长等),在逐步解决这些痛点的过程中,总...

    【开源资讯】phpMyAdmin 4.9.7 和 5.0.4 发布,可视化 MySQL 管理后台

    phpMyAdmin 4.9.7 和 5.0.4 发布了。phpMyAdmin 是一个非常受欢迎的 web MySQL 数据库管理工具。它能够创建和删除数据库,创建/删除/修改表格,删除/编辑/新增

    推荐功能强大,开源免费的H5可视化编辑器

    H5-Dooring 是功能强大,开源免费的H5可视化页面配置解决方案,致力于提供套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主, 后台采用nodejs开发. 预览

    工具集002

      文件对比 https://www.diffchecker.com/excel-diff 快速找出类似文件的不同之处。