前端鲁班-CSDN博客

原创虚拟dom

首先。我们先来一个疑问，什么是虚拟dom呢。众所周知，在我们项目里频繁的操作dom元素是大大降低性能的问题。所以我们尽量要减少对dom的操作。那虚拟dom原理是什么？虚拟dom可以简单理解为。拿js对象模拟出来的dom树的结构，然后跟dom元素一对一关联起来。当dom元素发生修改时，我们需要找到相对应的js对象从而找到关联的dom元素，再对其修改，这样就大大节省的性能。针对js对象的查询，比查询整个dom元素的查询，所消耗的性能要少的多。...

2022-08-31 14:46:00 310 1

原创 vue路由原理

前端路由切换原理：本质就是监听url的变化，然后匹配路由规则，显示相应的页面，并且不刷新页面。目前单页面应用实现路由的方式只有俩种：hash模式history模式hash模式相当于瞄点跳转。监听url#后面的传值发生变化，从而触发window.hashchange方法。并根据值修改暂时页面的内容。不会刷新页面history模式相对hash模式更加符合我们常见的url格式。原理是触发了原生的window.history方法。简单介绍一下window.history都有哪些方法。...

2022-08-31 11:07:26 1284

原创关于VUE2旧项目重新安装依赖后@vue/compiler-sfc编译报错

关于VUE2旧项目重新安装依赖后@vue/compiler-sfc编译报错

2022-07-21 13:51:20 5216

原创你所不知道的浏览器Network

HTTP请求过程——Chrome浏览器Network详解当我们使用Python进行爬虫的时候，其实就是一个模拟的资源访问返回过程，使用第三方库用目的url向所在的服务器发出请求，网站的服务器接收到这个请求后进行处理和分析，然后返回响应。响应中包含了页面的源代码等内容，然后我们在对次进行解析和处理，从中得到我们想要的信息。每个网站根据自己所展示的内容的不同，会有不同级别的反爬手段，我们就要对此进行分析，才能正确的得到自己想要的返回相应，为了更直观的说明这个过程，使用Chrome浏览器的Network监听组

2021-12-28 11:37:17 1347

原创数组取最大值

怎样取数组最大值let arr = [1, 2, 3, 4, 5, 6];//es5let max = Math.max.apply(null,arr)console.log(max) //6//es6let max = Math.max(...arr)console.log(max) ///6怎样去数组对象里面的最大值let obj = [{ age: 12}, { age: 24}, { age: 48} ]let arrs = obj.map((va

2021-11-09 14:52:43 167

原创 package-lock设置

1.设置是否显示（是否存在）npm config set package-lock true 存在npm config set package-lock false 不存在2.检查一下项目配置npm config ls -l

2021-11-09 10:20:16 537

原创 elementui TaBle表格表头添加icon，以及hover上去的提示文字

render-headerrender-header在官方文档中的介绍是这样的：HMLT部分<el-table-column prop="" show-overflow-tooltip label="待发放奖品项数" :render-header="renderTip" align="center" ></el-table-column> //设置icon 将会用到 render-headerJS部分methods: { renderTip(h, { column }

2021-11-02 11:02:07 1944

原创 elementUI Table的行合并通用方法

首先是内部使用el-table的方法:span-method=‘objectSpanMethod’data() { return { table: [{ id: '1', checkRoom: 'CTROOM', checkProject: '颈椎MRICT', checkMoney: '300.22', attention: '检查前空腹', appointmentTime: '' },{ id: .

2021-10-28 11:37:26 888 1

原创 ES6数组去重的常用方法

普通数组去重数据源const test = ['q', 'w', 'e', 'q', 'u', 'p']方法一[...newSet(test)];方法二Array.from(new Set(test))方法三function unique(arr) { const res = new Map(); return arr.filter((a) => !res.has(a) && res.set(a, 1))}数组中对象去重数据源 let p

2021-10-20 15:00:49 1300

原创一维数组转换为树形结构

一维数组 - 原始数据const list = [ { id: 1, pid: 0, name: '四川' }, { id: 2, pid: 1, name: '成都' }, { id: 3, pid: 1, name: '宜宾' }, { id: 4, pid: 1, name: '绵阳' }, { id: 5, pid: 1, name: '德阳' }, { id: 6, pid: 2, name: '高新区' }, { id: 7, pid: 2, name: '武侯区'

2021-10-20 14:01:13 3077 1

原创树结构变成一维数组

树结构数据var data=[{"id":1,"pid":0,"name":"四川","children":[{"id":2,"pid":1,"name":"成都","children":[{"id":6,"pid":2,"name":"高新区"},{"id":7,"pid":2,"name":"武侯区"}]},{"id":3,"pid":1,"name":"宜宾","children":[{"id":8,"pid":3,"name":"翠屏区"}]},{"id":4,"pid":1,"name":"绵阳

2021-10-20 11:14:49 2683 1

原创 Promise、数组的升维与降维

promise介绍ES6教程传送门：http://es6.ruanyifeng.com/#docs/promisePromise是什么？Promise是一个构造函数，用于创建Promise对象Promise对象：可以理解为一个处理异步操作的容器promise本质不是控制异步代码的执行顺序（无法控制），而是控制异步代码结果处理的顺序Promise作用：解决回调地狱回调地狱：异步回调层层嵌套promise使用使用流程1.创建promise实例对象 let p = new Promis

2021-10-15 16:56:33 590

转载你真的会用es6吗

以下是我从https://juejin.cn/post/7016520448204603423?share_token=7d1fc386-c427-45df-8a9b-1e3b03900181复制过来整理给自己看的内容ps：ES5之后的JS语法统称ES6！！！一、关于取值的吐槽取值在程序中非常常见，比如从对象obj中取值。const obj = { a:1, b:2, c:3, d:4, e:5,}吐槽： const a = obj.a; const

2021-10-13 15:51:10 196

原创深拷贝第三方库

深拷贝第三方库https://www.lodashjs.com/

2021-10-13 14:25:30 356

原创 vue 中使用防抖和节流

1.在公共方法中（如 public.js 中），加入函数防抖和节流方法// 防抖export default { _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { var th = this; var args = arguments; if (timer) { clearTi

2021-10-11 10:57:01 166

原创防抖和节流二

防抖如果一直触发，则不执行。直到达到规定的时间，没有继续点击，就执行。function debounce(fn, wait) { let time = null; return function (...args) { // 每一次点击判断有延迟执行的任务就停止 time && clearTimeout(time); //否则就开启延时任务

2021-10-08 15:39:59 186

原创判断图片路径是否404

判断图片是否404// 是否图片404 function imageLoad(imgurl) { return new Promise(function(resolve, reject) { var ImgObj = new Image() // 判断图片是否存在 ImgObj.src = imgurl ImgObj.onload = function(res) { resolve(res) } Img

2021-10-08 14:13:35 964

原创带你学会手写防抖节流（超简单）

前言前段时间群友说面试的时候老是分不清防抖和节流。其实防抖和节流不仅仅在面试中会让大家手写，在实际项目中也可以起到性能优化的作用，所以还是很有必要掌握的。接下来我就用一杯茶的时间带大家彻底学会手写防抖和节流。防抖举个例子我们先抛开概念不谈，其实在生活中也有很多防抖的例子：比如你现在使用的电脑，在不使用后一段时间自动休眠当你再次使用的时候重新激活，并开始你设置的时间倒计时10分钟在这10分钟内你继续使用电脑又会重新开始倒计时10分钟当你最后一次使用电脑并离开时重新倒计时10分钟过去

2021-10-08 14:04:19 3822 2

原创 computed与watch的区别

一、computedcomputed看上去是方法，但是实际上是计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算<template> <div> {{fullName}} </div></template><script>export defa

2021-09-30 09:15:19 93

原创项目里优化 if-else 代码结构

前言平时写代码的时候，总是会遇到多个判断条件的场景。这个时候第一时间想到的可能就是if else,但是往往这个性能、后期维护都不太好做。由于内部项目不适合分享，这里我就用 <输出今天为星期几> 来讲讲逻辑判断优化的一些方案。这里先声明，免有人疑惑：我们在项目中使用的很可能会有多层的嵌套，不像我的例子只有一层。不过其优化的思想是大致相同的。由于 returnWeekday() 方法异常之简单，所以提前声明。需求写一个 returnWeekday() 方法返回"今天是星期*"。

2021-09-29 11:23:27 140

原创 vue-cli3项目配置webpack自动删除生产环境的console.log调试信息

我们都知道，项目在编译打包上生产环境的时候是不能有console.log()信息打印输出的，但是我们在开发环境有时候调试代码又需要打印输出一些信息，我们也不可能在编译上线的时候把代码里面的console.log()一个一个的全部删除掉，这个时候就需要我们在配置文件里面配置一下，生产环境编译的时候自动去掉console.log()。vue-cli2的时候是在build文件下面的webpack.prod.conf.js中配置的，vue-cli3文件结构有所不同，是在项目目录下的vue.config.js文件里

2021-09-29 10:28:20 500

原创 yarn报错error An unexpected error occurred: “https://registry.yarnpkg.com...connect ETIMEDOUT...

在使用yarn安装依赖包时报错，提示信息：error An unexpected error occurred: “https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz: connect ETIMEDOUT 104.16.19.35:443”这是由于资源地址请求超时造成的，更换一下请求地址即可。解决方案：运行命令，把资源地址设置成npm淘宝源npm config set registry https://registry.npm.ta.

2021-09-26 15:06:57 5132 1

原创编码 encodeURI和encodeURIComponent的区别

1.encodeURI不会对;/?????&=+$,#之类的字符进行转译，这就会导致某些特殊情况下解析uri出现问题(后端使用的语言不同导致解析方式不同)2.encodeURIComponent会转义URI各个部分的标点符号比如常用的连接符&与?, 也就是说它转义的更彻底安全性更高, 所以建议尽可能使用encodeURIComponent来处理。例 const url='www.ts.com?id=99&name='+2+'' console.log(url)

2021-09-23 14:28:12 194

原创时间控件el-date-picker限制可选当前日期前七天

<el-date-picker v-model="value1" type="daterange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" >&.

2021-09-10 14:53:02 2369

转载 Vue使用form-create-designer插件搭建表单构建器

目录一、插件简介1.快速导航2.核心功能二、基础使用1.下载插件2.引入插件3.配置使用4.效果演示三、功能扩展1.下载插件2.引入插件3.配置使用4.效果演示一、插件简介1.快速导航form-create-designer 是基于 @form-create/element-ui 实现的表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。插件地址：https://github.com/xaboy/form-create-designer文档地址：ht

2021-09-07 14:45:17 1751

原创 npm安装依赖报错代理仓库找不到

npm安装依赖报错npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUNDnpm安装依赖报错今天在学习webpack的时候，在使用npm install来安装一个局部的webpack时候，报出一下错误:npm ERR! code ENOTFOUNDnpm ERR! errno ENOTFOUNDnpm ERR! network request to http://registry.cnpmjs.org/webpack failed, reason: geta

2021-08-18 15:50:05 1173

转载 git 团队开发规范

介绍祖师爷 Linus 在创造了伟大的 Linux 之后，又创造了应用最广泛的代码管理工具 —— Git，极大地提高了程序员的生产力。现如今大部分项目都在使用 Git 作为代码管理工具，不论是在代码管理、版本控制以及团队协作上，Git 相比其他版本控制软件都有着无可比拟的优势。虽然 Git 是个优秀的工具，但是在项目中是否能够正确合理地使用，是否能够发挥其最大的优势，就我自己这几年的工作经历来看，对于大部分团队这个问题的答案是否定的。大部分程序员对 Git 的使用基本上都停留在 git add、gi

2021-08-13 10:02:44 818

原创描述 Vue 组件生命周期（有父子组件的情况）

单组件生命周期挂载阶段（beforeCreate:此阶段为实例初始化之后,此时数据观察和事件机制还没有形成,不能获取到dom节点；created：此阶段的vue实例已经创建,仍不能获取DOM 节点.把vue 的一个实例给初始化了，只是存在于 js 内存的一个变量而已，这个时候并没有开始渲染；beforeMount:在这一阶段,我们虽然还不能获取到具体 DOM 元素,但 vue 挂载的根节点已经创建,下面 vue 对DOM 的操作将围绕这个根元素继续进行,beforeMount 这个阶段是过渡性的,一

2021-08-12 17:41:13 160

空空如也

空空如也