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

modelist2

v1.0.1

Published

Model and List are new data structure for formating data

Downloads

4

Readme

Modelist 数据结构

新增加两种数据结构,用于处理业务数据。Model用于定义数据模型(展现或逻辑),List进行批量处理。
通过这种方式方便地对Model进行查找、过滤、修改、增删和排序,同时提升代码的可读性和可维护性以及扩展性等。

install

$ npm i modelist2

see npm: modelist2

$ npm run build   # 打包umd版本
$ npm run dev     # 执行测试用例
$ rollup -c # 打包 cjs与esm版本

source code

源码:https://github.com/jarry/modelist

Model

用于定义业务模型和格式化数据,可以为某个具体业务对象,分别或统一建立视图层和逻辑层的模型

    // 创建一个ExampleModel继承自Model基类
    class ExampleModel extends Model {
        // 构造器含有两个参数,source是实例化时的数据来源,formatter数据格式化器。
        constructor(source, formatter) {
          super()
          // this.define用来定义模型的基本属性,这是向前端展示或者向后台递交的数据模型,可以根据业务与展现情况设置
          this.define({
              // 初始值可以是null或undefined(undeifned在转JSON被丢弃),也可以是默认值,建议增加描述说明
              order: null,
              color: undefined,
              size: 5,
              width: undefined,
              height: null
          })

          // 定义数据处理器,可以提前写好规则器也可以在在外部定义再传入
          formatter = Object.assign({
              // 属性直接赋值
              order: Math.random(),
              // 属性通过函数赋值
              color: function(source, model, formatter) {
                  // 如果是function写法则this代表model
                  return source['color'] || 'black'
              },
              size: (source, model, formatter) => {
                  let key = 'size'
                  if (source[key] < 10) {
                      return source[key] + 5
                  }
                  return source[key] * 2
              },
              // 通过key名查找赋值
              keyProp: ['sourceKey']
          }, formatter)

          // 需要初始化数据模型,传入源数据与处理器
          // init执行时源数据会覆盖Model的同名属性
          this.init(source, formatter)
       }
    }

    // 实例化Model,第一个参数是数据,第二个参数格式器
    let example = new ExampleModel({color:'red', size: 10, width: 5}, { color: 'green'})
    example.get('color')  // green
    example.hasKey('color', 'size', 'width') // true
    example.hasValue(5, 'red') // false
    example.getKeys() // ["order", "color", "size", "width", "height"]
    // 再次格式化数据,格式器将被复制到原有格式器
    example.format({
      color: 'blue',
      width: (source, model, formatter) => {
        return model.width * 2
      }
    })
    example.get('width')  // 10
    example.hasValue(10, 'blue') // true

List

对于模型的统一批量处理,把一类数据按照模型统一进行修改、查找、排序等
    // 这是一组数据,里面的内容均属于某个模型
    const data = [ { name: 'Tom', size: 9, width: 8, color: 'red' }, { name: 'Hans', size: 20, width: 28, color: 'olive' },
      { name: 'Jack', size: 15, width: 18, color: 'black' }]
    // 新建List对象,指定来源数据与模型对象
    // 实例化ExampleModel时来源数据会覆盖模型里的相同属性,缺失的属性则用模型里面的默认值。
    // 同时也执行了Model里面的format,此时format按照规则器进行批量处理
    const exampleList = new List(data, ExampleModel)

    // 根据key value查找Model所在位置
    exampleList.indexOfByKey('color', 'olive') // 1
    // 根据条件查找成员
    exampleList.indexOfBy((model, idx) => {
      if (model.width > 10) {
        return true
      }
    }) // 0
    // 根据key分组
    exampleList.groupBy('color') // {red: Array(1), olive: Array(1), black: Array(1)}
    // 根据条件统计数量
    exampleList.countBy((model, idx) => {
      return model.size > 15
    }) // 2
    exampleList.swap(0, 2) // 0,2项目交换
    // 根据条件去重复项
    exampleList.uniqueBy((one, two) => {
      if (one.size - two.size <= 20) {
        return true
      }
    })
    // 转为简单结构对象,Model => Object, List => Array
    exampleList.toPlain()
    // 转为标准JSON, 只保留string, number, boolean, null, Array, Object
    exampleList.toJSON()
    // 将内容转为字符串
    exampleList.toString()

使用说明

使用说明 ./doc/intro.md

使用说明 ./doc/intro.html

API ./doc/modelist/doc/api.html

更多DEMO实例

DEMO地址:./doc/modelist/demo/

完整引用例子

Example地址:./doc/modelist/example/