- 博客(81)
- 收藏
- 关注
RSS订阅
原创 JS开发操作记录
1.数组交集普通数组const arr1 = [1, 2, 3, 4, 5 , 8 ,9],arr2 = [5, 6, 7, 8, 9];const intersection = arr1.filter(function (val) { return arr2.indexOf(val) > -1 })console.log(intersection) //[5, 8, 9]数组对象数组对象目前仅针对value值为简单的Number，String，Boolan数据类型 文中JSON.s
2020-12-30 11:07:01
194
1
原创 VUE3封装一个Hook
在 Vue 3 中，让我们能够封装和复用代码逻辑，尤其是通过setup函数进行组件间的复用。为了提高代码的可复用性，我们可以把一些常见的 API 请求和状态管理逻辑封装到一个单独的hook中。
2025-01-08 18:18:33
586
原创 上传npm包加强
在一个 npm 包中封装多个组件，关键在于正确导出并组织你的组件。在文件中统一导出所有组件，并在中设置好入口。这样，用户可以灵活地选择和使用你包中的任何组件。如果你想要进一步优化组件的构建过程，可以使用如webpack或rollup等工具进行打包。
2024-12-26 10:26:37
755
原创 Webpack优化项⽬的⼿段
在每⼀个⻚⾯下都会加载重复的公共资源，⼀是会浪费⽤⼾的流量，⼆是不利于项⽬ 的性能，造成⻚⾯加载缓慢，影响⽤⼾体验。⼀般是把不变的第三⽅库、⼀些公共模块（⽐如 util.js）这些单独拆成⼀个 chunk，在访问⻚⾯的时候，就可以⼀直使⽤浏览器缓存中的资源webpack ⾥⾯通过 splitChunks。在项⽬中，js ⽂件是占⼤头的，当项⽬越来越⼤时，如果每次都需要去编译 JS 代码，那么构建的速度 肯定会很慢的，所以我们可以配置 babel-loader。⽂件，在这期间，⻚⾯是没有任何内容的。
2024-10-23 15:00:55
1261
原创 前端大文件上传以及以外情况的解决
通过以上步骤和技术实现，你可以实现一个前端大文件上传的功能。前端负责文件选择、校验、分片、哈希生成、上传和错误处理；后端负责接收分片、存储和合并分片。不过还有一些别的特殊情况要处理比如取消上传，上传进度展示等。
2024-10-23 10:32:01
320
原创 函数内部的 arguments 变量特性,属性，如何将他转换为数组
arguments对象在JavaScript中提供了对函数参数的访问，但它本身不是数组。通过、扩展运算符（...）或方法，我们可以很容易地将arguments对象转换为真正的数组，从而利用数组提供的方法来处理这些参数。
2024-09-28 16:04:19
408
原创 Webpack和GuIp打包原理以及不同
然后，Webpack会按照指定的规则将这些模块打包成一个或多个bundle文件，这些bundle文件包含了应用程序运行所需的所有资源，并且通过加载器（loader）和插件（plugins）对资源进行预处理和后处理，以满足生产环境的需求。Gulp的打包过程主要依赖于流（stream）的概念，它允许数据从一个task流向另一个task，每个task可以对数据进行处理（如压缩、合并等），并将处理后的数据传递给下一个task。
2024-09-28 15:56:41
768
原创 用 JS 实现一个发布订阅模式
在JavaScript中，发布订阅模式（Pub/Sub）是一种常用的设计模式，用于实现不同组件之间的解耦通信。在这种模式中，发布者（Publisher）不直接给订阅者（Subscriber）发送消息，而是将消息发送到一个中心主题（Topic），订阅了该主题的订阅者会收到这个消息。通过这种方式，发布者和订阅者之间实现了松耦合，它们不需要知道对方的存在，只需要通过主题进行通信。
2024-09-20 17:55:16
433
原创 call,apply,bind在实际工作中可以使用的场景
callapply，bind在JavaScript中，改变函数内部this的指向是一个常见的需求，特别是在使用回调函数、事件处理器或者需要在某个特定对象上下文中执行函数时。call和apply和bind方法正是用来改变函数执行时this的指向的。下面我会详细解释这两种方法在实际工作中的一些应用场景。
2024-09-13 14:33:54
666
原创 promise加强
await就是一个等待Promise对象产出结果的操作手段 功能就是暂停async函数的执行，等待Promise处理后的结果。excutor有两个参数---> 一个是resolve 一个是reject ---->两个参数都是函数 都是可以执行的。async 函数是通过一个隐式的Promise返回一个pending状态 有async必须有await 反之则可以。async的意思是当前这个异步函数与同一作用域下的程序是异步关系。excutor执行器是在new Promise的时候调用执行的。
2022-09-21 14:03:41
613
原创 vue适配h5 vw配置
vue项目创建好之后，执行下列步骤安装postcss-loader要实现使用vw来实现移动端的适配，我们先需要安装postcss但cli4已经自带有postcss了所以我们不用再装了，可以直接安装postcss-loader就好了，如果是cli4以下的需要这一步，可以vue -V查看版本npm i postcss-loader --save-dev然后安装postcss-px-to-viewport实现vw适配就是要利用这么一个插件：postcss-px-to-viewport。它可以将
2022-05-09 10:30:35
842
2
原创 系统滚动条样式优化
::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动(取决于是垂直还是水平) ::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb) ::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分(除去) ::-webkit-scrollbar..
2022-05-05 09:52:06
892
原创 简单易懂的promise
promise有三种状态；分别为:pending,resolved,rejected:,初始状态为pending,而他又可以变为其他两种状态；//先创建一个promise函数 methods:{ promiseTest(){ //创建一个promise const p1=new Promise((resolve,reject)=>{ }) console.log(p1,'
2022-03-17 16:12:13
515
原创 手写的几个鼠标移上按钮的特效
<template> <div class="btns"> <button class="btn1">按钮一 <span class="mask mask1"></span></button> <button class="btn2">按钮二 <span class="mask mask2"></span></button> <button c...
2022-03-17 14:58:14
634
1
转载 移动端放大缩小
data() { return { displacement: { scale: 1 } }}, mounted() { // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行 let that = this; this.$nextTick(() => { // 获取放大或缩小的区域DOM let matrix_box = document.querySelector.
2022-02-09 15:14:06
471
原创 封装一个防抖函数和一个节流函数
防抖函数和节流函数在我们平时开发的时候很常用，像点击请求这个常见的操作里面就需要使用到防抖函数，防止多次重复请求；首先要弄明白防抖和节流是什么意思 写起来就比较得心应手了；防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。节流：在事件被触发n秒内，不管你触发多少次，只执行一次函数。看到这个定义的时候肯定想到了用setTimeout来写那就来写吧先创建一个防抖的js叫debounce.js防抖有两种情况，一种是触发后立即执行，还有一种是触发之后不是立即执行的有
2021-12-13 13:45:58
1404
原创 vue的自定义指令
vue自带的v-for和v-if指令经常用也很好用，但是vue也可以自定义一些好用的指令；一下也想不到什么简单的例子就随便写一点：写一个点击切换样式的：基本就是这样根据你点击时获取对应的index，再赋值给中间变量curIdx，然后再动态改变class来实现样式转换，这是常见的写法，那我用自定义指令来写一下这个：首先我使用自定义指令肯定要先引入，再注册，再使用 ，如下：（这个指令引入路径错了 不想截图了 懒）这时候保存会报错，因为我这边还没写这个changeStyle,...
2021-12-08 18:07:04
903
原创 filter的使用
最近有点闲，想想写点什么。。。。写一点vue的filter过滤器的使用想一个可以使用过滤器的场景。写一个表格，里面有几组数据，循环出来，给数组一个状态，根据这个状态来显示不同的东西以前的想法是在获取到数据的时候处理数据把数据改成状态 那样也可以达到想要的需求 但是有了过滤器 会让你的代码更高级也更方便先来个数据吧首先文件夹里面创建一个filter文件夹，里面创建个filter.js，就是要使用的过滤器了，再里面创建个order.js里面是要展示的数据，暴露出来...
2021-11-23 12:00:09
760
原创 vue的mixin提升
刚写想了想这个mixin实现的功能可以用组件完成 依托vuex其实也能实现 但是为什么要有mixin这个东西呢？于是百度了一下有了一点总结mixin与vuex的区别：Vuex:主要是做组件的状态管理的，他里面的变量和参数在每个组件都可以修改和使用，在其他地方进行了修改之后，其他组件里面的变量值也会发生改变。mixins:可以用来定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。mixin与公共组件的区别：组件：在父组件中引入子组件，等于
2021-11-22 16:50:24
997
2
原创 vue的mixin的简单使用
1新建一个libs文件夹 再建个myui文件夹 里面写上个index.js mixin导出2新建一个vue的文件里面就写个Button 写几种不同的class样式3在index.js也就是mixin里面引入这个Button并注册4因为这个BUTTON样式要可以动态改变，所以这个BUTTON的class不能写死写成如下的样式5在相关页面引入引入这个组件并用mixins注册，6使用引入的组件修改个btnstyle属性看对不对样式改变了，是想要...
2021-11-17 16:48:57
1081
1
转载 温习一下JavaScript
1. JavaScript简介 JavaScript 最开始是专门为浏览器设计的一门语言，但是现在也被用于很多其他的环境。 如今，JavaScript 已经成为了与 HTML/CSS 完全集成的，使用最广泛的浏览器语言。 有很多其他的语言可以被“编译”成 JavaScript，这些语言还提供了更多的功能。建议最好了解一下这些语言，至少在掌握了 JavaScript 之后大致的了解一下。 2. 变量我们可以使用 var、let 或 const 声明变量来存储数据。 le
2021-10-09 09:39:37
306
原创 Vue最全知识点，面试必备 覆盖vue3.0
基础篇说说你对MVVM的理解Model-View-ViewModel的缩写，Model代表数据模型，View代表UI组件,ViewModel将Model和View关联起来 数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据了解mvc/mvp/mvvm的区别Vue2.x响应式数据/双向绑定原理Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。其中，View变化更新Data，可以w通过事件监听的方式来实现，所以 V...
2021-09-30 15:13:24
3121
原创 前端进阶必看
1 promise先思考？promise 是什么?异步回调解决方案promise 如何保证异步执行完了再去执行后面的代码?使用 then 关键字 then 接受两个参数 第一个参数（函数）会在 promise resolve 之后执行 第二个参数（函数）会在 promise reject 之后执行为什么能在异步事件执行完成的回调之后再去触发 then 中的函数?引入事件注册机制(将 then 中的代码注册事件 当异步执行完了之后再去触发事件)怎么保证 promise 链式调用...
2021-09-30 15:10:00
118
原创 css的提升
大哥那复制过来的1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？相关知识点：（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分IE盒模型和W3C标准盒模型的区别：（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding（2）IE盒模型
2021-09-30 14:52:36
314
原创 如何让你的 JS 写得更漂亮
1. 按强类型风格写代码JS是弱类型的，但是写代码的时候不能太随意，写得太随意也体现了编码风格不好。下面分点说明： （1）定义变量的时候要指明类型，告诉JS解释器这个变量是什么数据类型的，而不要让解释器去猜，例如不好的写法：var num, str, obj;声明了三个变量，但其实没什么用，因为解释器不知道它们是什么类型的，好的写法应该是这样的：var num = 0, str = '', obj = null;定义变量的时候就给他一个默认值，这样不仅..
2021-09-30 14:47:07
203
原创 vue面试题
1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单； 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势； 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作； 虚拟DOM：dom 操作是非常耗费性能的， ...
2021-09-30 14:44:37
120
原创 22个ES6面试知识点汇总！
01、问：ES6是什么，为什么要学习它，不学习ES6会怎么样?答：ES6是新一代的JS语言标准，对分JS语言核心内容做了升级优化，规范了JS使用标准，新增了JS原生方法，使得JS使用更加规范，更加优雅，更适合大型应用的开发。学习ES6是成为专业前端正规军的必经之路。不学习ES6也可以写代码打鬼子，但是最多只能当个游击队长。02、问：ES5、ES6和ES2015有什么区别?答：ES2015特指在2015年发布的新一代JS语言标准，ES6泛指下一代JS语言标准，包含ES2015、ES2016、ES.
2021-09-30 13:37:36
473
原创 时间戳转时间到秒
代码如下可直接复制happenTimeFun(num){//时间戳数据处理 let date = new Date(num); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 let y = date.getFullYear(); let MM = date.getMonth() + 1; MM = MM < 10 ? ('0' + MM) : MM;//月补0 let d ..
2021-09-24 10:44:53
1404
原创 将要上传的图片或文件转换成base64的格式
//html部分<div class="input_in"> <button class="top" @click="click_uploads"> <a-icon class="icon" type="upload" />上传文件 </button> <input type="file" multiple .
2021-09-02 15:49:37
766
原创 vue-qr 二维码 批量 导出
首先我们需要安装三个插件"jszip"//zip打包"file-saver"//文件保存"vue-qr"//二维码完整代码如下:src/components/base/qrcode.vue<template> <div> <div v-for="(item, index) in qrCodeData" :key="index"> <vue-qr :id_name="'qcode_' + index"
2021-08-09 09:38:00
910
4
原创 利用vue-qr生成二维码 并且完成下载
第一步安装npm install vue-qr --save引入并注册生成二维码的地方text是二维码生成的内容下载的方法
2021-08-08 21:41:03
491
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人