diff --git a/CHANGELOG.md b/CHANGELOG.md index 733aa9cb..da829357 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ### 更新信息 +- 2024.04.07：utils 增加 env环境判断、web utils 增加资源加载相关方法 - 2024.03.10：修改 utils & web util functions(部分方法类型声明及参数处理优化, Storage) - 2024.02.04：修改 util functions(增加 check 方法，部分方法实现或注释调整)； - 2024.01.14：增加 vite-react+ts 模版；node-utils 小更新； diff --git a/README-en.md b/README-en.md index 3f819743..6be975d8 100644 --- a/README-en.md +++ b/README-en.md @@ -394,7 +394,9 @@ A schema declaration and verification library headed by TypeScript, which can be | https://github.com/privatenumber/vue-2-3 | vue-2-3 | A solution encapsulation for coexistence of Vue2 and Vue3. | | https://docs-swrv.netlify.app/ | SWRV | Vue hook library for data requests, handling request caching, status, and more. | | https://www.attojs.org/ | vue-request | The Vue hook library for data requests is slightly richer than swrv. | -| https://www.vueusejs.com/ | vue-use | Utility set based on Vue composite API, in addition to commonly used request animation package, but also packaged browser, electron utils. +| https://www.vueusejs.com/ | vue-use | Utility set based on Vue composite API, in addition to commonly used request animation package, but also packaged browser, electron utils. | +| https://github.com/devilwjp/vuereact-combined#readme | vuereact-combined | Use React in Vue2 and Vue2 in React, And as perfect as possible. | +| https://github.com/devilwjp/veaury | veaury | Use React in Vue3 and Vue3 in React, And as perfect as possible. | ### 1.6 React diff --git a/README.md b/README.md index 7f5596f4..27625335 100644 --- a/README.md +++ b/README.md @@ -383,6 +383,9 @@ SWRV | `swrv` | 用于数据请求的 Vue 钩子库，处理了请求缓存、状态等等。 Vue Request | `vue-request` | 用于数据请求的 Vue 钩子库，比swrv能力要稍微丰富一些。 Vue Use | `vue-use` | 基于Vue组合式API的实用工具集，除了常用的请求动画等封装外、还封装了浏览器、electron utils。 +Vue React Combined | `vuereact-combined` | Vue2和React快捷集合的工具包。 + Veaury | `veaury` | Vue3 和 React 快捷集合的工具包。 + ### 1.6 React 地址 | 标签 | 说明 @@ -798,6 +801,7 @@ #### 模块 +- [env](./utils/packages/env/)：环境判断常量； - [utils](./utils/packages/utils/)：基础工具方法集合，与环境无关； - [web-utils](./utils/packages/web-utils/)：web基础工具方法集合。浏览器端DOM操作，CSS操作，事件处理等封装，适用于浏览器； - [node-utils](./utils/packages/node-utils/)：Nodejs文件，事件处理等封装； diff --git a/datas/README.md b/datas/README.md new file mode 100644 index 00000000..7f77d219 --- /dev/null +++ b/datas/README.md @@ -0,0 +1,6 @@ +# fe-tools datas + +供 chrome 插件进行搜索和查询的数据。 +- `moo-css.json`：样式查询 +- `regex.json`：正则规则查询 +- `tools.json`：各常用链接查询 diff --git a/docs/datas/moo-css.json b/datas/moo-css.json similarity index 100% rename from docs/datas/moo-css.json rename to datas/moo-css.json diff --git a/docs/datas/regex.json b/datas/regex.json similarity index 100% rename from docs/datas/regex.json rename to datas/regex.json diff --git a/datas/tools.json b/datas/tools.json new file mode 100644 index 00000000..056758fd --- /dev/null +++ b/datas/tools.json @@ -0,0 +1 @@ +[{"name":"常用网站","children":[{"name":"HTML/CSS/JavaScript/WASM/Dart","children":[{"name":"MDN 文档手册","desc":"Mozilla出品的一个很全很有用的前端查询/学习网站。","link":"https://developer.mozilla.org/zh-CN/docs/Web","target":["html","css","js"]},{"name":"MDN AI助手","desc":"基于gpt3.5的MDN文档问答机器人。","link":"https://developer.mozilla.org/en-US/plus/ai-help","target":["html","css","js"]},{"name":"W3C官网","desc":"W3C官方标准。","link":"https://www.w3.org/","target":["html","css","js"]},{"name":"W3C学习网站","desc":"W3C School，国际热门的web开发学习网站，适合入门。","link":"https://www.w3schools.com/","target":["w3cshool"]},{"name":"W3C CSS","desc":"W3C CSS规范文档。","link":"https://www.w3.org/Style/CSS/","target":["w3c-css"]},{"name":"css属性参考手册","desc":"快速查询css属性及基本使用。","link":"https://www.runoob.com/cssref/css-reference.html","target":["css"]},{"name":"canvas api速查手册","desc":"canvas API方法集合。","link":"https://www.canvasapi.cn/","target":["canvas"]},{"name":"W3C官网-SVG","desc":"W3C官网，SVG文档（左侧RECOMMENDATIONS）。","link":"https://www.w3.org/Graphics/SVG/","target":["svg"]},{"name":"VML 参考手册","desc":"*早期（如果你仍要兼容IE6/7）微软开发的在低端IE上运行的图形绘制DSL、类似“SVG”。","link":"http://www.t086.com/code/vml/","target":["VML(IE)"]},{"name":"TypeScript官方手册","desc":"TypeScript官方手册。","link":"https://www.typescriptlang.org/docs/handbook/intro.html","target":["typescript"]},{"name":"TypeScript Challenges","desc":"TypeScript Challenges，在线学习/检验自己的ts类型编程水平。","link":"https://github.com/type-challenges/type-challenges","target":["ts-challenges"]},{"name":"ECMA standards ","desc":"ECMAScript 协议标准。","link":"https://www.ecma-international.org/publications-and-standards/standards/","target":["ecma"]},{"name":"ECMA International(6)","desc":"ECMAScript6官方文档。","link":"http://www.ecma-international.org/ecma-262/6.0/","target":["ES6"]},{"name":"ECMA International(6) 汉化 ","desc":"ECMAScript6官方文档的中文翻译版（只有少部分且挺久没更新了）。","link":"https://ecma262.docschina.org/","target":["ES6"]},{"name":"ECMA6 features ","desc":"通俗易懂的ECMAScript6特性demos。","link":"http://es6-features.org/","target":["ES6"]},{"name":"ES6入门（阮一峰）","desc":"国内使用频率最高的ECMAScript6文档，特别适合新手。","link":"https://es6.ruanyifeng.com/","target":["ES6"]},{"name":"Web API Reference","desc":"HTML5 web API查询，如摄像头/地理位置。","link":"http://www.html5plus.org/doc/h5p.html","target":["html5"]},{"name":"Safari HTML Ref查询","desc":"Safari webview的HTML标签查询，用于移动web开发，比如某些iOS特殊的属性或表现可以查这个。","link":"https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocorrect","target":["html"]},{"name":"WebKit 特性状态查询","desc":"WebKit 官网文档，js/css特性状态支持情况查询。","link":"https://webkit.org/status/","target":["webkit"]},{"name":"Dart官网","desc":"dart语言英文官网。","link":"https://dart.dev/","target":["dart"]},{"name":"Dart中文网","desc":"dart语言中文学习网。","link":"https://www.dartcn.com/guides/language/language-tour","target":["dart"]},{"name":"RFC规范官网","desc":"RFC协议官网，可查询HTTP协议等内容。","link":"https://www.rfc-editor.org/","target":["rfc","http"]},{"name":"Media Types","desc":"媒体类型列表，MIME。","link":"https://www.iana.org/assignments/media-types/media-types.xhtml","target":["MIME"]},{"name":"Web Assembly官网","desc":"Web Assembly(wasm)英文官网。","link":"https://webassembly.org/","target":["wasm"]},{"name":"Web Assembly中文网","desc":"Web Assembly(wasm)中文网。","link":"https://www.wasm.com.cn/","target":["wasm"]},{"name":"Krustlet 官网","desc":"一款 Web Assembly 框架。","link":"https://docs.krustlet.dev/","target":["krustlet"]}]},{"name":"兼容/查询","children":[{"name":"can i use","desc":"使用频率最高的兼容支持查询网站。","link":"https://caniuse.com/","target":["caniuse"]},{"name":"ES兼容查询","desc":"ECMAScript兼容查询。","link":"https://github.com/compat-table/compat-table","target":["js"]},{"name":"微信小程序ES兼容查询","desc":"微信小程序ES api及对应小程序环境版本兼容查询。","link":"https://wechat-miniprogram.github.io/miniprogram-compat/","target":["weapp"]},{"name":"iOS字体","desc":"iOS系统自带字体支持情况查询。","link":"http://iosfonts.com/","target":["ios font"]},{"name":"Web安全色查询","desc":"*为了尽量让用户看到色彩相同的网页,请尽量使用216色的web安全色。","link":"https://www.bootcss.com/p/websafecolors/","target":["web color"]},{"name":"StatCounter浏览器份额统计","desc":"*StatCounter的浏览器统计报表","link":"https://gs.statcounter.com/","target":["statcounter"]},{"name":"浏览器份额统计","desc":"*百度统计的市面上浏览器/app份额（现在已经没有了，只剩百度统计产品）。","link":"http://tongji.baidu.com/data/browser","target":["browser"]}]},{"name":"CSS工具","children":[{"name":"预处理","children":[{"name":"less文档","desc":"易上手的CSS预处理工具。","link":"https://lesscss.org/","target":["less"]},{"name":"sass 文档","desc":"热门的CSS预处理工具。","link":"https://sass-guidelin.es/zh/","target":["sass"]},{"name":"stylus 文档","desc":"功能丰富的CSS预处理工具。","link":"http://stylus-lang.com/","target":["stylus"]},{"name":"stylus 文档(张旭鑫)","desc":"stylus中文文档。","link":"http://www.zhangxinxu.com/jq/stylus/","target":["stylus"]},{"name":"Assembler CSS 文档","desc":"Assembler CSS 官方文档，Just-in-time。","link":"https://asmcss.com/","target":["asmcss"]}]},{"name":"后处理","children":[{"name":"postcss 文档","desc":"被广泛运用的CSS后处理工具。","link":"http://api.postcss.org/","target":["postcss"]},{"name":"postcss 插件","desc":"post插件库中心。","link":"https://github.com/postcss/postcss","target":["postcss"]},{"name":"autoprefixer","desc":"自动补充浏CSS前缀的后处理工具。","link":"https://github.com/postcss/autoprefixer","target":["autoprefixer"]},{"name":"cssnano官网","desc":"CSS优化和分解插件。","link":"https://cssnano.co/","target":["cssnano"]},{"name":"postcss-plugin-px2rem","desc":"将px单位转为rem单位的工具。","link":"https://www.npmjs.com/package/postcss-plugin-px2rem","target":["px2rem"]},{"name":"postcss-px-to-viewport","desc":"将px单位转为vw单位的工具。","link":"https://www.npmjs.com/package/postcss-px-to-viewport","target":["px2vw"]},{"name":"cssnext官网","desc":"让今天的我们写着明天的CSS特性。","link":"https://cssnext.github.io/","target":["cssnext"]}]},{"name":"样式库/模块","children":[{"name":"30s-of-code(css)","desc":"常用CSS样式模块集合，30s of code系列。","link":"https://css.30secondsofcode.org/","target":["30s-of-code(css)"]},{"name":"animate.css","desc":"CSS3动画库。","link":"https://daneden.github.io/animate.css/","target":["bulma.css"]},{"name":"Hover.css","desc":"PC鼠标hover交互动画库。","link":"http://ianlunn.github.io/Hover/","target":["Hover.css"]},{"name":"bulma.css","desc":"一款轻量级的CSS UI库。","link":"https://bulma.io/","target":["bulma.css"]},{"name":"cardinal.css","desc":"一款移动优先的less库。","link":"http://cardinalcss.com/","target":["cardinal.css"]},{"name":"bootflat.css","desc":"一款扁平化风格scss库，基于BootStrap3.3。","link":"http://bootflat.github.io/index.html","target":["bootflat.css"]},{"name":"corpus.css","desc":"一款scss集合库。","link":"https://jamiewilson.io/corpus/","target":["corpus.css"]},{"name":"weui","desc":"微信风格的样式库，腾讯。","link":"https://github.com/Tencent/weui","target":["weui"]},{"name":"materialize.css","desc":"Material风格的响应式前端样式框架。","link":"http://www.materializecss.cn/","target":["materializecss"]},{"name":"mui.css","desc":"Material风格的轻量级前端样式框架。","link":"https://www.muicss.com","target":["MUI"]},{"name":"Metro UI","desc":"一款流行的响应式前端样式框架，[React版](https://react.metroui.org.ua/)。","link":"https://metroui.org.ua/","target":["Metro UI"]},{"name":"NES.css","desc":"游戏机像素风格的前端样式框架。","link":"https://nostalgic-css.github.io/NES.css/","target":["NES.css"]},{"name":"paper.css","desc":"手绘风格的前端样式框架。","link":"https://www.getpapercss.com","target":["paper.css"]},{"name":"css3 icon","desc":"纯CSS实现的图标。","link":"http://www.uiplayground.in/css3-icons/","target":["css3 icon"]},{"name":"Bootstrap 文档","desc":"红极一时的响应式前端样式框架。","link":"http://bootstrap.css88.com/css/","target":["bootstrap"]},{"name":"layui 文档","desc":"一款采用自身模块规范编写的前端 UI 框架。","link":"https://www.layui.com/doc/","target":["layui"]},{"name":"fontawesome","desc":"字体图标库。","link":"https://fontawesome.com/","target":["fontawesome"]},{"name":"iconfont","desc":"字体图标库，阿里。","link":"https://www.iconfont.cn/","target":["iconfont"]},{"name":"normalize","desc":"相对较优的CSS reset替代方案。","link":"http://necolas.github.io/normalize.css/","target":["normalize"]},{"name":"Tailwind官网","desc":"模块化的UI库。","link":"https://tailwindcss.com/","target":["tailwind"]},{"name":"Unocss官网","desc":"原子、按需的css模块化引擎、有借鉴tailwind。","link":"https://unocss.dev/","target":["unocss"]}]},{"name":"其他","children":[{"name":"css tricks","desc":"包括布局、图标、动画等CSS技巧。","link":"https://qishaoxuan.github.io/css_tricks/","target":["css tricks"]},{"name":"BEM","desc":"BEM写法规范。","link":"https://en.bem.info/methodology/quick-start/","target":["bem"]},{"name":"ACSS","desc":"Atomic CSS，一种模块化写法规范。","link":"https://acss.io/","target":["acss"]},{"name":"IT.css","desc":"IT CSS，一种组件化写法规范。","link":"https://csswizardry.net/talks/2014/11/itcss-dafed.pdf","target":["itcss"]},{"name":"CSS modules","desc":"一种CSS样式模块化的解决方案。","link":"https://glenmaddern.com/articles/css-modules","target":["css-modules"]},{"name":"css in js","desc":"用写js的方式生成css样式。","link":"https://github.com/MicheleBertoli/css-in-js","target":["css-in-js"]},{"name":"Moo-CSS","desc":"一种CSS写法方案。","link":"http://blog.michealwayne.cn/Moo-CSS/docs/moocss/#m%E6%A8%A1%E5%9D%97","target":["moo-css"]},{"name":"CSS tricks for web developers","desc":"CSS技巧集合。","link":"https://github.com/l-hammer/You-need-to-know-css","target":["You-need-to-know-css"]},{"name":" logotyp.us ","desc":"国内外知名企业/商业的logo集合。","link":"https://logotyp.us/","target":["logotyp"]}]}]},{"name":"JS插件/库","children":[{"name":"库","children":[{"name":"LoDash","desc":"广为人知的函数式工具库。","link":"https://lodash.com/docs/","target":["lodash"]},{"name":"ramda","desc":"比较著名的函数式工具库。","link":"https://github.com/ramda/ramda","target":["ramda"]},{"name":"fp-ts","desc":"遵循函数式编程范式的ts封装库。","link":"https://gcanti.github.io/fp-ts/","target":["fp-ts"]},{"name":"radash","desc":"ts函数式工具库。","link":"https://github.com/rayepps/radash","target":["radash"]},{"name":"UnderscoreJS","desc":"红极一时的函数式工具库。","link":"https://underscorejs.org/","target":["underscorejs"]},{"name":"jQueryJs","desc":"早年红极一时的js封装库。","link":"http://www.css88.com/jqapi-1.9/","target":["jQuery"]},{"name":"ZeptoJs","desc":"轻量级“jQuery”，移动端使用的比较多。","link":"http://www.css88.com/doc/zeptojs_api/","target":["Zepto"]},{"name":"city.js","desc":"全国行政区划分数据文件。","link":"https://github.com/basecss/city","target":["city"]},{"name":"phaser.js","desc":"2D游戏前端库。","link":"http://phaser.io/","target":["phaser"]},{"name":"fabric.js","desc":"有名的svg和canvas相互转换的封装库。","link":"http://fabricjs.com/","target":["fabricjs"]},{"name":"babylon.js","desc":"有名的3D游戏/视频框架。","link":"https://www.babylonjs.com/","target":["babylonjs"]},{"name":"immutable-js","desc":"生产环境js的List, Stack, Map, OrderedMap, Set, OrderedSet以及Record数据结构支持，通常用于ReactJs。","link":"https://immutable-js.github.io/immutable-js/","target":["immutable"]},{"name":"GCanvas","desc":"轻量的跨平台图形引擎（web/weex/react-native），阿里。","link":"https://github.com/alibaba/GCanvas","target":["gcanvas"]},{"name":"core-decorators","desc":"丰富的装饰器封装库，基于ES2016/2017的装饰器语法。","link":"https://github.com/jayphelps/core-decorators","target":["core-decorators"]},{"name":"http-status-codes","desc":"枚举 HTTP 状态代码的常量。支持 RFC1945（HTTP/1.0、RFC2616 (HTTP/1.1) 和 RFC2518 (WebDAV)）中定义的所有状态代码。常用于ajax请求处理，ts。","link":"https://github.com/prettymuchbryce/http-status-codes","target":["http-status-codes"]},{"name":"Zodjs","desc":"以 TypeScript 为首的模式声明和验证库，可用于数字格式校验及生成ts声明。","link":"https://zod.dev/README_ZH","target":["zod"]},{"name":"ts2dart","desc":"一款 TypeScript 转 Dart 语言的工具库（会存在一些问题），有挺多年没维护了。","link":"https://github.com/dart-archive/ts2dart","target":["ts2dart"]},{"name":" InversifyJS ","desc":"一款 js/ts IoC的封装库。","link":"https://github.com/inversify/InversifyJS","target":["inversify"]},{"name":" BottleJs ","desc":"一轻量 js/ts 依赖注入容器库。特点是延迟加载。","link":"https://github.com/young-steveo/bottlejs","target":["bottlejs "]}]},{"name":"数据工具","children":[{"name":"stdlib","desc":"js的数学增强库。","link":"https://stdlib.io/","target":["stdlib"]},{"name":"StreamJs","desc":"一款js数据的操作工具。","link":"http://winterbe.github.io/streamjs/","target":["streamjs"]},{"name":"BaconJs","desc":"也是一款js数据的操作工具。","link":"https://baconjs.github.io/","target":["baconjs"]},{"name":"Date fns","desc":"一款模块化支持按需的日期格式化工具。","link":"https://date-fns.org/","target":["date-fns"]},{"name":"DayJs","desc":"一款日期格式化的工具，轻量，MomentJS的替代品。","link":"https://day.js.org/","target":["dayjs"]},{"name":"MomentJs","desc":"一款日期格式化的工具（2020开始停止维护）。","link":"https://momentjs.com/","target":["momentjs"]},{"name":"numbro","desc":"一款多国语言的数字转化工具。","link":"http://numbrojs.com/","target":["numbrojs"]},{"name":" NumeralJs","desc":"用于格式化和操作数字的 js 库。","link":"http://numeraljs.com/","target":["numeraljs"]},{"name":"accounting.js","desc":"数字，金钱的格式化工具。","link":"http://openexchangerates.github.io/accounting.js/","target":["accounting.js"]},{"name":"money.js","desc":"金钱的汇率转换工具。","link":"http://openexchangerates.github.io/money.js/","target":["money.js"]},{"name":"decimal.js","desc":"Js精度处理库。","link":"https://github.com/MikeMcl/decimal.js#readme","target":["decimal.js"]}]},{"name":"请求、cookie和缓存","children":[{"name":"axios","desc":"高频使用的ajax库。","link":"https://github.com/axios/axios","target":["axios"]},{"name":"fetch","desc":"Fetch API的兼容polyfill。","link":"https://github.com/github/fetch","target":["fetch"]},{"name":"jsonp","desc":"不用多说，实现jsonp。（axios没有封装jsonp）","link":"https://github.com/webmodules/jsonp","target":["jsonp"]},{"name":"URI.js","desc":"URI解析操作的库。","link":"http://medialize.github.io/URI.js/","target":["uri"]},{"name":"StoreJs","desc":"storage的封装库，兼容IE6。","link":"https://github.com/marcuswestin/store.js/","target":["storage"]},{"name":"js-cookie","desc":"cookie的封装库。","link":"https://github.com/js-cookie/js-cookie","target":["js-cookie"]},{"name":"Dexie.js","desc":"IndexedDB的封装库。","link":"https://dexie.org/","target":["dexiejs"]},{"name":"localForage.js","desc":"基于IndexedDB、WebSQL、localStorage的离线存储库，Mozilla。","link":"https://localforage.github.io/localForage/","target":["localForage"]},{"name":"basket.js","desc":"利用localStorage来缓存script和css资源。","link":"https://addyosmani.com/basket.js/","target":["basket.js"]}]},{"name":"插件","children":[{"name":"swiper.js","desc":"轮播插件。","link":"https://www.swiper.com.cn/","target":["swiper"]},{"name":"nanobar.js","desc":"绚丽的进度条展示插件，IE7+。","link":"https://github.com/jacoborus/nanobar/","target":["nanobar"]},{"name":"sweetalert","desc":"效果不错的PC alert展示插件。","link":"https://sweetalert.js.org/","target":["sweetalertjs"]},{"name":"bowserjs","desc":"通过ua做的浏览器探测插件。","link":"https://github.com/lancedikson/bowser","target":["bowserjs"]},{"name":"clipboard.js","desc":"剪贴板控制插件。","link":"https://clipboardjs.com/","target":["clipboardjs"]},{"name":"Qrcode-generator","desc":"二维码生成工具。","link":"https://github.com/kazuhikoarase/qrcode-generator/tree/master/js","target":["grcode-generator"]},{"name":"html2canvas","desc":"html转为图片（canvas），即实现网页截图。","link":"http://html2canvas.hertzen.com/documentation","target":["html2canvas"]},{"name":"rrweb","desc":"基于样式截取的网页“录屏”工具，实现用户操作采集和回放。","link":"https://www.rrweb.io/","target":["rrweb "]},{"name":"Pen Editor","desc":"web的文本编辑工具。","link":"https://github.com/sofish/pen#readme","target":["Pen Editor"]},{"name":"cleave.js","desc":"一款好用的input输入控制插件。","link":"https://nosir.github.io/cleave.js/","target":["cleave.js"]},{"name":"autosize.js","desc":"一款好用的`