joken1310 - 博客园

lodash get 使用，js如何实现lodash get

摘要： lodash get lodash 的 get 方法，它主要用于安全地访问对象的属性，避免因为中间属性不存在而导致的异常。这个方法可以按照指定的路径获取对象的属性值。比如，假设有一个对象 user，包含了 name 和 address 属性，你可以这样使用 get 方法： const _ = req 阅读全文

posted @ 2024-08-01 21:39 joken1310 阅读(543) 评论(0) 推荐(0)

js 如何拍平一个对象

摘要：在 JavaScript 中，你可以使用递归或一些现成的库来实现对象的扁平化。如果你希望手动实现，可以考虑以下方法之一：递归方法： function flattenObject(obj, prefix = '') { return Object.keys(obj).reduce((acc, key 阅读全文

posted @ 2024-08-01 21:35 joken1310 阅读(381) 评论(0) 推荐(0)

Object.groupBy 使用示例

摘要： const inventory = [ { name: "芦笋", type: "蔬菜", quantity: 5 }, { name: "香蕉", type: "水果", quantity: 0 }, { name: "山羊", type: "肉", quantity: 23 }, { name: 阅读全文

posted @ 2024-08-01 21:12 joken1310 阅读(49) 评论(0) 推荐(0)

js 数组sort排序

摘要：字符比较排序，原理是根据字符编码比较大小排序 // var abc=[1,3,6,2,5] var abc=['c','a','d','b'] var sorted=abc.sort((a,b)=>{ console.log(a,b,"slfjslkfjslkf") //通过返回正数或者负数来判断排阅读全文

posted @ 2024-08-01 21:05 joken1310 阅读(76) 评论(0) 推荐(0)

vue3 自定义渲染，渲染函数实现，配置渲染render函数,低代码配置自定义渲染函数核心实现

摘要：代码父组件 <template> <div class="component-name">  <Extend :render="render" /> </div> </template> <script setup lang="ts"> import { ref 阅读全文

posted @ 2024-07-31 22:36 joken1310 阅读(312) 评论(0) 推荐(0)

Element icons 全局引入方式参考

摘要： Element icons 全局引入方式参考 import type { App } from "vue"; import * as ElementPlusIconsVue from "@element-plus/icons-vue"; // 注册所有图标 export function setup 阅读全文

posted @ 2024-07-31 22:13 joken1310 阅读(153) 评论(0) 推荐(0)

vue模板中使用临时变量实例，for 循环中使用临时变量继承函数运行结果示例，函数运行结果保存临时变量示例

摘要：示例代码  <template> <div class="component-name">  <div v-for="item in items" :key="item.id" :data-item 阅读全文

posted @ 2024-07-30 22:32 joken1310 阅读(556) 评论(0) 推荐(0)

css 属性百分比基准—块级父元素

摘要：概论总体而言百分比的基准就是父元素的宽度高度，如果父元素有设置具体的宽高，就会以父元素的宽高为基准，没设置具体宽高的话，也就是父级width:auto;height:auto;元素宽会以父元素实际的占用宽为基准，高确不是以父元素的高为基准，此时高不生效。父元素须是块级元素。如果父元素是inlin 阅读全文

posted @ 2024-07-30 21:22 joken1310 阅读(159) 评论(0) 推荐(0)

js 一个对象有多层，都是分组对象，最后一层才是数组，怎么拍平这个对象，拍平后的格式是{a.b.c:[]}

摘要：要将一个嵌套对象拍平为 {a.b.c: []} 这种格式，可以使用递归方法遍历对象的每一层，并在最终层级构建平坦的键值对。以下是实现这一功能的示例代码： function flattenObject(obj, parentKey = '', result = {}) { for (let key i 阅读全文

posted @ 2024-07-27 11:41 joken1310 阅读(101) 评论(0) 推荐(0)

js 对数组进行任意层、n层分组

摘要：如果分组层数是动态的，即可以是 n 层，可以使用递归函数来实现。以下是一个示例代码，展示了如何实现动态层数分组： const _ = require('lodash'); // 示例数据 let data = [ { category: 'A', type: 'X', subType: 'Alpha 阅读全文

posted @ 2024-07-27 11:37 joken1310 阅读(119) 评论(0) 推荐(0)

xlsx-js-style 前端插件如何把table dom 转为表格下载

摘要：在 Vue.js 项目中使用 xlsx-js-style 来将 HTML 表格转换为 Excel 并下载，可以通过以下步骤实现：步骤安装 xlsx-js-style 库：使用 npm 安装 xlsx-js-style 库。 npm install xlsx-js-style 创建 Vue 组件阅读全文

posted @ 2024-07-24 22:04 joken1310 阅读(476) 评论(0) 推荐(0)

nvm 下载和安装使用

摘要：下载地址： https://nvm.uihtm.com/ 或者github下载免安装版本，需要自己设置环境变量 https://github.com/nvm-sh/nvm/releases 环境变量设置创建环境变量名 path 设置环境变量经过上面的设置，nvm就成为了全局命令；node也成为阅读全文

posted @ 2024-07-23 22:03 joken1310 阅读(420) 评论(0) 推荐(0)

vue3 ts 项目增加eslint插件实现命令行报错提示和vscode 报错提示,eslint 最新版本9.x多 2024年, prettier配置，前端规范化开发

摘要：快速开始安装eslint yarn add eslint -D 然后运行初始化eslint npx eslint --init 接着上面命令会自动生成一个新文件eslint.config.js eslint.config.js import globals from "globals"; impo 阅读全文

posted @ 2024-07-21 17:57 joken1310 阅读(691) 评论(0) 推荐(0)

xlsx 前端插件导出 elment表格示例

摘要：安装 yarn add xlsx yarn add file-saver git文档：https://github.com/rockboom/SheetJS-docs-zh-CN npm地址：https://www.npmjs.com/package/xlsx 代码 <template> <div 阅读全文

posted @ 2024-07-21 12:15 joken1310 阅读(80) 评论(0) 推荐(0)

mockjs 使用案例

摘要：案例 import Mock, { Random } from "mockjs"; const resData = Mock.mock({ // key中min-max 代表随机生成5到10条数组数据 'list|5-10': [{ //value @id 可以随机生成id 'id': '@id', 阅读全文

posted @ 2024-07-21 12:10 joken1310 阅读(62) 评论(0) 推荐(0)

vscode注释插件koroFileHeader使用, vue 文件注释插件

摘要：使用文档 https://github.com/OBKoro1/koro1FileHeader/wiki/安装和快速上手 git 地址 https://github.com/OBKoro1/koro1FileHeader 安装测试搜索setting.json 用户输入如下配置 // 头部注释 " 阅读全文

posted @ 2024-07-21 12:03 joken1310 阅读(379) 评论(0) 推荐(0)

vue3 使用component is 动态组件

摘要：使用方式父组件 <template> <div class="box"> <div>   <component :is="childT" 阅读全文

posted @ 2024-07-18 23:22 joken1310 阅读(1007) 评论(2) 推荐(1)

ts vue3 定义props写法参考

摘要：写法1 export interface Config { arr1: Array<IObject>, obj1?: IObject } const props = defineProps({ title: { type: String, //必须的prop required: true, defa 阅读全文

posted @ 2024-07-18 23:14 joken1310 阅读(249) 评论(0) 推荐(0)

vue3 watch watchEffect computed 使用差别

摘要：概论 watch 监听明确的数据 computed 监听数据并返回计算结果 watchEffect重视监听过程测试代码子组件 <template> <div class='box'> <div>props 监听测试</div> computed返回的内容的深度属性:{{ configTwo.ob 阅读全文

posted @ 2024-07-18 23:10 joken1310 阅读(104) 评论(0) 推荐(0)

vue 使用svg文件图片或者组件方式

摘要：代码 <template>  <div class="box"> <div>  <svg style="fill: red" xmlns="http://www.w3.org/2000/sv 阅读全文

posted @ 2024-07-16 22:01 joken1310 阅读(169) 评论(0) 推荐(0)

css 变量定义和使用方式

摘要：使用示例 <style lang="css" scoped> div,span{ --font-size-20:20px; } .color{ color:var(--color-red); font-size:var(--font-size-20); } </style> 另外也可以放在根节点: 阅读全文

posted @ 2024-07-16 21:11 joken1310 阅读(30) 评论(0) 推荐(0)

vue3 widthDefaults 设置props默认值

摘要：测试代码 <template> <div class="box"> <div><i-ep-edit /></div> <div><i-ep-chat-dot-round /></div> <div><i-ep-close /></div> </div> </template> <script lan 阅读全文

posted @ 2024-07-16 20:50 joken1310 阅读(222) 评论(0) 推荐(0)

vite 实现全局自动导入iconify 图标库组件方式

摘要： iconify https://iconify.design/ Iconify支持100多个图标集，上万种图标可随意使用，你能想到的他都有，Iconify是SVG图标，不是字体图标，所以你也可以结合elementui-plus使用，最后感谢antfu大佬提供的vite插件。 vite.config. 阅读全文

posted @ 2024-07-15 21:02 joken1310 阅读(653) 评论(0) 推荐(0)

base64 数据转png本地图片保存，js实现

摘要：要将 base64 编码的图像数据保存为 PNG 文件到本地，可以借助 JavaScript 和浏览器的 File API。以下是一个简单的步骤和示例代码：步骤：解析 Base64 数据：将 Base64 编码的字符串解析为二进制数据。创建 Blob 对象：使用解析后的二进制数据创建一个 Bl 阅读全文

posted @ 2024-07-14 15:35 joken1310 阅读(4355) 评论(0) 推荐(0)

html svg如何写，如何自己写、实现

摘要： SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 格式标记语言，它可以被浏览器直接渲染。SVG 图形具有良好的可伸缩性和清晰度，非常适合用于图标、图表、地图等应用场景。以下是编写 SVG 的基本语法和示例： 1. SVG 基本结构 SVG 图形可以直接写阅读全文

posted @ 2024-07-14 15:26 joken1310 阅读(893) 评论(0) 推荐(0)

css 自定义属性

摘要： CSS 自定义属性（Custom Properties），也称为 CSS 变量，是 CSS 中一种能够保存和复用值的机制。它们与常规的 CSS 属性不同，因为它们可以在整个文档中定义一次，然后在需要的任何地方使用。定义和语法定义一个自定义属性使用两个连字符（--）开头，后面跟着属性名，类似于下面阅读全文

posted @ 2024-07-14 15:21 joken1310 阅读(199) 评论(0) 推荐(0)

es5 js函数有哪几种继承方式

摘要：在 ES5（ECMAScript 5）中，JavaScript 函数有几种继承方式，主要是通过原型链实现的。以下是常见的几种继承方式：原型链继承（Prototype Inheritance）：原理：通过将子类的原型对象设置为父类的实例来实现继承。特点：可以继承父类的实例方法和属性，但无法实现多阅读全文

posted @ 2024-07-14 15:16 joken1310 阅读(50) 评论(0) 推荐(0)

js class super的作用

摘要： js super作用在 JavaScript 中，super 关键字有两个主要用途：在子类的构造函数中调用父类的构造函数：使用 super() 来调用父类的构造函数，并继承父类的属性。在子类的方法中调用父类的方法：使用 super.methodName() 来调用父类的方法。示例解释使阅读全文

posted @ 2024-07-14 15:13 joken1310 阅读(388) 评论(0) 推荐(0)

ts一个class有几种类型的属性

摘要：在 TypeScript 中，一个类（class）可以拥有以下几种类型的属性：实例属性（Instance properties）：这些属性是在类的构造函数中使用 this 关键字定义的。每个实例都有自己独立的实例属性。原型属性（Prototype properties）：这些属性是定义在类阅读全文

posted @ 2024-07-14 15:11 joken1310 阅读(274) 评论(0) 推荐(0)

js 一个函数有几种类型的属性

摘要：在 JavaScript 中，函数对象可以拥有多种类型的属性。主要可以分为以下几类：实例属性（Instance properties）：这些属性是在通过函数构造函数创建实例时绑定到实例上的属性。原型属性（Prototype properties）：这些属性是绑定到函数对象的原型上的属性。实例阅读全文

posted @ 2024-07-14 15:08 joken1310 阅读(76) 评论(0) 推荐(0)

ts bigint和number的区别

摘要：在 TypeScript（以及 JavaScript）中，bigint 和 number 是两种不同的数值类型，它们有一些显著的区别和特性。区别和特性表示范围： number：表示标准的双精度 64 位浮点数，可以表示的范围是从 -Number.MAX_SAFE_INTEGER 到 Number 阅读全文

posted @ 2024-07-14 13:48 joken1310 阅读(904) 评论(0) 推荐(0)

vite webpack tree shaking原理

摘要： Tree shaking 是一种优化 JavaScript 或 TypeScript 代码打包输出的技术，其主要目的是移除代码中未使用的部分（即死代码），从而减小最终生成的文件大小，提升应用程序的性能和加载速度。 Tree Shaking 的工作原理包括以下几个关键步骤：静态分析： Tree sh 阅读全文

posted @ 2024-07-14 13:46 joken1310 阅读(569) 评论(0) 推荐(0)

js实现归并排序算法

摘要：在 JavaScript 中实现归并排序可以通过递归的方式完成。归并排序使用了“分而治之”的策略，将数组递归地分成两个子数组，分别进行排序，然后将它们合并成一个有序数组。以下是一个简单的归并排序实现： function mergeSort(arr) { // 如果数组只有一个元素或为空，则直接返回数阅读全文

posted @ 2024-07-14 10:02 joken1310 阅读(211) 评论(0) 推荐(0)

js实现快速排序算法

摘要：在JavaScript中实现快速排序可以通过递归方式来完成。下面是一个示例代码： function quickSort(arr) { // 如果数组为空或只有一个元素，则无需排序 if (arr.length <= 1) { return arr; } // 选择基准元素（这里选择中间元素） con 阅读全文

posted @ 2024-07-14 10:00 joken1310 阅读(254) 评论(0) 推荐(0)

js 实现冒泡排序算法

摘要：冒泡排序是一种简单的排序算法。它重复地遍历待排序的列表，比较相邻的元素并交换位置，如果它们的顺序错误。这个过程会重复进行，直到整个列表排序完成。下面是用 JavaScript 实现的冒泡排序算法： function bubbleSort(arr) { let n = arr.length; let 阅读全文

posted @ 2024-07-13 20:52 joken1310 阅读(273) 评论(0) 推荐(0)

js 实现二分搜索算法

摘要：二分算法搜索数字二分搜索算法是一种在有序数组中查找目标值的高效方法。其时间复杂度为 (O(\log n))。下面是用 JavaScript 实现的二分搜索算法： function binarySearch(arr, target) { let left = 0; let right = arr.l 阅读全文

posted @ 2024-07-13 20:50 joken1310 阅读(172) 评论(0) 推荐(0)

`require.context` 参数和使用

摘要： require.context 是 Webpack 提供的一个方法，用于创建自己的（上下文）模块。这些模块可以动态导入符合特定条件的文件。在使用 require.context 时，你需要提供三个参数： directory: 要搜索的文件夹路径（字符串）。 useSubdirectories: 是否阅读全文

posted @ 2024-07-13 17:23 joken1310 阅读(357) 评论(0) 推荐(0)

ts vue3 自定义指令

摘要：当然，以下是将前面两个步骤汇总到一起的完整实现方案： 1. 定义指令首先，在 src/directives 文件夹中创建你的自定义指令文件。例如，v-focus.ts 和 v-color.ts： v-focus.ts： import { Directive } from 'vue'; const 阅读全文

posted @ 2024-07-13 17:22 joken1310 阅读(388) 评论(0) 推荐(0)

js 树形数组转一维数组，或一维数组转树形数组

摘要：树形数组转一维数组要将一棵树结构（包含 children 属性）拍平为一个一维数组，可以使用递归或迭代的方法。下面是两种常见的实现方式： 1. 使用递归 function flattenTree(tree) { let result = []; tree.forEach(node => { res 阅读全文

posted @ 2024-07-13 16:27 joken1310 阅读(474) 评论(0) 推荐(0)

unplugin-vue-components 简介

摘要： unplugin-vue-components 简介 unplugin-vue-components 是一个用于自动导入 Vue 组件的插件，能够在 Vue 3 项目中简化组件的使用，无需手动导入每个组件。它支持按需加载，提高开发效率。安装使用 npm 或 yarn 安装插件： npm inst 阅读全文

posted @ 2024-07-13 16:22 joken1310 阅读(1235) 评论(0) 推荐(0)

joken-前端工程师