lin1072368472的博客

每日一篇快乐每一天笔者最近发现啊，虽然平时说防抖和节流都知道是什么作用，但是突然让你手写，我的脑子就是…,然后默默的打开百度，平时手写一些代码还是很有必要的。所以今天就来彻底把防抖和节流扒个精光.（怎么感觉有点变态…[痴汉脸]）......

哈喽，卷王又来了，在工作中无意问到了一个新人，重绘和回流的概念，后来想了想，笔者也是在逛论坛的时候才无意间知道这个概念，想这些概念如果是有去看关于js或者前端书籍的崽子们，应该都是有了解过，但是前端的知识体系个人觉得比较乱，可能有些人并没有去系统的了解，今天就来普及一下什么是重绘和回流。......

前端真的是太卷了，vue2.0学透，vue3.0就又来了，感觉前端更新迭代是真的快，但是又不能不学，加油卷王，卷死他们，宁死也不愿意淹没的人流之中。

结论： 在没有绑定和的情况下，不使用反而会更快。举🌰:以上代码会生成如下dom节点这时我们把顺序换一下，我们把数组换成倒叙，那么有和有什么区别？会怎么处理？这里简单说明一下其实简单模板下diff速度更快的说法其实是源于模式下面形成的。:实际的应用中其实不怎么可能存在较为简单的，即使存在对于简单模板这样的比较损耗来说，可以忽略不计，所以几乎是...

引题： vue如何绑定动态的v-model每日励志话语: 每天进一步一点点，这不就是希望。如果错误还望指出,大家一起加油，明天你就是最耀眼的一个。如果内容对你有帮助还望可以帮我点个三连如题笔者在工作上遇到这样一个场景在一些的表单中如果出现很多字段，那么使用循环的方式去处理会比较简洁，那么在这一过程中就出现了一个问题如何动态绑定表单的值，这里以Element UI的form表单为例假设目前需要： 10个输入框的表单如果一个去写代码后续改起来可能相当麻烦 <el-form

引题： vue如何绑定动态的v-model每日励志话语: 每天进一步一点点，这不就是希望。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXVmR2CX-1633051963236)(C:%5CUsers%5Clin%5CDocuments%5CNOTE%5Cmd%E6%A8%A1%E6%9D%BF.assets%5Cimage-20210407131136617.png)]如果错误还望指出,大家一起加油，明天你就是最耀眼的一个。如果内容对你有帮助还望可以帮我点个

大家在学习umi是不是经常遇到这个问题，这是因为puppeteer包需要从国外下网上有许多解决方法例如设置淘宝源镜像yarn config set registry https://registry.npm.taobao.org/在根目录下新建.yarnrc文件registry "https://registry.npm.taobao.org"sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"phantomjs_cdn

css布局方式table布局float布局flex布局响应式布局Grid布局table布局table布局在如今已经很少使用，原因是：table布局比其它html标记占更多的字节，会阻挡浏览器渲染引擎的渲染顺序，会影响其内部的某些布局属性的生效。使用table布局有两种方式table标签display：table标签与js的对应table { display: table }tr { display: table-row }thead { displ

umi开始使用yarn创建项目 yarn create @umijs/umi-app安装依赖yarn运行项目yarn startumi目录结构.├── package.json--依赖文件├── .umirc.ts--配置文件├── .env--环境变量├── dist--打包文件夹├── mock├── public└── src ├── .umi ├── layouts/index.tsx ├── pages ├── ind

安装umi创建文件夹mkdir umidemo01 && cd umidemo01安装umiyarn create @umijs/umi-app创建完安装依赖yarn install正常运行后直接编写dva代码,umi会自动引用dva,无需配置，如果需要配置可以在.umirc.ts文件中配置dva例如：需要注意umi编写dva有以下约定约定式的 model 组织方式符合以下规则的文件会被认为是 model 文件，src/models 下的文件src/p

Mixin在了解高阶组件之前我们先讲一下mixin很多初级前端工程师对mixin的概念并不是很了解，首先解释一下mixinmixin：在项目中有些一代码相同的代码会重复使用，我们就可以进行抽离，方便维护，为了解决这个问题就是包装成mixin方法，但是后来发现有mixin有很多弊端，也许可以说高阶组件就是mixin的衍生品，让我们进入今天的主题高阶组件高阶组件：本身是一个函数，这个函数接受一个组件做为参数，并且返回一个组件实现方式：属性代理和反向继承示例：function Hoc(Wrapped

hookhook:是可以让你在函数组件中使用React state及生命周期的函数，简单说就是通过hook可以让我们的函数组件有状态和生命周期，并且hook不能用在class组件中注意在使用hook有两个规则只能在函数最外层调用hook，不能再循环、条件判断或者子函数中调用只能在函数组件中使用hook错误使用例子：import React, { useState , useEffect} from 'react';function Example() { for(let i =0;

ProxyProxy（代理）：可以理解成对一个对象设置一个拦截用法：var proxy = new Proxy(target, handler);参数：target:是要处理的对象handle:是拦截的行为其实Proxy和set和get很像，但是他不针对一个属性，如果你了解get和set了解这个应该不困难 let obj = new Proxy({},{ get: function(){ console.log("触发了get"); return 10; }

首先这三个参数都是用于改变this的指向 let obj = { name:'张三', age:18, func:function(){ console.log(this.name + "年龄" + this.age); } } let obj2 = { name:'李四', age:20 } obj.func.call(obj2) //李四年龄20 obj.func.apply(obj2); //李四年龄20 obj.func.bin

Classjs中class的由来是由构造函数衍生出来的在我们默认把首字母大写的函数称为构造函数 function Person () { console.log("this is a method"); }而在es6中就引入class的关键字，class只是一个语法糖，它的实现基本可以使用es5实现 function Person () { console.log("this is a method"); } class Perosn { constructor(

SetSet：类似数组，但是它的成员没有重复值 let s = new Set(); let s2 = new Set([1,2,3,4,1,2,3]); [1,2,3,4,1,2,3].forEach(x => s.add(x)); console.log(s); // {1, 2, 3, 4} console.log(s2); //{1, 2, 3, 4}可以看出会去掉重复值那我们就可以利用这个特性来去除数组中重复的值 let s = new Set([1,2,3,

Reflect.ownKeys()**Reflect.ownKeys(target)**是返回所有的属性key，包括不可枚举类型，不包括继承的属性参数：target:获取目标对象的属性，如果target不是对象则报错返回值：返回由target属性组成的数组 let obj = { name:'zhangsan', age:'18' } console.log(Reflect.ownKeys(obj));这里注意在js中数组也是对象 let obj = { n

Object.is这个方法用来判断两个值是否相等在Es5中我们使用 ==（相等运算符）\color{red}{==（相等运算符）}==（相等运算符） ===（严格相等运算法）\color{#c7254e}{===（严格相等运算法）}===（严格相等运算法） 这两个来比较，相等运算符会自动转换类型而严格相等运算符不会红色文字 console.log('1'==1); console.log('1'===1); console.log(NaN == NaN); console.log(Na

链判断运算符听到这个名字感觉好高端，感觉学不懂别怕这是一个很简单的运算符作用：当访问一个对象属性是用来判断对象是否存在\color{#c7254e}{对象是否存在}对象是否存在为什么要判断？？？？？在项目中如果你不去判断对象是否存在在去访问属性，项目就崩了如果要访问一个比较长的对象属性例如：Obj.userInfo.userName在es5要这样判断const userName = Obj && Obj.userInfo && Obj.userInfo.

扩展运算符 let a = {0:'a',1:'b',2:'c'}; console.log({...a}); //解构对象 {0: "a", 1: "b", 2: "c"} console.log({...'hello'}); //解构字符串 {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}高级用法：拷贝对象属性及原型方法 let obj = { a:'aa', b:'bb', c:'cc', length:3 } fu

我将用尽量自己的语言进行阐述本篇文章，而不引用官方文字，以便更好让大家理解路由首先第一个概念，路由，那么什么是路由。其实路由和我们前端学习的a标签\color{red}{a标签}a标签很像就是引导你想到去的目的地。今天我们要讲的react-router相对于a标签更加强大因为我们可以选择页面中指定部分进行切换而不是整个页面例如图片所示，切换只是中间的部分，好了介绍完接下来正式开始学习react-routerreact-router科普名词:BrowserRouter 和HashRou.

安装yarn add vue-chartjs chart.js或npm install vue-chartjs chart.js --save安装完新建js文件在文件中引入需要使用的图表import { Line, mixins } from 'vue-chartjs'const { reactiveProp } = mixinsexport default { extends: Line, mixins: [reactiveProp], props: ['options'

replace的妙用今天在学习vue源码是看到relace的使用形式我差点都不认识了，接下来就来了解一下replace其他作用我们平常的用法let str = 'hello haha haha';str = str.replace('haha','world') //hello world hahaconsole.log(str);我们平常这样替换只会替换一个值第一个参数可以接受字符串/正则表达式第二参数可以是替换文本或者替换文本的函数使用正则可以替换所有只需要加g 全局匹配let s

##definePropertyObject.defineProperty():方法会在对象上直接定义个新的属性，或者修改现有的属性，并返回此对象let obj = {} //与我们使用 obj.name = 'zhangsna' 效果一样 但是用defineProperty定义的属性无法改变 或者删除 Object.defineProperty(obj,'name',{ value:'zhangsan' }) console.log(obj);

Vuex之Getters首先普通getters的写法getters的第一个参数是state//返回articles数组中articleId==1的对象getArticle: (state) => {//这里使用了箭头函数， return state.articles.filter(article => article.articleId == 1) } // 非箭头函数写法 这样可能比较通俗易懂 getArticle2: function (state) {

##css篇1.css水平、垂直居中的写法，至少写出四种水平居中行为元素text-align: center;块级元素margin：0 auto;position:absolute;left:50%transform:translateX(-50%);display:flex:just-content:center垂直居中line-height 设置与height同样position：absolutetop:50%transform:translateY(-50%)

Error: Cannot find module ‘./locale’react使用antd出现报错只要引入antd就报错主要是与moment.js不兼容我猜是因为版本号问题解决办法降低antd的版本我原本是使用4.2.0后来改成npm uninstall antdnpm install --save antd@2.13.4完美解决问题"antd": "^2.13.4",...

Vue学习（day1）声明渲染vue核心就是支持模板渲染 <div id="app"> {{msg}} </div> let vm=new Vue({ el:'#app', data:{ msg:'hello world' }, methods:{} })...

在JS中分为两种作用域 全局作用域和局部作用域 在新es6中还有块作用域var a = 100; //全局作用域function f1(){ var a = 10; //声明局部作用域 console.log(a) }f1();//10 console.log(a);//100那么如果在函数外部想要访问函数内部的局部变量function f1(){ ...

JSON.parse(text[,reviver])将一个字符串转换成对象const json = '{"result":true, "count":42}';const obj = JSON.parse(json);console.log(obj.count);// expected output: 42console.log(obj.result);// expected o...

安装npm install webpack-dev-server 目前文档写的时间是2020年2月25日10:27:23原本安装完 webpack-dev-server 可以执行 npm run dev此时还要在项目文件夹下安装npm install webpack-cli -D才可以运行安装完执行npm run dev打开项目##配置webpack-dev-server命令...

npm -v 查看npm版本npm install XXX（包名） 安装包 如有在安装在项目上 而不是全局安装npm install XXX(包名) -g 全局安装 -g 另外 install可以简写成 inpm i XXX === npm install XXX 这两个语句用法一样npm init 初始化项目 生成package.json 文件npm ins...

##图片样式.img-fluid 设置宽100% 高度自动.img-thumbnail 设置图片为缩略图 为图片设置一个边框.rounded 设置图片圆角.float-left/right 设置图片位置.img-fluid<img src="img/1.jpg" class="img-fluid" alt="">.img-thumbnail效果：<img...

卡片一种可伸缩可扩展的容器##卡片的设置div.card 容器 （div.card指 div 容器加上class 下面文章不在声明）div.card-body 容器 父级是.card h*.card-title 卡片标签 可放在.card也可以放cark-body中 （h* 指 h1-h7） <div class="card"> <d...

bootstrap中警告框用div承载在div添加class.alert 表示这是一个警告框<div class="alert ">警告框</div>##警告框样式.alert-primary.alert-secondary.alert-success.alert-danger.alert-warning.alert-info.alert-light...

在bootstrap中提供了很多按钮的样式button样式.btn-primary.btn-secondary.btn-success.btn-danger.btn-warning.btn-info.btn-light.btn-dark.btn-link<button type="button" class="btn btn-primary">Primary&l...

此文档使用的boostrap是4.3.1table样式.table: 表格基本样式.table-striped：斑马线表格.table-bordered：给表格添加边框.table-hover:鼠标悬停的效果.table-condensed：紧凑型表格.table-borderless：无边框效果以上效果都可以混合使用这里表格html书写结构是 <table> ...

导航栏创建步骤nav 标签 添加class navbar navbar-default（可选）设置导航栏样式 添加 role=“navigation” 有助于可访问性 （详解：将nav转换成导航功能使用）添加一个div 加上class navbar-header 导航栏头部标题中可以添加 a标签 加上class navbar-brand表示logo或者品牌无序列表添加 nav n...

导航元素使用以无序列表 带class .nav开始class添加 nav-tabs 表示这个是一个标签上导航菜单nav-pills 表示这个一个胶囊式导航菜单例：<ul class="nav"> //此时仅仅声明了一个导航元素 <li><a href="#">java</a></li> ...

canvas标签用于图像的绘制的标签示例：创建了canvas标签并且设置高和宽<canvas id="canvas" width="800" height="400"></canvas>注意 width和heigh也可以用过css设置getContext()方法返回一个用于在画布上绘画的环境目前参数只能传 2d未来可能有3dlet cttx=canv...