![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
【前端基础(HTML JS CSS)】
文章平均质量分 72
嗨Sirius
开源,你我一起共筑美好世界!
记得三连,么么哒 = w = !
展开
-
【深入浅出 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 评论 -
【面筋烧烤手册】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 评论 -
【面筋烧烤手册】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 评论 -
【面筋烧烤手册】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 评论 -
【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 评论 -
【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 评论 -
【面筋烧烤手册】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 评论 -
【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 评论 -
【LeetCode刷题篇】141.环形链表(JS)
给定一个链表,判断链表中是否有环。如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始)。 如果 pos 是 -1,则在该链表中没有环。注意:pos 不作为参数进行传递,仅仅是为了标识链表的实际情况。如果链表中存在环,则返回 true 。 否则,返回 false 。 进阶:你能用 O(1)(即,常量)内存解决此问题吗? 示例 1:输入:head =原创 2020-12-12 20:19:51 · 322 阅读 · 1 评论 -
【JavaScript】实现队列Queue
队列只能在队首删除元素(出队),队尾增加元素(入队)//定义队列function Queue(){ this.dataStore = []; this.enqueue = enqueue; //入队 this.dequeue = dequeue; //出队 this.front = front; //查看队首元素 this.back = back; //查看队尾元素 this.toString =.原创 2020-12-12 15:32:19 · 173 阅读 · 0 评论 -
【48个原生JS网页小demo】1.信息切换
演示切换栏职位列表具体信息弹出data数据结构页面总体 container切换栏 header#header{border-bottom:3px solid #F60;height:30px;}#header li{font-weight:bolder;float:left;height:30px;width:80px;text-align:center;line-height:30px;}#header li:hover{cursor:pointer;}#header .sec原创 2020-12-09 22:24:08 · 219 阅读 · 0 评论 -
【JavaScript】原生实现call bind apply
回顾call apply bind用途let obj = { name:"obj1" say:function(){ //输出arguments console.log(arguments); console.log(this.name); } let obj2 = { name:"obj2"; } obj.say(); obj.say.call(obj2,1,2,3); obj.say.apply(obj2,[1,2,3]); sayClone = obj.bind(o原创 2020-12-09 19:21:48 · 88 阅读 · 0 评论 -
【JavaScript】Interview必背(详细版)
文章目录1.介绍一下js的数据类型有哪些,值是如何存储的2. && 、 ||和!! 运算符分别能做什么3.数据类型转换4.数据类型判断 typeof,instanceof,constructor,Object.prototype.toString.call()5. 介绍 js 有哪些内置对象?1.介绍一下js的数据类型有哪些,值是如何存储的JavaScript一共有8种数据类型,其中有7种基本数据类型:Undefined、Null、Boolean、Number、String、Symbo原创 2020-12-08 11:27:38 · 501 阅读 · 1 评论 -
【JavaScript】最最详细的正则表达式总结
之前在刷leetcode的时候发现有很多问题都是通过正则表达式来解决的,所以有必要在对其进行总结,本文参考这篇文章那么我们开始吧文章目录创建正则表达式1.直接量语法创建2.对象构造函数创建直接量字符字符类重复贪婪和非贪婪的重复选择、分组和引用选择分组引用具名引用忽略引用指定匹配位置(锚元素)先行断言负向先行断言后行断言负向后行断言修饰符(/后面的选择项)正则表达式对象的原型方法String.prototype.search(regexp|substr)String.prototype.replace(.原创 2020-12-08 11:08:45 · 181 阅读 · 0 评论 -
【JavaScript】Interview(精简版)
1.数据类型 值的存储7种基本数据类型Undefined、Null、Boolean、Number、String、Symbol(es6新增,表示独一无二的值)和BigInt(es10新增);1种引用数据类型Object(Object本质上是由一组无序的名值对组成的)。里面包含 Dunction、Array、Date等原始数据类型:栈空间小 内存固定 频繁使用引用数据类型:栈(指针)和堆(实体)空间大 内存大小不固定2.&& 、 || 和 !! 运算符分别能做什么&&原创 2020-12-08 09:36:53 · 288 阅读 · 0 评论 -
【JavaScript】4种常见的内存泄露
一、意外的全局变量未声明的变量-window全局变量当我们在一个函数中给一个变量赋值,但是没有声明它时function Fn(){ a = "hello";}此时这个全局变量a相当于是window对象下的一个变量:function Fn(){ window.a = "hello";}全局变量很难被垃圾回收器回收,所以会进行内存泄露。使用this创建的变量还有种情况function Fn(){ this.a = "hello";}Fn();当然,这个this也是指向的w原创 2020-12-06 18:37:52 · 1205 阅读 · 0 评论 -
【JavaScript】原型和原型链
构造函数创建对象function Person(){}var person = new Person();person.name = 'kevin';console.log(person.name)Person()就是Person对象的构造函数,我们使用new创建了一个实例对象personprototype每个函数都有个prototype属性每个js对象在创建时(除了null)都会关联另一个“模板“对象,也就是原型,每个对象都会从原型中“继承”属性例如:function Perso翻译 2020-12-05 14:36:00 · 110 阅读 · 0 评论 -
【JavaScript】ES6-Generator函数
一、什么是Generator 函数1.1 语法学习 Generator 语法,你需要了解function* 、yield、next三个基本概念。function* 用来声明一个函数是生成器函数,它比普通的函数声明多了一个*,*的位置比较随意可以挨着 function 关键字,也可以挨着函数名yield 产出的意思,这个关键字只能出现在生成器函数体内,但是生成器中也可以没有yield 关键字,函数遇到 yield 的时候会暂停,并把 yield 后面的表达式结果抛出去next作用是将代码的控制原创 2020-12-04 15:01:41 · 150 阅读 · 0 评论 -
【JavaScript】DOM编程学习总结篇
文章目录一、基本类型介绍1.Node类型2.Element类型3.Text类型4. Attr类型5 Comment类型一、基本类型介绍1.Node类型所有DOM节点继承该类型,Node有一个属性nodeType表示Node的类型,它是一个整数,其数值分别表示相应的Node类型这些Node类型中,我们最常用的就是element,text,attribute,comment,document,document_fragment这几种类型2.Element类型Element提供了对元素标签原创 2020-12-04 02:39:54 · 645 阅读 · 0 评论 -
【48个原生JS网页小demo】汇总(更新中)
本系列代码来源于GitHub博主的:记录我在学习前端学习过程中做过的小demo,js部分全用源生js实现。本系列将会对每个demo进行详细解释原创 2020-12-03 20:16:59 · 1583 阅读 · 0 评论