- 博客(34)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 React Fiber
Fiber是React 16.8.0-alpha.1版本中引入的新概念。Fiber是一个执行单元，每次执行完一个执行单元，React会检查现在还剩余多少时间，如果没有时间就会将控制权进行转让。
2023-12-22 22:32:38
852
原创 React中的TodoList案例
学完useReducer之后再来一个版本，这个版本理解起来比较麻烦，但是相信大佬应该没有看不懂的。首先这样做的好处是状态集中式管理，物理逻辑与视图逻辑解耦，代码的可维护性更高，其实当我们所处理的逻辑更加复杂的情况下可以写一个工具函数专门用于处理datalist数据,这样子我们只需要在相应的时机去调用就好了,代码也不会很长,这里我就不做处理了,也是刚学习React16版本之后,后面有案例也会更新在这里.样式我用的是Tailwindcss，不想引入第三方库了，还希望大佬多多担待，慢慢学习中......
2023-12-21 21:17:20
396
原创 Vue 中 Render 函数的模拟
Render 函数是 Vue2.0 新增的特性，它允许你利用 JavaScript 的编程能力，创建动态的虚拟 DOM，并将其渲染为真实 DOM。
2023-09-08 14:20:43
120
原创 封装一个可编辑的表单，用于统计月度计划
在工作中要在表单中插入表格，在不使用第三方组件库的情况下如何完成，基础不行，写的一般，如果有好的优化思路还希望能够私聊
2023-07-23 11:54:22
48
原创 canvas基础
canvas是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。右边的图片展示了一些 的实现示例，在这个教程后面我们将看到。canvas本质上就是在页面上制作一个画布，使用js代码绘制图形、动画。
2022-10-10 11:30:05
711
1
原创 ES6变量的解构赋值（阮一峰）
上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口（前五个表达式），要么本身就不具备 Iterator 接口（最后一个表达式）。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值（Desrtructuring）。另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。上面代码表示，可以从数组中提取之，按照对应的位置，对变量赋值。
2022-10-08 17:18:33
96
原创 TS——成员修饰符
一些面向对象编程语言（Java, C++）中都有成员修饰符特性，TypeScript 也引入成员修饰符。这些修饰符实现了对象成员的访问控制。
2022-09-29 17:07:57
344
原创 ts语法基础——基础类型
针对不定个数参数的函数时，我们可以使用 ES6 提供的 rest 参数来处理。TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。类型断言（Type Assertion）可以告诉编译器，“相信我，我知道自己在干什么，别报错，出了事我负责”。TypeScript 能够根据返回语句自动推断出返回值类型，因此我们通常省略返回值的类型。TS 会在没有明确的指定类型的时候推测出一个类型。现在我们已经为函数指定了类型，下面让我们写出函数的完整类型。
2022-09-29 17:07:11
1007
原创 git解决拉取代码本地代码未提交
3.使用 git stash pop 去除本地未提交的更改。1.使用 git stash暂存未提交的本地更改；2.使用 git pull 拉取远程仓库代码；
2022-08-11 21:02:44
2062
原创 项目开发规范
EslintEslint是一个开源的JavaScript代码检查工具，由NicholasC.Zakas于2013年创建。代码检查是一种静态分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对于大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。JavaScript是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找JavaScript代码错误通常要在执行过程中不断调试。像Eslint这样的可以让程序员在编码过程中快速发现问题而不是在执行过程中。...
2022-07-15 16:47:50
318
原创 Git基本使用
Git是一个开源的分布式版本管理系统；Git是由Linus开发用于管理和维护Linux内核源码；Git是目前世界上最先进的分布式版本管理系统。在我们的实际开发过程中，经常会有这种需求或问题我们需要在已经发布的程序中添加新的功能，如果测试验证后没有问题，才会使用新的代码，而在测试验证期间，不能影响原来的代码。我们常用的方式应该就是备份多份源代码。这么做唯一的好处就是简单，但是特别容易犯错。实际项目开发基本都是多个人合作完成，在多个人写代码时，就牵扯到代码合并成一份的问题。每个人修改或者维护之后会产生一个
2022-07-12 22:53:38
235
1
原创 敏捷开发相关
相比于传统的开发模式，敏捷开发的效率更快，开发成本更低（由于迭代反馈的不断进行，避免了大量的返工），能够快速抢占市场，缩短快发周期Product Owner——产品负责人产品经理确定产品的方向和愿景，定义产品发布的内容、优先级及交付时间，是维护产品需求清单的人。Scrum Mster——团队负责人敏捷教练是团队的导师和组织者，及时为团队成员提供帮助。促使团队按照迭代的方式运行，屏蔽外界对开发团队的干扰，为迭代过程负责的人，是公约的执行者。Scrum Team ——开发团队（包括设计师、开发人员、测试人员
2022-07-11 09:20:22
54
原创 静态属性和静态方法
我们可以把一个方法作为整体赋值给一个类。这样的方法就被称之为静态的(static)。在一个类中，需要通过static 关键字对该方法进行静态说明：上述操作其实等同于直接将其作为属性赋值：在Person.sayName()调用的this的值就是类构造器Person本身。通常，静态方法用于实现属于整个类，但不属于该类任何特定对象的函数。例如，我们有一个对象Articel，并且我们需要有一个方法来比较它们。通常的解决方案就是添加一个Articel.compare静态方法：这里的Article.comp
2022-07-06 15:22:40
1006
原创 CSS的BFC——块级格式化上下文
BFC的基本概念:BFC是CSS布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素。父子元素和兄弟元素边距重合，重叠原则是取最大值。空元素的编剧重叠是取margin与padding的最大值。...
2022-06-28 17:02:52
89
原创 css属性继承
CSS的继承：就是给父级设置一些属性，子级继承了父级的该属性。官方解释：继承是一种规则，它允许样式不仅用于特定的html标签元素，而且应用于其他后代元素。font：组合字体font-family：规定元素的字体系列font-weight：设置字体的粗细font-size：设置字体的尺寸font-style：定义字体的风格font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写 字体的字母与其余文本相比，其字体尺寸更小。font-stretch：对
2022-06-28 16:21:15
1214
原创 JavaScript----Promise
需求：通过ajax请求id，再通过id请求用户名,再根据用户名获取用户的联系方式Promise的出现就是为了解决回调地狱的问题。Promise本质是一个构造函数，可以通过 “new”关键字实例化对象Promise接受一个函数作为参数;再这个函数中可以接受两个参数resolve和rejected:resolve:如果任务成功完成并带有结果 value。reject:如果出现了 error，error 即为 error 对象。Promise实例属性：state：状态pendin
2022-06-25 14:36:31
229
原创 JavaScript——闭包
闭包 指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的。 ——摘录自《JavaScript高级程序教程》二、闭包的产生条件当前函数执行会形成一个私有的执行上下文，函数执行完毕之后，这个私有执行上下文中的某些变量或方法被该上下文以外的上下文所占用，导致该函数私有上下文无法被释放从而就形成了所谓的————闭包可以读取或储存函数内部的变量；可以用于封装私有变量；三、闭包的缺点由于闭包会使得函数中的变量都被保存在内存中，内存消耗很⼤，所以不能滥⽤闭包，否则会造成⽹页的
2022-06-24 21:48:56
131
原创 vue双向数据绑定的原理
Vue2.0的数据响应是采用数据劫持结合发布者—订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter、getter。不能监听到数组的变化vue在实现数组响应式时，它使用了一些hack，把无法监听数组的情况通过重写数组方法来实现响应式，这也只限于在数组的push、pop、shift、unshift、splice、sort、reserve这七个方法，其他数组方法及数组的使用则无法检测到。例如：Vue实现数组响应式的方法：通过重写数组Array.pro
2022-06-21 13:18:06
483
原创 node模块化与中间件
在Node.js中，中间件主要是封装所有的Http请求细节处理的方法。一次Http请求通常涵盖了很多的工作（记录日志、ip过滤、查询字符串、请求体解析、Cookie处理…）,但是对于Web而言，并不希望接触到这些处理，因此我们需要引入中间件来简化和隔离这些基础设施与业务逻辑之间的细节，让开发者能够关注在业务开发上，以此来提高开发效率。中间件的行为类似于axios中的拦截器，在正式进入逻辑业务之前可以让拦截器进行处理。中间件机制核心实现4中间件时从Http请求发起到响应借书过程中的处理方法，通常要对请求和
2022-06-21 12:24:46
166
原创 HTTP 和HTTPS
HTTP: 是互联网上应用最为广泛的一种网络协议，是一个而护短和服务端请求和应答的标准（TPC），用于从WWW服务器传输超文本到本地浏览器的传输协议，使网络传输减少。HTTPS： 是以安全为目标的HTTP通道，简单理解为HTTP的安全版，即在HTTP下加入SSL层，HTTPS的安全基础就是SSL，因此加密的详细内容就需要SSL。HTTPS协议的主要作用：Get请求的目的是给予服务器一些参数,以便从服务器获取列表.例如:list.aspx?page=1,表示获取第一页的数据Post请求的目的是向服务器发送一些
2022-06-14 12:13:39
88
原创 js工作原理以及暂时性死区
事件循环概念： 在JavaScript中的事件循环简单理解就是js引擎的状态无限转换（等待任务=> 执行任务 => 进入休眠 => 等待任务)当我们从外部引入一个js文件时，js引擎会先对文件进行加载；加载完成之后执行的一个任务，然后进入休眠状态等待下一个任务下发继续执行…如果有setTimeOut任务（异步）时会有什么样的事情发生呢？从时间循环的概念我们可以看出，JavaScript在执行时会形成一个队列，先进入队列的任务会率先执行，后进入的只能等待前面的任务执行完毕之后在执行。这个队列被称之为 宏任务
2022-06-13 18:55:56
210
原创 js事件循环
事件循环概念： 在JavaScript中的事件循环简单理解就是js引擎的状态无限转换（等待任务=> 执行任务 => 进入休眠 => 等待任务)当我们从外部引入一个js文件时，js引擎会先对文件进行加载；加载完成之后执行的一个任务，然后进入休眠状态等待下一个任务下发继续执行…如果有setTimeOut任务（异步）时会有什么样的事情发生呢？从时间循环的概念我们可以看出，JavaScript在执行时会形成一个队列，先进入队列的任务会率先执行，后进入的只能等待前面的任务执行完毕之后在执行。这个队列被称之为 宏任务
2022-06-13 13:36:38
85
原创 浏览器存储数据
共同点：都是存储在浏览器中且都是同源的。区别：cookie数据始终咋同源的http请求中携带（即使不需要），也就是说cookie实在浏览器和服务器之间来回传递，而sessionStorage和localStroage仅仅在浏览器本地保存。cookie数据拥有path（路径）的概念，可以限制cookie只属于某个路径下。 三者的存储大小也不相同 ，一般来讲cookie的数据不能超过4k，因为每次的http请求都会携带cookie数据，如果太大就会造成性能上的损耗。sessionStroage和localSt
2022-06-13 12:29:11
666
原创 javascript中继承的几种方式
在实际编码的过程中，如果有很多类似的方法都存放于构造函数中，这样会导致内存的浪费（内存泄漏），在这种情况下我们就需要用到继承。所谓继承就是通过某种方式让一个对象可以访问到另一个对象中的属性和方法。通过实例化一个函数使子类的原型指向父类的实例，子类就可以调用到父类的属性和方法。代码实现如下：要注意的问题1.不要忘记默认的类型：在js中所有的引用类型都继承了Object，而继承也是通过原型链实现的。所有存在于Object原型对象上的方法同样也存在。比如：hasOwnProperty()、toString(
2022-06-12 17:33:47
3816
原创 ES6语法之——class
在面向对象的编程中，class 是用于创建对象的可扩展的程序代码模版，它为对象提供了状态（成员变量）的初始值和行为（成员函数或方法）的实现。使用场景：在日常开发中，我们经常需要创建许多相同类型的对象，例如用户（users）、商品（goods）或者任何其他东西。正如关键字new可以帮助我们实现这种需求。但在现代 JavaScript 中，还有一个更高级的“类（class）”构造方式，它引入许多非常棒的新功能，这些功能对于面向对象编程很有用。基本语法：然后我们使用new MyClass()来创建拥有上述方
2022-06-12 14:46:49
640
原创 浅谈操作符new
场景：我们经常需要创建很多类似的对象，例如多个用户或菜单项等。这可以使用构造函数和 操作符来实现。构造函数：构造函数在技术层面上来说也是一种常规函数，只不过在使用过程中有两个约定：那么当我们使用new关键字的时候都都经历了哪些步骤呢？注意：new关键字后面的构造函数不能是箭头函数——（详情查询this指向文章）......
2022-06-12 13:45:02
87
原创 手写JS防抖和节流（面试高频）
什么是防抖？首先我们想象一下这个场景，如果在一个区域内设置鼠标移动事件，那一旦我们将鼠标移入这个区域内，这个事件就会被持续触发，导致每次改变都会重新渲染一次页面让性能损耗很大，这种情况下我们就需要用到防抖，那究竟什么是防抖呢？ 触发高频事件后一段时间内函数只会执行一次，如果这段时间内高频事件再次被触发，则重新计算时间；上述代码中在3s内如果触发了onmousemove时间就会清除定时器重新开始计时。防抖使用应用场景：什么是节流？在一段时间内一直触发某个函数，每隔一段时间该函数只执行一次。通常我们实现
2022-06-12 12:14:14
180
原创 js中的this指向
他们的作用都是用于改变this的指向问题，可是具体有什么区别呢？call方法：改变函数内部的this指向，call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的this指向。 上述代码中使用了call（）来实现了继承，第一个参数为想要指向的对象。apply方法：apply()方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的this指向。我们可以使用apply方法来求出数组中最大值：apply方法有两个参数：this指向。（this可能不是该方法看到的实际值：
2022-06-12 11:49:36
56
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人