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

wininit

v1.6.0

Published

some practical js methods

Downloads

11

Readme

Wininit JS 常用方法 ( ES6 模块 [暂] )

暂时只支持 ES6 模块
CommonJs / CMD 后期会逐步更新支持

安装

# Using npm
$ npm install wininit --save

# Using yarn
$ yarn add wininit --dev

使用

import Win from "wininit"

# In Vue
Vue.prototype.$win = Win
使用时
this.$win...

# In React
React.$win = Win
使用时
React.$win...

参数

{
	lg		: 1920			大屏尺寸 (暂时未用到)
	sm		: 750			手机端尺寸
	second	: 1000			一秒所占微秒
	minute	: 1000 * 60			一分钟所占微秒
	hour	: 1000 * 60 * 60		一小时所占微秒
	day		: 1000 * 60 * 60 * 24	一天所占微秒
}

方法

浏览器属性

浏览器标志

device: {}

Win.device = {
	isPc 是否是 PC 端
	isQB 是否是 QQ浏览器
	isUC 是否是 UC浏览器
	isIos 是否是 iOS浏览器
	isIpad 是否是 Ipad
	isWeChat 是否是 微信浏览器
	isChrome 是否是 Chrome浏览器
	isSafari 是否是 Safari浏览器
	isAndroid 是否是 Android
	isFireFox 是否是 火狐浏览器
	isWindowsPhone 是否是 windows 手机浏览器
}

# 例子

if ( Win.device.isPc ) {
	todo something
} else {
	todo something
}
窗口当前宽度

width: number

Win.width

console.log( Win.width ) // 1920
窗口当前高度

height: number

Win.height

console.log( Win.height ) // 1080
根域名(包括协议部分)

root: string

Win.root

console.log( Win.root )
// https://www.npmjs.com/package/wininit -> https://www.npmjs.com
协议

protocol: string

Win.protocol

console.log( Win.protocol )
// https://www.npmjs.com/package/wininit -> https:
域名(不包括协议部分)

href: string

Win.href

console.log( Win.href )
// https://www.npmjs.com/package/wininit -> www.npmjs.com/package/wininit
路径

pathname: string

Win.pathname

console.log( Win.pathname )
// https://www.npmjs.com/package/wininit -> /package/wininit
参数

qs: string

Win.qs

console.log( Win.qs )
// https://www.npmjs.com/package/wininit?id=1 -> id=1
hash

hash: string

Win.hash

console.log( Win.hash )
// https://www.npmjs.com/package/wininit#hash -> hash

Win.hash = "index"
// https://www.npmjs.com/package/wininit#hash -> https://www.npmjs.com/package/wininit#index
获取当前滚动条位置

st: number | string

Win.st

console.log( Win.st ) // 浏览器滚动条当前位置

Win.st = 100 // 使浏览器滚动条滚动到 100 的位置
页面可滚动高度

scrollHeight: number

Win.scrollHeight

console.log( Win.scrollHeight ) // 页面可滚动高度
页面实际高度

clientHeight: number

Win.clientHeight

console.log( Win.clientHeight ) // 页面实际高度
页面剩余滚动高度

isScrollBottom: number

Win.isScrollBottom

console.log( Win.isScrollBottom ) // 页面剩余滚动高度
当前页面标题

title: number

Win.title

console.log( Win.title ) // document.title

Win.title = "标题" // 设置当前页面标题

通用方法

判断是否为错误数据

isNever(value: any): boolean

Win.isNever(0) // false
Win.isNever('') // true
Win.isNever(+'a') // true
Win.isNever(null) // true
Win.isNever(false) // true
Win.isNever(undefined) // true
生成随机乱码

默认生成 15 位乱码

uid(a: string | number, s = ""): string

Win.uid() // 生成 15 位随机码 -> 示例: qwertyuiopasdfg
Win.uid(2) // 生成 2 位随机码 示例: de
Win.uid(15, 'default') // 生成 15 位随机码并将第二个参数添加到段首 示例: defaultqwertyuiopasdfg
范围内生成随机整数

random(b: number, a: number): number

# 没有参数则返回 0 - 10 随机数
Win.random() // 返回 0 - 10 随机数

# 只有一个参数则返回 0 至此参数之间的一个随机整数( 包含上下限 )
Win.random(20) // 生成 0 - 20 之间的一个随机整数 eg: 7

# 两个参数则返回这两个参数之间的一个随机整数( 包含上下限 )
Win.random(20, 2) // 生成 2 - 20 之间的一个随机整数 eg: 13
判断是否为数组

假数组返回 false

isArray(o: any): boolean

Win.isArray([1]) // true

Win.isArray({a: 1}) // false

Win.isArray({0: 1, 1: 2}) // false

Win.isArray( document.querySelectorAll('p') ) // false
将所有参数 合并 并 降维 为一维数组

toArray(...arg): array

Win.toArray([1], [2, 3]) // [1, 2, 3]

Win.toArray([1, [2, 3]], [4]) // [1, 2, 3, 4]

Win.toArray([1, [2, [3]]], [4]) // [1, 2, 3, 4]
将数组分页

paging(a: array, n: number): array

a: array 需要分页的数组
n: number 每页个数

Win.paging([1, 2, 3, 4], 2) // [[1, 2], [3, 4]]
随机打乱数组

shuffle(a: array): array

Win.shuffle([1, 2, 3, 4]) // [3, 2, 4, 1]
字符串检查

testTxt(t: string, f: string): object | boolean

t: 要监测的字符串
f: 监测格式 可选
phone ( 手机号 | 座机 )
mail ( 邮箱 )
idCard ( 身份证号 )

Win.testTxt('123', 'phone') // false
Win.testTxt('11******[email protected]', 'mail') // true
Win.testTxt('123', 'idCard') // false

# 如果第二个参数不写 则返回整个对象
Win.testTxt('11******[email protected]')
// {
//	  phone: false,
//	  mail: true,
//	  idCard: false
// }

# 如果第二个参数不是 phone, mail, idCard 中的任何一个
# 则会对两个参数进行比较并返回值
Win.testTxt('123', '123') // true
Win.testTxt('123', '1234') // false
获取页面元素

dq(e: string): array | HTMLElement | undefined

参数可以是任何标签选择器

如果选择器获取到唯一元素则直接返回该元素
如果获取到的元素不唯一 则返回包含所有获取到的元素的集合

Win.dq("#main") // 返回 id 为 main 的元素
Win.dq("p") // 返回包含所有 p 元素的数组
将 file 对象转换为临时预览图片

getInputPic(file: File): Promise

Win.getInputPic([File]).then(src => {
	# src 图片临时地址
	image.src = src
})
格式化时间

formatDate(str: string, date: Date | string): string

Win.formatDate('yyyy-MM-dd', new Date()) // 2020-01-01
Win.formatDate('yyyy-M-d', new Date()) // 2020-1-1
Win.formatDate('yyyy-MM-dd hh:mm:ss', new Date()) // 2020-01-01 12:12:12
Win.formatDate('yyyy-MM-dd h:m:s', new Date()) // 2020-01-01 5:2:1
Win.formatDate('yy年M月d h:m:s', '2020-05-22 5:20:58') // 20年5月22 5:20:58
从 LocalStorage 中获取值

getLocalStorage(n: string): any

Win.getLocalStorage('token') // 123
向 LocalStorage 中添加值

setLocalStorage(n: string, v: any): void

Win.setLocalStorage('token', 123) // 123
将 LocalStorage 中的某个值删除

delLocalStorage(n: string): void

Win.delLocalStorage('token') // 123
从 Session 中获取值

getSession(n: string): any

Win.getSession('token') // 123
向 Session 中添加值

setSession(n: string, v: any): void

Win.setSession('token', 123) // 123
将 Session 中的某个值删除

delSession(n: string): void

Win.delSession('token') // 123
刷新页面

reload(force = false): void

force 为真则跳过缓存刷新

Win.reload() // 刷新当前页面
Win.reload(true) // 跳过缓存刷新当前页面
将 px 转换为 vw 值

px2vw(px: string | number, width: string | number = this.default.sm): number

标尺默认使用 default.sm

Win.px2vw(75) // 10
Win.px2vw(375) // 50

日期比较计算

Win.computeDate

日期比较

Win.computeDate.compare(fdate, ndate): boolean

前面的日期小则返回 false 否则返回 true

Win.computeDate.compare('2020-5-1', '2020-5-2') // false
Win.computeDate.compare(new Date('2020-5-1'), new Date('2020-5-2')) // false
日期差值

Win.computeDate.second(fdate, ndate): number 两个日期相差秒数 Win.computeDate.minute(fdate, ndate): number 两个日期相差分钟 Win.computeDate.hour(fdate, ndate): number 两个日期相差小时 Win.computeDate.day(fdate, ndate): number 两个日期相差天数

Win.computeDate.day('2020-5-1', '2020-5-2') // 1
Win.computeDate.hour(new Date('2020-5-1'), new Date('2020-5-2')) // 24

Fun 娱乐

引入路径
import { } from "wininit/fun/games"

有趣的 console.log

fbilog FBI WARNING

fbilog()

blackman 黑人抬棺

blackman()

Made In Li mengqun.