<a href="#">leo</a>-CSDN博客

原创 http三次握手和四次挥手

目录前言一、HTTP和HTTPS1. HTTP2. HTTPS二、什么是 TCP 连接的三次握手1. 三次握手2. TCP 协议优点3. TCP 协议缺点三、为什么 TCP 连接需要三次握手四次挥手1. 为什么是三次握手？2. 为什么是四次挥手？总结前言TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。一、HTTP和HTTPS1. HTTPHTTP 请求的过程域名解析 --> 发起 TCP

2021-10-05 21:09:03 3491 5

原创前端加分项——vue项目优化打包

目录前言一、路由懒加载1. 为什么需要路由懒加载2. 如何实现路由懒加载3. 路由懒加载中的魔法注释二、分析包大小1. 需求2. 如何生成打包分析文件三、webpack配置排除打包1. 需求2. 排除打包四、引用网络资源1. 需求2. CDN3. 实现步骤五、打包去除console.log1. 需求2. 代码演示总结前言Vue项目开发完毕后，对项目进行打包发布之前，必不可少的操作就是项目优化，这也是程序猿的加分项。跟随本文的脚步来看看如何对项目进行优化吧~一、路由懒加载1. 为什么需要路由懒

2021-09-04 19:56:30 413 3

原创 js中的原型和原型链

目录前言一、什么是原型？二、原型链三、代码演示总结前言为什么要学原型呢？原型链有什么作用呢？本文通过图解和代码给你讲解，快来一睹为快~提示：以下是本篇文章正文内容，下面案例可供参考一、什么是原型？JavaScript 是一种通过原型实现继承的语言与别的高级语言是有区别的，像 java，C#是通过类型决定继承关系的，JavaScript 是的动态的弱类型语言，总之可以认为 JavaScript 中所有都是对象，在 JavaScript 中，原型也是一个对象，通过原型可以实现对象的属性继承，

2021-08-12 18:37:20 436 3

原创 Vue常用工具函数——（持续更新）

自定义指令——自动聚焦指令第一种方式mouted周期，ref+querySelector获取到input标签，调用focus()第二种方式自定义指令（局部）directives:fofo(inserted),定义好以后在标签上使用， v-fofo第三种方式全局自定义指令，放到utils/directives.js模块下，在main.js导入使用即可。（推荐-复用性极高）import Vue from 'vue'Vue.directive("fofo",{ inserted(el) {

2021-08-04 22:53:17 1431 2

原创 js复杂数据类型——对象应该注意的问题①

抽了一点点时间把前端的复杂数据类型(对象)回顾了一下,今天重新拾笔记录自己的成长历程，以下记录一下之前自己学习时忽略的内容。

2021-12-05 23:27:43 437

原创 react——react Hooks、State Hook

目录前言一、React Hooks 概述1. 产生的原因2. 总结二、State Hook的使用1. State Hook的概念2. 使用useState()实现状态管理步骤3. useState()初始化其它数据类型4. useState()注意点5. 类（class）组件和使用useState()创建的函数组件对比总结前言Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性一、React Hooks 概述Hoo

2021-11-14 21:30:41 963

原创 react——编程式导航

文章目录前言一、编程式导航1. 编程式导航2. 默认路由二、匹配模式1. 模糊匹配模式2. 精确匹配总结前言今天我们一起看看react中的编程式导航和匹配模式一、编程式导航1. 编程式导航场景：点击登录按钮，登录成功后跳转到首页，该如何实现？编程式导航：通过 JS 代码来实现页面跳转history 是 React 路由提供的，用于获取浏览器历史记录的相关信息push(path)：跳转到某个页面，参数 path 表示要跳转的路径go(n)：前进或后退到某个页面，参数 n 表示前进或

2021-11-13 18:59:35 1942 1

原创 react路由

目录前言一、react路由介绍1. 前端应用发展2. 前端路由的功能二、路由的基本使用1. 使用步骤2. 常用组件说明3. 路由的执行过程总结前言今天我们一起看一看react中路由相关内容一、react路由介绍1. 前端应用发展浏览器每向服务器发起一次请求，服务器生成一个html页面，返回给浏览器现在 SPA（单页应用程序），也就是只有一个 HTML 页面（首页）的应用程序。其余页面（组件）都是在第一次请求完成之后由 JavaScript 动态生成的。一个 SPA 应用程序由多个组件（

2021-11-12 20:08:48 883

原创 react——props和高阶组件

目录前言一、render props 模式1. react复用概述2. render props 模式3. children 代替 render 属性二、高阶组件1. 概述2. 使用步骤3. 传递props总结前言今天我们一起看看 react中的props模式和高阶组件相关内容，看看这两个解决了什么样的问题，我们应该怎样书写我们的代码呢?一、render props 模式1. react复用概述如何复用相似的功能？组件状态逻辑，1. state 2. 操作state的方法两种实现方案：

2021-11-11 21:20:38 930

原创 react生命周期

目录前言一、组件生命周期概述1.组件的生命周期2.钩子函数的作用二、生命周期的三个阶段1. 生命周期图解2. 创建时（挂载阶段）3. 更新时（更新阶段）4. 卸载时（卸载阶段）总结前言今天我们一起看看react中的生命周期，并且看一看在每一个阶段都做了哪些事情~一、组件生命周期概述1.组件的生命周期组件从被创建到挂载到页面中（显示），再到组件从页面中卸载（消失）的过程生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。2.钩子函数的作用为开发人员在不同阶段操作

2021-11-10 23:39:56 483

原创 react——context和props

目录前言一、context1. 使用场景2. 使用步骤3. 总结二、props深入1. children 属性2. props 校验3. props校验使用步骤4. props校验约束规则5. props默认值总结前言今天我们一起看一看在react中如何实现父组件向子孙组件传值吧~再来看看props能做些什么，能通过这些更好的掌握react的语法一、context1. 使用场景设想一个场景，假如我们要给子孙组件传值，应该怎么办呢？如果使用props一层一层往下传递的话，特别的繁琐！更好的

2021-11-09 23:27:56 548

原创 react中的组件通讯

目录前言一、组件通讯介绍1. 特点2. 为什么需要组件通讯？二、组件通讯方法1. 基本使用2. 特点三、组件通讯的三种方式1. 父组件传递数据给子组件2. 子组件传递数据给父组件3. 兄弟组件总结前言今天我们一起看一下react中的组件通讯相关的内容，看一看和vue组件通讯有什么异同呢~一、组件通讯介绍1. 特点独立、可复用、可组合2. 为什么需要组件通讯？组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件。而在这个过程中

2021-11-08 22:38:04 112

原创 react学习——组件和时间绑定this指向

目录前言一、有状态组件和无状态组件二、组件的state和setState1. state的基本使用2. setState() 修改状态三、事件绑定 this 指向1. 箭头函数2. Function.prototype.bind()3. class 的公有字段方法（推荐）四、表单处理1. 受控组件2. 非受控组件（DOM方式）总结前言今天我们依旧看react相关的一些知识点，从react组件入手，到其this指向的问题，最后看一下表单处理相关的一些内容。一、有状态组件和无状态组件数据就是状态

2021-11-07 21:31:51 237

原创 react中组件创建和事件处理

目录前言一、react组件1. react组件介绍2. react组件创建方式二、react事件处理1. 事件绑定2. 事件对象总结前言一、react组件1. react组件介绍组件特点：独立、可复用、可组合React组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props ”），并返回用于描述页面展示内容的 React 元素组件的实例就是调用组件函数返回的具体的“页面”对象2. react组件创建方式使用函数创建组件使用 JS 的函数（或箭头函数）创

2021-11-06 23:17:01 271

原创 JSX渲染及样式处理

目录前言一、JSX条件渲染1. 简介2. 典型场景3. 代码实现二、JSX列表渲染1. 结构转换2. 代码演示三、JSX样式处理1. 行内样式——style2. 类名 —— className（推荐）总结前言今天一起看看JSX中的条件渲染和列表渲染，来看看语法上与vue有什么异同，再来看看JSX中的样式是如何处理的。一、JSX条件渲染1. 简介根据不同条件渲染不同的 JSX 结构2. 典型场景Ajax异步请求数据中的loading效果注：虽然在JSX中无法直接写if/else判

2021-11-05 22:58:51 783

原创 JSX的基本使用

目录前言一、JSX基本使用1. 为什么使用JSX？2. JSX简介3. 使用步骤4. 注意点二、JSX 中使用JavaScript表达式1. 嵌入JS表达式2. 注意点总结前言今天我们一起看一看react中JSX的基本使用，以及如何在JSX中使用JavaScript表达式吧。一起来围观JSX书写的代码都有哪些优点~一、JSX基本使用1. 为什么使用JSX？繁琐不简洁不直观，无法一眼看出所描述的结构React.createElement( 'div', null, Re

2021-11-04 22:38:13 939

原创脚手架创建第一个react项目

目录前言一、react脚手架的使用1. 为什么使用脚手架？2. 使用脚手架初始化项目3. npx命令介绍二、react项目1. 运行流程分析2. 在脚手架中使用react3. 在单独js文件中使用jsx总结前言今天我们使用脚手架来创建属于自己的第一个react项目，来看看创建出来的项目结构是什么样的？在react中又是怎么样的语法~一、react脚手架的使用1. 为什么使用脚手架？脚手架是开发现代 Web 应用的必备充分利用 Webpack、Babel 等工具辅助项目开发关注业务、而不

2021-11-03 17:04:48 321

原创 react入门①

目录前言一、React定义和特点1. 什么是React？2. 特点二、React基本使用1. 开发环境搭建2. React的安装3. React的使用总结前言众所周知，前端三大框架分别是react、angular、vue，今天我们就一起看看react框架的入门吧~一、React定义和特点1. 什么是React？React是一个用于构建用户界面的JavaScript库用户界面：HTML页面（前端）如果从MVC的角度看，React仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的

2021-11-02 21:13:35 210

原创 watch、methods 和 computed 的区别?

文章目录前言一、基本说明1.computed2. methods3. watch二、三者的加载顺序1. computed2. methods3. 默认加载的时候4. 触发某一事件后总结前言今天我们一起看看vue中methods、computed、watch几个分别有什么样的区别？虽说这个问题不明而喻，但是还是有必要掌握牢固的~一、基本说明1.computed计算属性将被混入到 Vue 实例中,所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例2. metho

2021-11-01 21:10:58 95

原创微信小程序——插槽、父子组件通讯

目录前言一、插槽1. 什么是插槽？2. 单个插槽3. 启动多个插槽4. 定义多个插槽二、父子组件通讯1. 父子组件通讯方式2. 属性绑定3. 事件绑定的核心实现步骤4. 事件绑定的核心实现代码5. 使用 selectComponent 获取组件实例总结前言今天我们一起看一下小程序中的插槽和父子组件相互通讯方面的内容，来看一下和vue有什么样的区别？一、插槽1. 什么是插槽？在自定义组件的 wxml 结构中，可以提供一个节点（插槽），用于承载组件使用者提供的 wxml 结构其实插槽, 说

2021-10-31 19:06:42 705

原创微信小程序 —— 生命周期

目录前言一、生命周期1. 什么是生命周期？2. 小程序的生命周期3. 小程序生命周期分类二、生命周期函数1. 什么是生命周期函数？2. 应用的生命周期函数3. 页面的生命周期4. 组件的全部生命周期5. 组件主要的生命周期函数6. lifetimes 节点总结前言今天我们一起看看微信小程序中的生命周期，都有哪些生命周期函数，来聊一聊其从触发时机及其所做的事情~一、生命周期1. 什么是生命周期？生命周期 (Life Cycle) 是指一个对象从创建 -> 运行 -> 销毁的整

2021-10-30 21:08:58 772

原创微信小程序——组件相关

目录前言一、组件的创建和引用1. 如何创建组件？2. 如何引用组件？3. 组件和页面的区别二、组件的数据、方法和属性1. 定义 data 私有数据2. methods 方法3. 定义 properties 属性4. 使用 max 属性控制自增的最大值5. data 和 properties 的区别6. 使用 setData 修改 properties 的值总结前言今天我们一起看看小程序中如何创建组件，如何使用组件？再来看一看组件和页面的区别，最后来看看组件都有哪些数据、方法和属性~一、组件的创建

2021-10-29 23:29:52 246

原创微信小程序必看③

目录前言一、页面导航1. 什么是页面导航？2. 实现页面导航的两种方式3. 导航到tabBar页面4. 导航到非 tabBar 页面5. 后退导航-声明式6. 后退导航 - 编程式7. 声明式导航传参8. 编程式导航传参9. 在 onLoad 中接收导航参数二、页面事件 —— 下拉刷新1. 什么是下拉刷新？2. 启动下拉刷新的两种方式3. 配置下拉刷新窗口的样式4. 监听页面的下拉刷新事件5. 停止下拉刷新的效果三、页面事件 —— 上拉触底1. 什么是上拉触底？2. 监听页面上拉触底事件3. 配置上拉触底距

2021-10-28 22:11:43 122

原创 vue项目中使用mock

目录前言一、mock1. 什么是mock?2. 使用场景3. 实现方式二、vue项目中如何使用？1. 步骤2. 代码演示3. 效果展示总结前言当后端接口还没有开发完毕的时候，我们又急需一份数据来展示看效果时应该怎么办呢？这时我们可以根据后端提供给我们的接口文档，来弄一份真的假数据来协助我们完成前端开发工作，一起来看看如何实现吧~一、mock1. 什么是mock?mock：假的前端程序员提到的mock数据的含义是：真的假数据真的：符合接口规范要求的。假数据：数据是人为创建出来的

2021-10-27 22:11:53 296

原创 Vue项目SEO优化解决方案

目录前言一、 Vue 项目进行 SEO 优化1. SSR服务器渲染2. 静态化 (博客, 介绍性官网)3. 预渲染 prerender-spa-plugin (插件)4. 使用Phantomjs `针对爬虫` 做处理小结总结前言众所周知，vue项目是单页面的应用，是十分不利于SEO优化的。今天我们一起聊一聊关于SEO优化的解决方案~一、 Vue 项目进行 SEO 优化Vue SPA单页面应用对SEO不太友好，当然也有相应的解决方案，下面列出几种SEO方案1. SSR服务器渲染服务端渲染, 在

2021-10-26 22:35:29 4105

原创 promise静态方法

目录Promise静态方法1. promise.reject()2. promise.resolve()3. Promise.all()4. Promise.race()总结Promise静态方法promise的三个状态: pending(默认) fulfilled(成功) rejected(失败)resolve函数被执行时, 会将promise的状态从 pending 改成 fulfilled 成功reject函数被执行时, 会将promise的状态从pending 改成 reject

2021-10-25 20:18:44 236

原创 window对象和document对象

目录前言一、什么是 window 对象?1. 属性2. 方法二、什么是 document 对象？1. 属性2. 区别总结前言今天一起来看一下window对象和document对象是什么，并看看它们都各有什么属性与方法，最终看一看它们的区别所在。一、什么是 window 对象?简单来说，document 是 window 的一个对象属性。Window 对象表示浏览器中打开的窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个window 对象，并为每个

2021-10-24 22:51:41 518

原创伪数组转变为真实数组方法

文章目录前言一、伪数组1. 概念2. 目标二、实现方式1. 方式一2. 方式二总结前言当我们得到一个伪数组数据的时候，我们应该如何操作才能将其转变为真实数组，并使它能够使用数组的方法呢？本文列举了两个方法，一起来看下吧~一、伪数组1. 概念具有 length 属性按索引方式存储数据不具有数组的 push.pop 等方法伪数组（类数组）：无法直接调用数组方法或期望 length 属性有什么特殊的行为，不具有数组的 push.pop 等方法，但仍可以对真正数据遍历方法来遍历它们

2021-10-23 22:15:50 418

原创数字转金额格式展示

目录前言一、需求二、代码演示总结前言开发中经常遇到需要将数字转换为金额格式的场景，今天一起来封装一个函数实现一下这个需求。一、需求封装一个函数，实现将数字转换为金额展示格式。如：123,456.78二、代码演示代码如下（示例）：// s为传入的数字// n为要保留几位小数function formatMoney(s, n) { n = n > 0 && n <= 20 ? n : 2 s = parseFloat((s + '

2021-10-22 22:03:30 178

原创 Vue 跳转路由时的传参方式

文章目录前言一、通过 query 传参二、通过 params 传参三、区别总结前言今天一起看看vue中路由传参的方式都有哪些，又是怎样的方式可以获取到的呢？再来看看它们之间有什么样的区别呢~一、通过 query 传参代码如下（示例）：this.$router.push('/login?username=pp&age=18&desc=xx')this.$router.push({ path: '/login', query: { userna

2021-10-21 22:36:25 195

原创 CSS 中哪些属性可继承，哪些不可以？

目录前言一、能继承的属性二、不能继承的属性总结前言今天一起瞅瞅CSS在设置样式的时候，有哪些属性是可以被后代元素继承的呢？又有哪些是不能继承的，掌握这个以后，相信写出简洁高效的样式so easy~一、能继承的属性字体系列属性:font、font-family、font-weight、font-size、font-style;文本系列属性:2.1）内联元素：color、line-height、word-spacing、letter-spacing、text-transform;2.2）块

2021-10-20 21:37:24 1453

原创 script脚本阻塞解决方案

目录前言一、浏览器是如何加载页面的？二、script脚本阻塞解决方案1. 推迟加载（延迟加载）2. defer延迟加载3. 异步加载总结前言今天一起看一看浏览器是如何加载页面的，以及script脚本放置位置对于加载会有什么样的影响，一起来看看有什么解决方案吧~一、浏览器是如何加载页面的？从浏览器地址栏的请求链接开始，浏览器通过 DNS 解析查到域名映射的 IP 地址，成功之后浏览器端向此 IP 地址取得连接。成功连接之后，浏览器端将请求信息通过 HTTP 协议向此 IP 地址所在服务器发起请

2021-10-19 19:00:11 982

原创微信小程序中的数据请求

目录前言一、网络数据请求的限制二、配置 request1. 修改request域名需要注意哪些？2. 发起`GET`请求3. 发起 `POST` 请求4. 在页面刚加载的时候请求数据5. 跳过 request 合法域名校验三、关于跨域和 `AJAX` 的说明总结前言今天呢，我们一起看一下小程序中的关于请求数据方面的知识，一起思考一个问题，在小程序端存不存在跨域的问题呢？一、网络数据请求的限制出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：只能请求 HTTPS 类型的接口

2021-10-18 21:46:07 1555

原创微信小程序中的全局配置和页面配置

文章目录前言一、全局配置1. app.json配置文件2. pages数组二、修改配置文件1. 设置导航栏标题文字内容2. 设置导航栏背景色3. 设置导航栏标题颜色4. 全局开启下拉刷新功能5. 设置下拉刷新窗口的背景色6. 设置下拉loading的样式7. 设置上拉触底的距离三、tabBar1. 概念2. 组成部分3. tabBar节点的配置项四、页面配置总结前言今天一起看一下微信小程序中的全局配置和页面配置，页面配置和全局配置同时存在，哪一个会生效呢？一起来研究一下吧~一、全局配置1. a

2021-10-17 21:15:32 1995

原创什么是SPA,有什么优缺点

文章目录前言一、什么是单页面应用二、优缺点1. 优点2. 缺点总结前言今天一起聊一聊单页面应用，看一看它都有什么优缺点。单页面应用见名知意，就是只有一张web页面的应用。一、什么是单页面应用单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS，一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新

2021-10-16 20:13:02 769

原创微信小程序入门必看②

文章目录前言一、wxss1. 什么是wxss?2. 和css的关系3. 什么是rpx及其实现原理4. rpx与px换算关系5. `@import` 样式导入6. 全局样式7. 局部样式总结前言今天一起来看一下微信小程序中控制样式的文件，一起看一看它与css有哪些区别以及有哪些新的功能~一、wxss1. 什么是wxss?WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式WXSS 用来决定 WXML 的组件应该怎么显示2. 和css的关系

2021-10-15 22:48:26 217

原创微信小程序入门必看①

文章目录前言一、宿主环境1. 什么是宿主环境？2. 小程序的宿主环境3. 小程序的通信主体4. 小程序的通信模型5. 运行机制二、小程序中的组件1. 常用的视图组件2. view组件3. sroll-view组件4. 轮播图组件5. 文本组件6. 按钮组件7. 图片组件三、数据绑定1. 数据绑定原则2. 动态绑定属性四、事件绑定1. 什么是事件2. 常用的事件3. target 和 currentTarget 的区别4. bindTab5. bindinput五、条件渲染1. wx:if2. hidd

2021-10-14 22:07:42 517 6

空空如也

空空如也