tool-men v1.0.22

Tool Men

Tool Men! 工具“人” ~

为前端业务开发提供的工具函数，适用于 Web 及微信小程序：

1. wow_array，增强版数组，提供切片、批量删除、嵌套等功能；
2. is函数用于判断数据类型；
3. to函数用于强制转换数据类型；
4. mock函数用于在后端提供接口前使用模拟数据进行开发；
5. wx函数对部分小程序接口进行 Promise 封装，并提供 wx_router 路由函数以及 ResponseView 视图交互类；
6. 更多功能查看下方示例。

Installing

npm install tool-men --save

Example

import { is_string, to_number, wow_array } from 'tool-men'

// or

import * as utils from 'tool-men'

wow

wow_array

Wow array, better array!

let arr = wow_array([1, 2, 3])
arr[0] // 1
arr[-1] // 3
arr.first // 1
arr.last // 3
arr['1:'] // [2, 3]
arr['1:2'] // [2]
arr[':'] // [1, 2, 3]
arr['1:3:2'] // [2]
arr['::'] // [1, 2, 3]
arr['::-1'] // [3, 2, 1]
arr.min // 1
arr.max // 3
arr.remove(0, val => val === 3) // [2]
arr.shuffle // [1, 3, 2]

let nestArr = wow_array([
  { id: 1, parent_id: null },
  { id: 2, parent_id: 1 },
  { id: 3, parent_id: 1 },
  { id: 4, parent_id: 2 },
  { id: 5, parent_id: 4 }
])
nestArr.nest(null, 'parent_id')
// [
//   {
//     id: 1,
//     parent_id: null,
//     children: [
//       {
//         id: 2,
//         parent_id: 1,
//         children: [
//           {
//             id: 4,
//             parent_id: 2,
//             children: [
//               {
//                 id: 5,
//                 parent_id: 4,
//                 children: []
//               }
//             ]
//           }
//         ]
//       },
//       {
//         id: 3,
//         parent_id: 1,
//         children: []
//       }
//     ]
//   }
// ]

is

Check the type of value.

to

Convert value to the needed.

date

Used for date formatting.

gen

Generate some useful data.

mock

Get the mock data needed in development quickly.

Depend on MockJS.

MockJS

wx

Only for weapp.

wx_router

Router for Weapp.

import { wx_router } from 'tool-men'

// 获取项目中所有的路由
// 根据 app.json 中注册的页面自动生成
wx_router.routes
// {
//   PagesIndex: "/pages/index/index"
//   PagesLogs: "/pages/logs/logs"
//   PagesMyIndex: "/pages/my/index/index"
// }

// 获取当前跳转的路由
wx_router.route
// {
//   from: "pages/index/index"
//   params: null
//   to: "/pages/logs/logs"
// }

// 调用 wx.navigateTo 或者 wx.switchTab
// push 会根据页面性质自动调用 wx.navigateTo、wx.switchTab

// 传入的路径可以使用简写的方式（不包含最后一层）
// `/pages/logs/logs` => `PagesLogs`
wx_router.push('PagesLogs', {
  id: 1
}, (res) => {
  console.log('success callback', res)
}, (err) => {
  console.log('fail callback', err)
}, (res) => {
  console.log('complete callback', res)
})

// 也可以写入具体的路径
wx_router.push('/pages/logs/logs')

// 或者使用 routes 对象的属性
wx_router.push(wx_router.routes.PagesLogs)


// 调用 wx.redirectTo 或者 wx.reLaunch

// 传入的路径参数和 push 函数一样有三种方式
wx_router.replace('PagesLogs')

// 默认调用 redirectTo，添加 `@relaunch` 标记后使用 wx.reLaunch
wx_router.replace(`PagesLogs@relaunch`, null, (res: any) => {console.log(res)})

wx_router.replace('/pages/logs/logs')

wx_router.replace(wx_router.routes.PagesLogs)


// 调用 wx.navigateBack

wx_router.back()

// 指定返回的页面数
wx_router.back(2, () => (res: any) => {console.log(res)})

ResponseView

在发送请求到后端并获得响应数据后，自动处理、控制与 wxml 中的数据绑定；

这里的数据绑定包括 “渲染数据” “是否为空数据” “全部数据是否加载完毕” “分页数” 等;

并且可以自动处理下拉刷新，触底加载的相关逻辑，完成数据从请求、加载、处理到最终渲染的一整套逻辑。

示例如下：

import { ResponseView, ResponseViewType, ResponseViewConfigType } from 'tool-men'
import { getList, getUser, createUser, updateUser, deleteUser } from '../models/user'

let responseViewForList: ResponseViewType
let responseViewForUser: ResponseViewType

Page({
  data: {
    list: [],
    user: {}
  },

  async onLoad() {
    // ResponseView的实例化必须在 Page 函数体内
    responseViewForList = new ResponseView('list')
    // 可在实例化时修改配置参数
    responseViewForUser = new ResponseView('user', {
      success_toast_title: '提交成功！'
      // ...
    } as ResponseViewConfigType)

    // 获取列表数据
    await responseViewForList.fetchList(
      async (page: number) => await getList({ page })
    )

    // 获取详情数据
    await responseViewForUser.fetch(
      async () => await getUser()
    )
  },

  // 下拉刷新
  async onPullDownRefresh() {
    await responseViewForList.fetchList(
      async (page: number) => await getList({ page })
    )

    await responseViewForUser.fetch(
      async () => await getUser()
    )

    responseViewForList.stopPullDownRefresh
  },

  // 触底加载
  async onReachBottom() {
    await responseViewForList.fetchList(
      async (page: number) => await getList({ page }),
      null,
      null,
      true
    )
  },

  async createDemo() {
    // 处理 post 请求
    await responseViewForUser.post(() => {
      return await createUser({})
    }, () => {
      console.log('create user success')
    }, () => {
      console.log('create user fail')
    })
  },

  async updateDemo() {
    // 处理 put 请求
    await responseViewForUser.put(
      () => await updateUser({})
    )
  },

  async deleteDemo() {
    // 处理 delete 请求
    await responseViewForUser.delete(
      () => await deleteUser({})
    )
  },
})

<!-- ResponseView 与 wxml 的交互 -->
<view class="page-container">
  <view class="page-list-for-my-message">
    <view wx:if="{{ list && list.length }}" class="message-list">
      <view wx:for="{{ list }}" wx:key="index" class="message-list-item">
        <message-item item="{{ item }}" />
      </view>
    </view>
    <!-- `$messageList` 由 ResponseView 生成 -->
    <van-empty wx:if="{{ $list.empty }}" description="暂无数据" />
    <van-divider wx:if="{{ $list.last }}" contentPosition="center">已经到底了</van-divider>
  </view>
</view>

// model/user

// 获取接口数据后按如下格式返回
// ResponseView 在拿到 `data` 值后会进行二次处理
export async funtion getList() {
  return {
    data: [/* ... */],
    total: 2
  }
}

export async funtion getUser() {
  return {
    data: {/* ... */},
    total: 1
  }
}

export async funtion createUser() {
  return {
    data: true,
  }
}

export async funtion updateUser() {
  return false
}

export async funtion deleteUser() {
  return {
    data: true
  }
}