npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sugo-store

v0.3.0

Published

state manager

Downloads

41

Readme

Build Status npm version

概述

Store是一个JavaScript状态管理器,主要特性如下:

  • 任意组合多个action,实现业务流程控制
  • Model独立,高可复用,通常一个Model只用定义一次,可在整个项目中使用
  • 单独的ViewModel,与Model完全隔离
  • Collection相关操作
  • Validator

Store致力于解决的问题

流程控制

Store认为:

  • 业务流程是有序或独立的,比如A->B->CA|B|C,一旦业务确定,不太可能出现C->A->B这样乱序的触发顺序。
  • 在action遵从最小粒度设计原则的情况下,一定会出现一个业务流程需要多个action组合完成。 所以Store可以一次派发多个action. 如:store.dispatch([{type: 'action a'}, {type: 'action b'}])
  • 可能需要知道当前派发的action执行结果,根据结果来执行下一步操作。所以为dispatch函数增加了callback参数。

重拾在mvvm框架大规模普及下遗失的model

由于MVVM可以极方便的将model映射到view,所以很多项目中并没有model的存在,而是将接口数据转换后直接写入到view model。 但在大一些项目中,model数以百计,接口数以千计,如果还是以接口->view model这样的数据管理方式, 将会造成灾难性的后果,抛开代码量增加、同一逻辑多次实现的问题不谈,如果某一接口或model发生了不兼容更新,对维护而言将会造成灾难性的后果。 所以Store强烈建议将model及相关接口单独抽离,以实现复用与统一维护。

基于以上考虑,Store使用中间件的设计模式处理业务流程, 使用数组管理所有的中间件,当一个行为发生的,依次通知这些中间件,所有中间件处理完成后,得到最终结果。 执行到某一个中间件时,Store保证其前面的中间件已经执行完成,此时可以直接使用前面中间件产生的结果。

示例

假设有这样的业务流程:

  1. 使用user_id查询用户信息
  2. 使用用户信息中的group_id查询用户所属用户组的信息
// typescript
import { Store } from 'strore'

interface User {
  id: string
  name: string
  group_id: string
}
interface Group {
  id: string
  name: string
}
interface State {
  user: User
  group: Group
}

const store = new Store<State>()
enum Action = { initialize = 'INITIALIZE' }

// 1. 定义user相关中间件
store.use(function(action, state, next){
    const { type, payload } = action
    switch (type) {
      // 查询用户数据
      case Action.initialize:
        window
          .fetch(`/api/user/${payload}/info`)
          .then(user => next({ user }))
        break
      default:
        next()
    }
})

// 2. 定义用户组中间件
store.use(function(action, state, next){
  const { type, payload } = action
  switch (type) {
    // 由于中间件是有序执行的,所以此时state.user已经获取到了,可以直接使用
    case Action.initialize:
      window
        .fetch(`/api/group/${state.user.group_id}/info`)
        .then(group => next({ group }))
      break
    default:
      next()
  }
})

// 派发初始化action
store.dispatch({
  type: Action.initialize,
  payload: 'user_record_id'
}, state => console.log(state.user, state.group))

上面的代码是Store最基本的示例,实际上Store提供了一些基础的中间件来更好的组织代的代码。 比如storeViewModelCreator,StoreValidatorCreator

运行环境

所有支持es3的环境。包括不限于:

  • 浏览器: ie7+
  • nodejs: 所有版本

详细文档

https://coinxu.github.io/store/docs/home.html

TODO

  • Example
  • English Docs

LICENSE

MIT