![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端知识
JiAyInNnNn123
这个作者很懒,什么都没留下…
展开
-
css-置换元素与非置换元素
html中我们知道什么是行内元素,什么是块元素,什么是行内块元素。置换元素,与非置换元素其实是很少去使用的名词。css权威指南上写:置换元素:为其他内容占位的元素。典型的置换元素是img,它指向一个图像文件,那个图像及插在img元素在文档流中的位置。大多数表单元素也是置换元素。非置换元素:内容包含在文档中的元素。例如,段落(p)是非置换元素,因为段落中的文本内容在元素自身中。但看这个有些晦涩,在w3c中对于上面两者的说明更让人能理解:置换元素:一个 内容 不受CSS视觉格式化模型控制,CSS原创 2022-03-08 12:00:32 · 609 阅读 · 0 评论 -
JS的继承(未完待续。。。)
1.原型链继承 function Animal(name){ this.name = name || 'Animal'; this.food='菜'; this.skill=['吃饭','睡觉','打豆豆'] this.sleep = function(){ console.log(this.name+'睡了晚安') } } // 在原型上添加一个方法 A原创 2022-03-06 18:41:10 · 814 阅读 · 1 评论 -
a.x = a = {n:2} 结果是?
在****中学习,看到了这篇文章,光看文字描述比较的晦涩难懂,说是一道值得考究的面试题。单拎出来看看其实也是很有趣的一道题,考察了很多方面。本文就仔细讲一下这道题相关的知识点以及最后的结果。var a = {};a.z = a = [];alert(a.z); //c.a是什么?《JavaScript 权威指南》中的一段文字(4.7.7 运算顺序),曾提到过:JavaScript 总是严格按照从左至右的顺序来计算表达式。那么我们拆分一下上面这段代码的含义:简单的画了一个图,最后的结果就原创 2022-02-11 10:05:20 · 489 阅读 · 0 评论 -
使用mac 安装前端环境记录
下载git环境下载node环境+npm切换node版本原创 2022-01-26 21:10:56 · 949 阅读 · 0 评论 -
CSS重绘和重排
定义重绘:当元素的一部分属性发生改变,如外观、背景、颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制 ,使元素呈现新的外观叫做重绘。重排(回流):当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程。什么属性会触发重绘或者重排引起重绘的属性:colortext-decoration //设置文本的装饰,下划线,上划线,删除线等。outline outline-color //轮廓颜色outline-width //轮廓宽度原创 2022-01-24 11:16:03 · 1010 阅读 · 0 评论 -
gitlab响应时间过长修改域名
https://github.wuyanzheshui.workers.dev/https://hub.fastgit.org/https://github.com.cnpmjs.org/原创 2021-12-30 09:48:24 · 574 阅读 · 0 评论 -
常用问题记录
v-show和v-if的区别:1)v-if是通过控制dom节点的存在与否来控制元素的显隐;v-show是通过设置DOM元素的display样式,block为显示,none为隐藏;2)编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;3)编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条原创 2021-12-28 16:25:30 · 333 阅读 · 0 评论 -
你不知道的JS--词法作用域-函数作用域和块作用域-整理
词法作用域:定义在词法阶段的作用域。 是由你在写代码时将变量和快作用域写在哪里来决定的。作用域查找会在找到第一个匹配的标识符时停止。tip:多层嵌套的作用域可以定义统一标识符。被叫做:遮蔽效应。全局变量会自从成为全局对象,例如window对象的属性。...原创 2021-12-28 09:33:07 · 492 阅读 · 0 评论 -
前端调试--断言函数介绍,比console.log好用
碰巧在书里看到有调试方法 assert顾名思义:就是用于调试的函数在网上查了一下,其他语言也有。下面介绍一下前端的方式前端的话,较多的就是console.log或者是打断点了再此给大家介绍一下新的调试手法----使用assert方法上面也有介绍过,其他语言也有,js肯定也是有的。只不过js把这个方法封装在conosle这个对象中了,只需要在console里调用此方法就可以使用了使用方式:如图,如果你的调试内容不符合,就会对应爆出error的样子,提示内容为你定义的提示语了浏览器支持con原创 2021-12-03 21:43:58 · 798 阅读 · 0 评论 -
你不知道的JS--作用域-整理
var a =2引擎:执行js程序编译以及执行过程。编译器:负责语法分析,代码生成作用域:收集并且维护所有声明的变量组成的一系列查询,执行一套非常严格的规则,确定当前执行的代码对这些标志符的访问权限。当我写下这段代码,编译器会执行哪些操作呢?1.遇到var a编译器会询问作用域是否存在这么一个名称为a的变量。如果有名称为a的变量,直接忽略这条声明。如果没有名称为a的变量,会在当前作用域下声明一个新的变量,命名为a。2.处理a=2:编译器会为引擎生成运行时所需要的代码。这些代码用来处理 a.原创 2021-11-23 17:59:54 · 699 阅读 · 0 评论 -
设计模式--设计原则
设计原则是指导思想,从思想上指导我们指明程序设计的正确方向,在开发过程中我们需要尽力遵守。设计模式,是我们已经实现的方式。所以设计模式也是从设计原则出发,一些落地的实现。面向对象六大原则:单一职责原则单一职责原则 (Single Responsibility Principle,SRP)是指对一个类(方法、对象,下文统称对象)来说,应该仅有一个引起它变化的原因。也就是说,一个对象只做一件事。单一职责原则可以让我们对对象的维护变得简单,如果一个对象具有多个职责的话,那么如果一个职责的逻辑需要原创 2021-07-12 17:37:21 · 94 阅读 · 0 评论 -
浅谈JS运行机制
首先放上2年前自己对js单线程的理解的博客:JS为什么是单线程的?JS的同步异步虽然说题目是这样写,但是只是浅显的说了一嘴同步异步的事情,并没有涉及到宏任务微任务等更深层次的理解。宏任务微任务其实在开发学习过程中都有接触过,但是并没有完全的把这些知识串联起来。就js的循环事件也有对比node进行了一篇文章的分享,也是浅浅之谈。js和node.js的循环事件写这个的起因,在笔记上写上了:JS执行后进先出的执行规则,想把整个js运行整理梳理一遍所以看阮大师的文章,自己顺一遍整个知识,按照自己的理解在反述原创 2021-06-01 11:25:14 · 115 阅读 · 0 评论 -
高性能JavaScript之字符串和正则
js中的字符串操作,是消耗一定性能的。上图中提到了很多字符串操作的方法,现代浏览器中他们的效率差不多。上图中展示了字符串拼接的步骤,这里特别注意要在内存中创建临时字符串,每加一次都产生一个临时字符串,这样占用内存就多了。以上就是字符串的简单内容下一步就是正则,不得不说正则是一个很复杂的东西,无论在哪种语言中。先了解一下正则的执行过程举一个例子:/h(ello|appy) hippo/.test("hello there, happy hippo")浏览器首先将正则表达式转化成原生代码程原创 2020-11-12 09:12:32 · 302 阅读 · 0 评论 -
高性能JavaScript之数据存取
JS中有两条链。一个是作用域链,一个是原型链。而数据存储有四种方式: 字面量,变量,数组项,对象成员。作用域链1.访问字面量和局部变量的速度最快,访问数组元素和对象成员相对较慢。字面量和变量都是直接拿到值,但是数组和对象这种引用数据类型,是拿到地址,在去地址查询值,过程复杂一点,就慢了。2.由于局部变量存在于作用域链的起始位置,因此访问局部变量比访问跨作用于变量更快。变量在作用域链中位置越深,访问所需时间就越长,因此全局作用域的访问速度最慢。就像–函数执行的时候是沿着作用域链,一层一层查询的,只有原创 2020-11-05 21:38:40 · 734 阅读 · 2 评论 -
数据结构-树
树。非顺序数据结构。日常我们见到的公司的组织架构。抽象成一个数据结构然后说一下什么是二叉树:树中的每个节点,最多只能有两个子节点。就是二叉树。一个树枝可以分两个叉。根据以上的方法。来看源码这里对非空树,调用了insertNode方法从根节点开始,作比较。key值比较小的一个,要作为左侧节点,如果左侧节点非空呢? 那就递归的调用insertNode方法,比较左侧节点的key和新增key,同理,如果插入key值比较大,那就要比较右侧节点。searchNode方法和insertNo原创 2020-10-16 18:08:49 · 120 阅读 · 0 评论 -
数据结构和算法
声明明明:一下文章内容是在群里有大佬每日分享的~so俺整理成博客啦。今儿介绍类似于js的数组的基本数据结构—栈。类似于数组,但是栈更可控,可以在添加和删除元素时进行更多控制。栈是遵循LIFO原则的有序集合。(LIFO:First In Last Out,先入后出)。像弹夹,先压入的子弹,最后放出来。有序集合,就是说这个集合是有索引的。索引小的元素靠近的方向叫栈底,索引大的元素靠近栈顶。我们实现一个栈的类,它的元素用一个数组存储,要包含一些公共方法用数组实现:我们还可以用对象来实现用对象来原创 2020-09-23 09:56:01 · 98 阅读 · 0 评论 -
TypeScript版 策略模式
意图:定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。主要解决:在有多种算法相似的情况下,使用 if…else 所带来的复杂和难以维护。有这样一个情景: 绩效为 S的人年终奖有 4倍工资,绩效为 A的人年终奖有 3倍工资,而绩效为 B的人年终奖是 2倍工资。假设财务部要求我们提供一段代码,来方便他们计算员工的年终奖。最简单直接的方式当然是if else,看代码:但是这样不符合开闭原则,耦合性太高了。用专业的术语:calculateBonus 函数比较庞大,包含了很多 if-els原创 2020-09-02 17:57:16 · 336 阅读 · 0 评论 -
ES6-Generator简单总结
定义:封装多个内部状态的异步编程解决方案形式:调用Generator函数(该函数不执行)返回指向内部状态的指针对象(不是运行结果)声明:function* Func() {}方法next():使指针移向下一个状态,返回{ done, value }(入参会被当作上一个yield命令表达式的返回值)return():返回指定值且终结遍历Generator函数,返回{ done: true, value: 入参 }throw():在Generator函数体外抛出错误,在Generator函数体.原创 2020-08-17 17:09:02 · 92 阅读 · 0 评论 -
TypeScript版 模板方法模式
如何理解模板方法模式准备食材(肉、蔬菜、菌菇)食材放到锅里放调味料(糖、盐、油)炒菜倒到容器里(盘子、碗)先把水煮沸冲泡饮料(咖啡、茶、牛奶)倒进杯子中最后加一些调味料(咖啡伴侣、枸杞、糖)在类似的场景中,这些例子都有这些特点:有一个基本的操作流程,这个流程我们可以抽象出来,由具体实例的操作流程来实现,比如做咖啡的时候冲泡的就是咖啡,做茶的时候冲泡的就是茶;一些共用的流程,就可以使用通用的公共步骤,比如把水煮沸,比如将食材放到锅里,这样的共用流程就可以共用一个具体方法就可以了;原创 2020-08-13 14:59:35 · 552 阅读 · 0 评论 -
ES6-Promise + Iterator 简单总结
Promise定义:包含异步操作结果的对象状态进行中:pending已成功:resolved已失败:rejected特点对象的状态不受外界影响一旦状态改变就不会再变,任何时候都可得到这个结果声明:new Promise((resolve, reject) => {})出参resolve:将状态从未完成变为成功,在异步操作成功时调用,并将异步操作的结果作为参数传递出去reject:将状态从未完成变为失败,在异步操作失败时调用,并将异步操作的错误作为参数传递出原创 2020-08-04 14:15:01 · 271 阅读 · 0 评论 -
TypeScript版 组合设计模式
组合设计模式:当我们在某个文件夹下搜索某个文件的时候,通常我们希望搜索的结果包含组合对象的所有子孙对象;开家族会议的时候,开会的命令会被传达到家族中的每一个成员;领导希望我们 996 的时候,只要跟部门领导说一声,部门领导就会通知所有的员工来修福报,无论你是下属哪个组织的,都跑不掉…?在类似的场景中,有以下特点:1.结构呈整体-部分的树形关系,整体部分一般称为组合对象,组合对象下还可以有组合对象和叶对象;2.组合对象和叶对象有一致的接口和数据结构,以保证操作一致;3.请求从树的最顶端往下传递,如果原创 2020-07-30 16:47:40 · 449 阅读 · 0 评论 -
ES6对象的新增方法总结
1.Object.is()比较两个值是否相等。与 ===行为基本一致。Object.is() 与 ===的唯一区别:+0 === -0 //trueNaN === NaN // falseObject.is(+0, -0) // falseObject.is(NaN, NaN) // true2.Object.assign()用于对象合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。只有一个参数,该方法直接返回该参数该参数不是对象,先转成对象,然后返原创 2020-06-17 21:06:34 · 323 阅读 · 1 评论 -
ES6的函数部分总结
函数扩展参数默认值:为函数参数指定默认值形式:function Fun(x = 1, y = 2) {}参数赋值:惰性求值(函数调用后才求值)参数位置:尾参数参数作用域:函数作用域声明方式:默认声明,不能用const或let再次声明length:返回没有指定默认值的参数个数与解构赋值默认值结合function Func({ x = 1, y = 2 } = {}) {}rest/spread参数(…):返回函数多余参数形式:以数组的形式存在,之后不能再有其他参数作用:原创 2020-05-27 14:18:38 · 263 阅读 · 0 评论 -
js和node.js的循环事件
这几天一直在看node相关。说node是单线程又高并发的框架。但是实际上nodejs只在应用层属于单线程,底层其实是通过libuv维护了一个堵塞I/0调用的线程池。(这句话啥意思呢?我也不懂,但是libuv是c语言写的,我就知道这点哈哈哈)再说一下这个event loop。一直以为event loop是js的专属,但是经过查询资料发现:eventloop 是一种程序结构,是实现异步的一种机制1。所有任务都在主线程上执行,形成一个执行栈(execution context stack)。2。主线转载 2020-05-18 15:41:49 · 196 阅读 · 0 评论 -
node.js学习
node利用了google的V8引擎打造了基于时间循环实现的异步I/O框架。node出现的背景:为了解决web服务器的高并发性能问题。(缩短发送到响应时间的时长)V8引擎嵌入到不同的宿主环境中,就可以用js语言来写不同领域的应用。作用:用于chrome浏览器解析js脚本。优势:性能好没有同步I/O事件驱动机制没有历史包袱node.jsnode.js 轻量级架构。特点:单线程:非堵塞I/O:在node中大多数操作都是以一部的方式进行调用的,有很多异步I/O的API。事件驱动原创 2020-05-17 23:29:33 · 115 阅读 · 0 评论 -
TypeScript命名空间&模块
首先介绍一下啥是ts的命名空间确保我们创建的变量不会泄露至全局变量中,在 TypeScript 中,提供了 namespace 关键字来描述这种分组。namespace 是位于全局 namespace 下的一个普通的带有名字的 JavaScript 对象,这使得 namespace非常容易使用。TypeScript 的命名空间只对外暴露需要在外部访问的对象,命名空间内的对象通过 exp...原创 2020-05-08 11:22:55 · 268 阅读 · 0 评论 -
rxjs简单描述
rxjs 是一个响应式编程的库。用于编写异步操作或基于回调的代码更容易。核心有三点:1.observer.2.subject3.schedulers流程:create 一个observable。通过subscribe订阅监听异步操作的变化。关键字:subscribe 监听异步操作。finalize 当异步操作stop 掉的时候被调用的。unsubscrible 取消监听 (取消后...原创 2020-04-27 16:36:16 · 166 阅读 · 0 评论 -
TS的类装饰器和属性装饰器
装饰器:装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或者参数上,可以修改类的行为。通俗的将装饰器就是一种方法,可以注入到类,方法,属性参数上来扩展类,属性,方法,参数的功能。以上的内容我看了快一下午,讲真我真不理解他说的到底是啥。然后看了b站的ts教学视频,通过代码的实际操作大概理解了啥是装饰器。来叨叨一下。常见的装饰器有:类装饰器、属性装饰器、方法装饰器、参数装饰器装饰...原创 2020-04-23 22:34:16 · 1386 阅读 · 2 评论 -
TypeScript的接口interface
123123原创 2020-04-14 10:47:12 · 127 阅读 · 0 评论 -
TypeScript中的类、继承、修饰符
//js中的类function Person(){ this.name='running-man'; this.age=33; this.run = function (){ alert(this.name+'在奔跑') }}//原型链上的属性会被多个实例共享Person.prototype.sex='男';Person.prototype.work = fun...原创 2020-03-18 22:51:20 · 83 阅读 · 0 评论 -
TypeScript的函数
//js中定义函数的方法 //声明法 function run(){ return 'running-man' }//匿名函数 var num = function(){ return 'running-man' } num()//ts中定义函数的方法 //声明法 function run():string{ retur...原创 2020-03-07 20:37:49 · 91 阅读 · 0 评论 -
TypeScript的数据类型
安装环境 黑窗口内输入 npm i -g typescript新建一个 xxx.ts文件,输入一些基础的代码 var a:string = '12345'执行ts文件 黑窗口内输入 tsc xxx.ts当前文件夹中生成了与ts文件名称相同后缀不同的文件 xxx.js 其内容均为js代码。typescript 数据类型string number bool...原创 2020-03-06 18:58:38 · 330 阅读 · 0 评论 -
react中的JSX语法(待更新...)
JSX 基础语法什么是 JSX 元素区分于元素 DOM 元素,React 元素本质上是普通对象,是组件的基本组成单元JSX 特性元素可以嵌套,但是必须有跟元素,也就是最外层必须有一个元素包裹标签必须闭合,标签中没有内容也需要闭合,比如JSX 嵌入表达式JSX 本质上也是表达式JSX 属性JSX 可以添加自定义属性,并且属性名采用驼峰式属性添加可以使用延展运算符插值表达式-...原创 2020-01-28 22:36:02 · 198 阅读 · 0 评论 -
cookie session token jwt
使用 cookie 时需要考虑的问题因为存储在客户端,容易被客户端篡改,使用前需要验证合法性不要存储敏感数据,比如用户密码,账户余额使用 httpOnly 在一定程度上提高安全性尽量减少 cookie 的体积,能存储的数据量不能超过 4kb设置正确的 domain 和 path,减少数据传输cookie 无法跨域一个浏览器针对一个网站最多存 20 个Cookie,浏览器一般只允许存放...原创 2020-01-09 16:19:47 · 405 阅读 · 0 评论 -
JSON Web Token
本文是根据阮一峰大神的文章JSON Web Token 入门教程学到的。说JWT之前先说一下TokenToken是访问资源接口时所需要的资源凭证。简单 token 的组成: uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign(签名,token 的前几位以哈希算法压缩成的一定长度的十六进制字符串)token验证身份的流程:每一次请求都需要携带 token,需要把 tok...原创 2020-01-09 14:54:15 · 152 阅读 · 0 评论 -
VUE里的data为什么是个函数
请看官网data 必须是一个函数提取重要信息:一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝我为什么要水一篇文章呢??因为我忘了data为啥是个函数了就酱!...原创 2019-12-27 14:12:27 · 92 阅读 · 1 评论 -
面试常见问题:cookie和webstorage
首先,webstorage中包含sessionStorage和localStorage。cookie和webstorage的区别:1.出现的时间:cookie 很早之前就有了webstorage H5之后才有的2.跟随请求状态:cookie 会跟着前后台请求webstorage 不跟随3.储存大小:cookie 4Kwebstorage 4M左右4.生命周期:cookie ...原创 2019-12-25 15:16:53 · 189 阅读 · 0 评论 -
前端小知识--区分get和post请求
get和post是HTTP协议中的两种发送请求的方法。如果你还不了解http,可以点击HTTP协议①介绍HTTP协议②缓存首先先说get使用query接收get数据eg:http://127.0.0.1:3000/index?id=10001&name=zsreq.query中以对象的形式保存了get参数{id=1001,name=“zs”}使用params接收get数据...原创 2019-12-24 10:56:06 · 683 阅读 · 0 评论 -
JS面向对象--你真的理解闭包了吗?
JS中的闭包,可能在实际开发中我们用的很少,但是面试的时候是必问的。所以今儿个总结一下什么是闭包。首先,我们定义一个变量。会分为两种情况,1是定义在全局中,我们关闭程序的时候变量会从内存中释放。2是定义在局部中,在函数中定义一个变量,当我函数调用结束后,会从内存中释放。闭包的存在,就是为了当我调用了声明局部变量的函数后,我的局部变量还能存在在全局之中。延长了我局部变量的生命周期。接下来简单...原创 2019-12-24 10:53:59 · 63 阅读 · 0 评论 -
px,em,rem的区别
1.px 像素(Pixel)。绝对单位。像素px是相对于显示器屏幕分辨率而言的,是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果 px要换算成物理长度,需要指定精度 DPI。2.em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此并不是一个固定的值。3.rem是 CSS3新增...原创 2019-12-24 10:47:23 · 121 阅读 · 0 评论