- 博客(42)
- 收藏
- 关注
RSS订阅原创 react生命周期
挂载阶段：constructor：组件的构造函数（constuctor）部分，继承React Component，在constructor中通过super(props)调用父类React Component的构造函数，才拥有了之后的生命周期。在这个阶段，会获取到外层传递的props数据，这里进行组件初始化的工作，内部state的定义，和组件本身逻辑的初始化。
2023-07-05 17:23:16
200
原创 js二进制
在JavaScript中，二进制数值可以通过使用前缀0b或0B来表示。二进制数值可用于表示整数，范围为从0到2^53-1。这是因为JavaScript使用64位浮点数表示数字，其中1位用于表示正负号，11位用于表示指数，剩下的52位用于表示小数部分。换句话说，JavaScript中的二进制表示范围从0到9007199254740991（即2的53次方减1）。超出此范围的整数将无法准确表示，可能会导致精度丢失。
2023-07-04 19:35:19
476
原创 一名【合格】前端工程师的自检清单(持续更新)
基本数据类型的变量（如数字、字符串等）通常直接存储在栈中，而对象类型的变量（如数组、对象等）则存储在堆中，而变量名则存储在栈中，并指向相应的内存地址。装箱操作指的是将基本类型的值转换为对应的内置对象，拆箱操作则是将内置对象转换为基本类型的值。引用类型的特点是它们的值在内存中不是独立存在的，而是存储在内存中的对象中，变量保存的是对象的地址，因此它们之间的比较是按引用比较的。例如，使用字符串对象的。值类型的特点是它们的值在内存中占据独立的空间，每个变量在内存中都有自己的副本，因此它们之间的比较是按值比较的。
2023-05-10 17:00:03
908
原创 欺骗词法作用域
欺骗词法作用域：在运行时修改词法作用域1.eval：function foo(str,a){ eval(str); console.log(a,b)}var b = 2;foo("var b = 3",1) //1,3执行foo（）函数时eval（）改变可foo的作用域，var b = 3 会对作用域修改，添加局部的b变量。2.with：with的作用域随着他传入的参数不同而修改作用域var obj = { a:1, b:2, c:3}with(obj){ a=3; b
2021-06-07 14:27:10
109
原创 浏览器的工作原理
1.用户输入一个url、点击一个链接、提交一个表单。2.DNS查找3.tcp三次握手，让两端尝试进行通信在发送数据前，SYN,SYN-ACK,ACK,4.如果是https请求，进行TLS协商。TCP慢开始/14kb规则：接受到第一个包的数据内容通常是14kb，慢慢的主次增加达到阈值。拥塞控制可以确保服务器发送的太快，客户端来不及接受而不被丢弃（拥塞控制算法使用这个发送包和确认帧流来确定发送速率）。5.解析数据，将数据转换为DOM和CSSOM，通过渲染器把DOM和CSSOM在屏幕上绘制页面。一般
2021-06-02 20:25:11
277
3
原创 手写new、apply、call、bind
// 手写实现new方法// function _new(ctor, ...args) {// let obj = new Object();// //// obj.__ptoto__ = Object.create(ctor.prototype);// // 执行构造函数// ctor.apply(obj, [...args]);// return obj// }// //手写实现apply方法// Function.prototype
2021-06-02 09:46:45
96
原创 RegExp
匹配模式：g-全局、i-不区分大小写、m-多行匹配字面量：var pattern1 = /[bc]at/i;var pattern2 = new RegExp("[bc]at", "i");RegExp属性：global：布尔值，是否设置了g标志ignoreCase：布尔值，是否设置了i标志lastIndex：整数，开始搜索下一个匹配项的字符位置multiline：布尔值，是否设置了m标志source：正则表达式的字符串表示RegExp方法：exec（）：pattern.exec(
2021-05-28 11:14:30
86
原创 手写new方法
new的过程：1.创建一个对象 let obj = {}2.将构造函数的作用域赋给新对象 _class.call(obj)3.执行构造函数的代码，返回新对象 function newMethod(_class,...rest) { // 1.以构造器的prototype为原型创建新对象 let object = Object.create(proto, propertiesObject) //2.改变构造函数的this指向，传入参数
2021-05-21 16:21:08
151
原创 2021-05-17
购物车项目实现语言：css、html、javascript实现框架：vue3使用插件：vue-cil4、vue-router、vue-axios相关组件：swiper、better-scroll实现功能：1.商品内容分块展示2.商品详细信息展示3.商品点击添加购物车4.页面轮播图5.页面滚动效果6.页面吸顶效果7.页面返回顶部功能8.上拉加载功能9.点击跳转功能vue.config.jsmodule.exports = { configureWebpack: {
2021-05-17 12:03:52
70
原创 tcp三次握手、四次挥手
TCP 的握手和挥手TCP 是一个连接导向的协议，设计有建立连接（握手）和断开连接（挥手）的过程。TCP 没有设计会话（Session），因为会话通常是一个应用的行为。SYN：Synchronization，请求同步FIN：Finsh，请求完成PSH：Push数据推送以上 3 种情况，接收方收到数据后，都需要给发送方一个 ACK（Acknowledgement）响应。请求/响应的模型是可靠性的要求，如果一个请求没有响应，发送方可能会认为自己需要重发这个请求。三次握手：1.客户端发消息给服务端
2021-05-16 17:55:43
99
原创 Ajax、跨域请求
Ajax:Asychronous JavaScript XML的简写。可以向服务器请求额外的数据而无须加载页面。请求到的数据格式并不一定是XML。XMLHttpRequest对象：//兼容ie7以上的创建xhr对象var xhr = new createXHR() {//检测原生XHR对象是否存在，如果存在则返回实例。如果不存在则检测ActiveX对象。如果这两种对象都不存在就报错 if (typeof XMLHttpRequest != "undefied") { return new XM
2021-05-15 16:28:58
139
原创 http返回的状态码
continue 继续。客户端应继续其请求101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议。200 OK请求成功。一般用于GET和POST请求201 Created 已创建。成功请求并创建了新的资源202 Accept 已接受。已接受请求，但未处理完成203 Non-Authoritative Information状态码信息100继续。客户端应继续其请求101witching Protocols 切
2021-05-13 21:38:50
202
原创 生成器和迭代器
迭代器：迭代器是被设计专用于迭代的对象，带有特定接口。所有的迭代器对象都拥有 next() 方法，会返回一个结果对象。该结果对象有两个属性：对应下一个值的 value ，以及一个布尔类型的 done ，其值为 true 时表示没有更多值可供使用。迭代器持有一个指向集合位置的内部指针，每当调用了 next() 方法，迭代器就会返回相应的下一个值。//手写迭代器对象 function createInterator() { var i = 0;
2021-05-10 18:35:27
880
原创 Vue-Router
vue-router：通过不刷新当前页面而进行局部更新。1.创建路由// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)// 1. 定义 (路由) 组件。// 可以从其他文件 import 进来const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }// 2. 定义路由/
2021-05-09 14:41:09
161
原创 require.js
1.require.js:JS模块化工具依赖Javascript的AMD规范，define([module-name?], [array-of-dependencies?], [module-factory-or-object]);1）.防止js加载阻塞页面渲染,出现空白页面。2）.使用程序调用的方式加载js，防出现丑陋的场景<script type="text/javascript" src="a.js"></script><script type="text/jav
2021-05-09 11:05:30
835
原创 深、浅拷贝
浅拷贝：创建一个新对象，如果拷贝对象式基础数据类型，复制值给新对象。如果式引用数据类型，复制内存中的地址给新对象。深拷贝：对于引用数据类型，在堆内存中完全开辟一块地址，并将对象复制过来存放。浅拷贝的方法：1.es6中的object.assign()let target = {};let source = { a: { b: 2 } };Object.assign(target, source);console.log(target); // { a: { b: 10 } }; source.
2021-05-04 16:42:44
60
原创 类和继承
工厂函数：inherit（原型对象）:函数返回一个新创建的对象，这个对象继承自某个原型对象通过工厂函数创建并初始化类的实例function range(from, to) { var r = inherit(range.methods); r.from = from; r.to = to; return r;}//range.methods为原型对象，这些方法为每个范围对象所继承range.methods = { includes: function (x) { return th
2021-05-04 15:07:55
69
原创 json
json：只是一种数据格式，并不是一种编程语言是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯。json可以表示三种类型的值：简单值（基本数据类型）、对象、数组1.简单值:json字符串必须使用双引号，单引号会导致语法错误，其他的正常表示。2.对象：json的对象要求给对象的属性加双引号。json也不用声明变量，结尾没有分号3.数组：也不用声明变量，也不用分号结尾。var txt = '{ "employe
2021-05-02 18:18:40
136
原创 eval
eval（）：可以解释运行js源代码组成的字符串，并产生一个值。eval（）是一个函数还是一个运算符eval（）只有一个参数，如果传入的参数不是字符串，它直接返回这个参数，如果传入的是字符串，编译失败则会抛出一个语法错误/syntaxError。eval（）的上下文是调用它的函数。如果给eval()起一个别名，且用另一个名称调用它，那么它的上下文会变成全局。var geval = eval;var x = "global", y = "global";function f() { var x
2021-05-02 13:42:21
75
原创 es6的set、map
ES6加入Set和Map是为了弥补ES5单集合类型的缺点，为了进行非数值类型的索引。Set：不包含重复值的列表。Map：键值对的集合。ES5有模拟set、map的使用，但是存在弊端：1.如果存在一个数值键5和一个字符键5，在进行索引值的时候着两者都是指向的字符5的值，对象转换为默认的字符串的表现形式，时的对象很难被当作Map的键。2.在需要布尔值的时候：let map = Object.create(null);map.count = 1;// 是想检查 "count" 属性的存在性，还是想
2021-04-30 18:50:34
170
原创 Vuex
Vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。状态管理模式包含以下几个部分：state，驱动应用的数据源；view，以声明方式将 state 映射到视图；actions，响应在 view 上的用户输入导致的状态变化。单项数据流：单向数据流的缺点：如果有多个组件共享状态，那么就会破坏它的简洁性。多层嵌套的组件之间传参变的繁琐，兄弟组件之间需要父组件才能间接传参，这样就导致代码的维护性变差。通过Vuex管理共享状态：解决单向数据流的缺点，把需要共享的组件的状态抽离
2021-04-29 18:08:40
202
原创 HTTP Cookie
http cookie ：是服务器发送发送到用户浏览器并保存在本地一小块数据，浏览器会在下次向同一服务器发起请求时被携带并发送到服务器。数据一般是用户的登陆状态。Cookie 主要用于以下三个方面：会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）个性化设置（如用户自定义设置、主题等）浏览器行为跟踪（如跟踪分析用户行为等）Cookie 曾一度用于客户端数据的存储，因当时并没有其它合适的存储办法而作为唯一的存储手段，但现在随着现代浏览器开始支持各种各样的存储方式，Cookie 渐渐
2021-04-29 12:41:14
129
原创 力扣刷题
找出数组中重复的数字。在一个长度为 n 的数组 nums 里的所有数字都在 0～n-1 的范围内。数组中某些数字是重复的，但不知道有几个数字重复了，也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。示例 1：输入：[2, 3, 1, 0, 2, 5, 3]输出：2 或 3限制：2 <= n <= 100000来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/shu-zu-zhong-zhong-fu-de-shu-z
2021-04-28 16:28:32
124
原创 iframe
****HTML内联框架元素 () 表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。属性：allow：用于为指定其特征策略。allowfullscreen：设置为true时，可以通过调用 的 requestFullscreen() 方法激活全屏模式。allowpaymentrequest：设置为true时，跨域的 就可以调用 Payment Request API。csp：对嵌入的资源配置内容安全策略。 查看 HTMLIFrameElement.csp
2021-04-27 20:02:39
263
1
原创 严格模式
严格模式：采用具有限制性JavaScript变体的一种方式，从而使代码显示地 脱离“马虎模式/稀松模式/懒散模式“（sloppy）模式。严格模式不仅仅是一个子集：它的产生是为了形成与正常代码不同的语义。不支持严格模式与支持严格模式的浏览器在执行严格模式代码时会采用不同行为。所以在没有对运行环境展开特性测试来验证对于严格模式相关方面支持的情况下，就算采用了严格模式也不一定会取得预期效果。严格模式代码和非严格模式代码可以共存，因此项目脚本可以渐进式地采用严格模式。严格模式对正常的 JavaScript语
2021-04-27 19:19:31
225
1
原创 XML
XML：Extensible Markup Language，是一种可扩展标记语言。1.xml可以传输和存储数据，html是显示数据设计数据的外观。2.xml是结构化、存储、传输信息，没有作为的。3.xml没有预定义标签，html中的是自己定义的。4.通过xml，数据可以被各种设备、平台复用，可以在不同系统之间进行数据传输。5.xml把html的数据进行了分离，通过js进行读取。<?xml version="1.0" encoding="ISO-8859-1"?>XML标签XML
2021-04-26 15:15:09
72
原创 原型链
通过New生成的对象：var fun1 = new Function();fun1.proto //{constructor: ƒ}fun1.prototype //undefinedfun1.proto.prototype //undefinedfun1.proto.proto //{a: ƒ, constructor: ƒ, defineGetter: ƒ, defineSetter: ƒ, hasOwnProperty: ƒ, …}fun1.proto.proto.pr
2021-04-25 17:51:49
34
原创 隐式转换
1.转成string：+2.转成Number：++/–、±*/、> < >= <= == != === !===3.转换成boolean：！1 + "true" // "1true" 数字与字符转字符，数字与其他转其他1 + true //2 1 + undefined //NaN1 + null //1"2" > 10 //false "2" > "10" //true"abc" > "aad" //trueN
2021-04-25 15:13:22
152
原创 css3
边框border-image 设置所有边框图像的速记属性。 3border-radius 一个用于设置所有四个边框- -半径属性的速记属性 3box-shadow 附加一个或多个下拉框的阴影 3圆角border-radius：1px 1px 1px 1px；50%和100%效果一样，100超过boder时重绘背景background-clip 规定背景的绘制区域。 3background-origin 规定背景图片的定位区域。 3background-size 规定背景图片的尺寸。 3b
2021-04-23 17:52:42
45
原创 flex
弹性布局：flex弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。1.direction：rtl; 弹性子元素的方式也会改变2.flex-direction： row | row-reverse | column | column-severse；子元素在父元素的位置。3.justify-cont
2021-04-23 17:09:15
59
原创 闭包
var scope = "global scope" function checkscope() { var scope = "local scope" function f() {return scope} return f() } // 这里将嵌套函数f()的返回值保存在checkscope()的返回值里 //这里的f()的作用域链在执行完return ...
2021-04-22 20:37:35
52
原创 callee
callee和caller属性：实参对象的属性，这个属性指代当前正在执行的函数，通过calllse属性可以访问调用栈。 var factorial = function(x) { console.log(arguments.callee); } factorial()//ƒ (x) {console.log(arguments.callee); }...
2021-04-22 19:56:08
90
原创 2021-04-22
音频、视频//h5新增标签 <Header>我是头部</Header> <Nav>我是导航</Nav> <Article>我是文章</Article> <Section>我是章节</Section> <Aside>一个链接</Aside> <Footer>我是页脚</Footer>// input的h5增强
2021-04-22 19:34:21
49
原创 js手写实现日期格式化
var date = new Date(); console.log(date);//Thu Apr 22 2021 14:12:21 GMT+0800 (中国标准时间) //这里定义两个参数，一个日期，一个格式化格式 function formateDate(date, fmt) { //对年格式化，利用正则表达式匹配y的个数，然后再截取对应的年的位数 //因为年是四位，所以单独进行 if (/(y...
2021-04-22 14:23:10
539
原创 数组排序
1.冒泡排序算法思想：比较相邻元素，进行排序。每次白遍历会冒泡一个最大或最小值（这取决于你是降序还是升序），然后每次对除过冒泡出去的元素外再进行遍历。 let arr = [23, 34, 3, 4, 23, 44, 333, 1]; function bubbleSort(arr) { for (let i = 0; i < arr.length - 1; i++) { for (let j = 0; j..
2021-04-19 21:17:37
77
原创 数组扁平化
数组扁平化：将多维数组转化为以一维数组方法一：递归var a = [1,[2,[3,4,5]]];function flatten(a) { let result = []; for (let i = 0; i< a.length; i++) { if (Array.isArray(a[i])) { result = result.concat(flatten(a[i])) }else{ result.push(a[i]) } }}//对数组每一项进行遍历，对于
2021-04-18 20:57:10
67
原创 类数组
类数组：函数里面的参数arguments；用getElementsByTagName/className/Name得到的HTMLCollection；通过querySelector获得的NodeListargumennts有一个length属性表示长度、callee属性返回参数的函数，调用这个方法会不停的执行当前函数直到执行到内存溢出。HTMLCollection是DOM对象的一个结构，包含了DOM元素集合，文档DOM的更新也会更新它。NodeList对象是节点的集合。这些类数组可进行的操作
2021-04-18 20:06:16
380
原创 字符串、数字、数组的简单操作方法
String方法： var str = "abcabc"; console.log(str.length); //返回字符串长度，属性 6 console.log(str.indexOf("b")); //返回字符串出现的第一个字符的位置 1 console.log(str.lastIndexOf("b")); //从右边开始字符串出现的第一个位置 4 console.log(str.search("bc")); //1
2021-04-12 20:07:41
138
原创 防抖、节流
防抖在输入框输入时避免频繁的请求数据在拉伸窗口时避免频繁设定大小//这里的fnc是需要防抖的函数，delay是隔一段事件执行一次这个函数//setTimeOut里的事件会被放在队列里，当在delay时间里重复触发这个事件时，新事件在进入队列时会清除掉上次进入队列的事件，等到delay时间后队列里只有一次该事件，实质上是在一段时间里将多次相同的请求合并成了一次。function debounce(fnc, delay) { var timer = null; return funct
2021-04-12 16:49:23
64
原创 变量、变量的引用以及作用域
变量：js变量的本质是一个特定时间里保存特定值的名字，它的类型可以在生命周期里改变。基本数据类型：Undefined、Null、Bollean、Number、String、symbol（es6新增）引用数据类型：object（Array、RegExp、Date、Math、function）基本数据类型复制：将值拷贝一份赋给变量，改变一个值对另外一个没有影响引用类型复制：复制栈中堆内存地址给变量，新变量和旧变量指向同一个对象，改变对象里的属性会影响其他变量的引用。函数的参数传递都是值传递（参数的本质
2021-04-11 23:37:27
272
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人