- 博客(46)
- 收藏
- 关注
RSS订阅原创 setState是同步还是异步
在工作中或者面试时都会碰到 setState 的一些问题。今天我们就这些问题来看下 setState。用过 react 的都知道，修改 state 唯一的办法就是 setState方法，而不是直接修改state值。而在 react 中 setState 的执行是"异步"的，是"批量"的，而不是"同步"的。这是因为在调用 setState 之后 react 并没有立即更新，而是缓存起来了，等事件完成之后，在进行批量更新，一次更新之后并重新渲染，避免多次渲染组件。接下来看下在那种情况为同步？那种情况.
2021-02-25 18:46:13
1501
1
原创 设计模式之 - 原型模式（创建型设计模式）
原型模式 将原型对象指向创建对象的类，使这些类共享原型对象的属性和方法。这是基于 JS 原型链实现对象之间的继承，这种继承是一种属性或方法的共享，而不是对属性和方法的复制。在创建的类中，存在基类，其定义的属性和方法能被子类继承。原型模式将可复用的、可共享的、耗时较长的从基类中提出来放在基类的原型中，然后子类通过组合继承或寄生组合式继承把属性和方法继承下来，对于子类中那些需要重写的方法进行...
2020-04-24 10:33:18
139
原创 设计模式之 - 单例模式（创建型设计模）
单例模式又称为单体模式，只允许实例化一次的对象类，有时候我们也用一个对象来规划一个命名空间，以便管理对象上的属性和方法。命名空间 也有人称为名称空间，用来约束每个人定义的变量以避免所有不同的人定义的变量存在重复导致冲突的。单例模式例子var Ming = { g:function(id){ return document.getElementById(id); }, c:func...
2020-04-24 10:33:11
188
原创 设计模式之 -观察者模式(行为设计模式)
文章中的例子和思路均来自《JavaScript 设计模式》观察者模式观察者模式，又被称为发布-订阅模式和消息机制，定义了一种一对多的关系，让多个观察者同时监听对象主体，并且该主体对象的状态改变时就会通知所有的观察者对象。充分解决了主体对象和观察者之间功能的耦合度。理解观察者模式利用卫星监控监控信息这个例子来说，卫星发射就像是一个观察者或者说是一个消息系统，让卫星给飞机导航，那么飞机就是...
2020-04-24 10:32:20
156
1
原创 React 的生命周期变化
React 从 v16.3 开始，对生命周期进行了渐进式的调整。废弃了一些生命周期方法和添加了一些新的生命周期方法。新的生命周期新的生命周期React 逐渐废弃的生命周期方法componentWillMountcomponentWillReceivePropscomponentWillUpdate虽然废弃了这几个生命周期方法，但是 React 为了遵循版本兼容，所以 v16.3 ...
2019-11-26 17:00:56
331
原创 严格模式
定义变量严格模式下不能忽略关键字直接定义变量"use strict";let m = 1; //m is not defineddelete 属性// delete m //Delete of an unqualified identifier in strict mode.console.log(m);函数严格模式下，函数参数不能是相同的名字，并且修改参数的值不能反映到arg...
2019-08-02 16:20:10
172
原创 箭头函数和普通函数的区别
区别箭头函数和普通函数之间最关键的区别是this指向问题。普通函数中的 this 指向函数被调用的对象，因此对于不同的调用者，this 的值是不同的。箭头函数中并没有自己的 this ，所以箭头函数中的 this 是固定的，指向定义函数时所在的对象。普通函数var a = 3;var obj = { a:1, foo:function(){ console.log(this.a)...
2019-08-02 14:31:17
155
原创 剩余参数和分布参数
函数参数剩余参数和分布参数不使用 arguments 对象也可以获取函数传入的可变量的参数。剩余参数的语法就是**…和一个标识符**，使用这种语法定义可以接受传进来的更多参数，把他们收集在一个数组中（不是类数组哦）。function fn(sum,...sums){ // 这里的剩余参数名不能和参数名 名称一样哦 console.log("sum",sum,"...",...sums)}...
2019-07-31 19:57:06
330
原创 防止篡改对象的属性或方法
防止一些共享代码或者 JavaScript 库被人有意无意的修改了核心代码等。1. 不可扩展的对象 Object.preventExtensions()let obj = {name:"k&k"};Object.preventExtensions(obj);obj.name // "k&k"obj.age = 2;obj.age // undefinedobj.n...
2019-07-26 15:13:37
454
原创 JSON
JSON 表示一种结构化数据格式。JSON 数据可以是字符串、数值、布尔值、null、对象、数组。JSON 中没有不支持变量，函数，Undefined 和对象实例以及来自原型和分号。JSON 中的数组类型采用字面量的形式，而对象中的属性名在 JSON 中必须带有双引号,在 JSON 中只能只用双引号。{ "name":"K&K", "home":["hsy","97"]}...
2019-07-24 16:32:41
109
原创 JavaScript错误处理
try-catch 语句try-catch 语句用作于处理 JavaScript 中异常的一种方式。try{ //可能存在错误的代码}catch(error){ //在发生错误时如何处理}try 块中的任何代码发生错误，都会立即退出代码的执行过程，然后紧接着执行 catch 块，此时，catch 块会接受到一个包含错误信息的对象，这个对象中保存着错误信息的 message 属性。当...
2019-07-23 11:29:03
722
原创 表单
基础基本属性acceptCharset - 服务器能够处理的字符集action - 请求的URLelements - 表单中所有元素的集合enctype - 请求的编码类型length - 表单中元素的数量method - 要发送的 HTTP 请求类型name - 表单的namereset() - 重置为默认值submit() - 提交表单target - 用于发送请求和接...
2019-07-12 14:35:38
125
转载 修改滚动条
css3修改滚动条的样式修改某个div的滚动条默认样式：#search-list::-webkit-scrollbar-track{ border-radius: 10px; background-color: #F5F5F5;}#search-list::-webkit-scrollbar{ width: 14px; background-color: #F5F5F5;}...
2019-07-12 11:01:06
158
原创 DOM
DOM节点类型类型nodeTypenodeNamenodeValue元素节点1node标签名称文本节点3#text文本内容注释节点8#comment注释内容属性节点2属性名属性值Document 对象document 对象是 HTMLDocument 的一个实例，表示整个 HTML 页面。而且 document 是 win...
2019-07-08 14:11:32
739
原创 BOM
locationlocation 对象中保存着一些浏览器信息，并且还将 URL 地址解析为独立的片段，方便开发人员使用。是 window 对象也同样是 document 对象。属性名例子说明hash“#name”返回 URL 中 # 号后面的一个或多个字符串，没有则返回空host“10.62.30.157:9090”返回服务器名称和端口号（端口号没有则不显示...
2019-07-05 15:22:36
195
原创 谈谈 js 中的继承
继承ECMAScript 只支持实现继承，并且其继承主要是依靠原型链来实现的。就是把一个构造函数的原型复制了一份给需要继承的原型上。原型链利用原型链作为继承的主要思想就是：利用原型让一个引用对象去继承另一个引用对象的属性和方法。比如，把 B 的一个实例给了 A 的原型。那么 A 的原型就包含了 B 上面的一些方法和属性。A 的实例也可以使用这些属性和方法。function Sup(){...
2019-07-03 17:51:03
145
原创 objec 创建对象的模式有那几种
工厂模式利用函数封装，减少代码重复问题function Cat(name,color){ var o = new Object(); o.name = name; o.color = color; return o;}//相当于调用函数 Catvar cat1 = Cat("大毛","黄色");var cat2 = Cat("2毛","白色");ca...
2019-06-27 13:59:21
130
原创 Object 以及 object 的属性类型
属性类型数据属性修改获取属性值时[[Configurable]] ：是否能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，能够把属性改为访问器属性。能够直接在对象上定义的属性，默认值是true。[[Enumerable]] : 能否通过 for-in 循环返回属性。能够直接在对象上定义的属性，默认值是true。[[Writable]] ： 能否修改属性的值，能够直接...
2019-06-27 12:51:53
3228
原创 预解释和作用域
预解释的机制：带var的关键字和function关键字都会进行预解释预解释：（一种毫不节操的机制）在JS代码之前，首先找到所有带var关键字和function关键字的，提前声明（declare）或者定义（defined）var：在代码执行之前只是先声明（默认值是Undefined）然后代码才开始从上向执行定义赋值这一步function：在代码执行之前把声明个定义两部分都完成了，代码执行的过...
2019-06-24 11:03:55
89
原创 JavaScript - 函数
Function 类型每个函数都是 Function 类型的一个实例，与其他引用类型一样具有属性和方法。函数也是对象。所以，函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。函数中没有重载的概念。强类型语言中存在重载的概念，但是 JavaScript 是弱类型语言，不存在重载的概念。何为重载？比如说，2个一样的函数，后面的函数不会覆盖前面的函数，并且当调用一个函数时，能够全执行...
2019-06-24 10:59:39
99
原创 正则
方法捕获reg.exec(str)exec只能捕获一次 如果没有符合的返回null匹配reg.test(str)此方法仅仅是检查是否能够匹配，匹配成功返回true，不成功返回falsematch 字符串的方法匹配正则表达式，将符合条件的返回成数组str.match(ref)—于正则表达式的exec方法类似，该方法同样返回一个数组，返回值上也有input和index属性r...
2019-06-14 11:40:05
165
原创 JavaScript - 变量的区别和作用域以及垃圾回收的机制
基本变量和引用变量的区别基本变量指简单的数据段，由 Undefined、Null、Boolean、Number、String。5种基本类型按值访问。可直接操作保存在遍历的值。引用变量指由多个值构成的对象，引用类型值是保存在内存中的，操作时，实际操作的是对象的引用而不是实际的对象。对于引用类型可以为其添加属性和方法，也可以改变或删除属性和方法。复制变量值基本变量当一个变量复制基本变量...
2019-06-13 14:17:58
171
原创 JavaScript 基本概念
JavaScript的实现ECMAScript 核心DOM 文档对象模型BOM 浏览器对象模型ECMAScript语法类型语句关键字保留字操作符对象
2019-06-10 19:05:33
98
原创 数据结构与算法 - 二叉树
啥是树"树"这种数据结构和我们生活中的树很像。里面的每个元素我们都称为节点，用线来连线相邻节点之间的关系，我们叫做父子节点。树的结构跟 HTML 的结构是一样的。比如下面这幅图，A 节点就是 B 节点的父节点，B 节点就是 A 的子节点。B C D 的节点都是同一个节点，所以他们之间互称为兄弟节点。我们把没有父节点的节点叫做跟节点，比如图中的 E。没有子节点的叫做叶子节点或者叶节点，比如...
2019-06-03 16:41:01
523
原创 Generator 生成器函数
Generator 函数语法Generator 函数是ES6提供的一个生成器执行Generator函数会返回一个迭代器(是一个对象)，该迭代器上有个next方法，调用next后返回2个属性value和done ，done值为true/flase，true表示没有迭代完，value值是 yield的返回值定义Generator和普通函数定义时一样，唯一不同就是在function后面添加*，因...
2019-05-31 10:13:18
302
原创 二分查找
二分查找二分查找是一种需要以有序的元素列表为基本，搜索某个元素，如该元素包含在此列表中，则返回该元素索引，不在则返回null。原理：每次都从中间的数值开始查找，如果和查找的数值比大小，这样不论大了还是小了。都会排掉一半的数值。对数对数是幂运算的逆运算例如：几个10相乘是100， 2个10相乘就是100，10*10= 100，2 就是对数大O表示法大O表示运行时间，因...
2019-04-24 17:48:02
156
原创 node 基础
node为什么要学node？node是JavaScript来写的node就是让我们js的代码运行上服务端的运行池，可以让我们的代码跑在服务端上，这是它的好处。node 特点提供简单的，创建高性能服务器的开发工具单线程(js特点)，异步的因为node里面写了一个libuv调用的时候可以支持异步或同步node写服务端的优势单线程的主线程代码应该写的不复杂，不适合cup...
2019-03-05 17:29:26
216
原创 DOM总结
DOM节点类型...类型 nodeType nodeName nodeValue 元素节点 1 node 标签名称 文本节点 3 #text 文本内容 注释节点 8 #comment 注释内容 属性节点 2 属性名 属性值 ...
2019-03-05 17:27:39
597
原创 webpack
Webpackwebpack 就是模块打包，帮助我们打包代码和解析一些浏览器不能直接运行的语言。例如Scss,TypeScript…webpack 需要一个入口文件，把所有的文件都关联在一起，然后进行打包。默认webpack只支持js。像Scss 或者是 Image这种需要添加转换器来做处理。webpack 的功能转换代码：把TypeScript、es6 等不能被浏览器支持的编...
2019-02-18 19:45:21
165
原创 React之路由
路由安装先用create-react-app生成一个react项目进入该项目安装包 react-router-dom分为2种模式：hash(哈希)，browser(浏览器的那种，H5提供的API)认识路由路由模块，需要一个路由容器，标识着使用了那种模式的路由import {容器} from "react-router-dom";// 容器中存放的就是路由：HashRouter...
2019-01-15 16:12:03
10269
1
原创 React基础
React的注意点一般采用import的方式引入React，React首字母规定大些，因为jsx会继承大写的React会根据尖括号(<)来判断是一个html，根据花括号({)来判断是一个jsjs中的保留字 关键字会进行转化 class=>className for=>htmlForreact相邻的jsx元素，react元素，必
2019-01-15 16:08:38
10176
3
原创 node的EventLoop
nodenode中this的问题？在node中，this是global。global就是全局对象，但是默认打印的this 是{},不是global，但是用一个函数里面打印的this就是global，因为node 有模块化的概念。在模块化，this是被改写的console.log(this);//{}function a(){console.log(this)}a()//golab...
2018-12-25 15:46:29
336
原创 http
http 是基于tcp的。http 头信息的作用http 常见的状态码206 一般叫范围请求，断点续传304 服务器实现缓存（强制缓存，对比缓存）401 没有权限，jwt，权限校验常用请求方式getpostputdeleteurllet url = require(“url”)let str = ‘https://username:password@www.baidu.c...
2018-12-13 17:46:12
122
原创 浏览器中的eventLoop
堆与栈我们的数据会在栈(stack)中执行，但是还有一些数据会存在堆(heap)stack: 就是主线程和任务被执行的地方heap: 就是我们一些费结构化数据，例如变量…宏任务 & 微任务宏任务(MacroTask)&&宏任务队列宏任务总是在下一个eventLoop执行，在微任务之后，在执行宏任务中如果添加了新的微任务，会把新的微任务添加到微任务的队列中。...
2018-12-04 16:34:42
239
原创 Promise
Promise什么是Promise？Promise 在英文中的意思是承诺。在程序中表示，承诺在一段时间后给出结果。Promise 是解决异步编程的一种方案。Promise 由社区最早提出和实现，在ES6中归入语言标准，so Promise 是原生自带的我们为什么要需要 promise回调地狱回调地狱-> 在需要多个操作的时候，会导致我们的函数内部嵌套多个函数，导致代码不够...
2018-12-02 21:07:59
198
原创 css3 动画 @keyframes 和 animate
@keyframes 和 animate @keyframes 用来改变动画的轨迹或效果(利用某项css 创建所需动画) keyframes说明：需要创建一个名字，这个动画的名字，后面绑定动画时会需要 form 起始时,等同于 0% to 到达终点时，等同于100%@keyframes leftMove{ from{ margin-lef...
2018-10-31 15:08:48
2212
原创 何为闭包
IIFE 就是自执行函数，也就是闭包。闭包 --> 在某个函数内部定义了其他函数时，就创建了闭包。闭包的特点：函数嵌套函数 内部函数可以获取外部(函数)变量 参数和变量不会被注销(回收)下面的 2 个例子说明，在函数内部是可以获取全局变量，但在函数外部无法获取函数内部的变量var n=999;function f1(){ alert(n);}f1...
2018-09-12 10:33:15
162
原创 Javascript - 事件
概念事件就是用户或浏览器自身执行的的某种动作，而响应某个事件的函数。以“on” 开头。如：onclick、onload ...而影响某个事件的函数就叫做事件处理程序/事件侦听。事件流从页面中接受事件的顺序。但 IE 和标准浏览器的事件流水相反的，IE 的事件流是事件冒泡，标准浏览器的事件流水事件捕获。事件捕获从页面的顶级一层层接收事件，真是的事件节点是最后接收的。...
2018-08-31 14:32:10
136
原创 客户端检测
能力检测：在编写代码之前先检测浏览器的能力，在脚本调用某个函数之前，先检测该函数是否存在，如：document.getElementById 怪癖检测：怪癖是浏览器实现上的一个bug 用户代理检测：用过检测用户代理字符串来识别浏览器。用户代理字符串中包含了大量与浏览器有关的信息，包括了浏览器，平台，操作系统以及浏览器版本，通过用户代理检测字符串能够检测出浏览器所用的呈现引擎...
2018-08-30 15:57:28
94
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人