前端JS\TS
关注
分享
扫一扫
文章平均质量分 72
小白6402
这个作者很懒，什么都没留下…
展开
-
深入理解React Hooks
前言：Hook 是 React 16.8的新增特性。它可以让你在不编写 class 的情况下使用state以及其他的 React 特性。即react hook只存在于函数组件中，在类组件中不受用.1.首先为什么要使用Hook？动机Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。无论你正在学习 React，或每天使用，或者更愿尝试另一个和 React 有相似组件模型的框架，你都可能对这些问题似曾相识。痛点问题：1.在组件之间复用状态逻辑很难a.之前的解决方案是原创 2021-11-24 17:25:31 · 1575 阅读 · 0 评论 -
react Hook的简单理解
对于钩子（hook)的理解一句话，钩子（hook）就是 React 函数组件的副效应解决方案，用来为函数组件引入副效应。函数组件的主体只应该用来返回组件的 HTML 代码，所有的其他操作（副效应）都必须通过钩子引入。哪什么是副效应？函数式编程将那些跟数据计算无关的操作，都称为 “副效应” 。为什么要用hook?首先我们要明白，react有类组件，有函数组件，而函数组件是没有状态，跟生命周期这个概念的。而hook刚好能够弥补这缺陷。像，useSate,useEffect配合使用，它就有模拟生命周原创 2021-11-22 15:19:09 · 1212 阅读 · 1 评论 -
对axios总结
一.对axios的了解1.Axios 是什么?Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。axios官方文档地址连接：https://www.axios-http.cn/docs/intro2.特性从浏览器创建 XMLHttpRequests从 node.原创 2021-11-02 09:38:27 · 586 阅读 · 1 评论 -
Vue2.0自学笔记
一.对Vue的了解作者：尤雨溪渐进式框架：根据自身需求，选择框架的中的工具,VUE不强求你一次性接受并使用它的全部功能特性Vue数据驱动渐进式框架基于MVVM软件设计模式React开发大型项目最严谨的框架（学习成本较高，适用于中级或者高级前端开发工程师）Anagle适用于大型项目，项目开发较为沉重，不够灵活Vue与jquery的区别(打扫卫生)原生JS扫把、簸箕、拖把Jquery戴森吸尘器Vue扫地机器人（保姆）2.MVVM（软件设计模式）Vue.js根据这种模式设计出原创 2021-11-02 09:18:52 · 313 阅读 · 1 评论 -
对事件循环机制简单概括
首先JavaScript是单线程语言，在执行JavaScript代码时所有的同步任务都在主线程上执行，形成一个执行栈。除了主线程外，还存在一个任务队列，存放着异步任务，当执行完所有的同步任务后，就会从任务队列中逐个取异步任务放入执行栈中执行，而异步任务又分有宏任务跟任务。异步任务执行顺序：1.先执行微任务，执行完全部的微任务在执行宏任务2.执行宏任务结束后查看有没有产生新的微任务，若产生新的微任务就把新的微任务执行完3.最后开启下一轮事件循环也就是说有同步任务就先执行同步任务，同步任务按顺序执行，原创 2021-11-01 09:43:08 · 565 阅读 · 0 评论 -
ES6基础知识总结
一、ES6介绍1.ES6介绍ES6是ES2015、ES2016、ES2017他们的统称官方名字：《ECMAScript 2015 标准》=> ES62.包管理机制（npm）1)初始化项目npm init -y 初始化项目（不询问项目信息）2)安装依赖全局依赖（在电脑的C盘保存依赖的源码）cnpm install xxx --global简写：cnpm i xxx -g局部依赖（在项目的根目录下保存依赖源码信息）开发依赖cnpm install xxx --save-dev原创 2021-10-31 20:08:32 · 168 阅读 · 1 评论 -
Canvas绘制时钟
效果图：源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-09-14 11:24:42 · 67 阅读 · 0 评论 -
H5新增video标签的常用属性
video在video标签出现之前，如果想在网页中播放视频或者音频数据是非常困难的。H5中的video标签可以向使用img显示图片一样简单去播放视频。video提供了很多属性和方法，我们可以通过直接设定或者通过js控制视频的显示读写属性 src autoplay poster loop constrols width height 宽高一般不一起使用 constrols是控制条 loop是循环播放 autoplay是自动播放poster=’’ 封面 放封面地址 muted静音方法 play原创 2021-09-13 11:24:58 · 1655 阅读 · 0 评论 -
js简单实现精美轮播图效果
精美轮播效果效果图展示：是不是觉得还是挺好看的。1.首先建一个文档简单的html文档2.引入下面的style样式 body{ background-color: rgb(119,115, 110); } ul{ width: 800px; height: 200px; position:absolute; padding: 0px;原创 2021-09-10 16:20:36 · 1044 阅读 · 2 评论 -
JQuery基础知识学习总结
虽然现在确实很流行vue跟react,但jquery一些基础知识还是要学习，进行了解的，万一项目那一天用jQuery写呢，虽然大概率不会，但一些老项目就很难说了。所以还是要进行学习的。这是我的一些学习笔记，进行总结。...原创 2021-09-09 15:37:52 · 394 阅读 · 0 评论 -
js文档对象模型
js文档对象模型1.定义 DOM是针对HTML和XML文档的一个API（Application programming interfaces--应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。2.Node类型DOM1级定义为一个Node接口，该接口将由DOM中的所有节点类型实现。javascript中所有的节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。 //因为js代码从上到下执行,这里页面节点还没加载完毕就进行了原创 2021-09-09 15:36:01 · 58 阅读 · 1 评论 -
js的正则表达式的使用
js.正则表达式的使用是一个描述字符模式的对象.2.正则表达式创建1.构造函数var pattern=new RegExp('正则表达式',“修饰符”);var pattern=new RegExp("qwer","igm")2.字面量var pattern=/正则表达式/修饰符;var pattern=/qwer/igm3.修饰符i ignore case 不区分大小写g g global 全局m multiline 多行4.实例方法1.exec 用来原创 2021-09-09 15:32:55 · 102 阅读 · 1 评论 -
js基本包装器类型
js.基本包装器类型1.基本数据类型 --变量和值保存在栈区 --没有方法和属性可以调用var str='hello';//string类型str.split("");自动装箱和自动拆箱 当有基本数据类型可以调用方法的时候，将基本数据类型包装成了引用数据类型str.split("");基本数据类型没有方法和属性可以调用，当可以调用的时候，就不是基本数据类型，变成了包装String类型 --js自动帮转String.prototype中的方法--自动装箱 调用完之后变成了基本数据string原创 2021-09-09 15:31:08 · 315 阅读 · 1 评论 -
js的迭代方法学习
js.迭代方法学习1.every(function(item,index,arr){},this对象) 1.第一个参数在数组中的每个元素都会执行到的函数，固定的 2.第二个参数是前面function内的this指向-- 第二个参数任意数据类型,传什么都可以 3.判断数组元素是否都满足某一条件,一项不满足直接跳出当前判断,符合短路原则2.some(function(item,index,arr){},this对象)第一个参数在数组中的每个元素都会执行到的函数，原创 2021-09-09 15:27:14 · 227 阅读 · 0 评论 -
超简单的React项目打包后部署到服务器上
前言：我们都知道有些react项目打包后生成的不管是dist,还是build的文件，直接打开都无法直接浏览到项目，然后查看控制器，就发现它报错。如图：用脚手架创建的 react / vue 项目，已经集成了webpack，只要运行命令：npm run build 或 yarn run build 项目就会编译成功，生成一个dist文件夹，现在问题来了，如何启动这个编译后项目呢。...原创 2021-12-21 11:25:29 · 19114 阅读 · 0 评论 -
浅谈XMLHttpRequest
XMLHttpRequest浏览器在XMLHttpRequest类上定义了它们的HTTP API,这个类的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。很多年前Web浏览器就开始支持XMLHttpRequest，并且其API已经到了W3C指定标准的最后阶段。同时W3C正在指定“2级XMLHttpRequest”标准草案。XMLHttpRequest对象是AJAX的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个原创 2021-12-21 13:45:30 · 1612 阅读 · 1 评论 -
React Hooks: useRef, useImperativeHandle, forwardRef的使用方法
大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象，进而对子组件进行修改，是一个很方便的特性。在传统类组件中，我们通过使用 React.createRef() 创建的，并通过 ref属性附加到 React 元素来使用。而随着hooks的越来越广泛的使用，我们有必要了解一下在函数式组件中，如何使用Ref.想要在函数式组件中使用Ref，我们必须先了解两个Api,useRef和forwardRef转载 2021-12-24 15:16:40 · 1527 阅读 · 1 评论 -
通过ESLint和Prettier统一团队代码规范
无规则，不成方圆，套在前端来说也适用。在一个前端工程里，每个人的编码习惯，风格，ide等不同，如果不对代码进行有效的规范，那提交的代码就会非常别具特色。因此，我们需要在自动化层面就定义好规范，当其他同事提交代码后，都是统一格式化后的代码。转载 2022-05-26 17:02:35 · 1227 阅读 · 1 评论 -
js常用数组方法
这是对原生js常用的数组方法进行总结以及对一些方法进行重构，记住一些常用的数组方法，再开发中，可以让我们快速使用，不过我也一般记不住，但还是多看看吧，让自己有个印象，用到的时候可以更好的百度，更有利于面向csdn编程，哈哈哈。...原创 2022-05-31 14:10:01 · 380 阅读 · 1 评论 -
SSR 服务端渲染
闲来无事，研究一下SSR，主要原因在于上周一位后端同学在一次组内技术分享的时候说，对前后端分离、服务端渲染特别感兴趣，在他分享了后端微服务之后，专门点名邀请我下周分享服务端渲染，然后我还没同意，领导就内定让我下周分享了（其实就是下周愿意下周分享，我是那个替死鬼）。本人主要从个人角度介绍了对服务端渲染的理解，读完本文后，你将了解到：在讲服务度渲染之前，我们先回顾一下页面的渲染流程：在没有AJAX的时候，也就是web1.0时代，几乎所有应用都是服务端渲染（此时服务器渲染非现在的服务器渲染），那个时候的页面渲染大转载 2022-06-08 15:08:20 · 7690 阅读 · 0 评论 -
前端性能优化
前端的性能的优化，可优化的方式有很多，性能优化是把双刃剑，有好的一面也有坏的一面。浏览器会对那些对页面影响较大的元素进行分层操作类似于Ps的图层的概念，这样当我们去操作这个元素，那只会对该图层的元素进行回流，而不影响其他的图层里的元素。img标签的loading=“lazy”属性-----------------------目前浏览器支持程度不佳 缺乏可拓展性。使用高效的css选择器 浏览器会自右向左进行元素的查找-----随着浏览器的优化，这一条已经不在使用。原创 2022-10-08 16:08:36 · 1239 阅读 · 0 评论 -
前端开发规范
作为一名合格的前端开发工程师，良好的代码编写规范是必须具备的。其实对于必要的约束直接采用eslint进行一个约束就好了，代码的统一风格采用 pretter进行一个格式化的统一。主要是命名上的统一，这个要大家共同参与才能维护的。原创 2022-12-05 09:06:26 · 1048 阅读 · 0 评论 -
typescript 学习笔记
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。原创 2024-09-05 20:15:57 · 1251 阅读 · 0 评论 -
异步处理之async/await使用技巧分享
是非常强大的语法糖，是处理异步问题的一种简洁、高效的方式。虽然它并非“最终解决方案”，但与Promise配合使用，确实能极大地简化异步编程的复杂性。从字面上理解，async表示一个函数是异步的，await则用来等待一个异步操作完成。二者结合使用，使得代码看起来更加同步化，从而提高了可读性和维护性。虽然有一些缺点，比如无法直接处理Promise的raceall等原生方法，或者调试时的不便，但它仍然是现代JavaScript中非常强大的工具。通过合理的使用技巧，可以极大地提升代码的可读性与可维护性。原创 2024-11-13 09:31:11 · 1025 阅读 · 0 评论