- 博客(26)
- 收藏
- 关注
RSS订阅原创 输入框事件compositionstart和compositionend的妙用
巧用compositionstart和compositionend两个API解决react或taro输入框中文输入法抖动问题，vue框架中v-model的指令处理输入框事件的细节处理
2023-06-14 06:36:59
4413
1
原创 面试参考点：手写一个Object.create方法
Object.create()方法用于创建一个新对象，使用现有的对象来作为新创建对象的原型（prototype）。所以可以使用Object.create()来实现类式继承
2023-04-28 02:57:33
145
原创 js算法题：商品sku多规格组合
题目：const arr =[['A','B'],['a','b'],[1,2]] 求二维数组的全排列组合 结果：Aa1,Aa2,Ab1,Ab2,Ba1,Ba2,Bb1,Bb2
2023-04-23 03:29:42
565
1
原创 js算法题：找出字符串中不重复的字符
如这样一串字符串：aaaabjggsskkff，要找出bj这两个不重复的字符思路：1.用字典的方式，key为出现的字符，value为出现的次数进行记录2.找出刚刚记录的字典里面值为1的字符拼接返回代码如下：function checkStr(str) { const obj = {}; let newStr = ''; for (let i = 0; i < str.length; i++) { let key = str[i]; let value = obj[k
2022-05-13 04:22:22
883
原创 js算法题：驼峰命名法转下划线命名法
最近遇到这样一道手写代码题就是：如 onClickHandleBind把它 转成 on_click_handle_bind先说思路：1.先把onClickHandleBind所有字母转成小写（或者转成大写也行）2.onclickhandlebind按照字符串顺序与onClickHandleBind对比，如发现c与C不相等，那么支持拼接成 _c下面是代码实现：function transformName(name) { let copyName = name.toLowerCase()
2022-05-13 03:51:12
565
原创 提取InstanceType实例化构造函数里面某个属性的类型
我们常常会看到很多组件库采用InstanceType去暴露出组件的实例我们可以直接通过属性的方式去获取实例后的内部属性类型，如：FormItemInstance['rules']
2022-03-23 15:51:31
443
原创 typescript高级类型语法
& (交叉类型)&让两者的类型都满足才行，否则报错：interface Bird { name: string; fly(): void;}interface Per { name: string; talk(): void;}type BirdPerson = Bird & Per;let p: BirdPerson = { name: "zhufeng", fly() {}, talk() {} };let p1: BirdPerson
2022-03-10 19:03:56
747
原创 package.json中dependencies或devDependencies中依赖的版本号常用的符号
如下是package.json文件内容{ "name": "vite-demo", "private": true, "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "element-plus": "^2.0.2", "sass": "^1.49.8",
2022-03-02 19:39:46
1697
原创 vue3中props和emit如何使用
在vue3中使用setup新增这个特性可以使用函数式编程，在<script setup>中必须使用defineProps和defineEmitsAPI来声明props和emits<template> <div> <p @click="changeFn($event)">{{ foo }}</p> </div></template><script setup>impor...
2022-03-02 17:29:16
1362
原创 vue3+ts使用v-for出现unknown问题
<template> <el-table :data="tableData" style="width: 1200px"> <el-table-column v-for="tableItem in tableHeader" :fixed="tableItem.fixed" :prop="tableItem.prop" :label="tableItem.label" :width="tableItem.w.
2022-02-23 18:23:31
7902
3
原创 tsconfig.json文件配置参数的注解
{ "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ /* 项目 */ "incremental": true, /* 启用增量编译 */ "composite": true, /* 允许TypeScript项目与项目引.
2022-02-22 19:34:55
1269
原创 Vue自定义指令
vue官方有提供给我们自定义像v-model 和 v-show这样的指令，来看看怎么定义话不多说我们事先用vue官方脚手架创建一个项目比如我们要定义一个鼠标移入就把当前dom原生透明度显示为0，鼠标移开的时候为1，达到鼠标移入显示，鼠标移开隐藏的效果function on(element, event, handler) { if (element && event && handler) { element.addEventListener(eve
2022-02-09 15:17:43
1392
原创 面试常考点：手写一个简易版的Promise
要实现一个promise首先我们要知道以下几点：1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pend
2022-02-08 17:53:32
621
原创 面试常考点：手写实现一个instanceof
首先来看几个例子console.log("111" instanceof Object); //falseconsole.log({} instanceof Object); //trueconsole.log([] instanceof Array); //trueconsole.log(String instanceof String); //falseinstanceof 的原理：其实就是判断左边的对象是否在右边对象的原型链上也就是说:left.__proto__ === right.
2022-02-08 15:58:13
582
原创 面试常考点：模拟new实例化
先来这么一段代码function Preson(name, age) { this.name = name; this.age = age; this.say = function () { console.log("我叫：" + this.name, "今年：" + this.age + "岁了！"); };}let p = new Preson("朱莉", 19);console.log("p", p);定义一个p去接收实例化出来的结果，可以看到p上面有三个
2022-02-08 15:00:49
426
原创 面试常考点：手写一个call和apply
面试的时候call和apply是经常被问到的点，它们可以用来改变函数的this指向，那么是怎么实现的呢？首先我们定义一个需要用到的实例代码const name = 45456;const obj = { name: 111, fn: function (param1, param2) { console.log(this.name, param1, param2); },};我们调用自带的call方法obj.fn.call(null, 2, n
2022-02-07 17:16:11
412
原创 面试常考点：实现一个深拷贝
思路：由于引用类型复制的时候通常是拷贝内存地址，也就是浅拷贝，所以深拷贝是重点为了处理引用类型的复制，，主要是数组和对象的时候，需要重新开辟内存。首先定义一下类型校验工具类：目前只需要校验 数组和对象function checkType(type) { return function (value) { return Object.prototype.toString.call(value).slice(8, -1).toLocaleUpperCase() === type
2022-01-05 19:17:51
516
原创 面试常考点：定义一个通用校验类型的函数
这里我们采用：Object.prototype.toString.call() 获取类型话不多说上代码：function checkType(type) { return function (value) { return Object.prototype.toString.call(value).slice(8, -1).toLocaleUpperCase() === type.toLocaleUpperCase(); }}var isNumber = c
2022-01-05 15:21:11
214
原创 面试常考点: 实现一个bind
分析：bind函数目的是改变this指向，返回一个新的函数假如我们有这么两个Object对象const obj = { name: 'obj' }const module = { name: 'module', getName: function (param, param2) { console.log(param, param2) return this.name
2022-01-05 12:51:01
423
原创 面试常考点：防抖与节流
防抖（debounce）：某段时间内不管触发多少次，都会重新计算执行时间，只执行最后一次函数。防抖的使用场景：1.输入框事件：输入后需要不断发送请求匹配模糊搜索的内容，可以使用防抖减少请求次数2.浏览器懒加载图片：滚动条不断下拉的触发onscroll事件，可以使用防抖就行优化减少onscroll事件代码实现：// 防抖是只执行最后一次 function debounce(fn, wait) { let argThis = this;
2021-11-15 16:06:35
813
原创 vue自定义v-model
由于本质上v-model只是input的v-bind:value和v-on:input的语法糖官方的案例和解释是这样的也就是说我们需要在子组件内部定义model和propsmodel里面的event值子组件的事件，prop值修改的值比如说定义一个输入框组件<template> <div class="em-input"> <input type="text" @input="$emit('input',$event.target.value
2021-09-14 12:24:40
316
原创 webpack搭建vue脚手架
搞了几天的webpack5.0版本搭建vue脚手架项目，今天分享一下！在读这篇文章之前你可能需要了解一些webpack的配置才行否则可能看不懂部分配置首先我们的项目的src目录结构如下基本上与vue-cli3的结构一样 ，你可以直接创建vue-cli3的脚手架直接复制里面的项目目录结构新增命令行在package.json文件里面的scripts字段里面新增这样一条命令，这样我们就可以在控制台输入npm run build执行webpack.config.js里面的配置"bu
2021-08-31 17:54:40
2437
原创 webpack配置--css和js兼容不同浏览器
首先我们在index.js这个入口文件里面内容如下和另外两个引入的api文件和scss文件如下：可以看到是有兼容性的js和css我的loader配置如下需要安装babel-loader、@babel/preset-env、mini-css-extract-plugin、css-loader、sass-loadermodule: { rules: [ // babel-polyfill已经被移除了 { ..
2021-08-30 21:47:24
805
原创 webpack配置
webpack搭建项目基础篇一.创建项目首先在终端cd到你的项目根目录，使用npm init创建package.json文件，在你创建好的package.json文件里面的scripts字段那里新增这样一行，配置一下webpack执行的文件路径，同时创建一下webpack.config.js文件放在项目根目录下面我们使用yarn add webpack webpack-cli安装一下webpack和webpack-cli两个依赖 （没有安装yarn的话可以使用npm或者cnpm，当然
2021-08-30 16:45:19
733
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人