
Security News
Critical Security Vulnerability in React Server Components
React disclosed a CVSS 10.0 RCE in React Server Components and is advising users to upgrade affected packages and frameworks to patched versions now.
前端业务代码工具库(支持浏览器和 node 环境),库名取自 LOL 皎月女神。
目的:归纳总结以及高效率完成前端业务代码
min目录下的 diana.js 使用,支持UMD通用模块规范npm install diana --save-dev
const _ = require('diana')
const isEqual = _.equal([1, 2, 3], [1, 2, 3]) // true
<script src="diana.js"></script>
<script>
const isEqual = diana.equal([1, 2, 3], [1, 2, 3]) // true
</script>
ArrayRandomRegexpStringLang_.isArray_.clone_.cloneDeep_.isArguments_.isFunction_.isString_.isNumber_.isDate_.isRegExp_.isErrorMathObjectUrlCollectionFunctionTimeDeviceHttp"Object" Methods_.equal(value1, value2)判断两个任意值是否相等(包含对象、数组深度遍历)
const obj1 = {
a: 1,
b: [1, this.obj1],
}
const obj2 = {
a: 1,
b: [1, this.obj2],
}
_.equal(obj1, obj2) // => true
_.pairs2obj(arr)将给定的键值对转换为一个对象
_.pairs2obj([['a',1],['b',2]]) // => {a: 1, b: 2}
_.str2numInObj(obj, arr)将对象中指定元素转换为 number 格式
obj (Object)arr (Array): 数组的值为 obj 对象中要替换的元素_.str2numInObj({ att1: '1', att2: '2', att3: 'att3value', att4: '' },['att1', 'att2', 'att4'])
// => { att1: 1, att2: 2, att3: 'att3value', att4: null }
"Array" Methods_.uniq(...arr)多个数组取并集 | 数组去重
...arr (Array): 可传入 1 个或多个数组(Array): 返回去重后的 array.
_.uniq([1, 3, 2, 2, 1]) // => [1, 3, 2]
_.uniq([1, 'a', 3, 1], [4, 'a', 'b'], [2, 3, 'b', 'c'])
// => [1, 'a', 3, 4, 'b', 2, 'c']
_.intersection(...arr)多个数组取交集.
...arr (Array): 可传入 1 个或多个数组(Array): 返回取交集后的 array.
_.intersection([1, 2, 'a', 1, 'a']) // => [1, 'a']
_.intersection([1, 2, 'a', 1], [4, 2, 'a'], [2, 'a', 'c']) // => [ 2, 'a']
_.difference(arr1, arr2)数组取差集(即取 arr1 中存在,arr2 中不存在的值)
(Array): 返回取差集后的 array.
_.difference([1,2,3], [1,2,4]) // => [3]
_.countInArr(arr, value)统计数组中特定值出现的次数
(Number): 返回数组中特定值出现的次数.
_.countInArr([1, 1, 2, 1, 2, 3], 1) // => 3
"Random" Methods_.rdColor()生成随机颜色.
(String): 返回颜色的十六进制值.
_.rdColor();
// => #b4370c
_.rdNum(min, max [, border])指定整数范围生成随机整数.
min (Number): 边界最小值max (Number): 边界最大值border (String): 设定边界(默认参数为 'both', 可选参数: 'left', 'right', 'no')(Number): 指定整数范围生成的随机整数.
_.rdNum(1, 3); // => 1 <= result <= 3
_.rdNum(1, 3, 'left'); // => 1 <= result < 3
_.rdNum(1, 3, 'right'); // => 1 < result <= 3
_.rdNum(1, 3, 'no'); // => 1 < result < 3
"Regexp" Methods_.isEmail(email)判断是否为邮箱地址.
_.isEmail('muyy95@gmail.com'); // => true
_.isPhoneNum(phoneNum)判断是否为手机号.
_.isPhoneNum('15712345678'); // => true
"String" Methods_.trim(str, type)去除空格
str (String): 待去除空格的字符串type (Number): 1-所有空格(默认),2-前后空格,3-前空格,4-后空格(String): 返回 String 值
_.trim(' ab cd ef '); // => 'abcdef'
_.trim(' ab cd ef ', 2); // => 'ab cd ef'
_.changeCase(str, type)大小写转化
str (String): 待去除空格的字符串type (Number): 1:首字母大写(默认) 2:首页母小写 3:大小写转换(String): 返回 String 值
_.changeCase('abcd'); // => 'Abcd'
_.changeCase('aBcD', 3); // => 'AbCd'
_.sortStr(str)将字符串按字母顺序排序
_.sortStr('cabbage') // => 'aabbceg'
_.escapeStr(str)转义特殊字符
_.escapeRegExp('(test)') // => \\(test\\)
"Lang" Methods_.isArray(str, type)判断是否为数组
_.isArray([1, 2]); // => true
_.clone(obj)浅拷贝
any (values): 拷贝对象(any): 拷贝出的对象
let obj = {a: 1}
_.clone(obj).a === obj.a; // => true
_.cloneDeep(obj)深拷贝
any (values): 拷贝对象(any): 拷贝出的对象
let obj = {a: 1}
_.cloneDeep(obj).a === obj.a; // => false
_.isArguments(object)如果 object 是一个参数对象,返回 true。
(function(){ return _.isArguments(arguments); })(1, 2, 3); // => true
_.isArguments([1,2,3]); // => false
_.isFunction(object)如果 object 是一个函数(Function),返回 true。
_.isFunction(() => {return 1}); // => true
_.isString(object)如果 object 是一个字符串,返回 true。
_.isString('abc'); // => true
_.isNumber(object)如果 object 是一个数值,返回 true。
_.isNumber(123); // => true
_.isDate(object)如果 object 是一个日期,返回 true。
_.isDate(new Date()); // => true
_.isRegExp(object)如果 object 是一个正则表达式,返回 true。
_.isRegExp(/abc/); // => true
_.isError(object)如果object继承至 Error 对象,那么返回 true。
_.isError(/abc/); // => true
"Math" Methods_.max(arr)判断数组中的最大值
_.max([1, 2, 3, 4]); // => 4
_.min(arr)判断数组中的最小值
_.min([1, 2, 3, 4]); // => 1
_.sum(arr)数组求和
_.sum([1, 2, 3, 4]); // => 10
_.mean(arr)数组求平均值
_.mean([1, 2, 3, 4]); // => 2.5
_.distance(x0, y0, x1, y1)计算两点 (x0, y0), (x1, y1) 之间的欧几里得距离
_.distance(1,1, 2,3) // => 2.23606797749979
_.gcd(x, y)求最大公约数
_.gcd(8, 36) // => 4
_.obj2query(baseurl, obj)对象转成 URL 中的 query
baseurl (String) 基础 urlobj (Object) 待解析对象(String): 返回 queryurl
_.obj2query('http://abc.com', {a: 1, b: 2}); // => http://abc.com?a=1&b=2
_.query2obj(queryurl)将 URL 中的 query 转为对象
queryurl (String) 基础 url(Object): 返回解析后的对象
_.query2obj('http://abc.com?a=1&b=2'); // => {a: 1, b: 2}
_.each(list, iteratee)遍历 list 中的所有元素,按顺序用每个元素当做参数调用 iteratee 函数。支持数组,对象,和类数组对象。
_.each([1, 2, 3], (value) => {console.log(value)}); // => 1, 2, 3
_.each({1, 2, 3}, (value) => {console.log(value)}); // => 1, 2, 3
_.debounce(function, wait, [immediate])函数防抖。限制事件的频繁触发,将延迟函数的执行(真正的执行)在函数最后一次调用时刻的 wait 毫秒之后,对于必须在一些输入(多是一些用户操作)停止到达之后执行的行为有帮助。例如: 渲染一个 Markdown 格式的评论预览, 当窗口停止改变大小之后重新计算布局, 等等。传参 immediate 为 true,debounce会在 wait 时间间隔的开始调用这个函数。
const lazyLayout = _.debounce(calculateLayout, 300)
$(window).resize(lazyLayout)
_.throttle(function, wait, [options]) 函数节流。创建并返回一个像节流阀一样的函数,当重复调用函数的时候,至少每隔 wait 毫秒调用一次该函数。对于想控制一些触发频率较高的事件有帮助。默认情况下,throttle 将在你调用的第一时间尽快执行这个 function,(默认第一次和最后一次都执行function)。如果你想禁用第一次首先执行的话,传递{leading: false},还有如果你想禁用最后一次执行的话,传递{trailing: false}。
const throttled = _.throttle(updatePosition, 100)
$(window).scroll(throttled)
_.curry(fn, arity = fn.length, ...args)函数柯里化。如果提供的参数 (args) 数量足够,则调用传递函数 f ,否则返回一个 curried 函数 f
fn (Function) 调用函数arity (Number) 参数数量(可不传)...args (any) 剩余参数_.curry(Math.pow)(2)(10) // => 1024
_.timeTaken(callback)测试功能所花费的时间
_.timeTaken(() => Math.pow(2, 10)) // => 1024
// (logged): timeTaken: 0.019775390625ms
_.getOS()获取当前的操作系统
_.getOS(); // => 'MacOSX'
_.isMobile()判断当前环境是否为手机
_.isMobile(); // => true
_.redirect(url, aslink = true)重定向到指定的 URL
url (String) 待跳转 URLaslink (Boolean) 默认为 true, 传 false 时,你不能通过 “前进” 和 “后退” 来访问已经被替换的 URL_.redirect('http://muyunyun.cn/diana/'); // 重定向到 http://muyunyun.cn/diana/ 这个网址
FAQs
lightweight tool library
We found that diana demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Security News
React disclosed a CVSS 10.0 RCE in React Server Components and is advising users to upgrade affected packages and frameworks to patched versions now.

Research
/Security News
We spotted a wave of auto-generated “elf-*” npm packages published every two minutes from new accounts, with simple malware variants and early takedowns underway.

Security News
TypeScript 6.0 will be the last JavaScript-based major release, as the project shifts to the TypeScript 7 native toolchain with major build speedups.