- 博客(131)
- 收藏
- 关注
RSS订阅原创 js 函数防抖与节流
前言我们为什么需要函数防抖与节流我们在实际开发当中，可定会遇见持续触发的事件如：onmousemove，onchange，resize等这种持续触发的事件，我们还可能会遇见那么持续需要点击的功能：抽奖，点击购买商品等功能以上这种情况都会引出来一个问题，那就是页面可能会卡顿，性能较低等问题那么我们可以通过函数节流和函数防抖等我们人为定义函数功能的方式来解决这种问题什么是函数防抖与节流举个栗子，当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放中基
2020-06-17 14:31:46
497
原创 react-hooks常用API基本简绍
介绍react hooks是React 16.8的新增特性。 它可以让我们在函数组件中使用state、生命周期以及其他react特性，而不仅限于class组件react hooks的出现，标示着react中不会在存在无状态组件了，只有类组件和函数组件对比存在即合理，hooks也不例外，它的出现，就代表了它要解决一些class组件的缺陷或者不足，那么我们...
2020-04-24 15:08:43
2808
1
原创 Node模块化和path模块
模块化什么是node模块化JavaScript 是一个强大面向对象语言，它有很多快速高效的解释器。然而， JavaScript标准定义的 API 是为了构建基于浏览器的应用程序。并没有制定一个用于更广泛的应用程序的标准库。CommonJS 规范的提出,主要是为了弥补当前 JavaScript 没有标准的缺陷。它的终极目标就是：提供一个类似 Python，Ruby 和 Java 语言的标...
2020-04-16 16:16:48
548
原创 Node核心模块之fs模块02
前言我们知道node.js 当中有一个fs.readFile异步方法来读取文件，其实这个方法是一下子都读取过来数据的这就造成了你读取的时候数据比较多的情况，而我们接下来简绍的流式读取方式是一点点的读取而不是一下子都读取过来的，这样就解决了我们读取数据造成堵塞的情况验证我们使用console上面的time和timeEnd方法参数传一致的时候我们做出了一个标识，来看fs.readFile方...
2020-04-16 13:54:56
299
2
原创 Node核心模块之fs模块01
前言Node.js 提供一组类似 UNIX（POSIX）标准的文件操作 API。 Node 导入文件系统模块fs全称File System，专门用来操作系统中的文件，常用的操作方式是对文件的读取和写入。Node.js 文件系统（fs 模块）模块中的方法分成两类，一类是同步，另一类是异步，例如读取文件内容的函数有异步的 fs.readFile() （其中回调函数是异步方法）和同步的fs.r...
2020-04-16 10:49:30
433
原创 简绍Node.js
什么是Node.js一、node.js是什么？node.js（他是一个运行环境） 是一个基于 Chrome V8 引擎的 JavaScirpt 运行环境。二、node使用场景' Node公开宣称的目标是“旨在提供一种简单的构建可伸缩网络程序的方法”。当前的服务器程序有什么问题？我们来做个数学题。在Java和PHP这类语言中，每个连接都会生成一个新线程，每个新线程可能需要...
2020-04-15 21:22:57
1581
原创 JS当中DOM操作成本到底高在哪儿？
从我接触前端到现在，一直听到的一句话：操作DOM的成本很高，不要轻易去操作DOM。尤其是react、vue等mvvm框架的出现，数据驱动视图的模式越发深入人心，jQuery时代提供的强大便利地操作DOM的API在前端工程里用的越来越少。刨根问底，这里说的成本，到底高在哪儿呢？什么是DOM ？？DOM全称：Document Object Model 文档对象模型什么是DOM？可能...
2020-04-14 21:28:54
468
原创 写React/Vue项目时为什么要在列表组件中写key，其作用是什么？
写React/Vue项目时为什么要在列表组件中写key，其作用是什么？没有绑定key的情况下，在遍历简会导致虚拟新单模板的情况下，旧节点对比更快，节点也会复用。而这种复用是就地复用，一种鸭子辩型的复用。<div id="app"> <div v-for="i in dataList">{{ i }}</div></div>v...
2020-04-02 10:34:32
913
原创 HTML表单标签元素总汇2
textarea（文本区域）：定义输入区也就是所谓的多行文本框当需要用户输入大量数据时使用textarea元素最佳选择cols属性：定义文本区的宽度rows属性：定义文本区的高度wrap属性：定义用户输入内容大小文本域宽度时的显示方式soft：当在表格提交时，textarea中的文本不换行。默认值hard：当在表单中提交时，textarea中的文本换行。当时用hard时必须规定c...
2019-11-22 21:21:19
251
原创 HTML表单标签元素总汇1
form（形状）：定义表单的意思form元素也是一个包含框他包含了所有的表单域元素enctype是（包装类型）的简称该属性将设置表单中用户输出的数据发送到服务器时，浏览器使用编码类型application/x-www-form-urlencoded：将表单中的数据编码为名/值对的形式通过URL发给服务器multipart/form-data：将表格中的数据编码为一条消息，每个表...
2019-11-22 21:19:02
386
原创 HTML列表和表格标签总汇
列表1，ul：无序列表（有很多列表信息是不分顺序的 在CSS状态下能够很好的显示）ol：有序列表（不过涉及到新闻、买卖条目等信息时可以考虑用有序列表进项结构化这样可以能够体现信息的时间顺序）li：列表项目2，type：自定义属性disc：实心圆点（默认值）circle：空心圆点square：实心方块...
2019-11-22 21:18:44
271
原创 高效的在GItHub上搜索开源项目
GitHub的流行， GitHub在开源世界的受欢迎程度自不必多言。再加上今天，GitHub官方又搞了个大新闻：私有仓库也改为免费使用，这在原来可是需要真金白银的买的。可见微软收购后，依然没有改变 GitHub 的定位，甚至还更进一步。花开两朵，各表一枝。我们今天想要聊的并不是 GitHub 多么重要，而是要说一下 GitHub 的搜索功能。你在 GitHub上搜索代码时，是怎么样操作的呢？是...
2019-11-17 10:01:29
195
1
原创 JS题目
第一题["1", "2", "3"].map(parseInt)第二题[typeof null, null instanceof Object]第三题[ [3,2,1].reduce(Math.pow), [].reduce(Math.pow)]第四题var val = 'smtg';console.log('Value is ' + (val === 'smtg') ? '...
2019-11-10 11:58:49
456
2
原创 H5新增规范(delete设置非法属性)
前言在HTML中什么是合法属性和非法属性？？<div id="box" class="div" fn='lala' hua='lll'></div>比如说我们常用的标签：p,div,span.ul.ol,li,img 这些是W3C这些开发人员制定的原生的标签当然classidtitle属性也是W3C这些开发人员制定的合法属性当前现在的fn和hua是...
2019-10-05 20:32:19
529
原创 H5本地存储(localStorage,sessionStorage)
本地存储前言当你从浏览器的角度想一下，以下代码会在浏览器当中执行什么？？var a = 1;console.log(a);//1当打开浏览器，浏览器会解析标签和脚本做一些事情1）当前通过谷歌浏览器打开了html页面解析了内部的使用标签和js脚本2）在js脚本中发现当前声明了一个变量a，肯定是在内存中开辟空间存储着变量a中的数据13）然后就是console.log(a...
2019-10-05 19:51:15
486
原创 H5canvas(保存图片，globalCompositeOperation)
保存图片前言canvas是画布的概念，那么canvas在浏览器表现出来的是一张图片那么我们可以把这张图片右键保存(把canvas以图片的形式保存)（保存的图片格式是png(底部的透明的)）那么怎么用js代码下载canvas图片先在canvas上面画出一个实心圆来吧CSS样式代码<style> *{ margin:0; ...
2019-10-05 18:49:27
1137
1
原创 H5canvas(渐变，绘制图片和视频，画布变换，制作马赛克)
绘制渐变前言绘制一条线段让这个线段的宽度是10颜色是蓝色var canvas = document.getElementById('myCanvas');var cxt = canvas.getContext('2d');cxt.lineWidth = 10;//设置线宽cxt.strokeStyle = 'blue';//设置线的颜色cxt.beginPath();//...
2019-10-05 16:17:27
885
2
原创 H5canvas(绘制矩形，绘制圆形，绘制线段，绘制文字，绘制曲线)
Canvas简介canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。canvas元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。什么是canvasHT...
2019-10-05 11:04:58
1716
原创 H5新增标签
H5新增含义语义化的标签理解HTML语义化什么是HTML语义化？基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等，根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构； ...
2019-10-01 19:47:24
264
原创 H5多媒体
H5操作节点类名补充(获取元素新方法)注意：只针对于节点上面有id名的元素获取元素有两种方式1.通过document.getElementById('box')方式获取元素(如下)//通过document方式获取idvar oBox = document.getElementById('box');console.log(oBox)2.如果在HTML标签上面有id名的...
2019-10-01 11:19:37
845
原创 HTML新增API（练习）
拖拽练习1第一种方式在外部用一个obj变量存储着拖拽元素，在到dragstart事件中利用事件委托的形式把每次点击的元素存储到obj这个变量当中，在到drop事件中用事件委托的形式把obj添加到节点上（别忘了在dragover事件中清除浏览器的默认事件呀）<!DOCTYPE html><html lang="en"><head> <...
2019-09-30 13:37:45
185
原创 H5新增API
前言HTML新增的API是放在移动端的IE低版本浏览器就不要去考虑了(H5一般是在做移动端)全屏显示基本概念HTML5规范允许用户自定义网页上任一元素全屏显示(规定了任何元素都可以全屏显示) 元素.requestFullscreen() 开启全屏显示、document.cancleFullscreen() 关闭全屏显示、document.isFullScreen判断当前是否全屏...
2019-09-30 13:13:41
385
原创 Jquery插件的编写及使用分享
jQuery插件开发在项目中的使用是非常方便的，那么如何来写一个jQuery插件？接下来我们就来看一看jQuery插件的编写及使用。引言：在项目中不同页面经常要用到已经写好的交互，比如弹窗，比如下拉菜单，比如选项卡，比如删除...此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情，而且个人认为有些low了，我们可是要追寻高大上的00后有为青年呢~可是该如何高大上呢？这...
2019-09-28 22:51:36
246
原创 JS中的for循环、while循环、do...while循环
for循环for循环的作用：可以让在for循环中的代码重复执行基本语法for(循环起点;循环条件;累加器){ 循环体(需要循环的代码块);}循环执行过程：执行循环起点 例：var a=0;循环条件的判断 例：a<5;若循环条件成立，则执行循环体若循环条件不成立，则结束循环然后执行循环体，在执行累加器 例：a++;重复执行第二...
2019-09-21 10:12:49
514
1
原创 jQuery(动画，核心函数)
基本的HTML布局<div id="box"> <img src="JS课堂代码文件件/jQuery/day4/1.jpg" alt=""> <img src="JS课堂代码文件件/jQuery/day4/1.jpg" alt=""> <img src="JS课堂代码文件件/jQuery/day4/1.jpg" alt="">...
2019-09-13 19:26:02
180
原创 js中if 和 switch 判断语句的区别
一直说想要研究底层原理，把知识学深一些，原来真的像初中的物理老师说的那样，把基础的原理都学会，就能做难的题目，高难度题目的框架都是靠简单的原理搭建的。if语句 var num = 5; if(num>7){ document.write('数字大于7') }else if(num>6){ document.write('数字大于6') }else if(n...
2019-09-13 11:29:57
5039
原创 JS实现奇偶数的判断
奇数和偶数的判断是数学运算中经常碰到的问题，比如：有变量x，如果x=1则为奇数，为2则为偶数。这篇文章主要讲解通过JavaScript来实现奇偶数的判断。方法一、求余%if…else的形式： var num = parseInt(prompt('请输入数字'));//请输入数字 if((num%2)===0){//判定条件余数为0时为偶数 alert(num + '是' + ...
2019-09-07 14:30:10
26617
2
原创 jQuery(文档处理)
jQuery和原生JS创建节点原生JS创建节点var oDiv = document.createElement('div');console.log(oDiv)jQuery创建节点$(document).ready(function(){//设置jQuery的入口代码 console.log($('<img>'))//把带有标签形式的字符串放置在$函数中执行表示创建节点...
2019-09-06 18:54:35
182
原创 jQuery(事件)
事件CSS基本样式代码 #box{ width:200px; height:200px; background: pink; } li:nth-child(even){ background: green;/*even表示奇数*/ } li:nth-child(odd){/*odd表示偶数*/ background: blue; }HTM...
2019-09-06 18:54:23
221
原创 补充事件(滚轮事件&&键盘事件)
滚轮事件滚轮事件(鼠标滚轮发生滚动的时候做一些事情)<style> *{ margin:0; padding:0; } #box{ width:200px; height:200px; background-color: pink; }</style> <div id="box"></div>...
2019-09-06 18:54:08
1458
1
原创 筛选(查找操作)
查找操作next([expr])概述取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。参数示例描述：找到每个段落的后面紧邻的同辈元素。HTML 代码:<p>Hello</p><p>Hello A...
2019-09-06 18:53:29
477
原创 jQuery(内容选择器,子元素选择器)，过滤操作
jQuery选择器内容选择器:contains(text)概述匹配包含给定文本的元素参数示例描述：查找所有包含 “John” 的 div 元素HTML代码<div>John Resig</div><div>George Martin</div><div>Malcom John Sinclair</di...
2019-09-06 18:53:16
751
原创 jQuery内置变量&&jQuery选择器(普通,层级,筛选)
jQuery内置变量$和jQuery：这两个符号是jQuery类库他所占有的全局变量，也就是说你在没有引入jQuery的时候这两个符号是没有定义的东西，如果你引入jQuery那么这个$和jQuery已经是有内容的了(他已经在jQuery内部定义好了jQuery和$这两个变量名)console.log($);//$是已经在jQuery内部定义好了的变量名字,他是一个函数console.log(...
2019-09-06 18:53:05
592
原创 Module
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。export 命令模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口。import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。...
2019-09-06 18:52:50
351
原创 Class
用法class跟let、const一样：不存在变量提升、不能重复声明…es5面向对象写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新...
2019-09-06 18:52:38
287
原创 async 函数
含义ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是 Generator 函数的语法糖。什么是语法糖？意指那些没有给计算机语言添加新功能，而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式，有益于更好的编码风格，更易读。不过其并没有给语言添加什么新东西。反向还有语法盐：主要目的是通过反人类的语法，让你更痛苦的写代码，...
2019-09-06 18:52:19
479
原创 Generator
简介基本概念Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。跟普通函数的区别function关键字与函数名之间有一个星号；函数体内部使用yield表达式，...
2019-09-06 18:52:08
1365
3
原创 Promise
概念Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所`Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。特点对象的状态不受外界影响。一旦状态改变，就不会再变，任何时候都可以得到这个结果。状态Promise对象代表一个异步操作，有三种状态：pending（进行中）、resolved...
2019-09-06 18:51:52
209
原创 Proxy&&Reflect
Proxy概述Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。认识别拦截的对象和拦截器/...
2019-09-06 18:51:39
284
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人