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

ms-fe-tools

v0.2.7

Published

沐圣的前端工具类库

Downloads

22

Readme

沐圣的前端工具类库(建设中)

  • 方便使用的前端工具类库

包括

  • Tree:处理树形结构数据的类
  • validator:验证工具
  • store:浏览器存储工具
  • common:其他常用工具
  • ...

用法

基本用法

  <script src="ms-fe-tools.js"></script>
  <script>
    // MsFeTools:类库导出的名称
    var result = MsFeTools.validator.isNull(null)
  </script>

ES6 用法

引入

  npm install ms-fe-tools

使用方法

  // 按需引入
  import { validator } from 'ms-fe-tools'
  // 调用方法
  const result = validator.isNull(null)

项目中包含的工具类。示例以 ES6 为主。

Tree

树形结构的数据处理类,使用前需实例化。

引入

  import { Tree } from 'ms-fe-tools'

JsonTree

处理 json 格式的树形结构数据。

  // 树形结构数据
  let tree = { id: '1', name: 'tree1', children: [{ id: 'a1', name: 'treea1' }] }
  
  // 实例化
  const jsonTree = new Tree.JsonTree(tree, { identifier: 'id', childrenIdentifier: 'children' })
  
  // 根据 identifier 获取节点,未获取到则返回 null
  const node = jsonTree.getNodeByIdentifier('a1')
  
  // 根据 identifier 获取父节点,未获取到则返回 null
  const parentNode = jsonTree.getParentNodeByIdentifier('a1')
  
  // 向指定节点位置添加子节点
  const treeAdded = jsonTree.addNodeByIdentifier({ id: 'b1', name: 'treeb1' }, 'a1')
  
  // 更新指定节点内容
  const treeUpdated = jsonTree.updateNodeByIdentifier({ id: 'b1', name: 'updated treeb1' }, 'b1')
  
  // 删除指定节点
  const treeDeleted = jsonTree.deleteNodeByIdentifier('b1')

JsonArrayTree

处理 json 数组格式的树形结构数据。

  // 树形结构数据
  let tree = [
               { id: '1', name: 'root'},
               { id: 'a2', order: 2, parentId: '1' },
               { id: 'a1', order: 1, parentId: '1' },
               { id: 'ca1', parentId: 'a1' },
               { id: 'ca2', parentId: 'a2' }
             ]
  
  // 实例化
  const jsonArrayTree = new Tree.JsonArrayTree(tree, { identifier: 'id', parentIdentifier: 'parentId' })
  
  // 根据 identifier 获取节点,未获取到则返回 null
  const node = jsonArrayTree.getNodeByIdentifier('a1')
  
  // 根据 identifier 获取父节点,未获取到则返回 null
  const parentNode = jsonArrayTree.getParentNodeByIdentifier('a1')
  
  // 向指定节点位置添加子节点
  const treeAdded = jsonArrayTree.addNodeByIdentifier({ id: 'b1' }, 'a1')
  
  // 更新指定节点内容
  const treeUpdated = jsonArrayTree.updateNodeByIdentifier({ id: 'b1', name: 'updated treeb1' }, 'b1')
  
  // 删除指定节点
  const treeDeleted = jsonArrayTree.deleteNodeByIdentifier('a1')

validator

常用工具方法。

引入

  // 按需引入
  import { validator } from 'ms-fe-tools'

isObject

判断传入的参数是否是非空对象。

  const result = validator.isObject({ a: 1 })

isNull

判断传入的参数是否为 null 或 undefined。

  const result = validator.isNull(null)

isURL

判断传入的 URL 地址是否合法。

  const result = validator.isURL('http://1.com')

isEmail

验证电子邮件地址是否合法。

  const result = validator.isEmail('[email protected]')

isMobile

判断手机号码是否合法。

  const result = validator.isMobile('18566011166')

isTel

判断电话号码是否合法。

  const result = validator.isTel('000-23113166')

isIdCard

判断身份证号码是否合法。

  const result = validator.isIdCard('11011119701001011X')

isLowerCase

判断传入的参数是否是小写字母。

  const result = validator.isLowerCase('msfetools')

isUpperCase

判断传入的参数是否是大写字母。

  const result = validator.isUpperCase('MSFETOOLS')

isAlphabets

判断传入的参数是否是英文字母。

  const result = validator.isAlphabets('MsFeTools')

isChineseCharacters

判断传入的参数是否是中文。

  const result = validator.isChineseCharacters('前端')

store

浏览器存储操作工具类。

引入

  import { store } from 'ms-fe-tools'

localStorage

  // 存储数据,name 为键名称,content 为要存储的内容
  store.localStorage.set({ name: 'setTest1', content: '要存储的内容1' })
  
  // 根据键获取对应数据,name 为键名称
  const getByName = store.localStorage.get({ name: 'setTest1' })
  
  // 根据键删除数据
  store.localStorage.remove({ name: 'setTest1' })

  // 获取所有数据
  const all = store.localStorage.getAll()

  // 删除所有数据
  store.localStorage.removeAll()

sessionStorage

  // 存储数据,name 为键名称,content 为要存储的内容
  store.sessionStorage.set({ name: 'setTest1', content: '要存储的内容1' })
  
  // 根据键获取对应数据,name 为键名称
  const getByName = store.sessionStorage.get({ name: 'setTest1' })
  
  // 根据键删除数据
  store.sessionStorage.remove({ name: 'setTest1' })

  // 获取所有数据
  const all = store.sessionStorage.getAll()

  // 删除所有数据
  store.sessionStorage.removeAll()

common

常用工具方法,包含若干子类。

引入

  import { common } from 'ms-fe-tools'

Object

操作对象的相关方法。

  // 深度合并多个对象。第一个参数为目标,其他参数为要合并的对象。键相同时前面的值会被最新的合并对象值覆盖。
  const merge = common.object.mergeDeep({ a: 'test', c: 'test3' }, { a: 'test1', b: 'test2' }, { d: 'test4' })
  // 深拷贝对象。
  const clone = common.object.deepClone({ a: 'test', c: { a: 'test23', b: 'test2', d: { e: 2 } } })
  // 获取对象类型,返回相应类型的字符串。
  const type = common.object.getType(null) // 返回:'null'

Random

用于生成随机数、字符串等。

  // 生成 16 进制随机数字符串,参数为分隔符,默认无分隔符
  const guid = common.random.guid()

  // 根据版本 4 生成 UUID,参数为分隔符,默认无分隔符
  const UUID = common.random.UUID('-')

DateTime

用于处理日期、时间相关数据。

  // 将当前时间按指定格式处理并返回
  const now = common.dateTime.now('{y} 年 {m} 月 {d} 日 {h}:{i}:{s}')

  // 将时间按指定格式处理并返回
  const format = common.dateTime.format(1588936360404, '{y}-{m}-{d} {h}:{i}:{s}')

  // 计算给定时间距今的时间,一般格式为:xx 天前
  const toDate = common.dateTime.toDate(1588936360404)

  // 计算给定时间距今的时间,一般格式为:xx 天 xx 小时 xx 分
  const fromLast = common.dateTime.fromLast(1588936360404)

  // 根据时间戳计算从开始到结束时间的差
  const lastLong = common.dateTime.lastLong(1588936360404, (new Date()).getTime())