- 博客(176)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 条纹背景
条纹背景文章目录条纹背景条纹背景背景知识难题解决方案垂直条纹linear-gradient()斜向条纹更好的斜向条纹repeating-linear-gradient() 和 repeating-radial-gradient()灵活的同色系条纹总结我以为世间最可宝贵的就是“今”，最易丧失的也是“今”。因为它最容易丧失，所以更觉得它宝贵。条纹背景背景知识CSS 线性渐变，background-sizecss渐变https://www.w3.org/TR/css-images-3/#
2021-01-19 16:17:52
316
原创 图解 JavaScript——代码实现（六种异步方案, 重点是 Promise、Async、发布 / 订阅原理实现，真香）
图解 JavaScript——代码实现（六种异步方案, 重点是 Promise、Async、发布 / 订阅原理实现，真香）本节主要阐述六种异步方案:回调函数、事件监听、发布/订阅、Promise、Generator和Async。其中重点是发布/订阅、Promise、Async的原理实现，通过对这几点的了解，希望我们前端切图仔能够在修炼内功的路上更进一步。一、六种异步方案1.1 回调函数异步编程的最基本方法，把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数
2020-08-22 13:05:11
195
2
原创 canvas曲线运动&阳光下的泡沫效果&泡沫曲线运动&矩阵数字雨&烟花效果&方块旋转
文章目录canvas曲线运动&阳光下的泡沫效果&泡沫曲线运动&矩阵数字雨&烟花效果&方块旋转曲线运动勾股定理三角函数什么是弧度角度转弧度弧度转角度三角函数图像与canvas结合曲线运动案例代码阳光下的泡沫效果结合canvas实现气泡效果效果图完整代码泡沫曲线运动效果图完整代码矩阵数字雨效果图完整代码环形方块旋转效果图完整代码canvas烟花效果效果图完整...
2020-04-30 10:51:25
2413
1
原创 给你一份详细的CSS布局指南，请查收
欢迎相互交流学习文章目录前言1. 居中相关的布局1.1 水平居中布局方案一. inline-block + text-align方案二. 定位 + transform方案三. display: block + margin: 0 auto1.2 垂直居中布局方案一. 定位 + transform方案二. display: table-cell + vertical-align1.3 水平垂直...
2020-04-18 17:41:31
715
原创 适合前端开发 和UI 设计的20多个最佳 ICON 库
文章目录适合前端开发 和UI 设计的20多个最佳 ICON 库最佳图标库的列表Flaticon Jam IconsFontisto Icon PackIconmonstrPixsellz Material Icons LibraryEntypoEvil Icons Streamline IconsSmashiconsIcons8IcomoonGlyphish Icon PackIoniconsAn...
2020-04-15 08:42:40
3906
1
原创 前端面试题全面整理-带解析 涵盖CSS、JS、浏览器、Vue、React、移动web、前端性能、算法、Node
喜欢的小伙伴关注我哦，欢迎大家的交流学习文章目录前端面试题全面整理css相关1. 万能居中2. BFC优化3. 盒模型哪两种模式？什么区别？如何设置4. 常用清除浮动的方法，如不清除浮动会怎样？5. 删格化的原理6. 纯css实现三角形7. 高度不定，宽100%，内一p高不确定，如何实现垂直居中？8. 至少两种方式实现自适应搜索9. 设置一段文字的大小为6px10. css菊花图12. 关于v...
2020-04-03 17:17:28
4619
4
原创 深入浅出主流的几款小程序跨端框架原理
目前，小程序在用户规模及商业化方面都取得了极大的成功。微信、支付宝、百度、字节跳动等平台的小程序日活都超过了3亿。我们在开发小程序时仍然存在诸多痛点：小程序孱弱简陋的原生开发体验，注定会出现小程序增强型框架，来提升开发者开发体验；各家厂商小程序API碎片化的现状，注定会有多端框架会成为标配，由跨端框架肩负跨平台移植挑战。正是因为开发者对于提升小程序开发效率有着强烈需求，小跨端框架发展到如今已经百花齐放、百家争鸣：除了美团的 mpvue 、网易的 megalo 、滴滴的 chameloen 已经趋于稳定，
2022-03-13 17:24:22
1483
原创 一款支持vue3 的颜色选择器
一款支持vue3 的颜色选择器npm 地址特点简单易用，UI在原插件基础上优化增加了圆角和过渡动画提供以 npm 的形式安装提供全局组件在支持 html5 input[type=‘color’] 的浏览器实现了「更多颜色」的功能安装npm i colorpicker-v3使用在main中注册组件在 main.js 文件中引入插件并注册import { createApp } from 'vue'import App from './App.vue'import ColorP
2022-01-29 12:14:39
3027
原创 性能优化：控制关键请求的优先级
性能优化：控制关键请求的优先级构建一个网站服务看似简单：发送 HTML，浏览器识别出接下来需要加载什么资源。然后，我们耐心的等待页面就绪。你不知道的是，这背后发生了很多事情。你有没有想过，浏览器是如何判断哪些资产需要以什么顺序被请求的？内容概览：什么是资产优先级？Chrome 如何安排资源优先级？什么样的请求是关键的？Lighthouse 审计：避免关键请求的依赖链。技术：控制请求优先级。技术：图片懒加载。技术：font-display关键请求检查清单。什么是资产优先级？现代浏
2021-12-14 14:58:03
433
原创 TCP 协议简述
TCP 协议简述TCP 提供面向有连接的通信传输，面向有连接是指在传送数据之前必须先建立连接，数据传送完成后要释放连接。无论哪一方向另一方发送数据之前，都必须先在双方之间建立一条连接。在TCP/IP协议中，TCP协议提供可靠的连接服务，连接是通过三次握手进行初始化的。同时由于TCP协议是一种面向连接的、可靠的、基于字节流的运输层通信协议，TCP是全双工模式，所以需要四次挥手关闭连接。TCP包首部网络中传输的数据包由两部分组成：一部分是协议所要用到的首部，另一部分是上一层传过来的数据。首部的结构由.
2021-11-02 22:36:22
1277
原创 21级青藤工作室第一次考核答案
21级青藤工作室第一次考核答案一、一个小球距地面 10 米处垂直落下,当小球触底反弹时，由于受到神秘力量 影响，小球的初速度瞬间增大，使得每次反弹的高度都为原高度的 2 倍。请编 写一个函数，在误差合理范围内求前 n 次反弹时向上的初速度（分别输出每一 次的速度)。可使用 sqrt 函数 。不计空气阻力，g 取 10m/s^2 （0 < n < 101 ），n 为整数。#define _CRT_SECURE_NO_WARNINGS#include <stdio.h>#in
2021-11-01 22:34:30
198
原创 GET 和POST
GET 和POST我们常说的一些区别都是一些表面上的，比如：GET没有POST安全、GET请求时URL的长度是有限制的、GET没有body而POST有body等等。这些都是针对浏览器中的要求， 在使用HTTP作为接口进行传输时，就没有这么多条条框框了，此时GET和POST只是HTTP协议中的两种请求方式，而HTTP协议是基于TCP/IP的应用层协议， 无论GET还是POST，用的都是同一个传输层协议，所以在传输上没有区别。因此，在用作为接口进行传输时，最大的不同就在于报文格式上的不同了POST /ur
2021-10-18 19:44:00
91
原创 重定向状态码302、301
状态码302、301301 Moved Permanently被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定，否则这个响应也是可缓存的。新的永久性的URI应当在响应的Location域中返回。除非这是一个HEAD请求，否则响应的实体中应当包含指向新的URI的超链接及简短说明。如果这不是一个GET或者HEAD请求，那么浏览器禁止自动进行重定向，除非得到用
2021-10-18 10:22:46
2404
原创 Http缓存
http背景以前啥都不懂时候听这个名字感觉好牛b的，实际上这玩意很简单，就是改个请求头完了。概念一、强缓存强缓存是设置过期时间，超过设置的时间会发请求，否则就会走缓存，连请求也不会发。状态码是200二、协商缓存协商缓存常用模式有两种，一种是last-modified，一种是etag。也有地方叫对比缓存的。last-modified就是资源的修改时间。如果客户端来请求服务器一个文件，服务器便会给请求头加上last-modified返回给客户端，客户端下次请求同一个文件时，会带上If-Modi
2021-10-16 10:32:19
853
原创 DNS 协议是什么？
DNS 协议是什么？说说 DNS 完整的查询过程?一、是什么DNS（Domain Names System），域名系统，是互联网一项服务，是进行域名和与之相对应的 IP 地址进行转换的服务器简单来讲，DNS相当于一个翻译官，负责将域名翻译成ip地址IP 地址：一长串能够唯一地标记网络上的计算机的数字域名：是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识二、域名域名是一个具有层次的结构，从上到下一次为根域名、顶级域名、二级
2021-10-15 20:14:31
6525
原创 互联网协议套件 TCP/IP
七层网络模型七层网络模型最近又看到这个七层模型了，一直都记不住这个七层模型，就算背住了也很快忘记。主要原因还是因为没有真实的使用场景，也没能理解其中的原理。但是这个东西是计算机网络的基础，既然碰巧看到就顺便整理一下吧。很多知识的梳理都是通过文章来理解贯通的，所以在计算机开发中对于技术的应用对敲代码；对于抽象的知识多写文章，自然而然的就懂了。关于七层模型的介绍七层模型，也称为OSI（Open System Interconnection）参考模型，是国际标准化组织（ISO）制定的一个用于计算机或通讯
2021-10-15 09:51:01
512
原创 负载均衡详解
负载均衡详解摘要：面对大量用户访问、高并发请求，海量数据，可以使用高性能的服务器、大型数据库，存储设备，高性能Web服务器，采用高效率的编程语言比如(Go,Scala)等…面对大量用户访问、高并发请求，海量数据，可以使用高性能的服务器、大型数据库，存储设备，高性能Web服务器，采用高效率的编程语言比如(Go,Scala)等，当单机容量达到极限时，我们需要考虑业务拆分和分布式部署，来解决大型网站访问量大，并发量高，海量数据的问题。从单机网站到分布式网站，很重要的区别是业务拆分和分布式部署，将应用拆分后
2021-10-15 09:45:09
5879
1
原创 DNS解析
DNS 协议是什么？说说 DNS 完整的查询过程?一、是什么DNS（Domain Names System），域名系统，是互联网一项服务，是进行域名和与之相对应的 IP 地址进行转换的服务器简单来讲，DNS相当于一个翻译官，负责将域名翻译成ip地址IP 地址：一长串能够唯一地标记网络上的计算机的数字域名：是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识二、域名域名是一个具有层次的结构，从上到下一次为根域名、顶级域名、二级
2021-10-15 09:42:08
86
原创 前端基础篇之 CSS 世界
前端基础篇之 CSS 世界基本概念这些基本概念有些可能不易理解但却都很重要，如果看完还是很不理解的话需要自己谷歌或百度，网上关于这些概念的文章不少。流“流”又叫文档流，是 css 的一种基本定位和布局机制。流是 html 的一种抽象概念，暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是 html 默认的布局机制，如你写的 html 不用 css，默认自上而下（块级元素如div）从左到右（内联元素如span）堆砌的布局方式。块级元素和内联元素这个大家肯定都知道。块级元素是指单独撑满一行
2021-10-15 08:18:08
976
原创 在Mac上想使用code命令打开vs code
场景：在Mac上想使用code命令打开vs code，（cmd+shift+P）搜索shell，找到这个：install code command in PATH结果点击发现：Error: EACCES: permission denied, unlink '/usr/local/bin/code'其实就是没有读写权限，上网搜了好多也不见效，奈何自己习惯使用命令行打开vs code，最终解决方案：在命令行输入sudo chown -R [yourusername] [filePath]
2021-10-11 16:54:14
521
原创 Unity3D游戏开发介绍
Unity3D游戏开发介绍Unity3DUnity是实时3D互动内容创作和运营平台。包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者，借助Unity将创意变成现实。 Unity平台提供一整套完善的软件解决方案，可用于创作、运营和变现任何实时互动的2D和3D内容，支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。为什么要unity3D来开发游戏unity3D是如今绝大多数游戏开发团队的首 选3D引擎，并且它在2D上的表现也及为优秀。它可以轻松解决很多其它引擎不能解决的问
2021-09-12 22:21:44
3384
原创 大前端介绍
前端简单来说，大前端就是所有前端的统称，比如Android、iOS、web、Watch等，最接近用户的那一层也就是UI层，然后将其统一起来，就是大前端。大前端最大的特点在于一次开发，同时适用于所有平台，开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代，利用web不仅能开发出网站，更可以开发手机端web应用和移动端应用程序。为什么出现大前端由于node的出现，前端工程师不需要依赖于后端程序而直接运行，从而前后端分离起来。所以当开发一个新产品的时候服务只需要
2021-09-11 23:27:42
4929
1
原创 TypeScript in React
TypeScript in React为什么使用TypeScript?日常开发中弱类型JavaScript的痛点引用的组件/函数不知道可接收的参数以及参数类型-----各种找文档----甚至深入到源码复杂数据的数据流转难以追踪----各种Debugger或者日志排查BFF/后端接口字段以及字段类型不明确----各种找文档----负责人底层依赖的接口类型改动----前端全局搜索替换改动的地方----调试TypeScript为了类型定义而诞生，具有以下优势定义组件的属性以及函数的参数，代
2021-08-27 15:00:11
179
原创 腾讯CSIG二战
6.18腾讯CSIG二战一面两道算法题1、数字格式化 1000 --> 1,000 1999->1,999 999->9992、在数组中找出只出现一次的数字，不考虑时间复杂度，空间复杂度面试问题：1、自己处理过跨域吗2、跨域解决方式，有几种方式，JSONP 、token；反向代理、CORS3、浏览器输入url发什么什么4、DNS解析5、https握手6、TCP三次握手、四次挥手7、为什么三次握手、为什么四次挥手、为什么是等待时间2MSL8、你了解的网络安全，
2021-06-18 22:15:12
230
原创 2021-6月腾讯前端第一次面试
2021-6月腾讯第一次面试（一面）这也是我第一次面试吧，面试前也挺紧张的，当时收到面试通知也，没有时间准备，面前也挺紧张的，面试开始时，紧张也渐渐没了。1、首先就是自我介绍2、 校园经历3、假如我是一个新手，我改这么学习正题：1、当页面应用和多页面应用区别2、 vue如何实现单页面应用3、vue为什么首屏加载慢4、如何优化vue首屏加载慢，有哪些方法5、聊一聊网络安全、网络攻击，你知道的网络攻击有哪些，你使用过的网络完全有哪些。6、浏览器输入url回车发生什么、页
2021-06-08 21:20:37
348
原创 初识WeakSet
初始WeakSetECMAScript 6 新增的“弱集合”（WeakSet）是一种新的集合类型，为这门语言带来了集合数据结构。WeakSet 是 Set的“兄弟”类型，其 API 也是 Set 的子集。WeakSet中的“weak”（弱），描述的是 JavaScript 垃圾回收程序对待“弱集合”中值的方式。基本 API可以使用 new 关键字实例化一个空的 WeakSet：const ws = new WeakSet(); 弱集合中的值只能是 Object或者继承自 Object 的类型，.
2021-05-30 16:17:56
1127
原创 JAVA 学习之旅
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/j
2021-05-03 16:05:33
160
2
原创 青藤工作室第一轮面试
文章目录一、简单介绍一下HTML、CSS、JavaScript 。二、给一个元素设置宽度、高度、有几种方式 ？三、简单讲讲JavaScript的事件与事件流。事件流都会经历三个阶段：标准事件模型IE事件模型IE事件模型共有两个过程:四、href与src区别五、为什么JavaScript需要写在最后面六、`==` 与 `===`七、``链接伪类顺序八、如何判断一个数是否为NAN下列代码解释一、简单介绍一下HTML、CSS、JavaScript 。二、给一个元素设置宽度、高度、有几种方式 ？//1、通过内
2021-03-14 15:39:00
1113
6
原创 this的用法
this 指向问题在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this是 JavaScript 语言的一个关键字。它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。function test() { this.x = 1;}上面代码中，函数test运行时，内部会自动有一个this对象可以使用。那么，this的值是什么呢？函数的不同使用场合，this有不同的值。总的来说，this就是函数运行时所在的环境对象。下面分四种情况，详细讨论th
2021-02-21 20:53:54
6291
1
原创 观察者模式-单例模式-Promise 实现TodoList
观察者模式-单例模式-Promise 实现TodoList单例模式单例是一种创建型设计模式， 让你能够保证一个类只有一个实例， 并提供一个访问该实例的全局节点。问题单例模式同时解决了两个问题， 所以违反了_单一职责原则_：保证一个类只有一个实例。 为什么会有人想要控制一个类所拥有的实例数量？ 最常见的原因是控制某些共享资源 （例如数据库或文件） 的访问权限。它的运作方式是这样的： 如果你创建了一个对象， 同时过一会儿后你决定再创建一个新对象， 此时你会获得之前已创建的对象， 而不是一
2021-02-21 16:44:40
315
原创 智能重复
智能重复/* 试着编写smartRepeat 使用栈结构 ，自己编写栈结构 ，需要完成栈的基本操作，入栈 ，出栈，销毁栈，栈的初始化 将 3[abc] ---> abcabcabc 将 3[2[a]2[b]] ---> aabbaabbaabb 将 3[2[a]2[2b]] ---> aa2b2b aa2b2b aa2b2b (最终
2021-02-16 15:47:42
294
原创 观察者模式实现表单验证
作者：晴栀人生天地之间，若白驹之过隙，忽然而已。观察者模式观察者模式是这样一种设计模式。一个被称作被观察者的对象，维护一组被称为观察者的对象，这些对象依赖于被观察者，被观察者自动将自身的状态的任何变化通知给它们。当一个被观察者需要将一些变化通知给观察者的时候，它将采用广播的方式，这条广播可能包含特定于这条通知的一些数据。当特定的观察者不再需要接受来自于它所注册的被观察者的通知的时候，被观察者可以将其从所维护的组中删除。 在这里提及一下设计模式现有的定义很有必要。这个定义是与所使用.
2021-02-14 22:54:10
1428
6
原创 数据响应式
defineReactive函数监听变化import observe from './observe'export default function defineReactive(data, key, val) { console.log("我是defineReactive", data, key) if (arguments.length === 2) { val = data[key] } // 子元素要进行observe ,至此形成 递归， 这个.
2021-02-14 20:30:00
266
原创 koa基本使用
koa基本使用var Koa = require('koa');var Router = require('koa-router');var app = new Koa();var router = new Router();/* koa 中间件*/app.use(async(ctx, next) => { console.log(new Date()) await next();})router.get('/', (ctx, next
2021-02-09 22:10:53
1367
原创 JavaScript原型链
作者： 晴栀良辰难再，人生中大好时刻，不要再去旧梦重圆。文章目录原型链对应名称从属关系一、prototype二、`__proto__`补充说明：三、constructor补充说明：四、实例与原型五、原型的原型六、原型链继承属性继承方法在 JavaScript 中使用原型使用不同的方法来创建对象和生成原型链使用语法结构创建的对象使用构造器创建的对象使用 `Object.create` 创建的对象使用 `class` 关键字创建的对象性能错误实践：扩展原生对象的原型总结：4 个用于拓展原型链的方法..
2021-02-08 19:58:30
128
原创 遇到的问题笔记
A. DNS（Domain Name System，域名系统），因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。BC.DNS协议运行在UDP协议之上，使用端口号53。D. 浏览器：chrome对每个域名会默认缓存60s，IE将DNS缓存30min，Firefox对DNS缓存功能，但是默认缓存时间只有1分钟，safari约为10s。windows DNS缓存的默认值是MaxCacheTTL，它的默认值是86400s，也就是..
2021-02-05 19:21:40
108
原创 DIFF算法之snabbdom
diff算法是发生在虚拟DOM上snabbdomH函数是用来产生虚拟节点的虚拟节点有哪些属性虚拟节点上树简单的p函数使用import { init } from 'snabbdom/init'import { classModule } from 'snabbdom/modules/class'import { propsModule } from 'snabbdom/modules/props'import { styleModule } from 'snabbdom/modul
2021-02-05 17:44:04
269
原创 diff算法
diff算法是发生在虚拟DOM上snabbdomH函数是用来产生虚拟节点的虚拟节点有哪些属性虚拟节点上树简单的p函数使用import { init } from 'snabbdom/init'import { classModule } from 'snabbdom/modules/class'import { propsModule } from 'snabbdom/modules/props'import { styleModule } from 'snabbdom/modul
2021-02-04 11:10:44
1485
1
原创 手写Mustache
手写Mustache文章目录手写Mustachemustache基本使用自己实现目录结构扫描类Scanner将模板字符串变成初步tokens将token生成嵌套tokens自己实现tokens处理“a.b.c”（lookup函数）递归处理嵌套数据（parseArray方法）将 tokens 变成dom字符串（renderTemplate方法）源码mustache基本使用mustache.js 是 mustache 模板系统的JavaScript实现。Mustache 是一套轻逻辑的模板语法。它可以
2021-02-03 18:52:18
149
班级网（2）.zip
2020-04-03
狂打灰太狼.zip，HTML小游戏，带你进入前端世界
2020-04-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人