自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(661)
  • 资源 (3)
  • 收藏
  • 关注

原创 vue-router 原理【详解】hash模式 vs H5 history 模式

在不刷新页面的前提下,根据 URL 中的hash值,渲染对应的页面。

2024-04-14 11:56:56 183

原创 vue 原理【详解】MVVM、响应式、模板编译、虚拟节点 vDom、diff 算法

vue 的更新过程,是一种异步渲染,即并不是每一点 data 的改变都会立马触发视图更新, 而是会汇总 data 的修改,再一次性更新视图,这样可以减少 DOM 的操作次数,提高性能。vue 文件中支持指令、插值、JS 表达式,还能实现判断、循环,大大便捷了开发,但无法在浏览器中渲染,需要先将其转换成 JS 代码才行,这个转换的过程,即模板编译。vue 的响应式机制是在vue 实例初始化时建立的,即 data 函数中定义的变量,在页面初始化后,都具有响应式。1000 个节点,要计算1亿次,算法不可用!

2024-04-12 16:13:44 546

原创 vue 【详解】MVVM 理解

M —— Model 模型,即数据V —— View 视图,即DOM渲染VM —— ViewModel 视图模型,用于实现Model和View的通信,即数据改变驱动视图渲染,监听视图事件修改数据

2024-03-28 20:52:16 92

原创 vue2【详解】mixins —— 抽离公共逻辑

mixins 用于在 Vue 中便捷复用变量、方法、组件引用、生命周期等。

2024-03-22 21:47:05 473

原创 vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )

插槽:用于在子组件的指定位置插入指定内容,类似在电梯里挂的若干广告显示屏,可以给指定的位置传入指定的广告。

2024-03-22 16:42:47 368

原创 vue2 自定义 v-model (model选项的使用)

父组件 father.vue。子组件 child.vue。

2024-03-22 15:51:16 636

原创 JS 自测题

即自由变量自由变量的查找,是。

2024-03-22 15:23:03 256

原创 js 实现动画的两种方案对比:setTimeout vs RAF (requestAnimationFrame)

/ 4s 把宽度从 20px 变为 620px ,即增加 600px,每次需变化 600 px / (60帧/秒 *4秒) = 15px/帧。// 60帧/s 才能确保动画流畅, 即每 1000/60 = 16.7 ms 执行一次动画。// 得出最终动画效果为 每 16.7 ms , 宽度增加15px。// 时间需要自己控制。// 时间不用自己控制。

2024-03-21 11:31:49 331

原创 js 捕获异常

可全局监听所有JS的报错。

2024-03-19 15:02:25 170

转载 手写深度比较 lodash.isEqual

【代码】手写深度比较 lodash.isEgual。

2024-03-13 20:15:31 52

原创 js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)

借助 script 标签 向目标服务器加载到 jsonp.js 文件,执行 callback 函数,因本地已定义了 callback 函数,便会触发本地 js 代码的执行,获取到 jsonp.js 文件中的数据,从而实现了跨域。服务器设置 http header,即服务器端将指定网址设置为白名单,允许它以指定的方法进行跨域访问。JSONP 实现跨域的过程:借助 script 标签没有同源策略限制的特点,向跨域的目标服务器加载到需要的数据。所有的跨域,都必须经过 server 端允许和配合。

2024-03-13 17:28:28 1035

原创 js【详解】事件

给 DOM 节点绑定事件推荐使用 addEventListener 函数第一个参数:事件名称第二个参数:事件处理函数(第一个参数为 event)第三个参数:true 采用捕获法来处理事件false 【推荐】采用冒泡法来处理事件let div1= document.getElementById('div1');div1.addEventListener('click', function(event){ alert('div1_clicked!');}, false);

2024-03-10 23:26:59 476

原创 js【详解】BOM

浏览器对象模型 (Browser obiect Mode 简称 BOM)浏览器对象即 window,调用window对象的属性和方法时,可以省略window。

2024-03-10 21:38:24 390

原创 js 获取浏览器相关的宽高尺寸

屏幕分辨率的高: window.screen.height屏幕分辨率的宽: window.screen.width屏幕可用工作区高度: window.screen.availHeight屏幕可用工作区宽度: window.screen.availWidth。

2024-03-10 20:57:40 383

原创 js【详解】DOM

DOM 的本质是浏览器通过HTML代码解析出来的一棵。

2024-03-10 18:13:45 539

原创 js 类数组 转 数组

拥有数字索引和length属性的对象,但并不具备数组的方法和属性。

2024-03-10 14:09:58 366

原创 js【详解】async await

async await 实现了使用同步的语法实现异步,不再需要借助回调函数,让代码更加易于理解和维护。

2024-03-09 23:54:52 470

原创 js【深度解析】代码的执行顺序

我们将每一句要执行的 js 代码当做一个任务,则 js 代码可以按照其执行方式的不同,按下图分类微任务:被放入微任务队列(micro task queue)中等待执行的代码因为Promise、async 、await 都是 ES6 语法定义的宏任务:被放入 Web APIs 中等待执行的代码因为 setTimeout 、setInterval 都是浏览器定义的。

2024-03-09 22:59:25 457

原创 js【详解】Promise

Promise 是一种异步编程的解决方案,本身是一个构造函数自带resolve,reject,all 等方法,其原型上还有then、catch等方法。

2024-03-09 10:43:57 997

原创 js 【详解】异步

将只能嵌套的回调函数,变成了可串联的,更易阅读和维护!为了解决回调地狱的问题,诞生了 Promise。但回调函数实现异步的方式,容易形成。

2024-03-09 08:25:13 414

原创 js【详解】event loop(事件循环/事件轮询)

event loop 是异步回调的实现原理。

2024-03-08 18:05:04 447

原创 js【详解】bind()、call()、apply()( 含手写 bind,手写 call,手写 apply )

必备知识点:js 【详解】函数中的 this 指向_js function this-CSDN博客。

2024-03-08 10:16:02 494

原创 vue2【详解】生命周期(含父子组件的生命周期顺序)

1——beforeCreate:在内存中创建出vue实例,数据观测 (data observer) 和 event/watcher 事件配置还没调用(data 和 methods 属性还没初始化)【执行数据观测 (data observer) 和 event/watcher 事件配置】2——created:实例已完成数据观测 (data observer),property 和方法的运算,watch/event 事件回调。

2024-03-08 06:57:59 989

原创 js【详解】原型 vs 原型链

如下范例: class Student 创建了 实例 xialuo。

2024-03-07 11:55:42 814

原创 js【详解】instance of

判断某实例,是否是目标对象的构造函数构建的本质:判断实例是否属于其原型链。

2024-03-07 11:53:23 404

原创 vue 自定义事件的实现(可用于兄弟组件通信)

点击按钮后。

2024-03-06 23:32:17 472

原创 前端性能优化【前端必备】(含懒加载,手写防抖、节流等)

都可以考虑用空间换时间。

2024-03-06 13:27:14 1481

原创 linux 常用命令【编程必备】

回车后输入密码回车即可登录。

2024-03-05 15:13:53 305

原创 webpack 和 babel 实用教程【前端必备】

开发环境的前端代码重在易于阅读和编写,生产环境的前端代码追求更快地运行,所以需要通过前端构建工具将开发环境的前端代码通过混淆压缩打包构建成生产环境的前端代码。webpack 是众多前端构建工具的一种,主要实现以下功能:压缩代码将JS、CSS代码混淆压缩,让代码体积更小,加载更快编译语法将 Less、Sass、ES6、TypeScript 等浏览器可能不兼容的语法编译成浏览器支持的语法,如使用Babel编译ES6语法。

2024-03-05 14:20:26 372

原创 git 常用命令【编程必备】

若代码有改动,会列出被修改的文件,新增的文件,删除的文件等文件变动的信息。代码拉取方式有 SSH 和 https 两种。指定提交的标识符可通过 git log 查看。将另一个分支的代码,合并到当前分支。查看指定文件的代码改动的具体内容。查看所有的代码改动的具体内容。同时会创建一条代码提交的记录。会展示每次代码提交的标识符。用于识别是谁提交的代码。

2024-03-05 09:54:58 343

原创 https【详解】与http的区别,对称加密,非对称加密,证书,解析流程图

https 同时使用了对称加密和非对称加密,之所以没有全部使用非对称加密,是因为非对称加密的运算更加复杂,成本更高。在传输过程中,若有中间人攻击,伪造了 keyA 和 keyB 与客户端交互,也会变得不安全,所以又增加了证书校验。免费的证书容易被伪造,不推荐使用,建议购买使用第三方(如阿里云)的付费证书。加密用 keyA ,解密需要用另一个密钥 keyB。加密和解密都用同一个 key。

2024-03-04 16:03:13 345

原创 http【详解】状态码,方法,接口设计 —— RestfuI API,头部 —— headers,缓存

使用场景:限定客户端必须带有指定的 Headers 信息才能访问服务器,否则视为非法访问// axios 中自定义 Headers 的方法headers:{'自定义的请求头key':'自定义的请求头的值'}第一次请求时,服务器返回资源和 Last-Modified后续请求,在请求头中会带上 If-Modified-Since (值为上次服务器返回的 Last-Modified 值)服务器将对比请求头中的 If-Modified-Since 值和服务器上资源的最后修改时间。

2024-03-04 15:09:34 1179

原创 js【详解】自动类型转换

会报错。

2024-03-03 23:31:15 479

原创 js【详解】typeof 运算符

【代码】js【详解】typeof 运算符。

2024-03-03 16:33:21 354

原创 CSS 自测题

默认为标准盒模型 box-sizing:content-box;offsetWidth =(内容宽度+内边距 +边框),无外边距答案 122 px通过 box-sizing: border-box;可切换为 IE盒模型offsetWidth = width 即 100px。

2024-03-03 16:05:04 340

原创 CSS 【详解】响应式布局(含 rem 详解)

为什么 rem 能用于实现响应式布局?px 绝对长度单位,不同客户端表现都相同,不具有响应式em 相对长度单位,相对于父元素的 font-size 值,不同元素的父元素的尺寸各不相同,没有统一标准。rem 相对长度单位,相对于根元素的 font-size 值,页面中的根元素只有一个(即 html 标签),标准统一,可用于响应式布局。<!DOCTYPE html><html lang="en"> <head> <meta cha

2024-03-02 22:03:06 661

原创 CSS【详解】居中对齐 (水平居中 vs 垂直居中)

内部块级元素的宽度要小于容器(父元素)

2024-03-02 00:46:19 1398

原创 CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)

height;width;border;;/* 容器内元素使用flex布局 */display;/* 主轴居中对齐 */;.point;height;width;background;/* align-self 写在子元素上,覆盖父元素指定的交叉轴对齐方式 */align-self;

2024-03-01 16:16:38 1137

原创 css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)

两者功能效果相同,实现方式不同。

2024-03-01 14:45:20 1301

原创 js【详解】数据类型原理(含变量赋值详解-浅拷贝)

之所以这样设计,是因为引用类型的数据通常较大,拷贝时需要花费更多的时间和空间,引用类型浅拷贝的设计,提升了数据的拷贝速度和内存空间的使用效率,从而表现出了更佳的性能。变量赋值时,若数据为引用类型,则会先将引用类型的数据保存在堆内存中,再将该数据在堆内存中存储的地址存入该变量命名的空间。(即变量中存的是数据的引用地址)声明变量后,js引擎会在栈内存中开辟一个以该变量命名的存储空间,若未赋值,则该空间内存的值类型的数据 undefined。变量赋值时,若数据为值类型,则会将数据的值存入该变量命名的空间。

2024-02-29 22:55:28 395

quickcode快捷编程20210310版.zip

使用vue开发的方便快捷编程的工具(核心功能:自动生成目录,一键复制代码)

2021-03-10

pinyin_withtone.js

js 汉字转拼音

2020-12-29

dragVerifyImgChip.vue

vue 滑动拼图验证,使用方法详见https://blog.csdn.net/weixin_41192489/article/details/107029471

2020-06-30

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除