- 博客(65)
- 收藏
- 关注
RSS订阅原创 Object.assign() 实现对象的合并
此操作： 将source1、source2合并到空对象中， 相较于上边的操作， 此种方法创建了新的对象， 不会改变传入对象的值。此操作： 将 source对象合并到target中, 会改变原target的值。此操作： source被传入数组data后， 合并到target。target 是目标对象， source是要合并的对象。Object.assign() 用于实现对象属性的合并, 针对可枚举属性。关于Object.assign的更多用法 ，指路 🔜。
2022-12-14 14:24:42
944
1
原创 Antd Form表单中initialValue设置无效的问题
2. 给Form.Item设置属性 initialValue， 此种方法可行。但formData要有初始值。当formData 初始值 通过useState({})， 设置为空时，此种方法不可行。3. 通过设置setFeildsValue。(场景： 通过接口获取数据，将获取到的数据 展示出来 )1. Input被Form.item包裹， 在input中设置value无效。想要呈现效果（展示form表单，并且在 input中显示初始内容）使用Form.item表单，
2022-12-14 13:43:58
3024
1
原创 新知实验室
TUIRoom 是一个包含 UI 的开源音视频组件，通过集成 TUIRoom，可以在业务中快速上线音视频房间，屏幕分享，聊天等功能。项目是开源的项目，根据自己 的需求设计项目。TUIRoom 基于腾讯云实时音视频和即时通信服务进行开发。如果您还没有腾讯云账号，请，并完成。在单击创建新应用。2.2.1在中获取 SDKAppID 信息。SDKAppID 为 TRTC 的应用 ID，用于业务隔离，即不同的 SDKAppID 的通话不能互通；2.2在中获取应用的 secretKey 信息。
2022-11-26 19:57:36
1089
原创 【Vue】收集表单数据
收集表单数据： 若： 则v-model收集的是value值，用户输入的就是value值 若： 则v-model收集的是value值，且要给标签配置value值 若； 1. 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选， 是布尔值） 2. 配置i...
2022-07-09 16:11:45
601
原创 【Vue】vue中数据监测的原理
Vue监视数据的原理： 1. vue会监视data中所有层次的数据。 通过setter实现监视，且要在new Vue时就传入要监测的数据 （1）对象中后追加的属性，Vue默认不做响应式处理 （2）如需给后添加的属性做响应式，请使用如下API Vue.set(target, propertyName/index, value) 或 Vm.$set(target, prop
2022-07-09 15:44:40
257
原创 【Vue】vue中key的作用及原理
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： （1）旧虚拟DOM中找到了与新虚拟DOM相同的key： 若虚拟DOM中内容没变，直接使用之前的真是DOM 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM （2）旧虚拟DOM中未找到与新虚拟DOM相同的key
2022-07-09 15:32:41
399
原创 【Vue】条件渲染
写法: (1)v-if="表达式" (2)v-else-if="表达式" (3)v-else="表达式" 适用于：切换频率较低的场景 特点：不显示的DOM元素直接被移除 注意： v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断” 写法：v-show="表达式" 适用于：切换频
2022-07-04 14:19:17
140
原创 【Vue】计算属性 与 监视属性
要用的属性不存在，要用已有的属性计算得来 借助了Object.defineProperty方法提供的setter与getter 与methods实现相比，内部有缓存机制，效率更高，调试方便监视属性 当被监听的属性发生改变时，回调函数自动调用 vue中的watch默认不监视对象值内部的变化（一层）简写 当不使用immediate、deep方法时，函数当作handler方法写计算属性与监听属性的区别
2022-07-02 15:43:31
180
原创 【Vue】事件处理
1. 使用v-on：xxx或@xxx 绑定事件，其中xxx时事件名 2. 事件的回调需要配置在methods对象中，否则会在vm上 3. methods中配置的函数，不要用箭头函数！否则this就不是vm了 4. methods中配置的函数，都是被Vue所管理的函数，this的指向就是vm 或组件实例对象 5. @click='demo' 和 @click='demo($event)'效果一样。但后者可以传参。事件的修饰符 1.
2022-07-02 12:25:38
570
原创 【Vue】模板语法
vue中的模板语法有两种： 插值语法、指令语法 用于解析标签体的内容 {{xxx}} xxx是js表达式，可以直接读取到data中的所有属性 用于解析标签 v-html : 显示文本，并解析标签 v-text ：显示文本，不解析标签 v-show ： 显示或隐藏，返回false时，display：none v-if ：渲染或不渲染，条件判断错误时，不渲染页面 v-for
2022-07-02 12:11:26
262
原创 【Node.js】自定义模块
自定义模块：自己实现的js代码注意： 1. 路径以./开头 2. 尽量使用module.exports导出 （test.js）（app.js）导入路径时，文件查找原则如果导入文件夹为路径时。1. 如果文件夹中存在package.json文件，并且指定了main入口。 访问main指向的文件（package.json）2. 没有package.json文件，但存在index.js文件。 访问index.js文件（index.js）3. 没有packa
2022-06-27 20:04:06
267
原创 【Node.js】核心模块
核心模块：Node.js中自带的一些模块node中的核心模块 包括fs、path、http、urlfs模块是用来操作文件的模块。它提供了一系列的方法和属性，用来满足用户对文件的操作。使用fs模块时，先引入。打印fs的内容时，使用utf8，或者toString()，将二进制数据流转换为 汉字等。 1. 读文件 fs.readFile() 异步操作中，先输出peace再输出ok.txt内容。 同步操作中，先输出ok.txt内容再输出peace。2. 写文件 fs.writ
2022-06-27 19:38:32
1015
1
原创 【Node.js】模块
使代码逻辑分离，每一个文件都是一个模块，文件有专职，复用性更强。 Node中的模块 包括三种：核心模块、自定义模块、第三方模块 安装Node.js自带的 包括：http、fs、url、path 自己实现的js代码 注意：路径必须以 ./开头 ， 尽量使用module.exports导出 如果导入文件为路径： 1. 是否存在package.json文件，并且指定了main入口
2022-06-21 19:26:11
57
原创 【ES6】对象新特性
当key名与value名相同时 可以简写为下面ES6形式。2. Object.is()相当于全等，但是有区别建议使用 ===3. Object.assign(obj1,obj2,obj3)合并对象所有对象都会合并到obj1，如果是相同的属性，后边的对象的属性值 会对前边的进行覆盖。将obj的key值返回一个纯数组5. Object.values(obj)将obj的value值返回一个纯数组6. Object.entries(obj)返回一个二维数组，每一个小数组都是一
2022-06-20 22:15:07
151
原创 button和input type=button的区别
两种按钮的区别1. button是双标签 input是单标签 2. button的信息写在标签内input的信息写在value里 同时的值很广泛，有文字、图像、移动、水平线、框架、分组框、音频视频等3. 单击双击事件 可以直接写在button里添加用户综上。推荐使用button。...
2022-06-15 20:17:07
2198
原创 【ES6】promise对象
promise对象的作用： 防止出现回调地狱，提高代码的可读性，像同步操作那样去执行异步操作回调地狱： 是指回调函数中有回调函数。案例
2022-06-15 15:57:17
65
原创 【ES6】数组新特性
扩展运算符：将数组转换为逗号隔开的参数列表应用1. 复制数组2. 合并数组3. 用于解构赋值4. 用于字符串Array构造函数新增方法1. Array.from() 将数组转换为纯数组2. Array.of(a,b,c) 将参数列表返回一个数组 相当于创建数组 Array.of(3) !== new Array(3) Array.of(3): 创建元素为3的数组 n
2022-06-15 14:32:46
341
原创 for in、for of与forEach的用法
for in 用于遍历数组与对象，获取的时key值forEachforEach用于对纯数组中的每个元素执行一次提供的函数for offor of 纯数组与类数组集合均可遍历
2022-06-14 20:04:41
164
原创 【ES6】解构赋值
解构赋值：从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。解构赋值，就是解析结构，进行赋值。分为两种：数组解构 和 对象解构数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋给变量。当左侧变量没有对应的赋值时，返回的时undefined 对象解构对象解构允许我们使用变量的名字匹配对象的属性，匹配成功，将对象属性的值赋给变量。复杂对象的解构赋值特殊对象的解构赋值1. 字符串做对象2. Math的应用实际应用1. 交换两个变量的值2. 提取
2022-06-14 19:48:27
135
原创 【ES6】let、const、var详解
letlet用于声明变量。特点：1. let不能重复声明变量2. let声明的变量不会变量提升3. let声明的变量不属于顶层对象4. let声明的变量具有块级作用域块级作用域：一个花括号 代表一个块级作用域 const用于声明常量。特点：1. 声明常量用大写，必须赋初始值2. 常量不能修改3. 声明的变量具有块级作用域4. 使用const声明的变量也不属于顶层对象let、const、var的区别1.使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。2.使用let
2022-06-13 22:13:22
434
原创 jQuery选择器
2.层次选择器3.过滤选择器(重点)3.2内容过滤选择器3.3可见性过滤选择器3.4属性过滤选择器3.5状态过滤选择器4.表单选择器
2022-06-10 11:38:04
118
原创 前端Object.key(list）
Object.key(list): 获得由对象属性名构成的数组1.传入对象，返回属性名（key值）当对象的key值是Number型，会自动进行排序。2.传入字符串，返回索引3.传入数组，返回索引
2022-06-08 19:53:49
234
原创 AJAX请求
用于局部刷新数据，（不刷新页面的情况下，提交数据）AJAX使用分为4个步骤1. 创建 创建对象 new XMLHttpRequest();2. 配置 xhr.open(请求方式，请求地址，是否异步); 请求方式：get、post 是否异步：true-异步、false-同步 异步：多个任务按顺序开始，不一定按顺序结束。eg：下载任务、图片加载 同步：上一个任务结束，下一个任务开始。eg：弹窗alert3. 响应
2022-06-07 17:38:40
42
原创 JS中的继承
JS作为一门面向对象的语言，其三大特征之一继承，其表现方式不同于Java中的extends的使用。下面分享 关于JS中的继承原型的继承---使用for in
2022-06-02 21:26:38
132
原创 JS原型和原型链
回顾上次的分享，可以知道 a.move !== b.move，其原因是 因为内存地址不同，但是他们的值和功能又是相同的，在一定程度上，造成了内存空间的浪费，因此，原型的出现，解决了这个问题。原型为了避免内存浪费，不建议方法写在构造函数中。建议：方法和共用属性 写在原型中。原型：该类的公共存储空间，用于节省内存原型的需要用 构造函数名调用，实例对象不能调用原型的本质 是个对象每个对象都存在一个_proto_，指向下一个原型此时a.move === b.move其原理 见下图原型链：当访问对象的
2022-06-02 20:43:55
72
原创 JS 面向对象的特征及创建
JS是一门面向对象的语言。下面介绍基于JS的面向对象的特点及创建。1. 封装：将一堆方法和属性放在一起2. 继承：最大限度的重用代码3. 多态：不同类的同名方法4. 抽象：抓住核心的问题上述特点中，封装、继承、多态是面向对象的主要特点，抽象是补充1. 使用object创建2. 使用JSON创建3. 工厂方式4. 使用构造函数创建（推荐）构造函数的名字要大写，用于区别其他的函数，也可以小写，但不建议。实例化对象中的new改变了this的指向，使构造函数中的this指向实例对象本身。
2022-06-02 19:34:07
42
原创 正则表达式
正则表达式是一种描述字符串结构的语法规则，是用于匹配字符串中字符组合的模式，同时正则表达式也是对象。正则表达式的创建1. 使用RegExp构造函数var re = new RegExp("a");2. 使用字面量（常用方法）var re = /a/;正则表达式的方法1. test（）返回一个布尔值，方法用于匹配字符串，匹配成功返回true，失败返回false；2. exec（） 返回匹配结果，发现匹配，就返回一个以每个匹配成功的字符串组成的类数组集合...
2022-05-27 18:00:07
319
原创 DOM0、DOM2级事件
DOM0级事件DOM0级事件就是直接通过onclick等方式实现相应的事件。三种注册方式1. 在html中添加<body> <div onclick="alert('hello')"></div></body>2. 匿名函数<script> d.onclick = function(){}</script>3. 普通函数<body> <div oncli
2022-05-27 11:42:30
213
原创 JS 阻止冒泡 阻止默认
1.什么是事件冒泡？事件冒泡是指事件由子级传向父级，事件冒泡常常会使事件按照不属于我们原本的方式进行，影响我们正常处理事件的流程。下边的代码 通过控制台可以看出事件冒泡的流程。<body> <div id="info"> <div class="box-1" onclick="box1()"> <p>最外层</p> <div class="box-2" o.
2022-05-26 21:45:05
81
原创 touch.js 移动端的手势识别
手机端不同于PC端，只有一个鼠标指针，在手机端上，可以实现多种手势操作，像左滑、右滑、双击、缩小、放大、拖拽等等。在事件中 提供了关于手势事件的事件类型，但是原生的JS实现过于复杂，touch.js是一个移动设备上的手势识别与事件库，利用这个库可以方便很多操作。原生JS事件类型gesturestart：当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发gestureend：当任何一个手指从屏幕上面移开时触发只有两个手指
2022-05-26 19:15:55
975
原创 JS事件之触屏事件
触屏事件是在移动端应用的一种事件触屏事件的类型touchstart：当手指触摸屏幕时触发touchmove：当手指在屏幕上滑动时连续触发touchend：当手指从屏幕上移动时触发touchcancel：当系统停止跟踪触摸时触发上述事件都会冒泡，也都可以取消。每个触摸事件的event对象都提供了在鼠标事件中的常见属性bubbles、cancelable、view、clientX、clientY、screenX、screenY等每个触摸事件包含三个触摸列表touches：当前跟踪
2022-05-25 20:56:58
866
转载 cookie、sessionStorage和localStorage的区别
一、 概念的理解1. webstorage本地存储1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在
2022-05-25 20:30:10
196
原创 JS事件之表单事件
表单事件类型onfoucs：元素获得焦点时触发onblur：元素失去焦点时触发onsubmit：提交表单onchange：当input、textarea元素的value值改变且失去焦点时触发，select元素选项改变时触发oninput：当input、textarea元素的value值改变时同步触发，select元素选项改变时触发onchange与oninputonchange：value值发生改变，并且失去焦点时触发oninput：只要value值改变，就触发...
2022-05-25 20:09:34
495
原创 JS事件之键盘事件
键盘事件的类型keydown：当用户按下键盘上的任意键时触发，按住不动将重复触发，event.keyCode获得键码keyup：当用户释放键盘上的键时触发，event.keyCode获得键码keypress：当用户按下键盘上的字符键时触发，按住不动将重复触发，event.charCode获得键码关于keydown与keypress：建议使用keydown<script> // 键盘事件 // e.keyCode 键码值 判断按键的标准 window
2022-05-25 19:56:57
1417
原创 JS事件之鼠标事件
鼠标事件的类型onclick：单击事件ondblclick：双击oncontextmenu：右键菜单onmouseover：鼠标移入onmouseout：鼠标移出onmouseenter：鼠标移入onmouseleave：鼠标移出onmousedown：鼠标按下onmouseup：鼠标抬起onmousemove：鼠标移动onmouseover、onmouseout与onmouseenter、onmouseleave两者都有鼠标移入移出的作用，但是建议使用on
2022-05-25 19:43:40
2604
原创 JS事件之UI事件
UI(User Interface,用户界面)事件，指不一定与用户操作有关的事件常见的UI事件 包括：load、resize、scrollload事件指当页面完全加载后（包括图像、JS文件、CSS文件等外部资源），在window上触发 window.onload = functoin(){}resize事件resize事件在页面大小发生变化时，在window上触发，浏览器的最小化、最大化也会触发需要注意的是，不同浏览器有不同的规则，在IE、Safari、Chrome、Op
2022-05-25 17:49:42
409
原创 【案例】JS实现 全选/全不选 功能
<!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"> <title>全.
2022-05-23 21:07:48
691
原创 【案例】JS键盘事件 实现元素上下左右移动效果
分享 如何使用JS键盘事件 实现元素上下左右移动的效果效果：按下键盘上的 上、下、左、右键，元素发生对应方向的移动低配版<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
2022-05-20 16:26:32
3973
4
原创 BOM的常见对象
什么是BOMBOM（Bowser Object Model）：提供了一系列与浏览器相关的信息常见的BOM对象window：代表整个浏览器窗口（window是BOM中的一个对象，并且是顶级的对象）Navigator ：代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器Location： 代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息History：代表浏览器的历史信息，通过History我们可以实现上一步/刷新/下一步操作（出于
2022-05-19 19:59:33
608
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人