- 博客(73)
- 收藏
- 关注
RSS订阅原创 JS实现瀑布流布局(附代码)
你可以准备一些长宽都不相等的图片。瀑布流特点等宽不等高为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面实现思路设定每一列图片的宽度和间距获取当前窗口的总宽度，从而根据图片宽度去判断分为几列获取所有图片元素，定义一个空数组来保存高度遍历容器4.1 第一排，top固定 为gap；left 根据列数递增 为 (itemWidth+gap)i + gap4.2 非第一批, top( minHeight+gap2) left的计算方式和4.1一样，其中i的位置是mi
2022-01-15 20:10:42
3538
1
原创 Three.js 性能优化
three.js是Javascript编写的WebGL第三方库。能用BufferGeometry代替Geometry的尽量用BufferGeometry. BufferGeometry会缓存网格模型，性能更高效网格模型生成原理：Geometry生成的模型过程：(代码) -> (CPU进行数据处理，转化成虚拟的3D数据) -> (GPU进行数据组装，转化为像素点，准备渲染) -> (显示器 )第二次操作时重复走一遍此流程BufferGeometry生成模型流程(代码)
2021-08-01 18:36:22
1620
原创 requestAnimationFrame替代setTimout 和 setInterval的方案
requetAnimationFramerequestAnimationFrame的基本用法let myReqlet i = 0 function step(timestamp){ // step的函数体 console.log(i++) myReq = window.requestAnimationFram(step)}document.onclick = function(){ window.cancelAnimationFrame(myReq)}如果我们想用requestAn
2021-07-01 17:50:39
2246
原创 前端页面如何正确渲染大量数据
当面临上千万条记录要显示时候，该怎么处理？分页显示(分页查询)分批插入setTimeout(()=>{ // 插入十万条数据 const total = 100000 // 一次性插入200条 const once = 200 const loopCount = total / once let countOfRender = 0 let ul = document.querSelector('ul') function add(){ // 优化性能，插入不会造成回流
2021-04-13 17:14:15
2666
原创 requestAnimationFrame 与 setTimeout的性能比较
1. setTimeout定时器一直是js动画的核心技术，但是它不够精准，因为定时器参数是指time 秒后放入异步队列中等待执行，如果前面有其他任务队列执行时间过长，则会导致动画延迟，效果不精准的问题。requestAnimation的好处是，采用系统时间间隔(大多数浏览器刷新频率是60Hz, 相当于16.7ms刷新一次)， 保持最佳的绘制效率, 不会因为间隔时间过短，造成多度绘制，增加开销。也不会因为时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制。 并且rAF会把每一帧中所有
2021-04-13 17:12:17
1127
原创 快速排序及sort的理解
快速排序的思想： （1）在数据集中，选择一个元素作为"基准" （2）所有小于“基准”的元素都移动到“基准”左边，所有大于“基准”的元素都移动到“基准”右边 （3） 对"基准"左右两边的子集，递归地重复（1）和（2）直到所有子集的长度都只有1个时停止var nums = [85,24,63,45,45,17,31,96,50]var fastSort = function(nums){ let len = nums.length if(len < 2){
2021-04-13 11:48:14
709
原创 手写bind, call, apply方法（二）
手写bind, call, apply方法（一）注意 在函数上应用 …arr 可以将数组变为参数序列function add(x,y){ return x+ y }var nums = [2,4]add(...nums)applyFunction.prototype.myApply = function(context, args){ if(context == null){ context = window }else{ context = Object(context)
2021-04-06 17:57:15
67
原创 手写bind, call, apply方法（一）
bindbind: 绑定一个函数的上下文. (改变函数的this指向)常见用例:let foo = function(){ console.log(this)}let boo = foo.bind({content: 'hello'})// bind只是绑定上下文,改变this,但是并不会执行,你需要自己手动执行foo() // windowboo() // {content: 'hello'}简单实现:版本1Function.prototype.bind = function
2021-04-06 16:40:10
104
原创 Promise.all() Promise.race()及其实现
Promise.all()Promise.all()方法接收一个promise的iterable类型。(Array、Map、Set都属于ES6的iterable类型)的属于，并且只返回一个promise实例。function promiseAll(promises){// Promise.all会返回一个promise return new Promise((resolve,reject)=>{ if(!Array.isArray(promises)){ return reject(
2021-04-05 23:19:09
659
原创 Promise.resolve() Promise.reject()实现
Promise.resolve()Promise.resolve方法有以下三种形式Promise.resolve(value)Promise.resolve(promise)Promise.resolve(thenable)Promise.resolve可以把，同步值value， 一个promise， 一个thenable类型的对象都包裹成一个新的Promise。如果是一个普通值，则返回一个resolved的promise实例，并且这个promise实例的状态是fulfilled, 值是va
2021-04-05 21:55:26
451
原创 promise的实现（如何手写一个promise）（下）
接上篇 promise的实现（如何手写一个promise）实现promise的链式调用第一个例子这是第一个例子，可以看到，promise的链式调用就是 可以.then().then().then()…这样一直调用下去。说明, .then() 执行完后会返回一个promise。 并且上一个.then返回的值会被resolve然后传给下一个then。第二个例子如果上一个.then你没有手动给一个返回值，那么就会将undefined传递给下一个.thenclass Promise{ const
2021-04-04 00:27:35
93
原创 promise的实现（如何手写一个promise）
如果你打算手动实现一个promise，你可能需要先问问自己，promise是什么？你平常最常见的promise是怎么样用的？new Promise((resolve,reject)=>{ resolve(2)}).then(val=>{ console.log(val)})如果你了解事件循环，你就知道，promise里面的回调函数是在立即执行的，而then中的回调任务是会被推入异步微队列中等待执行的。让我们先来捋捋这个Promise到底是个什么？Promise是异步函数的一种
2021-04-03 18:03:59
219
原创 image-webpack-loader安装报错pngquant failed to build, make sure that libpng-dev is installed
报错如下：鈥?pngquant pre-build test failedi compiling from source脳 Error: pngquant failed to build, make sure that libpng-dev is installed[npminstall:runscript:error] [email protected] 鈥[email protected] 鈥?pngquant-bin@^6.0.0 scripts.postins
2021-03-30 19:09:29
5433
原创 $attrs和$listeners及用法
$attrs: 包含了父作用域中不作为prop的绑定属性(class和style除外)。$listeners： 包含父级作用域不含.native修饰符的v-on事件监听器封装一个elementUI的el-input称为myInput$attrs接收多个绑定属性<template> <div> <el-input v-model="inputVal" :diabled = "disabled"></el-input> </div>&
2021-03-29 11:32:01
322
原创 Vue.set原理
let data = { a:{ b:1 }}new Observer(data)%%%%%%%%%%%%%%%%%%%%%%%%let data = { a:{ b: 1, __ob__ : {value,dep,vmCount} }, __ob__: {value,dep,vmCount}}我们一步一步来看看这个过程是怎么发生的。step1首先observe(data)function observe(value){ let ob = new Observ
2021-03-21 17:10:50
349
原创 防抖和节流
函数防抖抖动一般是持续的，函数防抖就是防止持续执行。方法： 在一段时间内，只执行一次 (delay时间内，就算持续触发也不执行)function debounce(func,delay){ let timer return function(){ clearTimeout(timer) timer = setTimeout(()=>{ func.apply(this,arguments) },delay) }}函数节流...
2021-03-18 09:12:38
73
原创 js闭包、作用域链(参考红宝书)
闭包是什么？function createComp(){ let str = " 我是一个值" return function(value){ let another = str + value return another }}let res = createComp()let aa = res("133")当createComp被调用时，会创建一个执行环境，以及相应的作用域链。并把作用域链赋值给一个内部属性[[scope]]。然后使用this, argument
2021-03-17 19:01:17
87
原创 cors跨域
简单请求请求方式是 get, post , head 之一http头部信息不超过以下几种：AcceptAccept-languageContent-languageLast-Event-IDContent-Type: 只限于 application/x-www-form-urlencoded, mutipart/form-data, text/painn前端代码<!DOCTYPE html><html lang="en"><head>
2021-03-16 19:24:59
92
原创 ES6新增操作对象API之Reflect
Reflect的 设计目的将Object对象上一些明显属于语言内部的方法(如 Object.defineProperty)，放到Reflect对象上。现阶段，某些方法在Object和Reflect对象上部署，未来新方法只部署在Reflect对象上。修改某些Object方法的返回结果，让其变得更合理。如Object.defineProperty(obj,name,desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj,name,des)则返回false关
2021-03-05 17:48:36
96
原创 js题涉及 变量提升,函数提升,this执向,运算符优先级等
function Foo() { getName = function () { alert (1); }; return this;}Foo.getName = function () { alert (2);};Foo.prototype.getName = function () { alert (3);};var getName = function () { alert (4);};function getName() { alert (5);}//请写出以下输出结果
2021-02-28 19:42:16
68
原创 [!] Error: You must supply “output.name“ for UMD bundles that have exports so that the exports are a
参考自 ： rollup+es6最佳实践假设你要打包一个index.js....export default filerollup.config.jsexport defulat{ input: './src/index.js', output:{ file: 'dist/file.js', format: 'umd', name: 'file' // 必须，不然报标题的错 /*** 如果是rollup.
2021-02-24 20:40:30
2509
原创 数组去重、数组升序
去重setset是ES6新增的数据结构，类似于数组，其成员值都是唯一的，不会重复let m = [1,1,2,3,3,5,6,6,10,10]let res = [...new Set(m)]filter+indexOflet m = [1,1,2,3,3,5,6,6,10,10]let res = m.filter((item,index)=>{ return m.indexOf(item) === index})升序sort(sortby) : sortby可选对数组元
2021-02-13 18:03:40
302
原创 UI rendering在事件轮询中的执行顺序
执行一个宏任务(先执行同步代码)–>执行所有微任务-->UI render–>执行下一个宏任务–>执行所有微任务-->UI render-->......根据HTML Standard，一轮事件循环执行结束之后，下轮事件循环执行之前开始进行UI render。即：macro-task任务执行完毕，接着执行完所有的micro-task任务后，此时本轮循环结束，开始执行UI render。UI render完毕之后接着下一轮循环。但是UI render不一.
2021-01-12 15:57:04
1299
原创 vue中如何检测数组的变化
我们知道，Object.defineProperty不能检测数组的操作，因此需要拦截数组的操作(push, unshift, splice等)并重写他们，使之可以对新操作的数据进行检测。拦截数组方法的思路：缓存数组的操作方法，直接缓存Array.prototype就行使用一个代理数组，重写代理数组的操作方法，代理数组的原型指向Array.prototype实例继承代理数组代码实现const arrayProto = Array.prototype // step1const arrayM
2021-01-08 15:11:56
1309
原创 rollup入门，rollup无法引入第三方依赖，无法识别require(‘xxxx‘) (!) Unresolved dependencies
Rolluprollup是一款ESmodules 打包器，仅仅是一款打包器，没有其他功能, 比如webpack中的html热替换，rollup也没有。rollup的模块机制是ESmodules，(使用import, export default/export) 但是不会对ES6其他语法进行编译。因此要识别es6, 和webpack一样也是需要babel进行编译转成es5这里注意babel的版本，否则会报@babel/core的错误 点我参考rollup无法引入第三方依赖import第三方插件时
2020-12-23 14:41:11
12723
1
原创 watch监听vuex中数组的变化
watch可以监听数组变化的情况watch能监听到数组push的改变watch监听不到数组的情况当你利用索引直接设置一个项时, eg: dataArr.demo[1] = 5当你修改数组的长度时, eg: dataArr.demo.length = 3state:{ dataArr: [1,2,3,4,5]},mutations:{ setDataArr(state){ state.dataArr[1] = 22 }}//然后在组件中监听 实际上，并不会打印w
2020-12-10 20:12:39
3117
原创 replace()第二个参数为function的情况
stringObject.replace(regExp / substr,replacement)第一个参数：regExp对象或者字符串, 如果是字符串则直接匹配字符串第二个参数：替换的文本或返回替换文本的函数这里仅讨论第二个参数为function的情况"abcdefg".replace(/a(...).(.)/g,function(param1,param2,param3,param4,param5,param6){ console.log("param1: ",param1); consol
2020-12-01 16:52:43
251
原创 webpack中处理图片资源url-loader配置，base64
module:{ rules:[ { test: /\.(jpg|png|gif)$/i, //i表示忽略图片格式大小写，例如.PNG use: [{ loader: 'url-loader', options:{ limit: 10*1024 //如果图片小于10k，就使用base64处理 } }] } ] }base64优点base64格式的图片是文本格式，降低了资源服务器的损耗。网页中使用base64格式的图片时，不再请求服务器调用图片
2020-10-28 10:57:19
3067
1
原创 scss子组合选择器和同层组合选择器：＞ + ~
子组合选择器>子组合选择器>： 选择一个元素的直接子元素//选择了.search这类下的所有直接子元素div(不会选择到子div下面的孙div).search{ > div{ border:1px red solid }}同层相邻组合选择器 +同层相邻组合选择器+: 选择同级的并紧跟在后的元素//选择header同级的并且紧跟着header之后的p元素header +p{ font-size: 2em}同层全体组合选择器 ~同层全体组合选择器~:
2020-10-26 17:58:30
8733
原创 vue的css动画过渡 ＜transition＞
//1. 需要添加动画效果的元素外层应使用<transition></transition>包裹<transition name="fade"> <div v-if="show">Hello world</div></transition><button @click="handleClick">点我</button>....handleClick(){ this.show = !this.show
2020-10-25 22:51:14
253
原创 vue之虚拟dom及diff算法(一)
当数据变化时，vue是如何更新节点的？渲染真实DOM的开销是很大的，对DOM的操作会引起整个dom树的重绘和重排。因此，vue采用虚拟dom来对节点进行更新。比如当某个div的属性发生变化时，这时候只需要比较变化前的oldVnode和变换后的Vnode，删除多余属性，更新属性或添加新属性，而不需要删除整个dom元素。diff过程diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁虚拟domvirtual DOM 是将真实的DOM的数据抽取出来，以对象的形式模拟
2020-10-23 11:19:24
195
原创 vue源码的isUndef函数
function isUndef(v){ return v === undefined || v === null}
2020-10-22 21:48:36
689
原创 vue组件注册的几种方式
全局注册核心是使用Vue.component1. 结合vue.extendvue.extend({//包含组件选项的对象})，使用基础构造器创建 组件“子类”var com1 = Vue.extend({ template:'<h3>结合vue.extend创建组件</h3>'})Vue.component("myCom1",com1) //全局注册组件//组件的使用<my-com1></my-com1>2. 直接使用模板创建组件Vu
2020-10-16 11:05:20
330
原创 vue之keep-alive缓存组件
之前只知道<keep-alive>是做缓存用得，看到很多项目都会在 app.vue这个根组件里用到。但是去掉之后，发现也没什么特别的影响，所以一直不太明白它怎么用。直到，我突然想到一个这样的问题，路由跳转会触发生命周期的钩子函数吗？答案是需分情况讨论，如果是跳转到当前页面的子路由，且页面中有<router-view/>则不会触发生命周期的钩子函数如果不是上述的路由关系，但是设置了<keep-alive></keep-alive>, 这个时候也不会触发生
2020-10-13 17:04:41
90
原创 2020-09-21
前端路由路由的概念来源于服务端，在服务端在中描述的是URL与处理函数之间的映射关系。在web前端单页面应用中，路由描述的是URL与UI之间的映射关系，这种映射是单向的，即URL变化引起UI更新（无需刷新页面）如何实现前端路由如何改变URL却不引起页面刷新？如何检测URL变化？hash实现hash是URL中的hash(#)及后面的那部分，常用作锚点在页面内导航，改变URL的hash部分不会引起页面刷新通过hashchange事件监听URL的变化，改变URL的方式只有几种：通过浏览器前进后
2020-09-25 19:51:45
84
原创 浏览器对象history的pushState()
history.pushState()HTML5为history对象添加了两个新方法，history.pushState()和history.replaceState()，用来在浏览历史中添加和修改记录。history.pushState(state,title,url)state: 一个与指定网址相关的状态对象，popState事件触发时，该对象会传入回调函数。如果不需要这个对象，可填nulltitle: 新页面的标题，但是所有浏览器都忽略这个值，可填nullurl: 新的网址,必须与当前页面处
2020-09-25 11:43:30
5018
原创 git撤销本地 、强制拉取远程代码覆盖本地
git 撤销本地(放弃本地修改)1. 未使用git add缓存代码时git checkout -- xxx(xxx是文件名)git checkout .放弃所有文件的修改2. 已经使用了git add缓存代码git reset HEAD xxx放弃指定文件的缓存git reset .放弃所有文件的缓存此番操作后回到 13. 已经使用了git commit提交代码git reset --hard HEAD^回退到上一次commit状态git reset --hard commitid回退到
2020-09-16 17:42:15
2989
原创 自定义组件的几种方式
全局组件全局组件可以在vue控制的任意模板下使用//注意组件命名方式//1.kebab-case, 单词直接采用短横线-连接，eg: my-component,在dom中使用时//<my-component>//2.pascalCase,驼峰命名,首字母大写,eg: MyComponent,在dom中也是 <my-component>Vue.component('my-component',{ template: "<div>我是全局组件</div&g
2020-09-09 15:02:39
790
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人