- 博客(40)
- 收藏
- 关注
RSS订阅原创 每日手写js
手写一个简单渲染器，将虚拟dom渲染为真实domconst vnode = { tag: 'div', props: { onclick: () => alert('hello') }, children: 'click me'}// 手写一个渲染器，用来渲染上面的代码,把上面的代码渲染为真实domfunction renderer(vnode, container) { // 使用vnode.tag作为标签名创建DOM元素 const el = docume
2022-02-28 22:00:47
332
1
原创 vue.js设计与实现——读书笔记(每日更新)
第一篇 框架设计概览第一章 权衡的艺术1.1 命令式和声明式视觉层框架主要分为命令式和声明式。命令式：命令式框架的一大特点就是关注过程声明式：声明式框架更注重结果vue.js的内部实现一定是命令式的，而暴露给用户的却更加声明式1.2 性能和可维护性的权衡命令式代码的性能是一定优于声明式代码的！ 因为命令式代码是直接去更改差异，而声明式代码需要先找到差异，然后再去修改。所以命令式的性能是一定大于命令式的。并且在理论上命令式代码是可以做到极致的性能优化的，因为我们明确的知道哪些发生了改变
2022-02-27 23:01:33
3561
9
原创 滚动条css
/*定义滚动条样式（高宽及背景）*/ ::-webkit-scrollbar { width: 6px; /* 滚动条宽度， width：对应竖滚动条的宽度 height：对应横滚动条的高度*/ background: #007acc; } /*定义滚动条轨道（凹槽）样式*/ ::-webkit-scrollbar-track { -web...
2022-02-23 10:55:45
328
原创 exceljs代码
testExcel(data) { let userinfo = this.getuserName(); const workbook = new ExcelJS.Workbook(); // 创建带有红色标签颜色的工作表 // const sheet = workbook.addWorksheet("My Sheet", { // properties: { tabColor: { argb: "FFC0000" } }, //
2022-02-10 16:46:35
623
原创 canvas画矩形方法
// img图片地址,result绘画矩形的坐标,name要显示的文字,color颜色draw_one_box(img, result, name, color, id) { let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.src = img; image.onload = () => {
2022-01-21 15:05:27
377
原创 虚拟DOM
1. 对虚拟DOM的理解？从本质上来说，Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。虚拟DOM是对DOM的抽象，这个对象是更加轻量级的对 DOM的描述。它设计的最初目的，就是更好的跨平台，比如Node.js就没有DOM，如果想实现SSR，那么一个方式就是
2022-01-12 19:04:37
177
转载 总结js的常用方法
Arraynew Set()用来对数组进行去重。const arr = [3,4,4,5,4,6,5,7];console.log(new Set(arr)); // {3,4,5,6,7}const a = Array.from(new Set(arr)) // [3, 4, 5, 6, 7]复制代码sort()对数组元素进行排序（改变原数组）。const arr = [3,4,4,5,4,6,5,7];console.log(arr.sort()) // [3, 4, 4, 4,
2022-01-12 16:50:10
210
原创 每日一题2022.1.11说一下css选择器优先级
1.说一下css选择器优先级第一优先级：!important，会覆盖页面内任何位置的元素样式1.内联样式，如：style=“float:right”。权值为10002.ID选择器，如：#app.权值为01003.类、伪类选择器、属性选择器。如：.app。权值为00104.标签、伪元素选择器。权值为00015.通配符、子类选择器、兄弟选择器。权值为：00006.继承的样式，没有权值...
2022-01-11 19:47:53
80
原创 vue-router两种模式的区别
vue-router两种模式的区别1.hash模式vue-router默认的是hash’[hæʃ] '模式，使用URL的hash来模拟一个完整的URL，于是当URL改变的时候，页面不会重新加载，也就是单页面应用了。当#后面的hash发生变化，不会导致浏览器向服务器发出请求，浏览器不会发出请求就不会刷新页面，并且会触发hasChange这个事件，通过监听hash值的变化来实现更新页面部分内容的操作。对于hash模式会创建hashHistory对象，在访问不同的路由的时候，会发生两件事：HashHist
2021-12-29 00:13:17
3844
原创 每日一题2021-12-28
每日一题 2021-12-281.vue-router有什么模式，有什么区别2.浅谈浏览器缓存3.position的值，分别有什么作用
2021-12-28 16:50:52
178
转载 详解vue的diff算法
详解vue的diff算法1.当数据发生变化时，vue是怎么更新节点的？要知道渲染真实的dom的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真是dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一块dom而不是更新整个dom呢？diff算法能够帮助我们。我们先根据真是的dom生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使o
2021-12-27 23:18:08
204
原创 关于 props、methods、data、computed的执行顺序
关于 props、methods、data、computed的执行顺序综上所述：props —》methods —》data —》computed —》watch。详情请看源码解析：https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L48-L62
2021-12-22 10:14:33
1258
原创 随手写的...
四、什么是云计算什么是云计算（Cloud computing）？这是我们在展开 SaaS 之前必须要理解的概念。云计算，通过互联网提供计算服务，包括服务器、储存、数据库、网络、应用等**，采用按需付费的定价模式。**这意味着，企业或个人可以通过互联网访问服务器上运行的软件和数据库，而无需在自己的物理服务器或计算机上运行应用程序。例如，一家公司需要建立信息系统，来支撑业务发展，有 2 种方案：方案 1，自建机房、买服务器、搭系统、开发应用。这需要投入硬件场地通风设施、招聘专业 IT 人员开发维护，且
2021-11-30 23:49:03
545
原创 初级前端面试题最新汇总
面试题一、宏观1. 自我介绍2. 你能说一下你是如何自学前端的好的。首先前端开发的东西是要跑在浏览器里面的，浏览器只能识别html，css，js的。所以我觉得这三块是我们入行最基础的东西，学好这些之后。然后呢，我在使用JavaScript这些老代码的时候，会有很多问题。我就又去学习了es6。就可以做出一个没有前后端交互，但是有前端效果的静态页面。比如说手写一些轮播图啊什么的。然后又去了解前后端分离，我就又去学习网络，比说说http协议什么的。就可以去做一些前后端分离的项目了。但是在做项目的时候
2021-11-24 00:12:22
5566
1
原创 你是如何理解HTML语义化标签的
你是如何理解HTML语义化标签的！语义化标签的出现不是为了方便我们用户去阅读，而是方便我们的机器去阅读我们的代码，在没有样式的前提下，语义化标签，同样会呈现出一个清晰的结构，方便机器阅读。爬虫搜索，搜索引擎的爬虫是靠语义化标签内部的关键字，确定它的上下文的权重。这就告诉了我们，在写代码的时候，适当的去使用语义化标签，就会加大我们整个页面的权重，能让我们的页面的排名在搜索引擎上名次更靠前。语义化标签极大化提高了我们代码的可读性，在我们协同开发的过程中，如果使用了语义化标签，那么我们开发人员之间就可以很
2021-11-04 19:06:15
176
原创 宏观——面试题
一、宏观1. 自我介绍2. 你能说一下你是如何自学前端的好的。首先前端开发的东西是要跑在浏览器里面的，浏览器只能识别html，css，js的。所以我觉得这三块是我们入行最基础的东西，学好这些之后。然后呢，我在使用JavaScript这些老代码的时候，会有很多问题。我就又去学习了es6。就可以做出一个没有前后端交互，但是有前端效果的静态页面。比如说手写一些轮播图啊什么的。然后又去了解前后端分离，我就又去学习网络，比说说http协议什么的。就可以去做一些前后端分离的项目了。但是在做项目的时
2021-10-19 14:18:13
182
原创 计算机网络和浏览器原理——面试题
四、计算机网络和浏览器原理1. HTTP和HTTPS的区别一、HTTP协议1、什么是HTTP"http" ，又被称为超文本传输协议，是互联网上应用最为广泛的一种网络协议。是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范。是用于从万维网服务器传输超文本到本地浏览器的传送协会。基于TCP的应用层协议，它不关心数据传输的细节，HTTP是一个基于 请求 与 响应模式的、无状态的、应用层协议，只有遵循统一的HTTP请求格式，服务器才能正
2021-10-19 14:02:01
1045
原创 能说一下vue的生命周期嘛
能说一下vue的生命周期嘛vue的生命周期就是，vue实例创建到销毁的过程。即指从创建、初始化数据、编译模板、挂载Dom到渲染、更新到渲染、销毁等一系列过程。它主要分为8个阶段：创建前后、载入前后、更新前后、销毁前、销毁后，以及一些特殊场景的生命周期：beforeCreate：组件实例被创建之初created：组件实例已经完全创建beforeMount：组件挂载之前mounted：组件挂载到实例上去之后beforeUpdate：组件数据发生变化，更新之前updated：数据更新之后befo
2021-10-12 15:09:09
103
原创 CSS单位px，rem，em，vw，vh的区别
CSS单位px，rem，em，vw，vh的区别1、px是什么px就是像素，也是我们现在经常使用的基本单位。px就是一张图片最小的一个点，一张位图就是千千万万这样的点构成的，比如常常听到的电脑像素是1024×768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。使用px时，页面按精准像素展示。2、什么是em？相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值3、什么是rem？相对单位，可理
2021-10-09 15:50:16
369
原创 JavaScript中的数据类型
JavaScript中的数据类型六大数据类型Number —— 数据类型String —— 字符串类型Boolean —— 布尔类型 true / falseNull —— null它是一个空对象undefined —— 未定义类型Object —— 对象分类**基本数据类型：**存在栈内存中，赋值时进行的是值传递（number，string，boolean，null，undefined，symbol）**引用数据类型：**存在堆内存中，赋值时传递的是地址传递
2021-10-09 10:25:23
56
原创 js中数组的常用方法
js中数组的常用方法es51、push()后增push()方法可以向数组后添加一个新的元素，并返回新数组的长度var a = [1,2,3]var b = a.push(4)console.log(a) // [1,2,3,4]console.log(b) // 42、unshift()前增unshift()可以向数组前增加一个或者多个元素，并返回新的长度var a = [2,3,4]var b = a.unshift(0,1)console.log(a) // [0,
2021-10-08 14:25:42
949
原创 前端实习生面试宏观概念三把斧
你能说一下你是如何自学前端的好的。首先前端开发的东西是要跑在浏览器里面的，浏览器只能识别html，css，js的。所以我觉得这三块是我们入行最基础的东西，学好这些之后。然后呢，我在使用JavaScript这些老代码的时候，会有很多问题。我就又去学习了es6。就可以做出一个没有前后端交互，但是有前端效果的静态页面。比如说手写一些轮播图啊什么的。然后又去了解前后端分离，我就又去学习网络，比说说http协议什么的。就可以去做一些前后端分离的项目了。但是在做项目的时候又遇到了一些问题，比如说要经常保存代码，去浏览
2021-10-06 12:06:08
127
原创 HTTP和HTTPS协议的区别
HTTP和HTTPS协议的区别一、HTTP协议1、什么是HTTP"http" ，又被称为超文本传输协议，是互联网上应用最为广泛的一种网络协议。是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范。是用于从万维网服务器传输超文本到本地浏览器的传送协会。基于TCP的应用层协议，它不关心数据传输的细节，HTTP是一个基于 请求 与 响应模式的、无状态的、应用层协议，只有遵循统一的HTTP请求格式，服务器才能正确解析客户端发的请求，同样地，服务器
2021-10-04 18:36:18
227
原创 HTTP状态码
HTTP状态码状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值：1xx：指示信息——般表示请求已接收，继续处理。2xx：成功——表示已经成功被接收、理解、接收。3xx：重定向——要完成请求必须进行更进一步的操作。4xx：客户端错误——请求有语法错误或请求无法实现。5xx：服务器端错误——服务器未能实现合法的请求。常见的状态码200（成功）：请求成功，通常服务器提供了需要的资源204（无内容）：服务器成功处理了请求，但没有返回任何内容301（永久移动）：请
2021-09-25 16:54:52
65
原创 apply call bind区别
apply call bind区别三者都可以改变函数的this对象指向三者第一个参数都是this要指向的对象，如果没有这个参数或者参数为undefined或null，则默认指向全局window三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入bind 是返回绑定this之后的函数，便于稍后调用；apply、call则是立即执行bind() 会返回一个新的函数，如果这个返回的新的函数作为构造函数创建一个新的对象，那么此
2021-09-25 16:42:10
66
原创 CSS优先级是怎么计算的
CSS优先级是怎么计算的第一优先级：!important会覆盖页面内任何位置的元素样式1.内联样式，如style=“float: right”，权值为：10002.ID 选择器，如：#app，权值为：01003.类、伪类、属性选择器，权值为：00104.标签、伪元素选择器，权值为：00015.通配符、子类选择器、兄弟选择器。权值为：00006.继承的样式，没有权值...
2021-09-25 16:33:59
499
原创 webpack中的Plugin和Loader的区别
webpack中的Plugin和Loader的区别Loader：用于对模块源码的转换，loader 描述了 webpack 如何处理非JavaScript模块，并且在buld中引入这些依赖。loader可以将文件从不同语言（如：typeScript）转换为JavaScript，或者将内联图像转换为dataURL。Plugin目的在于解决loader无法实现的其他事，它直接作用于webpack，扩展了它的功能。在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件
2021-09-25 16:28:26
175
原创 什么是事件代理（事件委托）有什么好处
什么是事件代理（事件委托）有什么好处事件委托的原理： 不给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点优点：减少内存消耗和dom操作，提高性能在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因此需要不断的操作dom，那么引起浏览器重绘和回流的可能也就越多，页面交互的事件也就变的越长，这就是为什么要减少dom操作的原因。每一个事件处理函数，都是一个对象，多一个事件处理函数，内存中就会被多占用一部分空间。
2021-09-25 16:19:35
554
原创 从输入一个URL地址到浏览器完成渲染的整个过程
从输入一个URL地址到浏览器完成渲染的整个过程1. 浏览器地址输入URL并回车2. 浏览器查找当前URL是否存在缓存，并比较缓存是否过期3. DNS解析URL对应的IPDNS解析实际上就是寻找你所需要的资源的过程。假设你输入 www.baidu.com ，而这个网站并不是百度的真实地址，互联网中的每一台机器都有唯一标识的IP地址，这个才是关键，但是它并不好记，所有就需要一个网址和IP地址转换，也就是DNS解析具体解析： 输入网址后，首先在本地的域名服务器中查找，没找到去根
2021-09-25 16:08:54
1498
原创 时间过滤器
时间过滤器 filters: { // 日期过滤器 dateFormat (date) { date = new Date(date) // console.log(data) return ` ${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.g
2021-09-15 17:20:14
89
原创 封装request.js
封装request.jsimport axios from 'axios'import store from '@/store'import router from '@/router'import { Message } from 'element-ui'import qs from 'qs'const request = axios.create({ timeout: 2000 // baseURL: // Headers:})function getBaseURL (u
2021-09-15 16:33:58
455
原创 HTML和CSS
HTMl和CSS1、表格： <!-- 表格 --> <!-- --> <table border="1"> <!-- 表头 --> <!-- td是单元格，tr是行 --> <thead> <td>姓名</td> <td>id</td>
2021-09-04 13:14:25
119
原创 Vue中的生命周期函数
Vue中的生命周期函数 // Vue组件、实例创建之前完成 beforeCreate(){ }, // // 在实例创建完毕的时候 created(){ }, // // 模板渲染到页面显示之前 beforeMount(){ }, // 模板渲染完毕之后 mounted(){ }...
2021-08-17 18:08:51
56
原创 vue小demo
小黑记事本基于vue的小demo<template> <div> <!-- 主体区域 --> <section id="todoapp"> <!-- 输入框 --> <header class="header"> <h1>小黑记事本</h1> <input v-model="addValue" @keyup.enter="l
2021-08-13 21:27:49
64
原创 5分钟教会你Axios
Axios1.Axios引言axios 的引言Axios是一个 异步请求 的技术异步请求基于XMLHttpRequest对象发起的请求都是异步请求异步请求的特点请求之后页面不动，响应回来更新的是页面的布局，多个请求之间互不影响，并行执行。2.Axios基本入门2.1 Axios的安装使用npmnpm install axios使用cdn：<script src="https://unpkg.com/axios/dist/axios
2021-08-12 16:40:33
219
原创 java基础面试题
Java面试宝典第二章2.1Java基础请你简单描述一下正则表达式及其用途在编写处理字符串程序时，经常会有查找符合某些复杂规则的工具。换句话说，正则表达式就是记录文本规则的代码。计算机处理的信息更多的时候不是数值而是字符串，正则表达式就是在进行字符串匹配和处理的时候最为强大的工具，绝对多数语言都提供了对正则表达式的支持Java和JavaScript的区别Java和JavaScript是由两个公司开发的不同的两个产品。Java是一种真正的面向对象的语言，即时是开发简答的程序，必须设
2021-08-06 13:12:26
103
原创 数据库的字段类型
数据库的字段类型unsigened：无符号的整数声明该列不能为负数zerofill：用0来填充补位10的长度 例如：1 ———— 0000000001 ；不足的位数用0填充。自增通常理解为自增，自动在上一条记录的基础上 + 1；通常用来设计唯一的主键index，必须是整数类型可以自定义设置主键自增的起始值和步长非空 not NULL假设设置为 not null，如果不给他赋值，就会报错NULL 如果
2021-07-20 11:29:26
197
原创 数据库的列类型
数据库的列类型数值tinyint 十分小的数据1个字节smallint 较小的数据2个字节mediumint 中等大小3个字节int 标准的整数4个字节 （常用）bigint 较大的数据8个字节float 浮点数4个字节double 浮点数8个字
2021-07-20 11:15:51
342
原创 Java内存分析
Java内存分析1.堆存放 new 的 对象 和 数组；可以被所有的线程共享，不会存放别的对象引用2.栈存放基本变量类型（会包含这个基本类型的具体数值）引用对象的变量（会存放这个引用在堆里面的具体地址）3.方法区可以被所有的线程共享包含了所有的class和static变量...
2021-07-19 20:39:48
38
原创 Git的安装配置，和常用代码
GIt配置1.Git的安装Git的官方网站为https://git-scm.com/download/win，直接下载安装，傻瓜式安装，下一步到底！最后完成即可！最后在桌面上右键鼠标发现 Git Bash Here选项即为安装成功。该窗口为安装成功。安装成功后，设置用户名和邮箱！(必做)设置用户名命令：git config --global user.name “dnhz”设置邮箱命令：git config --global user.email 2451857749@qq.co
2021-07-18 09:04:13
105
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人