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

feitools

v1.0.15

Published

tools

Downloads

2

Readme

feitools

工具库,提供一些常用的工具方法,项目使用 es6 语法开发,后期会更新成 ts 开发

安装

npm i feitools -S or yarn add feitools

工具方法

Memory: 封装 本地存储, 集中统一管理 存储数据
/**
* 建议实例化对象 名 与存储的键同名,键 满足 \W+ 规则
* 1. 构造函数,key: 构造函数的键, type: 数据存储的类型,session或local
* 2. 实例属性和方法
*   (1) setItem( value, replacer ): 设置存储数据
*       value: 任意参数类型,replacer,数据筛选与 JSON.stringify 一致。无返回值
*   (2) getItem(): 获取存储数据的值,无参数, 返回值为存储时的数据
*   (3) getKey(): 检查存储键值是否存在,返回值布尔类型
*   (4) removeItem(): 删除单条存储数据,无返回值
* 3. 静态方法
*   (1) instances:实例对象
*   (2) keys(): 获取存储数据的键值, 无参数, 返回获取的结果
*   (3) removeItems(keys=[]): 删除指定键的存储,不区分存储类型,keys: 以","隔开的字符串或数组, 无返回值。
*   (4) clear(type="local"): 清空指定类型的存储,type: 存储类型,无返回值
*   (5) clearAll(): 清空所有存储, 无返回值
*/

import { Memory } from 'feitools';

// 实例化一个 localStorage存储
const userInfo = new Memory('userInfo', 'local'); 

// 存储数据
userInfo.setItem({ 
   age: '10', 
   name: 'name', 
   userId: '123456' 
});

// 获取存储数据信息
userInfo.getItem(); 

// 检查是否存在已存数据
userInfo.getKey();

// 删除 userInfo 存储 
userInfo.removeItem(); 

// 删除所有的 localStrage 数据
Memory.clear('local'); 

// 删除所有的 session 数据
Memory.clear('session'); 

// 删除 local 和 session 所有存储数据
Memory.clearAll(); 

// 获取 Memory 实例
Memory.instances;

// 获取所有 local 和 session 的 keys
Memory.keys();

// 删除 指定的存储数据的 key, 不区分存储类型
// 支持任意字符 分割,如 "a,b", "a b", "a$b"等,规则满足\W
Memory.removeItems(['userInfo']);
NumToZh_cn: 将阿拉伯数字 转换成 中文 ( 元 )
/*
* 1. 实例方法
*   (1) toZh(numStr): 功能,转换函数,返回值:转换后的结果,参数,待转换的字符串
*/
import { NumToZh_cn } from 'feitools';

const numtozh_cn = new NumToZh_cn();

numtozh_cn.toZh( 15.22 ); // 十五元贰角贰分整
URL: 处理 URL 相关
/*
* 1. 静态方法
*   (1) set(opt ): 功能,重置url,返回值:处理后的url,参数,json
*   (2) get( mid, onHash=false): 功能:获取 url 参数值,返回值,字符串
*/

import { URL } from 'feitools';

const url = '?name=a&age=20#sex=m' // 假设 url 地址

URL.get( 'name' ); // a

URL.get( 'sex' ); // null

URL.get( 'sex', true ); // m

URL.set({ name: 'h', email: '163' }); //'?name=h&email=163&age=20#sex=m'
Class2type: 类型检测
/*
*  
* 1. 实例方法
*   (1) getType( opt ): 核心方法
*   (2) isEmptyObject( param ): 检测 json 是否为空 
*/
class2type = new Class2type();
const {
    isBoolean, 
    isNumber, 
    isString,
    isUndefined,
    isNull,
    isFunction,
    isArray,
    isDate,
    isRegExp,
    isObject,
    isError,
    isSymbol,
    isSet,
    isMap,
    isPromise
} = class2type;


isBoolean( true ); // true

isNumber( 12 ); // true

isString( 'feitools' ); // true

isUndefined( undefined ); // true

isNull( null ); // true

isFunction( ()=>{} ); // true

isArray( [] ); // true

isDate( new Date() ); // true

isRegExp( /feitools/ ); // true

isObject( {} ); // true

isError( new Error( 'feitools' ) ); // true

isSymbol( new Symbol( 'feitools' ) ); // true

isSet( new Set(['feitools'])); // true

isMap( new Map( [ [ 'tool', 'feitools' ] ] ) ); // true

timeFrame: 时间帧


import { timeFrame } from 'feitools';

timeFrame( ( prev, cur, origin ) => {
	console.log('Running after 1s')
}, 1000 ); 

SuperDate: 超级日期( 目标:打造方便的日期处理 )

/*
* 功能:时间的加减,支持链式调用
* 1. add( num, type )
*   功能:增加 指定类型的值
*   参数:num, 数值,可以为负; type -> year, month, day 
*   返回值: 日期实例 
* 2. sub( num, type )
*   功能:减少 指定类型的值
*   参数:num, 数值,可以为负; type -> year, month, day
*   返回值:日期实例
* 3. get()
*   功能:获取日期的 json 值
*   参数:无
*   返回值:json( 后期 改成 返回指定 格式的值 如:YY-MM-DD )
*/
import { SuperDate } from 'feitools';

const superDate = new SuperDate( '2019-7-25' ); 

superDate.add( 10, 'year' ).get(); // {"year":"2015","month":"02","day":"02","week":"1","h":"00","m":"00","s":"00","ms":"0000"}

superDate.sub( 10, 'month' ).get(); 

superDate.sub( 10, 'day' ).get(); 

superDate.afterYears( 1 ).get(); // 1年后

superDate.afterMonths( 1 ).get(); // 1月后

superDate.afterDays( 1 ).get(); // 1天后

superDate.beforeYears( 1 ).get(); // 1年前

superDate.beforeMonths( 1 ).get(); // 1月前 

superDate.beforeDays( 1 ).get(); // 1天前

superDate.after( num, type ).get(); // num 年|月|日 后, type, year, month, day

superDate.before( num, type ).get(); // num 年|月|日 前, type, year, month, day

superDate.getMaxDay( year, month ); // 获取 指定月份的区间 最大值

superDate.afterYears( 1 ).beforeDays(1).afterMonths( 1 ).get(); // 链式调用

load: 加载静态资源 css、js、image

/**
 * 功能:动态加载静态资源
 * 1. css( url )
 *  功能: 加载 css 资源
 *  参数:url, 资源路径
 *  返回值:promise 对象
 * 2. script( url )
 *  功能:加载 js 静态资源
 *  参数:url, 资源路径
 *  返回值:promise 对象
 * 3. image( url )
 *  功能:加载 图片 资源
 *  参数:url, 资源路径
 *  返回值:promise 对象
 * 
 * 4. fetch( param )
 *  功能:动态加载静态资源 入口函数
 *  参数:param 可以为 url 数组、或以逗号隔开的字符串
 *  返回值: promise 对象, 用于接收返回结果
 * 
*/

import { Load } from 'feitools';

const load = new Load(); // 实例化 Load
const log = console.log;
// 加载图片
load.image( '1.png' ).then( res => log( 'success' ) ).catch( res => log( 'fail' ) );

// 加载 css
load.css( 'css.css' ).then( res => log( 'success' ) ).catch( res => log( 'fail' ) );

// 加载 js
load.css( 'javascript.js' ).then( res => log( 'success' ) ).catch( res => log( 'fail' ) );

// 数组, 不区分文件
load.fetch([ 'png.png', 'gif.gif', 'css.css', 'javascript.js' ]).then( res => 
    console.log( 'success' ) 
).catch( res => 
    console.log( 'fail' ) 
);

load.fetch( 'png.png, gif.gif , css.css, javascript.js' ).then( res =>
    console.log( 'success' );
).catch( res =>
    console.log( 'fail' )
)

Tool 类

/**
 * @dec 提供常用的基础功能和方法
 * 1. toUpper( letter, slice )
 *  功能:将首字母大写
 *  参数:letter, 字符串; slice,不传,返回第一个字母的大写字符, 否则返回首字母大写的字符串
 *  返回值:首字母的字符或首字母大写的字符串
 * 2. prevZero( content, count, pad )
 *  功能:给字符串加前导字符
 *  参数:content, 字符串; count, 实际需要的字符串位数; pad, 补充的字符串内容
 *  返回值:处理后的字符串
 * 3. pickUpFields( str, fields )
 *  功能:从 json 串 中 挑出指定的 字段数据,并返回 josn 数据
 *  参数:str, json 字符串; fields 数组, 指定的字段
 *  返回值:挑选后的 json 数据
 * 4. filterFields( value, fields )
 *  功能:指定数据 转换成 string 并只保留指定的 key 的数据
 *  参数:value, 指定的数据对象; fields, 指定的 键名 集合
 *  返回值:字符串
 * 5. formatDate( date, format )
 *  功能:格式化日期
 *  参数:date, 日期对象; format, 字符串,日期格式字符
 *  返回值:按指定格式处理后的结果
 * 6. groupArray( array, condition )
 *  功能:将数据分组
 *  参数:array, 数组; condition, 指定分割的索引
 *  返回值:二维数组
*/
    import { Tool } from 'feotools';
    const tool = new Tool();
    tool.groupArray([ 'q', 'w', 'e', 'r' ], 2 ) // [ ['q', 'w'], [ 'e', 'r' ] ]

    tool.formatDate( new Date(2015, 10, 10 ), 'YYYY年MM月DD日 hh时mm分ss秒' ); // 2015年11月10日 00时00分00秒

    tool.pickUpFields('{"name":"name","age":"age","company":"alibaba"}', ['name']); // { name: 'name'}

    tool.filterFields({name: 'name', age: 'age', sex: 'sex' }, ['name'] ); // '{"name":"name"}'

watermark 生成水印

/**
 * 功能:生成水印
 * @dec 值生成水印图片, 如果需要请用背景实现( 或使用伪元素 )
 * 1. init()
 *  功能:初始化, 主要用于生成 canvas 画布,并设置相关参数
 *  参数:无
 *  返回值:当前实例
 * 2.render()
 *  功能:绘制画布
 *  参数:无 
 *  返回值:实例对象
 * 3. getImage( needle = false )
 *  功能:获取 图片 url 地址
 *  参数:needle, 默认为false, 当为 true 时会自动执行 init 和 render 方法
 *  返回值:base64 图片
 * 4. reRender( content )
 *  功能:重新绘制画布,从新初始化配置
 *  参数:content, 文案信息
 *  返回值:当前实例
 * 
 * 
*/

import { Watermark } from 'feitools';

const watermark = new Watermark(); // 实例化 Watermark

const url1 =  watermark.init().render().getImage();

const url2 =  watermark.getImage( true );

const url3 =  watermark.reRender( 'reRender' ).getImage();



const image = new Image();

image.src = url;




document.body.appendChild( image );

m

mm

mmm

mmmm

mmmmmm
mmmmmm

这是加粗的字体

这是加粗的字体

这是斜体加粗的文字

~~这是加删除线的文字~~

这是引用的内容

这是引用的内容

这是引用的内容

----

***

***

[百度一下,你就知道](https://baidu.com "百度一下你就知道")

- 列表1
- 列表2
- 列表3

+ 列表+1
   + 列表1-1
   + 列表1-2
   + 列表1-3
      + 列表1-3-1
      + 列表1-3-2
      + 列表1-3-3
         + 列表1-3-3-1
         + 列表1-3-3-2
***

1. 列表1
2. 列表2
3. 列表3

表头|表头|表头
---|:--:|---:
内容 | 内容 | 内容
内容 | 内容 | 内容
内容 | 内容 | 内容

  `const a = name`

const arr = [1, 2, 3, 4 ] const fn = ( a, b ) => a + b; const json = { name: 'name', age: 1, sex: [ 1, 2 ], info: { name: 'fly' arr: [ 'www', 'qqq', 'eee' ] } }



`<p></p>`

\*\*取消Markdown关键字\*\*