JavaScript
关注
分享
扫一扫
文章平均质量分 56
土豆切成丝
作为时代的弄潮儿，我要用知识武装自己。以时不待我，只争朝夕的精神，在此记录我的一次一次的成长历程。
展开
-
react-redux中使用Hook和类组件写法进行状态管理
是的官方绑定库。它能够使你的组件从中读取数据，并且向分发以更新数据1.react项目搭建 npx create-react-app app2.安装redux npm i redux3.安装 react-redux npm i react-reduxsrc/index.jssrc/store/index.jssrc/store/reducer.jssrc/store/reducer-types.js②在类组件中使用src/App.jsx③在Hook中使用原创 2022-07-13 00:32:12 · 852 阅读 · 8 评论 -
在react中使用redux
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 (如果你需要一个 WordPress 框架，请查看 Redux Framework。)可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。Redux 除了和 React 一起用外，还支持其它界面库。 它体小精悍（只有2kB，包括依赖）。...原创 2022-07-12 20:37:04 · 995 阅读 · 1 评论 -
vue3.0中使用vuex
目录一、前言二、vuex介绍三、项目搭建四、vuex使用①state②mutations③actions一、前言学习了vue3.0，vuex也是一个必不可少的知识点。在学习完后，也可以发现vuex也是比较容易上手。提示：项目是用vue-cli进行搭建的。二、vuex介绍官网介绍：Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 我们理解：Vuex是采用集中原创 2022-05-31 21:04:58 · 5322 阅读 · 6 评论 -
vue父子组件传值
一、父组件向子组件传值1.在子组件的调用标签上使用自定义属性进行传值2.子组件通过props属性进行接收，子组件把接受来的数据当成data里数据来使用3.props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件4.props可以显示定义一个或一个以上的数据，对于接收的数据可以是各种数据类型，同样也可以传递一个函数<body> <!-- 父-》子原创 2022-05-14 00:02:52 · 540 阅读 · 3 评论 -
node.js是干什么的
一、Node.js简介Node.js是一个开源和跨平台的JavaScript运行时环境。它几乎是任何类型项目的流行工具！Node.js在浏览器之外运行V8 JavaScript引擎（Google Chrome的内核）。这使得Node.js的性能非常好。Node.js应用程序在单个程序中运行，无需为每个请求创建新的线程。Node.js在其标准库中提供了一组异步的I/O原语，以防JavaScript代码阻塞，通常，Node.js中的库是使用非阻塞范式编写的，使得阻塞行为成为异常而不是常态。Nod原创 2022-04-08 00:46:35 · 25568 阅读 · 5 评论 -
node事件循环
一、什么是事件循环首先，node.js的事件循环与JavaScript的略有不同。node中事件循环使node.js可以通过将操作转移到系统内核中来执行非阻塞 I/O操作。由于大多数现代内核都是多线程的，因此它们可以处理在后台执行的多个操作。当这些操作之一完成时，内核会告诉node.js,以便可以适当的回调添加到轮询队列中以最终执行二、事件循环图解node.js启动时，它将初始化事件循环，处理提供的输入脚本，这些脚本可能会进行异步API调用，调度计算器，然后开始处理事件循环。下图显示了事件循原创 2022-04-04 23:34:23 · 2453 阅读 · 4 评论 -
Promise源码分析
实现原理：说到底，Promise 也还是使用回调函数，只不过是把回调封装在了内部，使用上一直通过 then 方法的链式调用，使得多层的回调嵌套看起来变成了同一层的，书写上以及理解上会更直观和简洁一些。我这里只是实现了部分的功能，并非和源码一模一样！希望里面不足的地方，小伙伴们多多指正//我们首先来定义一个MyPromise类，我在这里使用立即执行函数的方式，防止变量全局污染。const MyPromise = (() => { // 定义三种状态 const PENDING原创 2022-03-27 22:08:09 · 952 阅读 · 4 评论 -
Set和Map数据结构
一、SetES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。 // 创建一个set集合，传参必须为一个可迭代对象 const s1 = new Set([1,2,3,3,5,1]) console.log(s1)//Set(4){1, 2, 3, 5}.原创 2022-03-24 23:50:55 · 274 阅读 · 3 评论 -
promise详解
一、promise含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。二、异步和回调异步处理的模型：ES原创 2022-03-23 23:15:22 · 17118 阅读 · 2 评论 -
手写 forEach、map、find、reduce等方法
一、forEach//forEach() 遍历数组 参数1：函数 参数2：改变函数中的this指向var arr = ['lcy','xyy','wjj','zj']var obj = {};arr.forEach(funtion(value,index,_arr){ //value: 数组中的每一项数据 //index: 每一项数据对应的下标 //_arr: 该数据本身 // console.log(arguments); // consol原创 2022-03-22 20:15:13 · 368 阅读 · 1 评论 -
什么是跨域？解决跨域的常见方法
一、浏览器同源政策“同源”：协议相同、域名相同、端口相同"同源的目的"：只有在一个服务器上的文件才能互相交互，多个服务器之间的文件禁止1995年，同源政策由Netscape公司引入浏览器，最初的目的是某页面所设置的cookie，只能由其“同源”页面打开。如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。举例来说，http://www.example.com/dir/page.html这个网址，协议是http://,域名是www.examp原创 2022-03-20 22:06:49 · 1386 阅读 · 9 评论 -
ajax(面试重点)
目录一、ajax简介二、ajax优缺点(面试题)三、异步和同步四、ajax处理网络请求五、xhr对象发送GET、POST请求六、最后补充（面试题）1.grt请求和post请求的区别2、常见的响应码和状态码含义①status②readyState一、ajax简介ajax（Asynchronous Javascript And XML）其实就是异步的javaScript和XML。XML:<html>这是html标签，XML格式是一样的可以自定原创 2022-03-19 23:56:22 · 3648 阅读 · 1 评论 -
js生成随机颜色九九乘法表
变颜色的九九乘法表js代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>九九乘法表</title></head><body> <script> document.write(`<table width='550px' height='500p原创 2022-03-18 23:42:56 · 1357 阅读 · 2 评论 -
canvas生成随机（颜色位置）验证码
一、什么是canvas？1.HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。2.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。3.你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。二.功能实现canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。①功能需求：1.需要的内容：字母数字组合(长度随机5-7,颜色随机,位置随机，大.原创 2022-03-12 15:20:38 · 1877 阅读 · 4 评论 -
js实现canvas在线画板
一、前言canvas是html5的一个新标签，属于h5的新特性，也是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，折线等等，它是通过javascript来操控的，即脚本绘制图形。二、实现效果今天这个canvas小案例主要是四个功能1. 画线 2. 矩形 3. 圆 4. 可以改变画笔的粗细 5.清除画板三、代码实现1.html+css部分代码 <style> canvas{ background-colo..原创 2022-02-21 00:59:28 · 2982 阅读 · 4 评论 -
原生JS实现页面滚动条加载数据，页面下拉加载内容
一、前言今天这个案例是滚动条事件，当滚动条距离底部的距离小于一个范围值时，会自动的增加页面的高度，从而达到永远划不到底部的效果。二、scrollHeight、scrollTop和clientHeight的区别 网页的全文高 滚动条距离顶部的距离（滚动条被卷去的距离） 可以看到的屏幕高度由于js没有给我们滚动条距离底部的距离我们就需要自己计算了 用网页的全文高减去滚动条距离顶部的距离减去可以看的的屏幕高度就可以得到滚动条距离底部的距离了。三、代码<style>原创 2022-02-13 23:53:23 · 2153 阅读 · 2 评论 -
实现JS异步加载的三种方法
一、为什么要写异步加载：①js加载本身是属于同步加载的，加载js文件会阻塞文档，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。但是有些工具方法需要按需加载，有一些工具js文件它是不会改变页面的，用到再加载，不用不加载。②但是实际开发中我们只需要把script标签放在页面的最下面。完全没有必要写赘余代码，但是按需加载一定是面试的重中之重！！！二、JS异步加载的三种方案：①defer script标签中增加defer属性，异步加载 1.但要等dom文档全部解析完（d原创 2022-02-11 19:23:09 · 9696 阅读 · 8 评论 -
详解JS中关于call、apply和bind的实现（源码实现）
在JavaScript中，call、apply和bind是Function对象自带的三个方法，这三个方法的主要作用是改变函数中的this指向。call、apply、bind方法的共同点：1.都是用来改变函数的this对象的指向的；2.第一个参数都是this要指向的对象；3.可以利用后续参数传参；区别：bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。call()方法和apply()方法的作用相同，区别仅在于接受参数的方式不同。一、call的源码原创 2022-02-10 23:35:17 · 1476 阅读 · 21 评论 -
js实现轮播图（淡入淡出效果）
目录一、前言二、轮播图实现效果三、功能四、实现代码1.html+css部分代码2.js主要代码5、总结一、前言说起轮播图，大家应该都不陌生，大部分网站的首页或者也是面试官的提问：你会写轮播图吗？都会见到它的存在。虽然实现起来也不是很困难，但是真正能写好的人也不多，这也是我写这个的原因，整理一下自己写的东西，也带着大家一起复习巩固。二、轮播图实现效果三、功能1.实现自动播放2.鼠标移入停止播放，按左右切换按钮或者点击分页器小圆点切换图片3.图片实现.原创 2022-01-20 18:30:13 · 4033 阅读 · 11 评论 -
JS实现弹性漂浮广告代码
原创 2022-01-15 21:31:50 · 2406 阅读 · 12 评论