- 博客(91)
- 收藏
- 关注
RSS订阅原创 React和Vue的区别
文章目录React和Vue的区别1.监听数据变化的实现原理不同2.数据流不同3.组件通信的区别4.模板渲染方式不同5.模板渲染过程不同6.框架本质不同Virtual DomMVVM MVC MVPMVCMVPMVVMReact和Vue的区别1.监听数据变化的实现原理不同Vue通过getter/setter方法以及一些函数的劫持能精确知道数据的变化。React默认是通过比较引用方式diff算法进行的，若不优化，会导致大量不必要的VDom的重新渲染。2.数据流不同Vue实现双向绑定：props可以双
2021-06-28 11:35:38
6507
原创 详解作用域链、原型链、闭包
文章目录一、作用域全局作用域函数作用域块级作用域补充----动态作用域this（下一篇文章会继续介绍）二、变量的作用域全局变量局部变量全局变量和局部变量的区别三、作用域链四、变量和函数的声明提升变量的声明提升函数声明提升变量声明和函数声明提升的联系五、原型原型对象理解**函数对象的 prototype 属性****constructor 属性**对象的 __proto__ 属性原型属性六、原型链七、闭包基本含义特点应用场景`setTimeout` 传参回调IIFE（自执行函数）函数防抖、节流柯里化模块化解决
2021-04-15 11:44:06
758
3
原创 模拟Vue数据响应双向绑定原理
文章目录Vue双向绑定1.数据驱动2.数据响应式核心原理（vue 2.x）3.发布订阅模式和观察者模式发布订阅模式观察者模式两者区别Vue 响应式原理模拟1.Vue2.Observer3.Compiler4.Dep5.Watcher总结具体步骤1. Vue的作用2. Observer的作用3.Compiler的作用4. Dep的作用5. WatcherVue双向绑定Vue数据双向绑定原理1.数据驱动数据响应式-数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新
2021-04-12 18:24:04
520
原创 vue数据双向绑定原理
vue数据双向绑定数据绑定原理两种绑定情况Object.defineProperty()数据绑定原理 vue通过使用双向数据绑定，来实现view层和model层的同步更新。vue的数据双向绑定主要是通过数据劫持和订阅者模式来实现。 首先通过Object.defineProperty()方法对model层数据的各个属性添加访问器属性，以此来实现对数据的劫持，因此当model层中的数据发生变化的时候，可以通过配置s
2021-03-25 10:59:50
293
原创 js中关键字new的原理（含实现代码）
new的原理在调用new的过程中都干了什么？在内存中创建一个新对象新对象内部的prototype特性被赋值为构造函数的prototype属性构造函数内部的this被赋值为这个新对象（即this指向新对象）执行构造函数内部的代码（即给新对象添加属性）如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象使用js原生代码实现newfunction myNew () { //创建一个新对象 var obj = new Object (); //取出参数中的第一个参数，获得构造函
2021-03-08 16:46:09
4243
原创 使用原生JS实现call()、aply()、bind() 函数
前提知识回顾：call()、apply()、bind()函数之间的区别实现call()方法解题思路：首先我们要知道使用call函数的一些规定调用的call()方法的是函数如果指定的this值为null或者undefined，则会自动指向全局对像(浏览器中就是window对象)如果指定的this值为数字，字符串，布尔值等，则会指向原始值的实例对象 Function.prototype.nyCall = function(context){ if(typeof this !
2021-03-07 16:43:02
250
原创 js中call()、apply()、bind()函数之间的区别
文章目录call()函数call()函数语法call()函数的应用带参数的 call() 方法apply()函数apply()函数语法apply()函数的应用带参数的 apply() 方法bind()函数bind()函数语法bind()函数的应用带参数的 bind() 方法call()、apply()、bind()函数之间的区别call()函数call() 方法是预定义的 JavaScript 方法。它可以用来调用所有者对象作为参数的方法。通过 call(),我们能够使用属于另一个对象的方法。cal
2021-03-07 11:26:52
192
原创 类数组和数组的区别与转换
类数组定义任何可迭代的结构，或者拥有length属性，其他属性（索引）为非负整数不具有数组所具有的方法元素属性名必须是数值或者可转换为数值的字符对象中的索引会被当做字符串来处理常见的类数组arguments对象DOM方法的返回结果，比如document.getElementsByClassName()jQuery对象，比如$("div")类数组和数组的区别和联系相同点：都可用下标索引访问每个元素都有length属性不同点：数组对象类型为Array，遍历数组可以用
2021-03-06 21:27:27
962
原创 常见的Web攻击方式及对应防御
Web攻击XSS（跨站脚本攻击）CSRF（跨站请求伪造）Http Heads攻击SQL 注入DOS攻击（拒绝服务攻击）DDOS攻击 （分布式拒绝服务攻击）XSS（跨站脚本攻击）简介：XSS攻击（Cross Site Scripting）通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常JavaScript，但实际上也可以包括Java、VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成
2021-03-06 10:21:22
417
原创 图解TCP三次握手和四次挥手
TCP三次握手四次挥手TCP的几个状态TCP三次握手TCP四次挥手为什么三次握手中客户端最后还要发送一次确认呢？TIME_WAIT 的意义（为什么要等于 2MSL）为什么建立连接是三次握手，关闭连接确是四次挥手呢？TCP的几个状态SYN------------>建立连接FIN------------->关闭连接ACK------------->响应PSH------------->有数据传输RST------------->连接重置TCP三次握手C:我要和你建立
2021-03-03 16:45:00
330
原创 http1.0、http1.1、http2.0、http、https之间的联系与区别
网络协议基本含义Http 和 Https 的区别HTTP1.0、1.1、2.0 之间的区别Http1.0 和 Http1.1 的主要区别Http1.1 和 Http2.0 的主要区别Https 的具体实现，怎么确保安全性？拓展知识点对称加密与非对称加密基本含义HTTP 超文本传输协议（HyperText Transfer Protocol ），为了提供一种发布和接收Html页面的方法，可以是浏览器更加高效，以明文方式发送信息。HTTPS 超文本传输安全协议（全称：HyperText Transfer
2021-03-02 19:16:53
460
原创 CSS面试知识点总结(持续更新...)
CSS知识点==1、介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？====2、CSS 选择符有哪些？====::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。====4、伪类与伪元素的区别====5、CSS 中哪些属性可以继承？====6、CSS 优先级算法如何计算？====7、关于伪类 LVHA 的解释?====8、CSS3 新增伪类有那些====9、如何居中 div？====10、display 有哪些值？说明他们的作用。====1
2021-03-01 16:47:57
263
原创 HTML面试常问知识点总结（持续更新~）
HTML面试总结==1、DOCTYPE 的作用是什么？====2、 DTD 介绍====3、HTML5 为什么只需要写 ，而不需要引入 DTD？====4、标准模式(严格模式)与兼容模式（怪异/混杂模式）各有什么区别？====5、行内元素定义====6、块级元素定义====7、行内块状元素定义====8、行内元素与块级元素的联系与区别？====9、空元素定义====10、link 标签定义====11、页面导入样式时，使用 link 和 @import 有什么区别？==持续更新中.....1、DOCTYP
2021-02-24 21:10:15
368
原创 前端常见的几种设计模式（含实现代码）
设计模式什么是设计模式传统单例模式实现单例核心思想工厂模式简单工厂模式工厂方法抽象工厂模式抽象工厂模式作用什么是设计模式设计模式是对一些常见问题进行归纳总结，并针对具体问题给出一套通用的解决办法（强调的是解决问题的思想）；在开发中，只要遇到这类问题，就可以直接使用这些设计模式解决问题；最早起源于建筑领域，在建筑领域把一些问题和经验进行归纳总结，形成一套可以用来在建筑领域解决大多数问题的方案；后来计算机领域借鉴了建筑领域的设计模式，把计算机领域中经常遇到的问题进行归纳和总结，形成计算机领域23种设计模式。
2021-02-20 14:21:26
685
原创 前端关于计算机网络常考面试题
1. Post 和 Get 的区别？Post 和 Get 是 HTTP 请求的两种方法。（1）从应用场景上来说，GET 请求是一个幂等的请求，一般 Get 请求用于对服务器资源不会产生影响的场景，比如说请求一个网页。而 Post 不是一个幂等的请求，一般用于对服务器资源会产生影响的情景。比如注册用户这一类的操作。（2）因为不同的应用场景，所以浏览器一般会对 Get 请求缓存，但很少对 Post 请求缓存。（3）从发送的报文格式来说，Get 请求的报文中实体部分为空，Post 请求的报文中实体部分一般
2021-02-17 19:36:49
668
原创 前端面试--计算机网络知识总结
计算机网络知识总结第七层----应用层HTTP协议HTTP 请求报文HTTP 响应报文HTTPS 简介TLS 握手过程实现原理加密方式解决传输数据安全问题的办法DNS 协议域名的层级结构DNS查询过程DNS 记录和报文递归查询和迭代查询DNS 缓存DNS 实现负载平衡第四层----传输层多路复用与多路分解UDP 协议UDP 报文段结构TCP 协议TCP 报文段结构TCP 三次握手的过程TCP 四次挥手的过程第三层----网络层第二层----数据链路层第一层----物理层第七层----应用层应用层协议定义
2021-02-16 19:44:09
473
2
原创 超级详细MongoDB 的基本操作(理论+举例)
MongoDB 的基本操作一、创建数据库二、删除数据库三、创建集合四、删除集合五、插入文档六、更新文档1、update() 方法2、save() 方法七、查询文档1、MongoDB 条件操作符2、MongoDB 与 RDBMS Where 语句比较3、MongoDB AND 条件4、MongoDB OR 条件5、AND 和 OR 联合使用6、模糊查询八、删除文档一、创建数据库use DATABASE_NAME如果数据库不存在，则创建数据库，否则切换到指定数据库。示例：1、刚刚创建的数据库使用 s
2021-02-15 19:24:48
10548
2
原创 MongoDB的安装配置及简介
MongoDB安装和配置MongoDB 简介一、什么是 NoSQL?二、什么是 MongoDB ?三、MongoDB 概念解析1、数据库2、文档(Document)3、集合四、MongoDB 数据类型1、ObjectId2、日期安装和配置1、下载 MongoDB 的 windows 版本，有 32 位和 64 位版本，根据系统情况下载, 下载地址：http://www.mongodb.org/downloads2、安装，默认安装路径为：C:\Program Files\MongoDB\Server
2021-02-14 19:34:27
367
原创 史上最全SQL基础知识总结(理论+举例)
SQL基础知识一、SQL 概述1、什么是 SQL2、语法要求二、SQL 分类三、DDL（Data Definition Language）：数据定义语言基本操作1.操作数据库2.数据类型3.操作表四、DML（Data Manipulation Language）：数据操作语言1.插入数据2.修改数据3.删除数据五、DCL（Data Control Language）：数据控制语言1.创建用户2.给用户授权3.撤销授权4.查看用户权限5.删除用户6.修改用户密码（以root身份）六、DQL（Data Quer
2021-02-13 01:23:14
214017
43
原创 MySQL 基本操作命令
MySQL一、启动与退出二、数据库操作一、启动与退出1、启动 MySQL 服务net start MySQL 服务名2、关闭 MySQL 服务net stop MySQL 服务名3、登录 MySQL方式一： 启动 MySQL Command Line Client（MySQL 的 DOS 界面），直接输入安装时 的密码即可。此时的提示符是：mysql>方式二： 打开 DOS 窗口，然后进入目录 E:\MySQL\mysql-8.0.15-winx64\bin 输入如下命令：mysql
2021-02-06 21:52:46
4125
原创 关于数据库你必须知道的事~
数据库基础理论一、数据库二、数据库管理系统(DBMS)三、数据库系统（DBS）的组成四、数据库系统的特点五、数据库应用系统六、数据库系统的体系结构七、概念模型八、常用的数据模型关系模型中的基本术语关系的性质关系数据库中的表之间的关系关系模型的完整性约束一、数据库数据库(Database，DB)是长期存储在计算机内的、有组织的、可共享的、统一管理的相关数据的集合。按照字面的理解，数据库就是存放数据的仓库。二、数据库管理系统(DBMS) DBMS 的功能：数据库定义功能；数据存取功能；数据库运行管理
2021-02-04 13:35:32
2544
2
原创 9种HTML中通过CSS方式隐藏元素的方法
1、 通过style属性中的 display : none2 、通过style属性中的 visibility : hidden这两种方式的区别是:display 设置为 none之后, 该元素不占用文档流;visibility 设置为 hidden之后, 该元素仍然占用文档流, 只不过是看不见了而已。3、通过相对定位移动当前元素到屏幕左侧div{ position: relative; left: -100%}注意：元素仍然占用标准文档流百分比是相对父元素的
2021-02-04 11:45:12
281
原创 解决vue页面刷新，数据丢失的问题
在做vue项目的过程中有时候会遇到一个问题，就是进行F5页面刷新的时候，页面的数据会丢失。出现这个问题的原因是：因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了，解决方式如下：方法一：利用localStorage/sessionStorage将数据储存在外部，做一个持久化储存方案1： 由于state中的数据是响应式的，而数据又是通过mutation来进行修改，故在通过mutation修改
2021-02-01 21:58:49
2189
原创 关于React的灵魂问题(持续更新)
setState 是异步还是同步？合成事件中是异步钩子函数中的是异步原生事件中是同步setTimeout中是同步调用 setState 之后发生了什么？在 setState的时候，React 会为当前节点创建一个 updateQueue 的更新列队。然后会触发 reconciliation 过程，在这个过程中，会使用名为Fiber的调度算法，开始生成新的Fiber 树， Fiber 算法的最大特点是可以做到异步可中断的执行。然后React Scheduler会根据优先级高低，先执行优先级高
2021-01-31 23:15:10
214
2
原创 javascript数组去重的几种方法
数组（包含对象等类型元素）去重解决思路一个数组（包含对象等类型元素）去重函数，需要在基础类型判断相等条件下满足以下条件：如果元素是数组类型，则需要数组中的每一项相等如果元素是对象类型，则需要对象中的每个键值对相等去重本身就是遍历数组，然后比较数组中的每一项是否相等而已，所以关键步骤有两步：比较、去重比较：首先判断类型是否一致，类型不一致则返回认为两个数组元素是不同的，否则继续如果是数组类型，则递归比较数组中的每个元素是否相等如果是对象类型，则递归比较对象中的每个键值对是否相等否则，
2021-01-30 19:24:53
299
原创 React之路由的基本使用和执行过程
路由什么是路由基本使用路由组件执行过程编程式导航默认路由什么是路由现代前端应用都是 SPA （Single Page Application 单页应用程序）, 就是只有一个html页面的应用程序。 为了有效使用单个页面管理原来的多页面功能，前端路由就产生了前端路由的功能： 让用户从一个页面导航到另一个页面前端路由是一套 ur l路径 与 组件的对应关系基本使用使用步骤：安装： npm i react-router-dom导入路由的三个核心组件： Router / Route / Lin
2021-01-30 18:55:32
233
原创 React之组件的复用render props模式及高阶组件
组件的复用组件复用render props模式1.创建鼠标位置组件2.复用鼠标位置组件3.children代替render props高阶组件1.基本使用2.displayName3.传递props组件复用△组件复用就是将组件中相同的业务逻辑抽取出来进行封装△复用两种东西：state操作 state 的方法△实现复用有两种方式：render props 模式高阶组件（HOC）△组件复用没有新的API，是由 React 自身特点（编码技巧）演化而来的固定模式render p
2021-01-29 19:36:23
387
原创 React之虚拟DOM和diff算法
虚拟DOM和diff算法createEmement 创建组件JSX转换过程虚拟DOMdiff算法递归实现diff算法createEmement 创建组件createElement 是另一种创建 react 元素的方法，但是相对麻烦，并且难于维护所以了解即可import React from 'react'import ReactDOM from 'react-dom'// 参数1: 标签名// 参数2: 标签属性// 参数3: 标签内部的子节点const jsx = React.creat
2021-01-29 19:15:45
408
原创 React之组件性能优化的几种方式
组件性能优化组件更新机制减轻 state避免不必要的渲染stateprops纯组件组件更新机制三种组件更新的情况：调用 forceUpdate 方法强制更新调用 setState 方法更新数据props 值发生变化时问题：当组件进行嵌套时，更新了其中的某一个组件后，其他组件的更新方式？当一个组件进行更新时，不但会更新自己，也会更新后代组件。但是不会更新父组件和兄弟组件减轻 state目标： 降低页面更新的频率 （只要state中数据发生改变，页面就会重载）方式： 不用做渲染的数据，
2021-01-29 13:08:27
543
原创 React之运用组件获取鼠标实时位置信息
核心思路： 通过鼠标移动事件，获取实时鼠标位置信息，再将位置信息更新在页面上鼠标位置实现思路：要设置 state，用来保存鼠标的 横纵坐标要注册mousemove事件，实时获取鼠标当前的位置，并保存到state中mousemove事件要注册给window （在 componentDidMount 方法中进行注册）将 state 的值设置 页面要显示鼠标位置的地方import React from 'react';import ReactDOM from 'react-dom';cl
2021-01-28 15:04:00
2151
1
原创 React之组件的生命周期
Context解决的问题：Context传统方式缺陷明显，一层一层传递太过复杂解决方案： 使用 Context 可以实现跨组件传值实现步骤：调用 React.createContext() 方法创建 Provider (提供数据) 和 Consumer (消费数据)使用 Provider 组件包裹最外层的父组件，并使用 value属性传递数据使用 Consumer 接收数据import React from 'react'import ReactDOM from 'react-d
2021-01-28 14:31:21
229
原创 React之组件（component）之间的通讯----props、context
组件通讯组件是独立封闭的单元一个完整的页面通常是由多个组件组合而成的组件之间经常需要共享一些数据，所以就需要组件之间能够通讯propsprops 用于接收外界向组件中传递的数据实现方法：渲染组件时，在组件标签中使用自定义属性向组件内部传递数据组件内部可以使用 props 来接收自定义属性传递的数据函数组件： props类组件： this.props注意事项：除了字符串之外，其他类型的数据都需要使用 {}props 是只读属性，不能修改里面的数据使用类组件时，如
2020-12-31 12:32:33
920
原创 React受控组件中不同域数据的获取方式
受控组件什么是受控组件核心代码案例不同域数据的获取方式什么是受控组件受控组件通常指的是表单，因为表单是可输入的，必须有对应的状态与之绑定React 将 state与表单的 value值绑定到一起给表单元素绑定change事件，将表单元素的值设置为state的值，接收表单值变化核心代码第一步：在state中设置数据state = { username: 'admin'}第二步：表单域中将 state中的数据与value绑定<input type="text"
2020-12-21 10:35:28
284
1
原创 React中有状态（state）与无状态组件以及this的指向问题
有状态和无状态组件函数组件叫做无状态组件；类组件叫做有状态组件状态 （state），组件中使用的数据都保存在 state 中，并且是组件的私有数据函数组件只负责数据展示（静）类组件有状态，负责动态展示 UI 界面 （动）state的基本使用state用来为组件绑定私有数据，有两种绑定形式第一种： 在构造函数中定义 state第二种： 在类中直接定义state （推荐）在构造函数中定义 stateclass Hero extends React.Component { // 使用构
2020-12-19 17:13:19
608
2
原创 React组件的创建、抽离和事件处理
React 组件React 组件基本介绍创建组件使用函数创建组件使用类创建组件抽离组件事件处理类形式实现事件函数形式实现事件事件对象React 组件基本介绍组件是React中最重要的技术，使用 React 就是在使用各种组件组件表示页面中的部分功能通常一个完整的页面时由多个组件组合而成的特点： 可复用、可组合、独立创建组件使用函数创建组件使用函数创建的组件叫做 函数组件函数名称首字母必须以 大写字母 开头函数组件必须有 返回值 ，而且是 JSX结构； 返回值可以为 null， 意思
2020-12-15 13:57:11
742
原创 CSS中让元素水平垂直居中的6种写法
水平居中使用CSS控制水平居中：块级元素 设置width,并设置margin auto内联元素 父元素设置text-align center块级元素水平居中关键属性：margin: 0 auto<style>.container{ width: 300px; height: 300px; border: 2px solid black;}.little{ width: 200px; margin: 0 auto; border: 2px solid
2020-12-09 09:56:57
1208
原创 React基本概述、项目创建以及JSX语法
React React 概述React简介项目搭建项目结构说明基本使用JSXJSX简介JSX中的表达式条件渲染循环渲染理解循环CSS样式处理总结React 概述React简介React 是一个 MVC 框架React 主要是用来构建 UIReact 是起源于Facebook的内部项目，用于构建 Instagram 网站，在 2013.05 开源React 特点：声明式：使用 React 编写UI界面和写HTML几乎一样高效： React通过对DOM的模拟，最大限度地减少与DOM的交互
2020-12-07 14:27:10
1361
原创 Vue中watch（侦听器）监听数据和路由发生改变
watch侦听器侦听器(watch),就是当数据发生变化时,及时做出响应处理。Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。属性的侦听方式有两种：1、实例中的watch属性2、vm.$watch监听数据在前两个input框中输入数据之后，通过watch监听数据，同步显示在第三个input框中<!DOCTYPE html><html lang="en"><head>
2020-12-02 19:51:57
1634
1
原创 Vue中路由嵌套（子路由）
路由的嵌套就是点击一个路由地址后，继续点击，进入到另外一个路由地址下，即第二个路由就是第一个路由的子路由。根据我们前面学习的VueRouter的知识，可以直接写出代码来实现：一般写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
2020-12-02 18:59:10
15333
原创 Vue中解决路由切换，组件不更新问题的方法
Vue Router可以实现路由的切换，也就是组件之间的切换，它不同于传统页面的切换，所以在使用的时候经常会出现路由已经切换，但是组件没有更新的问题(只要实现对页面的刷新，组件就会重新进行加载)：一、 问题呈现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
2020-11-25 19:10:12
5560
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人