兢兢业业的码农-优快云博客

原创分片渲染与虚拟列表

分片渲染与虚拟列表一般情况下，接口返回大量数据时都会进行分页处理，例如表格数据。但是在一些特殊的情况下（例如返回树状结构的数据）后端是没有进行分页处理的，当返回的数据很大时，一次性渲染非常容易造成页面卡顿，卡死的情况。所以说有关高性能，大数据量的列表渲染的示例已经非常常见。.........

2022-08-15 15:20:30 808

原创记录一次使用jenkins部署前端项目的过程

提到 Jenkins，想到的第一个概念就是 CI/CD 在这之前应该再了解一个概念。DevOps 是 Development 和 Operations 的组合，是一种方法论，并不特指某种技术或者工具。DevOps 是一种重视 Dev 开发人员和 Ops 运维人员之间沟通、协作的流程。通过自动化的软件交付，使软件的构建，测试，发布更加的快捷、稳定、可靠。......

2022-08-11 15:11:18 506

目前国内谷歌浏览器同步功能网站是无法打开的，安装该插件可以解决问题，之后也就可以打开chrome网上应用商店去安装插件，不用在去网上找了谷歌浏览器账号创建（国内输入手机号码后是无法验证的）解决方法很简单：将浏览器的语言改成英文（美国），后面的信息填写也输入英文即可创建成功（国内手机号也行）地址：https://wwd.lanzouj.com/ipxCf07cc64h密码: huff后续插件直接从chrome网上应用商店下载，不提供下载的链接，账号创建不成功可以私聊我Vue.js devtools是一款

2022-07-04 15:22:14 1275

原创 node管理器nvm-windows

在项目开发过程中，不同的项目可能使用的node版本不同，传统的node版本修改方法就是卸载安装不同的node版本，但是这种方法效率太低，在这里推荐使用node管理器nvm-windows地址：nvm-windows下载成功之后解压安装即可，安装成功后可以打开cmd命令（以管理员身份运行）运行nvm查看是否安装成功安装过淘宝镜像的需要完成一下配置，没有的话可以忽略nvm——settings.txtnode_mirror: https://npm.taobao.org/mirrors/node/np

2022-07-04 14:05:11 488

原创 ajax-interceptor插件

日常接口对接的一些问题后端不愿意造数据。接口返回的数据不理想。无法测试一些边界值。bug无法复现。这些问题归根结底就是接口返回数据的问题。那么我们就可以使用ajax-interceptor插件去修改接口返回的结果。ajax-interceptor插件下载地址使用打开谷歌浏览器的扩展程序——开发者模式——直接将下载的crx文件往里面拖动即可安装成功后推荐重新启动一下浏览器点击浏览器右上角的插件图表——点击ajax-interceptor插件界面：直接在这界面修改数据的话操作还是

2022-05-19 09:27:56 305

原创 vue项目搭建

文件的取名方式一般情况下，是按照规范去命名的，这样的话在项目运行时，就无需手动去控制加载哪个文件了。如下当你输入npm run serve命令的时候他会默认的去加载.env.development文件。当你输入npm run build命令的时候他会默认的去加载.env.production文件。但是在实际的项目开发中，紧紧这些是不够的，例如我之前在公司写的项目就有四个环境：测试，预生产，验证，生产环境，那么这是后我们就没有要按这规范去命名了，只需要保证文件是以.env开头即可，既然命名没有规范

2022-03-22 11:21:16 1941

原创实现数组扁平化的6种方式

扁平化的实现数组的扁平化其实就是将一个嵌套多层的数组 array(嵌套可以是任何层数）转换为只有一层的数组。普通的递归实现普通的递归思路很容易理解，就是通过循环递归的方式，一项一项地去遍历，如果每一项还是一个数组，那么就继续往下遍历，利用递归程序的方法，来实现数组的每一项的连接。我们来看下这个方法是如何实现的，如下所示。var arr = [1, [2, [4, [5, [6]]]]]function flatten(arr) { let result = [] arr.forEach

2022-02-21 11:02:18 11648

原创 js的类数组

我们先来看看在JavaScript 中有哪些情况下的对象是类数组呢?主要有以下几种:函数里面的参数对象arguments;用getElementsByTagName/ClassName/Name获得的HTMLCollection;用querySelector获得的 NodeList。类数组的基本介绍argumentsfunction sum(a,b,c) { console.log(arguments)}sum(1,2,3)从结果中可以看到，typeof这个arguments

2022-02-18 17:12:36 1795

原创 js常见的6种继承方式

构造函数、原型与实例之间的关系每创建一个函数，该函数就会自动带有一个 prototype 属性。该属性是个指针，指向了一个对象，我们称之为原型对象。什么是指针？指针就好比学生的学号，原型对象则是那个学生。我们通过学号找到唯一的那个学生。假设突然，指针设置 null, 学号重置空了，不要慌，对象还存在，学生也没消失。只是不好找了。原型对象上默认有一个属性 constructor，该属性也是一个指针，指向其相关联的构造函数。通过调用构造函数产生的实例，都有一个内部属性，指向了原型对象。所以实例能够访问原

2022-02-17 16:09:10 414

原创浅拷贝与深拷贝

浅拷贝的原理和实现对于浅拷贝的定义我们可以初步理解为：自己创建一个新的对象，来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型，复制的就是基本类型的值给新对象；但如果属性是引用数据类型，复制的就是内存中的地址，如果其中一个对象改变了这个内存中的地址，肯定会影响到另一个对象。实现浅拷贝的方法object.assignobject.assign 是 ES6 中 object 的一个方法，该方法可以用于 JS 对象的合并等多个用途，其中一个用途就是可以进行浅拷贝。该方法的第一个参数是拷贝的目

2022-02-16 21:44:29 272

原创 js的数据类型

数据类型概念前7中数据类型为基本类型数据最后一种为引用类型数据:Array - 数组对象、RegExp - 正则对象、Date - 日期对象、Math - 数学函数、Function - 函数对象。基础类型存储在栈内存，被引用或拷贝时，会创建一个完全相等的变量；引用类型存储在堆内存，存储的是地址，被引用或者拷贝时，赋的其实是在栈中的地址，而不是堆中的数据，也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。第一个为浅拷贝，第二个为深

2022-02-10 22:51:34 383

原创 JS Array数组

Array数组的基本使用方法data: [],data1: [1, 2, 3],data2: [4, 5, 6],data3: [7, 8, 9],数组合并 concat()//均会触发视图的更新返回一个新数组，原数组不发生改变this.data = this.data1.concat(this.data2);//双数组合并this.data = this.data1.concat(this.data2,this.data3)//三数组合并数组转字符串 join()//

2022-01-16 19:44:34 522

原创 vuex的使用

开始Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。使用辅助函数（常见）mapState辅助函数，mapGetters 辅助函数，mapMutations辅助函数由于

2021-11-29 13:51:55 406

原创 sass的使用

为什么使用sassCSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。(当老板叫你改一个全局样式的话是特别麻烦的，使用sass后，修改全局样式就特别简单了)Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。在项目中如何全局引入sass在main.js文件中引入sass文件第一步：新建一个ceshi.scss文件，并定义下面样式$color:red;.color { background-color: $color;

2021-11-22 10:26:00 1285

原创 VUE 拖拽组件 vue.draggable

中文文档https://www.itxst.com/vue-draggable/tutorial.html安装npm i -S vuedraggable属性属性名称说明group:group= “name”，相同的组之间可以相互拖拽sort:sort= “true”,是否开启内部排序,如果设置为false,它所在组无法排序，在其他组可以拖动排序delay:delay= “0”, 鼠标按下后多久可以拖拽touchStartThreshold鼠标移动多少p

2021-10-25 13:31:06 10084

原创 Element_ui upload文件上传封装

准备工作安装cos-js-sdk-v5：npm i cos-js-sdk-v5封装一个组件<template> <div v-if="listType == 'picture'">   <el-upload action :multiple="mul

2021-10-12 15:35:20 1220

原创 javascript实现文件下载

javascript实现文件下载（后端返回文件流）封装一个通用的方法//data为后端返回得文件流，filename为文件得名称download(data, filename) { let url = window.URL.createObjectURL( // type属性值将影响下载文件的类型 new Blob([data], { type: 'application/x-zip-compressed' }) ) let link

2021-10-12 08:58:48 4487

原创 vue 自定义指定

自定义指定举例v-focus当页面加载时就获取到焦点全局引用//main.js文件import Vue from 'vue'Vue.directives('focus',{ inserted(el){ el.focus() }})//组件中使用<input type="text" v-focus></input>局部引用<template> <div> <input type="text" v-focus&gt

2021-10-09 13:44:06 700

原创 axios的封装

axios的封装：不同的人去封装axios都会有一些区别，在这里我就随便谢谢几种不同的疯转方法吧？安装：npm install axios --save第一种封装方法request.js文件//一些代码平常自己写的是用不到的该删的删吧，遇到问题可以问我哟import axios from 'axios'import get from 'lodash/get'//获取状态码import storage from 'store'//本地存储的一个插件 npm install store --sav

2021-09-17 13:58:59 342 1

原创 vue性能优化

前言：在公司中一般都是使用vue脚手架开发，因此在webpack层面上的性能优化，例如图片压缩，gzip压缩的啥的基本上不用我们去考虑（文章说的不对请评论指正，本人也在学习中）使用css预处理器scss安装：npm install sass-loader node-sass --save-dev代码模块化在多个组件中如果你发现有很多代码相同的话，那么你可以使用mixin(混入)//mixin.js文件//...

2021-09-16 16:30:25 283 1

原创 1、创建一个Shape形状类，包括一个getArea求面积方法，一个getC求周长方法创建3个子类圆、矩形、三角形，分别求他们的面积和周长，并创建test类进行测试

1、创建一个Shape形状类，包括一个getArea求面积方法，一个getC求周长方法2、创建3个子类Circle圆、Rectangle矩形、Triangle三角形，分别有各自的构造方法，并重新父类的求面积、求周长方法3、创建一个Test类，对以上的类创建对象进行测试结果：下面展示一些代码。//Shape类的创建public class Shape {//求面积的方法 publi...

2020-04-06 19:33:38 12746 3

兢兢业业的码农的博客