js日记
文章平均质量分 76
原生js知识整理
菜鸟小胖砸
博主很懒,但是却对前端很热爱,除了样式!
展开
-
0920 NOTE
0920 NOTEredux数据共享(1).定义一个Pserson组件,和Count组件通过redux共享数据。(2).为Person组件编写:reducer、action,配置constant常量。(3).重点:Person的reducer和Count的Reducer要使用combineReducers进行合并,合并后的总状态是一个对象(4).交给store的是总reducer,最后注意在组件中取出状态的时候,记得“取到位”。纯函数一个函数的返回结果只依赖于它的参数,并且在执行过程里面原创 2021-09-21 09:55:37 · 78 阅读 · 0 评论 -
0919 NOTE
0919 NOTEredux的简单使用①安装:npm i redux②引用举例://store.jsimport {createStore} from ‘redux’import reducer from ‘./reducers’export default createStore(reducer)//reducer.jsconst initState = 0;export default function countReducer(preState=initState,action原创 2021-09-19 22:54:53 · 62 阅读 · 0 评论 -
0918 NOTE
0918 NOTEredux的三个核心概念action动作的对象包含2个属性: type:标识属性, 值为字符串, 唯一, 必要属性 data:数据属性, 值类型任意, 可选属性例子:{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }reducer 用于初始化状态、加工状态。 加工时,根据旧的state和action, 产生新的state的纯函数。store将state、action、reducer联系在一起的对象如原创 2021-09-18 16:42:44 · 75 阅读 · 0 评论 -
0917 NOTE
0917 NOTE路由的基本使用原生html中可以通过a标签调转不同页面react中通过路由链接实现切换组件//1.安装react库npm i react-router-dom//2.组件中引入import {Link,BrowserRouter,Route} from "react-router-dom"//3.Link标签类似a标签 to属性用于链接跳转<Link className="" to="/about">About</Link><Link c原创 2021-09-18 07:22:51 · 119 阅读 · 0 评论 -
0916 NOTE
0916 NOTEtodoList案例总结 1.拆分组件、实现静态组件,注意:className、style的写法 2.动态初始化列表,如何确定将数据放在哪个组件的state中? ——某个组件使用:放在其自身的state中 ——某些组件使用:放在他们共同的父组件state中(官方称此操作为:状态提升) 3.关于父子之间通信: 1.【父组件】给【子组件】传递数据:通过props传递 2.【子组件】原创 2021-09-16 23:23:16 · 94 阅读 · 0 评论 -
原始类型和对象类型
原始类型和对象类型原始类型有哪几种?null是对象么?答: js中原始类型有6种:Number,Boolean,String,Symbol,undefined,null; 原始类型与对象类型的区别在于,原始类型存储的是值,而对象类型存储的是指向堆中对应数据的指针,原始类型存于栈中,对象类型存于堆中,虽然,比如,类似123.toString()可以执行转化,但是其实过程中是发生了类型强制转化,证据是通过instanceof判定123是否是Number类型,打印结果为false,代表原始类型没有原原创 2021-09-16 08:07:49 · 338 阅读 · 0 评论 -
0915 NOTE
0915 NOTE新生命周期生命周期流程图(新)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9JGxOTqb-1631716995505)(0915%20NOTE.assets/image-20210915101237823.png)]对比旧生命周期流程图: 下述生命周期方法即将过时,在新代码中应该避免使用它们:UNSAFE_componentWillMount()UNSAFE_componentWillUpdate()UNSAFE_compo原创 2021-09-15 22:44:22 · 74 阅读 · 0 评论 -
重构call、apply、bind
重构call、apply、bind逻辑梳理:第一个参数为改变后this指向,第一个参数不存在则默认指向windowcall后续参数不限制,apply只能拥有两个参数,且第二个参数必须为类数组call与apply改变this指向后调用函数,bind改变this指向后返回一个新函数,不执行call、apply、bind所有函数均可调用,因此,这三个方法均为函数原型对象上的属性callFunction.prototype.myCall = function (invoke) {原创 2021-09-15 09:42:54 · 241 阅读 · 0 评论 -
0914 NOTE
0914 NOTErefsreact的refs属性字符串类型ref:class InputAlert extends React.Component { render() { return ( <div> <input type="text" placehoder="点击按钮弹出输入值" ref="left"/> &原创 2021-09-14 22:37:33 · 78 阅读 · 0 评论 -
axios
axios什么是axios? 基于Promise的HTTP客户端,运行环境为浏览器与node.jsaxios的特点:1.在浏览器创建AJAX请求2.在服务器端创建http请求3.支持promise的相关操作4.请求/响应拦截器5.转换请求/响应数据6.自动将结果转换为JSON数据7.阻挡跨站攻击,提供保护axios的基本使用://获取按钮 const btns = document.querySelectorAll('button');原创 2021-09-14 08:14:56 · 268 阅读 · 0 评论 -
0913 NOTE
0913 NOTEReact是什么?一个将数据渲染为HTML视图的js库React的特点:1.采用组件化模式,声明式编码,提高开发效率及组件复用率2.React Native中可以使用React语法进行移动端开发3.虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互React实现:数据=>虚拟DOM=>真实DOM虚拟DOM的两种创建方式1.js创建React.createElement('h1',{id:"title"},React.createElement原创 2021-09-13 22:39:46 · 75 阅读 · 0 评论 -
AJAX基础
AJAX全拼:asynchronous javascript and XML 异步的js和XMLXML:可扩展标记语言,与HTML不同的是,没有预定义标签,全为自定义标签。AJAX的优缺点:优点: 1.无刷新获取数据 2.允许根据用户事件更新部分页面内容缺点: 1.没有浏览历史,不能回退 2.存在跨域问题 3.对于SEO(搜索引擎优化)不友好,AJAX异步请求获取的数据爬虫无法获取HTTP协议: 超文本传输协议(hyper transport protocol),纤细规定原创 2021-09-11 16:24:08 · 138 阅读 · 0 评论 -
自定义封装实现Promise
自定义封装实现Promise//原promise对比// let p = new Promise((resolve, reject) => { // var ids = setTimeout(()=>{ // resolve("success"); // reject("false"); // },1000) // clearTimeout(ids); // reject(转载 2021-09-08 09:39:22 · 184 阅读 · 0 评论 -
原型和原型链
原型和原型链名称prototype:原型__proto__:原型链(准确说为原型链的节点,所有节点构成的关系链才是原型链)从属关系prototye:函数属性__proto__:Object属性两者都是对象!!!对象的__proto__保存着该对象的构造函数的prototype!!!基本认知function a(){}console.log(a.prototype) //函数a的构造函数constructorlet b = new a;console.log(b.__prot转载 2021-09-05 19:27:32 · 72 阅读 · 0 评论 -
js——多态
js——多态1."多态性"模拟多态的实际含义:同一操作作用于不同的对象上,可以产生不同的解释和不同的执行结果。一个发出声音的方法makeSound一个猫的类Cat一个狗的类Dog当调用makeSound并且传入的是一只猫则打印出"喵喵喵~"当调用makeSound并且传入的是一只狗则打印出"汪汪汪!"function makeSound(who){ who instanceof Cat ? console.log("喵喵喵~") : who instanceof Dog ? co转载 2021-08-31 15:46:17 · 2862 阅读 · 0 评论 -
js——继承
js——继承继承概念继承就是子类可以使用父类的所有功能,并且对这些功能进行扩展。1.原型链继承将子类的原型对象指向父类的实例1.1function Parent () { this.name = 'Parent' this.sex = 'boy'}Parent.prototype.getName = function () { console.log(this.name)}function Child () { this.name = 'child'}Child.pr转载 2021-08-31 15:13:06 · 109 阅读 · 0 评论 -
js——封装
js——封装封装基本概念// 1. 构造函数function Cat (name) { this.name}// 2. 构造函数原型对象Cat.prototype// 3. 使用Cat构造函数创建的实例'乖乖'var guaiguai = new Cat('guaiguai')// 4. 构造函数的静态方法,名为fnCat.fn = function () {}// 5. 原型对象上的方法,名为fnCat.prototype.fn = function () {}转载 2021-08-30 21:23:03 · 3241 阅读 · 0 评论 -
this面试题
this面试题最近想刷点this的面试题,这部,呆呆大佬的文章让我激动不已,对症下药,获益良多,此处做个记录。知识参考:《你不知道的javascript上卷》原文链接:呆呆大佬的酸爽this面试题知识点预备:this指向this总是指向调用的对象,就是说this指向谁与函数声明的位置没有关系,只与调用的位置有关。this的指向大概分为如下四种:1.new绑定new方式是优先级最高的一种调用方式,只要是使用new方式来调用一个构造函数,this一定会指向new调用函数新创建的对象:2.显式绑转载 2021-08-29 13:21:04 · 260 阅读 · 0 评论 -
promise面试题
promise理解整理eventloop的执行顺序:脚本运行→整个脚本作为一个宏任务开始执行→同步代码直接执行,宏任务进入宏任务队列,微任务进入微任务队列→当前宏任务执行完出队,检查微任务列表,有则依次执行,直到全部执行完→浏览器UI线程的渲染工作开始执行→web worker任务的检查,有则执行→依次轮询,直至所有任务队列为空ps:Web Worker参考:阮一峰的网络日志——Web Worker使用教程浅谈HTML5 Web Worker微任务:MutationObserve转载 2021-08-21 13:18:17 · 2039 阅读 · 0 评论 -
0807-0815原生js模拟实现真快乐网站
0807-0815原生js模拟实现真快乐网站功能实现首页:无缝轮播图:自动播放,鼠标移入暂停,鼠标移入浮标切换图片,按钮切换上下图片二级菜单鼠标移入商品分类列表弹出相关二级菜单楼层电梯鼠标下滑至指定位置出现楼层电梯,点击实现平滑跳转登录与注册:输入用户名和密码实现注册与登录,注册成功则跳转登录页,登录成功跳转首页商品列表页:数据渲染生成商品列表,点击跳转对应详情页商品详情页:数据渲染:根据对应id渲染对应详情页面放大镜:鼠标移入,出现蓝色透明遮幕块,显示移动位原创 2021-08-15 19:45:38 · 371 阅读 · 0 评论 -
0805 NOTE
0805 NOTEcanvascanvas-变形 入栈和出栈: 实际指图形状态的保存和恢复,通过save()保存,restore()恢复。 save 和 restore 方法是用来保存和恢复 canvas 状态的,都没有参数。 Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。 Canvas状态存储在栈中,每当save()方法被调用后,当前的状态就被推送到栈中保存。可以调用任意多次 save 方法。每一次调用 restore 方法,上一个保存的状态就从栈中弹出原创 2021-08-06 08:53:00 · 417 阅读 · 0 评论 -
0804 NOTE
0804 NOTECanvasHTML5 canvas 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.canvas标签只是图形容器,必须使用脚本来绘制图形。创建canvas标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.var c=document.getElementById("myCanvas"); //获取canvas元素var ctx=c.getContext("2d"); //创建conte原创 2021-08-04 22:42:59 · 244 阅读 · 0 评论 -
0803 NOTE
0803 NOTE边框线和背景border-radius/*border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性*/border-radius /*圆角边框*/border-left-radius /*圆角左边框*/border-top-radius /*圆角上边框*/border-right-radius /*圆角右边框*/border-bottom-radius /*圆角下边框*//*语法:border-radius: 1原创 2021-08-04 08:34:10 · 113 阅读 · 0 评论 -
0801 上周知识点-面试题整理
0801 NOTE部分知识自查面试题整理,原型部分后为收集资料,未思考总结,后续补上JQUERYJquery的美元符号$有什么作用?答:是Jquery的别名,可以通过是Jquery的别名,可以通过是Jquery的别名,可以通过生成Jquery对象,调用Jquery的方法Jquery中有哪几种类型的选择器?答:从个人角度而言根据css样式选择器进行划分: 1.简单选择器,将css样式的基本选择器如id选择器,class选择器,标签选择器等作为对象参数传入符,获取到所需dom元素,如获取原创 2021-08-02 22:56:56 · 162 阅读 · 0 评论 -
0802 NOTE
0802 NOTEGitee方法1:1.git clone https://gitee.com/用户个性地址/远程仓库名.git2.git config --global user.name “你的用户名称”3.git config --global user.email “你的邮箱” //配置本地的git配置信息4.git add 文件名 //添加准备推送的文件,也可以是“.”,“.”表示推送所有文件5.git commit -m “注释” //推送文件信息备注6.git push ori原创 2021-08-02 22:50:11 · 76 阅读 · 0 评论 -
0730 NOTE
0730 NOTEGulpgulp3安装 npm i gulp3 -D依赖于node解决前端问题gulp3 node版本10执行:1.创建名为gulpfile.js的文件2.引入:var gulp = require(“gulp”)3.gulp.task(“default”,[“a”],function(){}) //执行某某任务;default为默认任务,a为前置执行任务,函数为具体执行内容Gulp方法工作方式 gulp实际工作是使用nodejs中的stream来处理的,原创 2021-07-31 22:30:13 · 79 阅读 · 0 评论 -
0729 NOTE
0729 NOTE1.函数反柯里化扩大适用范围,创建一个应用范围更广的函数。使本来只有特定对象才适用的方法,扩展到更多的对象。// function unCurry(thisArg,...arg){ // return Function.prototype.call.apply() // } Function.prototype.unCurry=function(){ var self=this;原创 2021-07-31 22:29:40 · 102 阅读 · 0 评论 -
0728 NOTE
0728 NOTE1.setter和gettergetter 是一种获得属性值的方法,setter是一种设置属性值的方法getter负责查询值,它不带任何参数,setter则负责设置键值,值是以参数的形式传递,在他的函数体中,一切的return都是无效的get/set访问器不是对象的属性,而是属性的特性,特性只有内部才用,因此在javaScript中不能直接访问他们,为了表示特性是内部值用两队中括号括起来表示如[[Value]]对象的属性又可分为对象属性和访问器属性set与get相比于属性本身原创 2021-07-31 22:29:08 · 91 阅读 · 0 评论 -
0727 NOTE
0727 NOTE1.对象方法 delete 删除对象的属性 也可以根据键值删除对象下的属性。var obj={a:3,b:4}delete obj.a; assignObject.assign(target, ...sources)/*Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。 1、复制一个对象,注意如原创 2021-07-28 07:48:25 · 63 阅读 · 0 评论 -
0726 NOTE
0726 NOTE1.JQ事件jQuery 通过.bind()方法来为元素绑定事件。可以传递三个参数:bind(type,[data],fn), type 表示一个或多个类型的事件名字符串;[data]是可选的,作为 event.data 属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;fn 表示绑定到指 定元素的处理函数。 /* $("div").on("click",clickHandler); //给所有div添加点击事件 function cl原创 2021-07-27 10:26:25 · 69 阅读 · 0 评论 -
0723 NOTE
0723 NOTE1.jq过滤器// $("li:first").css("color","red"); //把所有li放在一个列表中选择其中第一个 // $("li").first().css("color","red") // $("li:first-child").css("color","red");//选择每个li列表的父元素中第一个子元素必须是li的 // $("li:first-of-type").css("color",原创 2021-07-25 21:42:44 · 58 阅读 · 0 评论 -
0722 NOTE
0722 NOTEAJAXAsynchronous JavaScript + XML的简写能够向服务器请求额外的数据而无需加载刷新页面,会带来更好的用户体验从SSR渲染(服务端渲染)走向CSR渲染(客户端渲染)SEO(Search Engine Optimization)优化:搜索引擎优化1.openopen方法参数:DOMString method 数据传输方式(GET/POST/PUT/DELETE…)DOMString url 连接服务器,也可以写原创 2021-07-25 21:42:14 · 202 阅读 · 1 评论 -
0721 NOTE
0721 NOTE1.ajax通信基础var xhr = new XMLHttpRequest(); //xhr全称XMLHttpRequest,无刷新发起浏览器请求xhr.addEventListener("load",loadHandler);xhr.open("GET","http://localhost:4001?a=1&b=2");xhr.send();function loadHandler(e){ }xhr解析GET和POST的区别:GET和POS原创 2021-07-25 21:40:03 · 58 阅读 · 0 评论 -
0720 NOTE
0720 NOTE1.MYSQL 打开数据库 mysqli_connect("localhost","root","root","test2","3306"); mysqli_connect_errno() 如果连接失败该函数返回为真 mysqli_query 针对成功的 SELECT、SHOW、DESCRIBE 或 EXPLAIN 查询,将返回一个 mysqli_result 对象。针对其他成功的查询,将返回 TRUE。如果失败,则返回 FALSE。 创建数据库//C原创 2021-07-22 13:38:19 · 157 阅读 · 0 评论 -
0719 NOTE
0719 NOTE1.eventLoop事件循环 的概念非常简单。它是一个在 JavaScript 引擎等待任务,执行任务和进入休眠状态等待更多任务这几个状态之间转换的无限循环。引擎的一般算法:当有任务时:从最先进入的任务开始执行。休眠直到出现任务,然后转到第 1 步。当我们浏览一个网页时就是上述这种形式。JavaScript 引擎大多数时候不执行任何操作,它仅在脚本/处理程序/事件激活时执行。任务示例:当外部脚本 <script src="..."> 加载完成时原创 2021-07-21 10:17:40 · 126 阅读 · 1 评论 -
0716 NOTE
0716 NOTE计算机网络局域网和广域网局域网局域网(Local Area Network),简称LAN,是指在某一区域内由多台计算机互联成的计算机组。“某一区域”指的是同一办公室、同一建筑物、同一公司和同一学校等,一般是方圆几千米以内。局域网可以实现文件管理、应用软件共享、打印机共享、扫描仪共享、工作组内的日程安排、电子邮件和传真通信服务等功能。上网方式,因为局域网是封闭型的,可以由办公室内的两台计算机组成,也可以由一个公司内的上千台计算机组成。广域网广域网(Wide Area Networ原创 2021-07-18 20:58:55 · 154 阅读 · 1 评论 -
0715 NOTE
0715 NOTE五星好评功能分析:1.星星点亮为红,不亮为白底黑框2.五星评价后有打分,一颗星一分,初始为03.鼠标悬停在星星,目标对象及其前列星星全亮,移开则恢复默认4.鼠标点击后样式修改,移开也不变,除非再次点击5.星星上方对应点亮星数有不同表情显示,根据星星目标展示在当前星星上方/*css*/ body{ font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",原创 2021-07-18 13:02:04 · 615 阅读 · 0 评论 -
0714 NOTE
0714 NOTE放大镜效果/*css*/ .zoomclass{ position: relative; } .mini{ width: 450px; height: 450px; position: relative; border: 1px solid #ccc; left: 100px; top:原创 2021-07-17 22:22:57 · 79 阅读 · 0 评论 -
0713 NOTE
0713 NOTE轮播图面向对象/*css样式*/ .divs{ width: 900px; height: 300px; position: relative; }<!--html样式--><button>切换</button> <button id = "back">返回</button> <div class="divs"原创 2021-07-17 16:17:30 · 549 阅读 · 0 评论 -
0712 NOTE
0712 NOTE动画DOM不适合做动画,多个动画都是集中在一个setInterval中setInterval本身不断渲染,强行覆盖数据,不断地进行重绘或者回流,导致页面刷新频繁,屏幕闪烁performance.now() //性能requestAnimationFrame(animation) //请求动画帧原生js轮播图轮播图1/*css样式*/body{ margin: 0; } #carousel{原创 2021-07-17 15:53:00 · 152 阅读 · 0 评论