(一)JavaScript小工具库

简介: 有一些小的常用的方法,整理起来封装一下,便于使用。

有一些小的常用的方法,整理起来封装一下,便于使用。


源码目录:https://naturefw.gitee.io/


技术栈



  • vite


  • js


  • rollup 打包发布


安装




npm i nf-tool
// 或者
yarn add nf-tool


功能



  • 验证 JavaScript 的类型


  • 输出调试信息


用法



import {
  log, // 打印调试信息
  logTime, // 计时
  toTypeString, // Object.prototype.toString.call(val)
  typeName, // 获取可以识别的名称
  hasOwnProperty,
  hasOwn,
  isFunction, // 验证普通函数
  isAsync, // 验证 async 的函数
  isPromise, // 验证 Promise
  isObject, // 验证 Object
  isArray, // 验证数组
  isString, // 验证字符串
  isNumber, // 验证 number
  isBigInt, // 验证 BigInt
  isBoolean, // 验证 布尔
  isRegExp, // 验证正则类型
  isDate, // 验证日期
  isMap, // 验证 map
  isSet, // 验证 set
  isSymbol, // 验证 Symbol
  isNullOrUndefined // null 或者 undefined 返回 true
} from 'nf-tool'
async function testAsyncFun(params) {
}
function myPromise(params) {
  return new Promise((f1, f2) => {
    f1()
  })
}
window.__showlog = 2 // 设置后才会打印调试信息
// 开始测试
const start = () => {
  log(' ============ 验证数据类型 ============')
  let t = logTime('验证 Function 用时')
  log('\n() => {}:', isFunction(() => {}))
  t.end()
  t = logTime('验证 Async 用时')
  log('\nasync () => {}:', isAsync(async () => {}))
  log('async function () {}:', isAsync(testAsyncFun))
  t.end()
  t = logTime('验证 isPromise 用时')
  log('\nPromise:', isPromise(myPromise))
  log('Promise:', isPromise(myPromise()))
  t.end()
  t = logTime('验证 Object 用时')
  log('\n对象:', isObject({}))
  t.end()
  t = logTime('验证 Array 用时:')
  log('\n数组:', isArray([]))
  t.end()
  t = logTime('验证 isString 用时:')
  log('\n‘123’:', isString('123'))
  t.end()
  t = logTime('验证 isNumber 用时:')
  log('\n123:', isNumber(123))
  t.end()
  t = logTime('验证 isBigInt 用时:')
  log('\n123:', isBigInt(123))
  t.end()
  t = logTime('验证 isBoolean 用时:')
  log('\ntrue:', isBoolean(true))
  t.end()
  t = logTime('验证 isRegExp 用时:')
  log('\nRegExp:', isRegExp(new RegExp(/123/g)))
  t.end()
  t = logTime('验证 isDate 用时:')
  log('\nDate:', isDate(new Date()))
  t.end()
  t = logTime('验证 isMap 用时:')
  log('\nMap:', isMap(new Map()))
  t.end()
  t = logTime('验证 isSet 用时:')
  log('\nSet:', isSet(new Set()))
  t.end()
  t = logTime('验证 isPromise 用时:')
  // log('\nPromise:', isPromise(() => {return new Promise(()=>{},()=>{}))})
  t.end()
  t = logTime('验证 isSymbol 用时:')
  log('\nSymbol(‘123’):', isSymbol(Symbol('123')))
  t.end()
  var un
  t = logTime('验证 isNullOrUndefined 用时:')
  log('\nnull:', isNullOrUndefined(null))
  log('未定义:', isNullOrUndefined(un))
  log('字符串:', isNullOrUndefined('qwe'))
  t.end()
  const arr = [
    '字符串',
    123,
    ['数组', 123],
    new Date(),
    new Date().valueOf(),
    new Map(),
    new Set()
  ]
  t = logTime('typeName 用时:')
  log('\n typeName 的测试')
  arr.forEach(element => {
    log(typeName(element), ':', element.toString())
  })
  t.end()


源码



https://gitee.com/naturefw/nf-rollup-tool


在线演示



https://naturefw.gitee.io/nf-rollup-tool



相关文章
|
4天前
|
JavaScript Linux 开发者
一个用于管理多个 Node.js 版本的安装和切换开源工具
【9月更文挑战第14天】nvm(Node Version Manager)是一个开源工具,用于便捷地管理多个 Node.js 版本。其特点包括:版本安装便捷,支持 LTS 和最新版本;版本切换简单,不影响开发流程;多平台支持,包括 Windows、macOS 和 Linux;社区活跃,持续更新。通过 nvm,开发者可以轻松安装、切换和管理不同项目的 Node.js 版本,提高开发效率。
|
1月前
|
JavaScript 前端开发 数据可视化
图像裁剪库Cropper.js的学习使用
图像裁剪库Cropper.js的学习使用
40 4
|
1月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
45 4
|
1月前
|
移动开发 JavaScript 前端开发
专为webkit内核而生的javascript库mango正式发布
专为webkit内核而生的javascript库mango正式发布
|
1月前
|
SQL JavaScript 前端开发
websql数据库javascript操作库--websqlWrapper
websql数据库javascript操作库--websqlWrapper
|
2月前
|
数据可视化 前端开发 JavaScript
前端框架与库-D3.js数据可视化基础
【7月更文挑战第21天】D3.js是Web开发中创建动态、交互图表的利器,适用于从基础条形图到复杂地理热力图的广泛需求。核心概念涉及数据绑定至DOM,支持动态更新。初学者常遇难题包括不当数据绑定、选择器误用、过渡动画过量及坐标轴配置失误。避免策略需善用`.data()`, `.enter().append()`, `.exit().remove()`管理数据,熟知选择器差异,适度应用`.transition()`, 并精准设定坐标轴。示例条形图代码展示了数据绑定至`<rect>`元素的过程,奠定基础,助你进阶复杂项目。
80 4
|
2月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
71 4
|
2月前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
38 1
|
2月前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
48 1
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
39 1