- 博客(73)
- 收藏
- 关注
RSS订阅原创 微信小程序 - WXML 模板语法 - 事件绑定
事件是`渲染层到逻辑层`的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
2022-08-09 15:20:57
848
原创 微信小程序中父、子组件之间的通信
js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件。⚫ 用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据。，而且只能传递普通类型的数据，无法将方法传递给子组件。件的任意数据和方法。⚫ 用于子组件向父组件传递数据，可以传递任意数据。⚫ 这样就可以直接访问子组件的任意数据和方法。节点中声明对应的属性并使用。的 wxml 中，通过自定义事件的形式，将。，可以传递任何类型的数据。中定义的函数引用，传递给子组件。的实例对象，从而直接访问子组。⚫ 父组件还可以通过。......
2022-08-08 17:54:02
668
原创 实现clone函数，克隆number、string、boolean、object等
实现clone函数，克隆number、string、boolean、object等（1）使用 typeof 判断数据类型，数据类型为基本数据类型的话，可以准确返回类型（1）如果类型是 object 引用数据类型的话，分为 Array 与 Object 两种类型，可以使用 Object.prototype.toString.call(obj).slice(8, -1) === "Array" 判断数据类型是否为 Array ，如果是，则进行对数组的 clone，否则，进行对象的 clonefuncti
2022-05-19 23:58:20
212
原创 JavaScript实现生成a到z的数组
1、实现生成a到z的数组// 1、实现生成 a 到 z 的数组function generateArray() { let arrGenerate = [] for (var i = 0; i < 26; i++) { var letter = String.fromCharCode(97 + i); arrGenerate.push(letter); } return arrGenerate};const arr = generateArray()// [
2022-05-14 22:19:15
1765
3
原创 前后端的身份认证
前后端身份认证1、身份认证1-1. 什么是身份认证1-2. 为什么需要身份认证1-3. 不同开发模式下的身份认证2、Session 认证机制2-1. HTTP 协议的 `无状态性`2-2. 如何突破 HTTP 无状态的限制2-3. 什么是 Cookie2-4. Cookie 在身份认证中的作用2-5. Cookie 不具有 安全性2-6. 提高身份认证的安全性3、在 Express 中使用 Session 认证3-1. 安装 express-session 中间件3-2. 配置 express-sessio
2022-05-12 23:59:45
918
原创 Web开发模式
目前主流的 Web 开发模式有两种，分别是：（1）基于 服务端渲染 的传统 Web 开发模式（2）基于 前后端分离 的新型 Web 开发模式1、服务端渲染 的 Web 开发模式（1）服务端渲染的概念：服务器发送给客户端的 HTML 页面，是在服务器通过字符串的拼接，动态生成的。因此，客户端不需要使用 Ajax 这样的技术额外请求页面的数据。代码示例如下： app.get("/index.html", (req, res) => { // 需要渲染的数据 const user = {
2022-05-10 09:17:34
747
原创 CORS跨域资源共享
CORS跨域资源共享1、 接口的跨域问题（1）编写的 GET 和 POST 接口，存在一个很严重的问题：不支持跨域请求。解决接口跨域问题的方案主要有两种：① CORS（主流的解决方案， 推荐使用 ）② JSONP（有缺陷的解决方案：只支持 GET 请求）（2）这里主要分析使用 CORS 解决跨域的问题。2、使用 cors 中间件 解决跨域问题cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题。
2022-05-09 11:27:21
1091
原创 使用nodemon
1、为什么使用 nodemon（1）在编写调试 Node.js 项目的时候，如果修改了项目的代码，则需要频繁的手动 close 掉，然后再重新启动，非常繁琐。现在，我们可以使用 nodemon 工具包 这个工具，它能够监听项目文件的变动，当代码被修改后，nodemon 会自动帮我们重启项目，极大方便了开发和调试。（2）当基于 Node.js 编写了一个网站应用的时候，传统的方式，是运行 node app.js 命令，来启动项目。这样做的坏处是：代码被修改之后，需要手动重启项目。（3）现在，我们可以将
2022-05-07 23:09:00
3712
1
原创 解决下包速度慢的问题（npm）
使用nrm为了更方便地切换下包的镜像源，可以通过安装 nrm 这个小公举，利用 nrm 提供的终端命令，可以快速查看和切换下包的镜像源。1、通过 npm 包管理器，将 nrm 安装为全局可用的工具 npm i nrm -g2、检查 nrm 包管理器是否下载成功，注意是大写 V nrm -V3、查看所有可用的镜像源 nrm ls4、将下包的镜像源切换为 taobao 镜像 nrm use taobao...
2022-05-05 23:43:38
208
原创 前端领域高频笔试面试
一、HTML + CSS 相关1、【前端领域高频笔试面试】10题：HTML+CSS相关（一）2、【前端领域高频笔试面试】10题：HTML+CSS相关（二）3、【前端领域高频笔试面试】10题：HTML+CSS相关（三）4、【前端领域高频笔试面试】10题：HTML+CSS相关（四）二、JavaScript 相关1、【前端领域高频笔试面试】10题：JavaScript相关（一）2、【前端领域高频笔试面试】10题：JavaScript相关（二）3、【前端领域高频笔试面试】10题：JavaScript
2021-11-03 21:21:06
389
原创 （35）：Vue实例挂载的过程
Vue实例挂载的过程一、思考1、都听过，知其然不知其所以然2、是否思考过new Vue()这个过程中究竟做了些什么？3、挂载过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等二、分析1、首先找到vue的构造函数源码位置：src\core\instance\index.jsfunction Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue)
2021-11-03 13:07:55
626
原创 （34）：keep-alive的理解
对keep-alive的理解一、Keep-alive 是什么1、keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM2、keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们3、keep-alive可以设置以下props属性：（1）include - 字符串或正则表达式。只有名称匹配的组件会被缓存（2）exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存（3）max - 数字。最多可以缓存多少组件实例
2021-11-01 11:59:59
459
原创 （33）：SSR是什么
SSR是什么，解决了什么问题，如何实现一、是什么1、Server-Side Rendering 我们称其为SSR，意为服务端渲染2、指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程3、先来看看Web3个阶段的发展史：（1）传统服务端渲染SSR（2）单页面应用SPA（3）服务端渲染SSR（1）传统web开发1）网页内容在服务端渲染完成，⼀次性传输到浏览器2）打开页面查看源码，浏览器拿到的是全部的dom结构（
2021-10-29 22:49:28
3892
原创 （32）： 地址栏输入url敲下回车后，发生了什么
地址栏输入 URL 敲下回车后，发生了什么一、简单分析1、简单的分析，从输入 URL到回车后发生的行为如下：（1）URL解析（2）DNS 查询（3）TCP 连接（4）HTTP 请求（5）响应请求（6）页面渲染二、详细分析1、URL解析（1）首先判断你输入的是一个合法的url 还是一个待搜索的关键词，并且根据你输入的内容进行对应操作（2）url的解析第过程中的第一步，一个url的结构解析如下：2、DNS查询（1）在之前文章中讲过DNS的查询，这里就不再讲述了（2）整个
2021-10-27 22:35:11
136
原创 （31）：css隐藏页面元素
css隐藏页面元素的方式，区别一、前言1、在平常的样式排版中，我们经常遇到将某个模块隐藏的场景2、通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的3、但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法二、实现方式通过css实现隐藏元素方法有如下：（1）display: none（常用）（2）visibility: hidden（常用）（3）opacity: 0（4）设置height、width模型属性为0（5）position: abs
2021-10-24 23:28:37
107
原创 （30）：css选择器
css选择器有哪些，优先级，哪些属性可以继承一、选择器1、CSS选择器是CSS规则的第一部分2、它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式3、选择器所选择的元素，叫做“选择器的对象”4、先从一个Html结构开始<div id="box"> <div class="one"> <p class="one_1"> </p > <p cla
2021-10-24 23:12:43
240
原创 Vue总结（6）：v-if和v-for的优先级
v-if和v-for的优先级一、作用1、v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染2、v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名3、在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化4、两者在用法上 <Modal v-if="isSho
2021-10-19 21:49:54
1281
原创 Vue总结（5）：Vue双向数据绑定
双向数据绑定是什么一、什么是双向绑定1、我们先从单向绑定切入，单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个例子2、当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下：二、双向绑定的原理是什么1、我们都知道 V
2021-10-19 21:00:10
559
原创 （29）：虚拟DOM
什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路一、什么是虚拟DOM1、虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）2、实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上3、在Javascript对象中，虚拟DOM 表现为一个 Ob
2021-10-19 17:31:05
318
原创 （28）：HTTPS如何保证安全
为什么说HTTPS比HTTP安全? HTTPS是如何保证安全的？一、安全特性1、在上篇文章中，我们了解到HTTP在通信过程中，存在以下问题：（1）通信使用明文（不加密），内容可能被窃听（2）不验证通信方的身份，因此有可能遭遇伪装2、而HTTPS的出现正是解决这些问题，HTTPS是建立在SSL之上，其安全性由SSL来保证3、在采用SSL后，HTTP就拥有了HTTPS的加密、证书和完整性保护这些功能SSL(Secure Sockets Layer 安全套接字协议)，及其继任者传输层安全
2021-10-15 23:15:02
795
原创 （27）：HTTP及与HTTPS的区别
什么是HTTP， HTTP 和 HTTPS 的区别一、HTTP1、HTTP (HyperText Transfer Protocol)，即超文本运输协议，是实现网络通信的一种规范2、在计算机和网络世界有，存在不同的协议，如广播协议、寻址协议、路由协议等等…3、而HTTP是一个传输协议，即将数据由A传到B或将B传输到A，并且 A 与 B 之间能够存放很多第三方，如：A <=> X <=> Y <=> Z <=> B3、传输的数据并不是计算机底
2021-10-15 22:59:42
512
原创 （26）：UDP和TCP的理解
理解UDP 和 TCP 区别? 应用场景?一、UDPUDP（User Datagram Protocol），用户数据包协议，是一个简单的面向数据报的通信协议，即对应用层交下来的报文，不合并，不拆分，只是在其上面加上首部后就交给了下面的网络层也就是说无论应用层交给UDP多长的报文，它统统发送，一次发送一个报文而对接收方，接到后直接去除首部，交给上面的应用层就完成任务UDP报头包括4个字段，每个字段占用2个字节（即16个二进制位），标题短，开销小特点如下：UDP 不提供复杂的控制机制，利用
2021-10-14 10:50:47
196
原创 （25）：SPA单页面的理解
对SPA单页面的理解，它的优缺点分别是什么，如何实现SPA应用一、什么是SPA1、SPA（single-page application），翻译过来就是单页应用2、SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面3、
2021-10-14 10:37:35
483
原创 （24）：vue的理解
对vue的理解一、从历史说起Web是World Wide Web的简称，中文译为万维网我们可以将它规划成如下的几个时代来进行理解（1）石器时代（2）文明时代（3）工业革命时代（4）百花齐放时代1、石器时代（1）石器时代指的就是我们的静态网页，可以欣赏一下1997的Apple官网2、最早的网页是没有数据库的，可以理解成就是一张可以在网络上浏览的报纸，直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互，如当时的Google（1998年）2、文明
2021-10-13 11:45:47
606
原创 （23）：TCP/IP协议
理解TCP/IP协议一、是什么1、 TCP/IP，传输控制协议/网际协议，是指能够在多个不同网络间实现信息传输的协议簇（1）TCP（传输控制协议）： 一种面向连接的、可靠的、基于字节流的传输层通信协议（2）IP（网际协议）： 用于封包交换数据网络的协议2、 TCP/IP协议 不仅仅指的是TCP和IP两个协议，而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议簇，只是因为在TCP/IP协议中TCP协议和IP协议最具代表性，所以通称为 TCP/IP协议族（英语：TCP/IP
2021-10-13 01:03:16
265
原创 （22）：CDN的理解
理解CDN，说说实现原理？一、是什么1、CDN (全称 Content Delivery Network)，即内容分发网络构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术2、简单来讲，CDN就是根据用户位置分配最近的资源3、于是，用户在上网的时候不用直接访问源站，而是访问离他“最近的”一个 CDN 节点，术语叫 边缘节点
2021-10-13 00:39:12
153
原创 （21）：DNS协议
DNS协议 是什么，说说DNS 完整的查询过程一、是什么1、 DNS（Domain Names System）， 域名系统 ，是互联网一项服务，是进行域名和与之相对应的 IP 地址进行转换的服务器2、简单来讲， DNS 相当于一个翻译官，负责将 域名 翻译成 ip 地址（1） ip 地址： 一长串能够唯一地标记网络上的计算机的数字（2） 域名： 是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识二、域名1、 域名 是一
2021-10-10 15:16:30
167
原创 （20）：WebSocket协议
对WebSocket的理解，应用场景一、WebSocket是什么1、 WebSocket ，是一种网络传输协议，位于 OSI 模型的 应用层 。可在单个 TCP 连接上进行全双工通信，能更好的节省 服务器资源 和 带宽 并达到实时通迅2、 客户端 和 服务器 只需要完成 一次握手 ，两者之间就可以创建持久性的连接，并进行 双向数据传输3、从上图可见， websocket 服务器与客户端通过握手连接，连接成功后，两者都能主动的向对方发送或接受数据4、而在 websocket 出现之前，开发实时
2021-10-09 23:30:41
506
原创 （19）：HTTP协议概述
1、HTTP协议概述HTTP超文本传输协议（Hyper Text Transfer Protocol），基于TCP/IP通信协议传输数据。是一个简单的请求-响应协议，它通常运行在 TCP 无连接的：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接，采用这种方式可以节省传输时间。（1）HTTP是媒体独立的：只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送，在HTTP中使用Content-Type来表明资源媒体类型。（2）HT
2021-10-08 22:43:40
286
原创 （18）：实现两栏、三栏布局
实现两栏布局，右侧自适应。三栏布局中间自适应一、背景在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高两栏布局两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，比如 Ant Design 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器这种布局适用于内容上具有明显主次关系的网页三栏布局三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两
2021-10-08 15:58:40
571
原创 （17）：css性能优化
css性能优化一、前言1、每一个网页都离不开 css ，但是很多人又认为， css 主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的2、作为页面渲染和内容展现的重要环节， css 影响着用户对整个网站的第一体验3、因此，在整个产品研发过程中， css 性能优化 同样需要贯穿全程二、实现方式实现方式有很多种，主要有如下：（1）内联首屏关键CSS（2）异步加载CSS（3）资源压缩（4）合理使用选择器（5）减少使用昂贵的属性（6）不要使用@im
2021-10-08 00:27:55
125
原创 （16）：css3动画
css3动画一、是什么1、 CSS动画（CSS Animations） 是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块即指元素从一种样式逐渐过渡为另一种样式的过程2、常见的动画效果有很多，如 平移 、 旋转 、 缩放 等等，复杂动画则是多个简单动画的组合3、 css 实现动画的方式，有如下几种：（1） transition： 实现渐变动画（2） transform： 转变动画（3） animation： 实现自定义动画二、实现方式1、transiti
2021-10-07 23:58:08
410
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人