![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
「 前端 」专栏
文章平均质量分 77
前端专栏
嗨Sirius
开源,你我一起共筑美好世界!
记得三连,么么哒 = w = !
展开
-
【HTTP- TCP- IP】【前端网安】总结篇
文章目录HTTP协议优缺点特点缺点HTTP版本差异0.91.01.11.x的版本问题2.0头部压缩多路复用服务器推送比1好的地方二进制分帧HTTP状态码1xx 信息类2xx 成功3xx 重定向4XX 客户端错误5XX 服务器错误DNS如何工作本地服务器递归查询 和 本地DNS服务器迭代查询负载均衡为什么用UDP协议作为传输层协议Connection:keep-aliveHTTP缓存策略强缓存ExpiresCache-Control协商缓存Last-ModifiedETag两者对比总结GET POST区别缓存原创 2020-11-07 15:00:17 · 501 阅读 · 0 评论 -
【TypeScript】基础及问题汇总
建议先一小时速成TS基础,再来看相关面试题。文章目录1.js项目如何升级为ts?有何影响?2.ts 基础类型都哪些,他们跟js的区别3.ts为什么会流行?与ECMA新规范的关系?4.tslint都能配置哪些功能?对开发流程有何影响?5.如何使用js实现类型约束,枚举等特性么?6.如何理解接口,泛型?1.js项目如何升级为ts?有何影响?这是步骤 但是影响不是很清楚,感觉肯定两者要打架2.ts 基础类型都哪些,他们跟js的区别3.ts为什么会流行?与ECMA新规范的关系?4.tslint都能配.原创 2020-10-19 10:14:08 · 522 阅读 · 0 评论 -
【React】看完这篇文章能够学会React初级技术
本文是根据链接这个视频系列的笔记做的学习记录整理,讲课风格很有趣(2倍速跟小甲鱼声音很像嘿嘿嘿)在深入学习react之前建议先看看一些react的思想,相关文章我已经总结出来啦!半小时理解react文章目录1.初识react特点创建项目react元素渲染react JSXJSX表达式相关案例总结react样式和注释react组件react事件状态例如设置时间例如改变标签2.继续认识react经典父传子数据传递经典子传父数据传递react事件处理react条件渲染react列表渲染实践:react制作疫.原创 2020-10-18 15:31:21 · 654 阅读 · 0 评论 -
【深入浅出 Node + React 的微服务项目】12. 多服务中的代码共享
多服务中的代码共享文章目录多服务中的代码共享在各个服务中共享代码逻辑代码共享能想到的 Options创建 NPM organizationPublishing NPM ModulesTS 转 JS 设置简单的 Publish 命令删掉之前项目的相同 lib更新 import 参数更新 shared lib在各个服务中共享代码逻辑在 Step #7 和 Step #9 中,Auth 认证、request 相关的中间件 和 Error & Error handler这些不仅是 Auth 服务会原创 2022-04-14 15:24:02 · 365 阅读 · 0 评论 -
【深入浅出 Node + React 的微服务项目】2.尝试做一个迷你微服务APP
【深入浅出 Node + React 的微服务项目】尝试做一个迷你微服务APP本文格式是针对 github 的 Markdown,所以目录链接 和 代码链接打不开你可以点击这里查看本文的 Github README 项目链接也是这个哦目录第二步: 尝试做一个迷你微服务APP目录App 介绍搭建项目创建 Posts Service测试 Posts Service创建 Comments Service测试 Comments Service创建 React 前端APP创建原创 2022-03-22 20:11:22 · 829 阅读 · 0 评论 -
【深入浅出 Node + React 的微服务项目】1.微服务的基本知识
微服务的基本知识目录第一步: 微服务的基本知识目录什么是微服务数据在微服务中怎样传递数据传输遇到的问题服务间的同步交流异步: 各服务基于 event 交流异步: 存取数据的方式异步交流中的优缺点什么是微服务一个单块服务(monolith server)包含:Routing 路由Middleware 中间件Business Logic 业务逻辑Database access to implement all features of our app 服务于所有服务的数原创 2022-03-10 16:37:16 · 1456 阅读 · 0 评论 -
【前端开发日常记录】002.设计一个固定在页面上的提示框
功能及缺陷描述贴在页面右侧缺陷提醒:zIndex、不支持点击隐藏(以后优化,比如点击折叠成一个问号贴在页面旁边避免占位置,部分强迫症要气死)、形状做的尽力了部分技术点总结在HTML中实现两个div并排显示(1)设置为行内样式,display:inline-block(2)设置float浮动(3)设置position定位属性为absoluteborder-radius:从左上顺时针切割antd的Affix组件可实现固定代码<Affix offsetTop=.原创 2021-06-29 14:14:03 · 261 阅读 · 0 评论 -
【前端日常开发记录】001.搜索指定数据项
虽然这是一个很简单的小需求,但是里面能带给你一些算法对于开发中的好处。从Redux里面取出你的数据/** * useSelector * 作用:共享状态,从Redux的store中提取数据(state) * 例子:const num=useSelector(state=>state.num) */const { yourData } = useSelector(({ root, xxList }: any) => ({ ...root, ...xxList }));初.原创 2021-06-25 14:54:21 · 101 阅读 · 0 评论 -
【面筋烧烤手册】This
全局环境下的this这种情况相对简单直接,函数在浏览器全局环境中被简单调用,非严格模式下this指向window; 在use strict指明严格模式的情况下就是undefined:function f1 () { console.log(this)}function f2 () { 'use strict' console.log(this)}f1() // windowf2() // undefinedconst foo = { bar: 10,原创 2021-04-20 12:02:27 · 130 阅读 · 0 评论 -
【面筋烧烤手册】Closure
什么是closure能够访问另一个函数作用域变量的函数,closure也就是函数,只不过是声明在其他函数内部而已function getOuter(){ var count = 0 function getCount(num){ count += num console.log(count) //访问外部的date } return getCount //外部函数返回}var myfunc = getOuter()myfunc(1) // 1myfunc(2)原创 2021-04-02 16:50:42 · 99 阅读 · 0 评论 -
【MVVM】Vue的响应式原理
文章目录MVVM响应式原理数据响应式双向绑定数据驱动是 Vue 最独特的特性之一2.x的响应式3.x的响应式发布订阅者模式观察者模式Vue响应式原理VueObserverCompilerDepWatcherVue功能ObserverDepwatcherMVVM在开始之前我们还是复习一下MVVM吧Model层 通过ajax等api完成服务端到客户端model的同步,View层 动态视图模板,展示的是VM的数据和状态,不处理状态,做的只是数据绑定的声明、指令的声明、事件绑定的声明VM层 把View.原创 2021-04-02 13:11:09 · 631 阅读 · 0 评论 -
【寿司烹饪手册】20210401笔试(Tencent)
1. 给定数组如下,请根据数组元素的 age 字段对数组排序,多种实现方式可加分。 (10 分)var a = [ { name: "大毛", age: 23 }, { name: "二毛", age: 34 }, { name: "三毛", age: 12 },];方法一:对象变二维数组排序,再数组变对象function sortPlus(arr) { let brr = []; for(let i of arr) { brr.push([i.age, i.na原创 2021-04-01 19:57:18 · 229 阅读 · 0 评论 -
【力扣料理手册】链表专题
基本操作初始化interface ListNode<T> { data: T; next: ListNode<T>;}插入插入只需要考虑要插入位置前驱节点和后继节点(双向链表的情况下需要更新后继节点)即可,其他节点不受影响因此在给定指针的情况下插入的操作时间复杂度为O(1)。这里给定指针中的指针指的是插入位置的前驱节点。temp = 待插入位置的前驱节点.next待插入位置的前驱节点.next = 待插入指针待插入指针.next = temp删原创 2021-03-31 20:00:39 · 162 阅读 · 0 评论 -
【面筋烧烤手册】20210326
一、前端加载优化相关首屏时间首次可交互时间首次有意义内容渲染时间只请求当前需要的资源异步加载懒加载polyfill 比如Array.flat方法的往前面的语法版本转义(polyfill url-builder)缩减资源体积打包压缩 webpack 4gzip on打开 1.2M-300k图片格式的优化,分辨率和设备适配(根据屏幕分辨率展示不同分辨率的图片),压缩(tinypng),webp的图片尽量控制cookie大小 request header, cookie时序优化原创 2021-03-27 23:27:00 · 313 阅读 · 0 评论 -
【面筋烧烤手册】20200323
1.【热身题】工作中解决过的比较困难的问题,谈一下项目中比较有亮点的地方2.浏览器的事件循环在一个整体的宏任务执行一遍过后,会把中途碰到的微任务添加到队列里面去,宏任务完成后会在微任务队列里面执行微任务,微任务里面又碰到再去执行,最后执行下一个宏任务。2.1为什么js在浏览器中有事件循环的机制JS单线程的event loop2.2两种任务宏任务:整体代码,setTimeout,setInterval,IO操作微任务:new Promise().then2.3为什么要引入微任务的概率原创 2021-03-24 01:00:01 · 91 阅读 · 0 评论 -
【网络安全】CSRF同样能携带缓存中的Token,那怎么实现的防CSRF
Token原理和作用①:token和cookie一样都是首次登陆时,由服务器下发,都是当交互时进行验证的功能,作用都是为无状态的HTTP提供的持久机制。②:token存在哪儿都行,localstorage或者cookie。③:token和cookie举例,token就是说你告诉我你是谁就可以。cookie 举例:服务员看你的身份证,给你一个编号,以后,进行任何操作,都出示编号后服务员去看查你是谁。token 举例:直接给服务员看自己身份证④:对于token而言,服务器不需要去查看你是谁,不需要原创 2021-03-15 23:36:33 · 405 阅读 · 2 评论 -
【面筋烧烤手册】20210305
1.HTTP和HTTPS加密TLS/SSL 安全层认证时间长性能不好443 802.301和302,怎么判断500永久性重定向、临时性,都可以改post500 head options3.跨域CORS 服务器JSONP正向代理 反向代理4.闭包函数嵌套自执行函数保存变量、保护变量防止污染垃圾回收、内存5.垂直居中flex绝对定位6.自适应rem7.node接触过吗8.mvvmmodel view9.vue单向数据流props,怎么原创 2021-03-13 17:43:01 · 94 阅读 · 0 评论 -
【面筋烧烤手册】20210312
CSSBFC的理解position的值两种盒子模型box-sizing的值动画animation、transition、transform、translatetransition元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green),这是一个状态的转变,需要一种条件来触发这种转变,比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。需要事件触发,所以没法在网页加载时自动发生是一次性的,原创 2021-03-13 16:09:11 · 96 阅读 · 0 评论 -
【CSS】Grid布局
CSS Grid(网格)布局,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局(类似我们的excel)。(下面会写很多代码)首先,你必须使用display:grid/inline-grid将容器元素定义为一个 grid(网格) 布局然后用gird-template-columns和gird-template-rows设置列和行的尺寸,也可以用grid-template-areas(上面两个代码的简写)来设置列和行。然后通过grid-row-start、grid-row-e.原创 2021-03-12 23:36:36 · 80 阅读 · 0 评论 -
【面筋烧烤手册】20210301
1.CSS优先级<body> <div class="lightblue"> <div class="darkblue"> <p>我是darkblue</p> </div> </div> <div class="darkblue"> <div class="lightblue">原创 2021-03-02 12:09:34 · 162 阅读 · 0 评论 -
【CSS】组件中怎么对css进行处理的
组件中怎么对css进行处理的1.提供选项2.函数传参式3.4.原创 2021-03-01 11:45:23 · 137 阅读 · 0 评论 -
【CSS】实现五点布局
实现五点布局<div class="box"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> </div> <div原创 2021-03-01 11:44:20 · 383 阅读 · 0 评论 -
【面筋烧烤手册】20200228
1、实现五点布局<div class="box"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> </div> <di原创 2021-03-01 11:43:18 · 175 阅读 · 0 评论 -
【JavaScript】Class类
ES6ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。定义类//定义类class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; }}上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构原创 2021-02-28 12:42:43 · 117 阅读 · 0 评论 -
【面筋烧烤手册】CSS
文章目录1.CSS引入方式1.CSS引入方式内联样式<div style="width:100px;height:100px;"> </div>内部样式内部样式原创 2021-02-19 16:15:37 · 217 阅读 · 0 评论 -
【面筋烧烤手册】函数柯里化延伸的知识点
1、递归一个函数调用同一个函数1. 自己调用自己2. 因为自己调用自己会出现无限死循环 所以还需要设置一个停止条件3. 递归永远表现的是树形结构 => 递归树4. 最先调用的函数 最后执行完毕 最后调用的函数 最先执行完毕// 阶乘// 5! = 5 * 4 * 3 * 2 * 1 => fn(4) * 5 => fn(n-1) * n// 4! = 4 * 3 * 2 * 1 => fn(3) * 4 => fn(n-1) * n// 3! =原创 2021-02-18 18:49:32 · 220 阅读 · 0 评论 -
【面筋烧烤手册】网络安全
啦啦原创 2021-02-07 17:23:29 · 275 阅读 · 1 评论 -
【JavaScript】原生数组及高阶函数
JavaScript原生数组及高阶函数一、mapmap() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身let list = [1, 2, 3, 4, 5];let other = list.map((d, i) => { return d * 2;});console.log(other);// print: [2, 4, 6, 8, 10]二、filte.原创 2021-02-02 16:55:26 · 81 阅读 · 0 评论 -
【面筋烧烤手册】JavaScript数组API和常见任务
文章目录APIjoin():用指定的分隔符将数组每一项拼接为字符串push() :向数组的末尾添加新元素pop():删除数组的最后一项shift():删除数组的第一项unshift():向数组首位添加新元素slice():按照条件查找出其中的部分元素splice():对数组进行增删改fill(): 方法能使用特定值填充数组中的一个或多个元素concat():用于连接两个或多个数组indexOf():检测当前值在数组中第一次出现的位置索引lastIndexOf():检测当前值在数组中最后一次出现的位置索引ev原创 2021-02-01 20:40:41 · 172 阅读 · 0 评论 -
【面筋烧烤手册】JavaScript数据专题
JavaScript数据专题1、原始数据类型 和 引用数据类型原始数据类型 存在栈中 空间小 大小固定 频繁更换UndefinedNullStringBooleanNumberSymbolBigInt引用数据类型 存在栈和堆中 栈保存引用堆的指针Object(Function Array Date)2、数据类型判断typeof()只用于判断原始数据类型 引用数据类型全是Objecta instanceof b 通过判断是否是b数据类型的实例 不能判断 数字、字符串、原创 2021-02-01 20:09:38 · 92 阅读 · 0 评论 -
【React】后台管理项目笔记
day011. 项目开发准备1). 描述项目2). 技术选型 3). API接口/接口文档/测试接口2. 启动项目开发1). 使用react脚手架创建项目2). 开发环境运行: npm start3). 生产环境打包运行: npm run build serve build3. git管理项目1). 创建远程仓库2). 创建本地仓库 a. 配置.gitignore b. git init c. git add . d. git commit -m翻译 2021-01-30 13:28:13 · 536 阅读 · 0 评论 -
【面筋烧烤手册】HTTP数据传输专题
网络数据传输专题1、Ajax请求五个步骤由js脚本发起HTTP请求,根据返回的数据,获取相应部分,并不用刷新页面例如:进行一次head请求创建多适配对象声明回调函数建立连接(配置请求方式)发送连接配置回调函数判断异步状态4判断交互状态200 304解析数据转成字符串是json类型对象Json.parse(res) 或 res.parseJson()不是json类型对象obj.toJsonString(); Json.stringify(obj)va原创 2021-01-27 16:34:38 · 107 阅读 · 0 评论 -
【面筋烧烤手册】JavaScript原型专题
JavaScript原型专题文章目录JavaScript原型专题过于抽象 直接上自己画的图注意点:prototype是函数属性,__proto__是实例化对象属性原创 2021-01-27 14:45:15 · 72 阅读 · 0 评论 -
【面筋烧烤手册】JavaScript结构专题
Javascript结构专题文章目录Javascript结构专题1、作用域 / 链2、执行上下文和执行栈3、this4、闭包为什么闭包this指向window或上一层闭包拥有者结构5、箭头函数场景解决了什么不适用场景注意点实现尾递归6、内存泄漏种类1. 意外的全局变量2.被遗忘的计时器或者回调函数避免内存泄漏7、垃圾回收机制的策略8、 var let const9、Argument对象的实例arguments作为当前函数的实参传参应用场景1、作用域 / 链规定变量和函数的可使用范围称作作用域每个函原创 2021-01-27 14:33:58 · 102 阅读 · 0 评论 -
【面筋烧烤手册】HTTP请求专题
HTTP请求专题1、状态码1XX 已被接受等待处理2XX 成功200 请求成功204 请求成功无资源206 partial content 范围请求 部分3XX 重定向301 永久性重定向 已被分配新URL(首部会有提示)302 临时分配新URL 要改POST为GET303 存在另一个资源304 请访问协商缓存307 临时重定向 不改POST301 302 303 POST改成GET4XX 客户端错误400 报文语法错误401 HTTP请求没通过认证403 f原创 2021-01-27 14:27:36 · 136 阅读 · 0 评论 -
【JavaScript】查看请求头返回值
var wpoInfo = { // 服务器端时间 "date" : xhr.getResponseHeader('Date'), // 如果开启了gzip,会返回这个东西 "contentEncoding" : xhr.getResponseHeader('Content-Encoding'), // keep-alive ? close? "connection" : xhr.getResponseHeade原创 2021-01-25 11:58:59 · 344 阅读 · 0 评论 -
【个人博客网站】搭建引导手册
人人都想搭建自己的个人博客网站,这里根据自身经验,给出一个比较稳定简单的方法。文章目录Gridea介绍和操作选择服务器和域名搭建后端服务器Gridea介绍和操作Gridea是基于Vue+electron构建的博客搭建桌面系统,需要你去搜索Gridea官网下载,可能会很慢,我最终下的是gitee的压缩包(众所周知,gitee+压缩包挺快的)软件功能:直接远程连接服务器,客户端生成的本地文件保存在你的目标目录里面(自己设置),在你桌面客户端每次提交更新的时候,Git的连接方法会直接commi.原创 2021-01-21 12:47:00 · 316 阅读 · 0 评论 -
【前端性能】网站性能优化
网站性能优化1、尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数,这是提高网页速度的关键步骤。减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。1、合并文件:合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法,例如可以简单地把所有的C转载 2021-01-09 23:09:45 · 2553 阅读 · 1 评论 -
【React Native】Matching Game 配对游戏
基于React Native 的 跨三端(Android、iOS、Web)配对游戏目录第一章 需求分析和功能第二章 框架架构和编码实现第一章 需求分析和功能我们知道现在有很多小游戏,但是这些小游戏要么只能Android运行,要么只能iOS运行,要么只能Web端运行。所以我想到了,要是能一次性编码解决跨端游戏开发就好了。于是我就用React -Native来实现此次跨端小游戏的开发。跨端小游戏的功能很简单,我主要实现游戏卡片的配对并计数。刘海屏和全面屏底部的兼容首先是头部的t原创 2021-01-01 13:30:12 · 533 阅读 · 0 评论 -
【VUE】看完这篇文章能够了解es6特性和vue基础
Vue讲解1.Vue.js特性简介什么是Vue.jsVue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。Vue.js是一个渐进式框架,什么是渐进式?渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。如果你希望将更多的业务逻辑适用Vue实现,那么Vue有成熟,稳定的核心库和生态系统。Core+Vue-router+Vuex可以满足你各种各原创 2020-12-13 17:09:03 · 2218 阅读 · 1 评论