- 博客(44)
- 收藏
- 关注
RSS订阅原创 React：使用Upload结合react-cropper插件实现拖拽裁切已选图片，点击确定时再上传图片
在React中，使用Antd的Upload组件结合react-cropper插件实现拖拽裁切已选图片，点击确定时再上传图片
2022-09-27 16:27:25
655
原创 Vue3的 v-model directives require no argument 解决方案
最近学习vue3.0，用的vscode，使用的是vetur的插件，一直提示报错：‘v-model’ directives require no argument ，虽然项目可以正常运行，但是强迫症表示看着红杠头疼，最后发现其实是eslint的功能，eslint对vetur的检查出现的问题。问题截图:解决方法：在VScode中，打开 “文件>首选项>设置”，然后搜索Eslint，找到 Eslint: Validate 部分：然后点击 在 setting.json 中编辑，打开后会自.
2021-01-28 10:44:51
8892
3
原创 使用设计模式之观察者模式来实现简单的发送弹幕组件
本弹幕组件要实现的效果：在输入框中按下回车键以后将输入框中的内容生成为弹幕，弹幕从视频区域的右侧进入，不断向左移动，当弹幕完全移动到视频区域的左侧外面时使弹幕从内存中消失，防止内存泄漏。生成弹幕的条件：按下的必须是回车键，并且输入框中的内容不能 全为空格或者没有内容。html代码部分：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta
2020-11-21 09:59:34
310
原创 JavaScript函数之闭包
闭包的概念闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。闭包简单举例 function fn() { return function () {}; } var f = fn(); f(); var obj = (function () { return { abc: functio
2020-11-16 20:14:16
179
原创 JavaScript中各种情况下this的指向问题（全面总结篇）
一、this–>undefinedES6的严格模式中，如果调用函数中的this或者顶层this将会指向undefined。<script type="module"> function fn(){ console.log(this); } fn(); //undefined</script><script type="module"> console.log(this); //undefi
2020-11-14 21:11:59
798
原创 使用原生JS封装菜单组件实现省市县三级级联式菜单，并使用ajax和NodeJs实现前后端通信
数据格式如下：{ 河北: { 石家庄: ["长安区","桥东区","桥西区","新华区","井陉矿区","裕华区","井陉县","正定县","栾城县","行唐县","灵寿县","高邑县","深泽县","赞皇县","无极县","平山县","元氏县","赵县","辛集市","藁城市","晋州市","新乐市","鹿泉市","其他",], ... }, ...}组件JS代码：export default class List extends EventTarget { elem; b
2020-11-14 17:44:26
264
原创 对象深复制的方法之完整版（带注释）
声明：本方法几乎考虑到了所有类型的对象，比如函数、日期、正则、Set、Map、DOM元素等，如有不足敬请指出。首先写好一个包含各种类型数据的对象，如下： var d = Symbol(); var e = Symbol(); var ss = { a: 1 }; var obj = { a: 1, b: 2, c: [1, 2, 3], zz: new Set([1, 2, ss]),
2020-11-13 21:43:47
374
1
原创 JavaScript中获取对象属性的几种方法举例及其说明
首先我们有这样一个对象： var o = {}; var c = Symbol(); Object.defineProperties(o, { a: { value: 1, }, b: { enumerable: true, configurable: true, value: 5, }, [c]: {
2020-11-12 22:19:52
7416
原创 对象设置属性的方法defineProperty和defineProperties
一、defineProperty方法基础语法Object.defineProperty(对象,“属性名”,描述对象);描述对象中的属性及其各自的作用：属性名作用configurable是否可以删除该属性或者修改该属性的定义描述对象enumerable该属性是否可枚举writable该属性是否可修改get获取该属性值时调用该函数set设置该属性值时调用该函数value该属性的值或者方法注意：默认configurable，enume
2020-11-12 21:56:43
6311
1
原创 使用toString()和valueOf()获取值时的区别
一般我们都是使用toString()来将数据转换为字符串的，但其实toString()和valueOf()都是用来获取值的，那它们有什么区别呢？我们通过下面这个例子来理解一下。首先，有下面这样一个对象o： var o = { a: 1, valueOf: function () { console.log("aaa"); return ++this.a; }, toString: funct
2020-11-12 21:16:08
153
原创 复制对象之Object.assign()
基础语法Object.assign(目标对象，要复制的对象1，要复制的对象2…);执行完成后返回目标对象var o = {a : 1};var o1 = Object.assign({}, o);console.log(o1); // {a: 1}特点1、多个对象复制时，相同属性后面的会覆盖前面的。var o = {a : 1};var o1 = { b: 2 };var o2 = { c: 3 };var o3 = { a: 5, c: 6 };var obj = {};Obj
2020-11-12 20:50:22
409
原创 复制对象的几种方法以及各自的特征
方法描述特征浅复制深复制for…in对象遍历复制不修改引用关系，仅能复制字符属性，Symbol不能复制，不可枚举属性不能复制，原型链属性不能复制√JSON.parse(JSON.stringify(obj))转换复制修改引用关系，仅能复制字符属性，Symbol不能复制，不可枚举属性不能复制，原型链属性不能复制，函数和其他类型也不能复制√{…}解构赋值复制法修改引用关系，Symbol和函数都能复制，不可枚举属性和原型链属性都不能复制√Obje...
2020-11-12 20:33:14
948
原创 使用ajax进行前后端通信时的状态（status）分类以及常用的状态码
状态主要分为：信息 =》100-101成功 =》200-206重定向 =》300-307客户端错误 =》400-417服务器错误 =》500-505常用的状态码主要有：消息描述200 OK请求成功（其后是对GET和POST请求的应答文档。)304 Not Modified未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户，原来缓冲的文档还可以维续使用。
2020-11-07 20:24:50
111
原创 使用ajax进行前后端通信时常见的事件
timeout：当进度由于预定时间到期而终止时，会触发timeout （超时）事件。request.addEventListener(“timeout”,timeoutHandler);loadstart：当程序开始加载时，loadstart 事件将被触发。也适用于 <img> 和 <video> 元素。Progress：进度事件会被触发用来指示一个操作正在进行中。loaded 当前加载字节total 总字节abort：当一个资源的加载已中止时，..
2020-11-07 20:08:25
170
原创 ajax前后端通信之超时与断开
当进行前后端通信时，如果响应没有设置结束导致请求一直处于被挂起的状态，或者超出了我们设置的时间，就会发生通信超时。我们可以通过设置请求的 timeout属性 来设置超时时间：request.timeout = 2000;超时时间必须设置在open方法执行以后，send方法执行之前。当超时发生时， timeout事件 将会被触发。request.addEventListener(“timeout”,timeoutHandler);当超时发生以后，我们需要断开通信连接，这时需要使用abort
2020-11-07 19:55:19
1073
原创 ajax前后端通信之readyState简析与应用
readyStatereadyState取不同值时对应的状态及含义：值状态描述0UNSENT代理被创建，但尚未调用open()方法。1OPENEDopen()方法已经被调用。2HEADERS_RECEIVEDsend()方法已经被调用，并且头部和状态已经可获得。3LOADING下载中; responseText属性已经包含部分数据。4DONE下载操作已完成。简单应用：我们可以在使用ajax进行前后端通信时，侦听"readystat
2020-11-07 19:43:28
382
原创 综合使用ajax和Promise进行前后端通信示例
// 定义ajax函数，url是要通信的目标地址，data是要传递的数据，type是通信方式(get/post)function ajax(url, data, type = "get") { // 将传入的通信方式转换为大写格式 type = type.toUpperCase(); // 将数据data转换为JSON字符串 data = JSON.stringify(data); // 根据type的值是否是"GET"，决定o的值应该设置为null还是data var o = type ==
2020-11-07 19:33:52
136
原创 使用ajax进行前后端通信时的跨域问题
前后端通信跨域：当页面地址和服务端通信地址的ip或端口不同时，就发生了跨域，这时需要服务端允许跨域以后，才能正常访问服务端。解决方法：在服务端的响应头中设置 “Access-Control-Allow-Origin”: “*” 即可解决这个问题。请求头跨域：如果请求头发生修改并且非同源，就需要申请请求头跨域。比如上传的数据类型不是默认的文本类型时，这时会自动修改请求头，那么就会发生请求头跨域，这时我们就需要允许请求头的改变。解决办法：在服务端的响应头中设置 “Access-Control-All
2020-11-06 22:37:09
138
原创 ajax前后端通信的头部消息之请求头与响应头
前后端在通信时，互相发送的消息包括头部消息和主体数据，而头部消息分为请求头和响应头两种。请求头是前端发送，服务端获取。响应头是服务端发送，前端获取。设置请求头的规则：请求头设置必须在open方法之后，send方法之前。请求头可以自定义设置，但是必须在非同源时，服务器允许请求头跨域。自定义请求头可以包含一些数据解析的信息，因为请求优先于数据到达服务端。【这样就可以让服务端根据收到的请求头采取相应的方式处理收到的数据】设置请求头的格式：设置请求头时需要先创建一个XMLHttpRequest对
2020-11-06 22:29:41
1555
原创 ajax前端向后端发送数据所使用的send方法参数详解
send方法可以发送的数据的类型有如下几种：不发数据（ArrayBuffer data）：类型化数组 => 加密（Blob data）：二进制大对象 Blob（Document data）：文档格式 => html文档和xml格式文档（DOMString? data）：文本（FormData data）表单对象 FormData => 可以直接封装内容类型化数组类型化数组，即ArrayBu
2020-11-06 21:53:27
2717
2
原创 ajax前端向后端发送数据所使用的open方法参数详解
ajax发送消息的open方法共有5个参数：发送方式，目标地址，是否异步，用户名，密码。XMLHttpRequest.open(method: string, url: string, async: boolean, username?: string, password?: string)Method：GET POST PUT DELETE【PUT和DELETE是直接操作服务器的websql数据，这种方式是非常不安全的，所以我们一般不用】URL：纯地址： (http/https)
2020-11-06 20:23:37
2602
原创 网络通信中的GET和POST两种基本请求方法的区别
GET在浏览器回退时是无害的，而POST会再次提交请求。GET产生的URL地址可以被Bookmark（即可以被记录获取到），而POST不可以。GET请求会被浏览器主动cache，而POST不会，除非手动设置。【如果想要GET不产生cache，就要在GET请求的url后面加上 time=时间戳 这样一个参数】GET请求只能进行url编码，而POST支持多种编码方式。GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。GET请求在URL中传送的参数是有长度限制的，而POST没.
2020-11-06 20:08:08
360
原创 互联网通信中常用的两种策略
同源策略：当使用ajax通信时，如果页面地址和服务端通信地址的ip或端口不同，就属于跨域。安全策略：要求浏览器不能直接保存本地文件，不能直接获取本地文件
2020-11-06 20:06:24
184
原创 js运算符之逻辑运算符
逻辑运算符包括&&（逻辑与）、||（逻辑或）、!（逻辑非）。下面的运算规则中，true和false都是相应位置的数据转换为布尔值后的结果。1、&& 的运算规则如下： true && true = true 返回最后一个值 true && false = false 返回false对应的值 false && true = false 返回false对应的值 false &&
2020-11-04 23:29:43
382
原创 js运算符之关系运算符
关系运算符包括> 、>=、<、<=、==、 ===，运算结果返回一个布尔值。数值比较举例： var a = 3; var b = 4; console.log(a > b); //false
2020-11-04 23:10:01
691
原创 js运算符之一元运算符
一元运算符 var a = 2; a++; //它就等价于a=a+1;先返回结果后运算上面的语句块就可以写成下面的语句块，它们是等价的。 var a = 2; a = a + 1;同理，++a; 就相当于 a=a+1; 也是先运算后返回结果。注意：无论是 ++a / a++ 还是 --a / a-- 全部是用数值运算。 var a = "5"; a++; console.log(a); //6 var a = "5"; a += 1; console.log(a); //"
2020-11-04 14:36:56
473
原创 js运算符之赋值运算符
赋值运算符当看到一个等号时，就是表示将等号右侧的结果赋值给等号左侧，并且返回一个值。 var a = 1; a = a + 1; //2 var a = 1; console.log((a = a + 1)); //2 var a = 1; if ((a = a + 1)) { console.log(a); //2 } var a = 5; while ((a = a - 1)) { //执行4次，按顺序打印4321 console.log(a); }除
2020-11-04 14:35:17
579
原创 js运算符之算术运算符
数值的+ ， - ， * ， / ， %(取模)和数学运算完全相同注意：小数点运算时会产生误差 var a = 0.1; var b = 0.2; var s = a + b; console.log(s); //0.30000000000000004不同数据类型之间的 + 运算 var a = "4"; var b = 1; //"41" var b = true; //"4true"
2020-11-02 14:41:37
332
原创 js数据类型转换（三、各种数据类型转换为布尔型）
""、0、undefined、null、false、NaN 转换为布尔值后都是false；除此之外转换为布尔值后都是true。 var a = ""; //false var a = 0; //false var a = undefined; //false var a = null; //false var a = NaN; //false var a = " "; //true 空格不是空字符串 a
2020-11-02 09:07:07
3736
原创 js数据类型转换（二、各种数据类型转换为字符型）
数值转换为字符型 var a = 5; var a = 255; var a = 2.5555; a = String(a); //强制转换为字符串 a = a.toString(); a = a.toString(16); a = a.toString(36); //将数值按照指定进制类型转换为字符串，进制2~36 a = a.toFixed(); a = a.toFixed(2); //保留小数点
2020-11-02 09:06:38
703
1
原创 js数据类型转换（一、各种数据类型转换为数值型）
字符型转换为数值型NaN的意思是非数值，它的数据类型是数值类型。 var a = "a"; //字符串只要含有非数字就会转换为NaN，否则转换为数值 var a="101001"; var a="4.15a"; a = Number(a); //强制转换 a = parseInt(a); //转换为整型数值，从开始向后转换遇到字符停止（如果开始是数值就可以转换，比如parseInt("a4")的结果就是NaN) a =
2020-11-02 09:06:01
2238
原创 js的基本六种数据类型及判断方法
基本数据类型js中的基本数据类型有六种：数值类型、字符型、布尔型、undefined类型、null类型、object。数值类型 var a = 1; var a = 1.1; var a = -4; var a = 3e2; //3*10^2 var a = 3e-2; //3*10^(-2) var a = 065; //8进制写法，不允许出现大于7的值。ES6取消，不能使用 var a = 0xff; //16进制
2020-11-01 16:46:31
2473
原创 js中的变量(ES5)和常量
变量变量，即可变的量，ES5中使用var定义。不同情况下直接调用变量的结果如果没有定义直接赋值，该变量就是这个值。a=3;console.log(a); //3如果没有定义和赋值，直接调用就会报错console.log(a); //Uncaught ReferenceError: a is not defined如果定义，没有赋值，直接调用的结果是undefinedvar a;console.log(a); //undefined变量的命名命名规则：所有变量名称必须使用字母或
2020-11-01 16:01:07
329
原创 在浏览器页面中写入内容的两种方式
document.body.innerHTML=“你好”;将body中的所有内容换成"你好"字符。document.write(“你好”);在文档中写入"你好"，是在原来的内容后面添加。write只针对document，innerHTML是针对所有标签的。
2020-11-01 15:15:07
1172
原创 js中常用的打印输出语句
console.log(""); //输出日志文件 alert(""); //弹出框(ok对话框) confirm(""); //确定取消对话框，可以得到true的结果或false prompt("", ""); //弹出输入框，允许用户输入，并且返回结果[第二个引号中的内容是输入框里的默认结果]...
2020-11-01 15:02:32
7145
原创 js中的注释
1>注释的写法：// 注释单行/**/ 注释块和注释多行2>注释的作用：(1)可以解释代码内容(2)将部分代码暂时封存，以后需要使用的时候直接把注释符号去掉就可以了
2020-11-01 14:58:37
3981
原创 html中，超链接a标签的一些相关知识
超链接可以做锚点：锚点href的内容：1>指向任何标签的id2>指向a标签的name属性在页面中点击超链接以后会发生： 刷新页面（页面中的js代码不会重新执行） 产生历史记录 地址变化在a标签的href属性值中写“javascript:void(0)”，可以起到的作用：阻止页面的刷新、历史生成和地址的变化。在a标签的href属性值中写"javascript:alert()"，可以起到和在任何标签中写onclick一样的作用...
2020-11-01 14:56:38
178
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人