- 博客(71)
- 收藏
- 关注
RSS订阅原创 【12】ES6：模块化
在 ES6 中使用 export、和 export default 向外导出成员；使用 import 来导入成员。在一个模块中，可以同时使用 export default 和 export 向外导出成员；export default 只允许向外导出一次。使用 export default 向外暴露的成员，可以用任意变量接收。使用 export 向外暴露的成员，必须用 {} 接收，变量之间用逗号分隔，且名称必须与导出时的名称一致。
2024-01-03 23:19:35
1199
原创 【11】ES6：async/await
最后，foo 函数返回一个 resolved 状态的 Promise 对象，该对象的值为’完成’。async/await 是一种基于生成器函数（Generator）和 promise 的语法糖，通过在函数前面加上 async 关键字，将函数转换为返回 promise 对象的异步函数，并使用 await 关键字等待异步操作的结果。await 只能在 async 函数内部使用，它会暂停 async 函数的执行，等待 Promise 对象的状态改变，然后再继续执行 async 函数。
2023-12-28 21:15:24
1224
原创 【10】ES6：Promise 对象
只要主线程空了，就会去读取”任务队列”，这个过程是循环不断的，这就是 JavaScript 的异步执行机制，也叫事件循环。
2023-12-28 00:02:00
1739
原创 【09】ES6：Set 和 Map 数据结构
Set 是一系列无序、没有重复值的数据集合。数组是一系列有序（下标索引）的数据集合。Set 本身是一个构造函数，用来生成 Set 数据结构。
2023-12-14 14:40:29
262
原创 【08】ES6：运算符的扩展
上面代码中，如果 response.settings 是 null 或 undefined ，或者 response.settings.animationDuration 是 null 或 undefined ，就会返回默认值 300。（在链式调用的时候判断，左侧的对象是否为 null 或 undefined，如果是的，就不再往下运算，而是返回 undefined。，又称空值合并运算符。不再被看成是一个完整的运算符，而会按照三元运算符进行处理，也就是说，那个小数点会归属于后面的十进制数字，形成一个小数。
2023-12-13 17:13:23
197
原创 【07】ES6：对象的扩展
对象的解构赋值用于从一个对象取值，相当于将目标对象自身的所有可遍历的（enumerable）、但尚未被读取的属性，分配到指定的对象上面。JavaScript 定义对象的属性，有两种方法。我们知道，this 关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字 super，指向当前对象的原型对象。即如果一个键的值是复合类型的值（数组、对象、函数）、那么拷贝的是这个值的引用，而不是这个值的副本。对象的扩展运算符，只会返回参数对象自身的、可枚举的属性，这一点要特别小心，尤其是用于类的实例对象时。
2023-12-13 11:50:05
391
原创 【06】ES6：数组的扩展
在 Array.from 中第二个参数是一个类似 map 函数的回调函数，该回调函数会依次接收数组中的每一项作为传入的参数，然后对传入值进行处理，最得到一个新的数组。数组实例的原型链指向的是 Array.prototype 属性，instanceof 运算符就是用来检测 Array.prototype 属性是否存在于数组的原型链上，上面代码中的 arr 变量就是一个数组，所有拥有 Array.prototype 属性，返回值 true，这样就很好的判断数组类型了。该方法返回一个新数组，不改变原数组。
2023-11-27 18:25:08
299
原创 【05】ES6：函数的扩展
如果像上面这样，将参数写成多行（即每个参数占据一行），以后修改代码的时候，想为函数 clownsEverywhere 添加第三个参数，或者调整参数的次序，就势必要在原来最后一个参数后面添加一个逗号。将返回没有指定默认值的参数个数，如果设置了默认值的参数不是尾参数，那么 length 属性也不再计入后面的参数了。通常情况下，定义了默认值的参数，应该是函数的尾参数。箭头函数中的 this 是在定义的时候绑定的，this 取上级作用域的 this，箭头函数本身不会决定 this 的值。
2023-11-24 18:17:32
753
原创 【04】ES6：字符串的扩展
targetLength 为字符串补全生效的最大长度， str 是用来补全的字符串，默认为空格。trimStart() 和 trimEnd() 这两个方法，它们的行为与 trim() 一致，trimStart() 消除字符串头部的空格，trimEnd() 消除尾部的空格。浏览器还部署了额外的两个方法，trimLeft() 是 trimStart() 的别名，trimRight() 是trimEnd() 的别名。如果某个字符串不够指定长度，会在头部或尾部补全，返回补全后达到指定长度的字符串。
2023-11-24 11:29:06
510
原创 【03】ES6：解构赋值
rest 是剩余参数的解构，所以只能放在数组的最后，在它之后不能再有变量，否则则会报错。解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。在对象的解构中也可以使用剩余参数，对象中没有解构的剩余属性做聚合操作，生成一个新的对象。如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。既可以用数组的形式来解构赋值，也可以用对象的形式来解构赋值。对象的解构和数组基本类似，对象解构的变量是在 {} 中定义的。上面的表达式虽然毫无意义，但是语法是合法的，可以执行。
2023-11-23 17:45:54
65
原创 【02】ES6：let 和 const 命令
var 是 ES5 声明变量的方式，let 和 const 是 ES6 声明变量的方式。var 和 let 声明的是变量是可以修改的，const 声明的是常量不可修改，const在声明时必须赋值。var 有全局作用域和函数作用域，let 和 const有全局作用域、函数作用域和块级作用域。var 在作用域内允许重复声明，let 和 const在作用域内不允许重复声明。var 有预解析过程，let 和 const 没有预解析过程（没有变量提升+存在暂时性死区）。
2023-11-23 15:42:01
66
原创 【01】ES6：ECMAScript 介绍
ECMA欧洲计算机制造商协会ES6ECMAScript 这门标准的第 6 代版本（2015）。ECMAScript 是语言的标准，6 是版本号。具体内容：语法 + API历史版本：ES1——>3、ES5——>6（ES4 被废弃了），我们目前使用 JS 的大部分内容都是 ES3 的部分。ES6 的兼容性：主流浏览器的最新版本几乎都全部支持 ES6；IE 老版本等不支持的浏览器，可以使用 Babel 转码。ES 与 JS 的关系。
2023-11-22 18:37:22
455
原创 【17】基础知识：reduxjs/toolkit
在实际开发中，如果用户刷新了网页，那么我们通过 redux 存储的全局数据就会丢失，比如登录信息。可以通过 localStorage 将信息存储到本地，需要自己添加逻辑（了解）。在入口文件中使用 PersistGate 包裹根组件，这将延迟渲染 app 视图直到持久化状态取回并保存到 redux 中。是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式。将 store 提供给应用程序，persistor对象提供给根组件。
2023-11-20 18:53:12
1319
原创 【16】基础知识：React路由 - React Router 6
了解React Router 以三个不同的包发布到 npm 上，它们分别为1、react-router：路由的核心库，提供了很多的组件、钩子。2、react-router-dom：包含 react-router 所有内容，并添加一些专门用于 DOM 的组件，例如等。3、react-router-native：包括 react-router 所有内容，并添加一些专门用于 ReactNative 的API，例如等。与 React Router 5.x 版本相比，改变了什么？1、内置组件的变化：移除。
2023-10-19 10:21:04
548
原创 【15】基础知识：React扩展知识
对象式的 setState 是函数式的 setState 的简写方式（语法糖）使用原则：（1）如果新状态不依赖于原状态 ===> 使用对象方式（2）如果新状态依赖于原状态 ===> 使用函数方式（3）如果需要在 setState() 执行后获取最新的状态数据，要在第二个 callback 函数中读取。
2023-10-17 20:55:30
444
原创 【14】基础知识：React - redux
redux 是一个专门用于做状态管理的 JS 库(不是 react 插件库)。它可以用在 react，angular，vue等项目中，但基本与react配合使用。集中式管理 react 应用中多个组件共享的状态。react-redux 一个 react 插件库，专门用来简化 react 应用中使用 redux。
2023-10-17 10:21:01
307
原创 【13】基础知识：React路由
依赖于浏览器history对象，清理浏览器缓存后，this.props.location.state 为 null，书写代码时需要做兼容处理。标签体内容（组件标签）是一个特殊的标签属性，通过 this.props.children 可以获取标签体内容。一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到 Redirect 指定的路由。默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）public/index.html 中 引入样式时不写 ./ 写 / （常用）
2023-10-16 10:57:39
421
原创 【12】基础知识：React ajax
React 项目启动以后，运行到本地 3000 端口，地址为 http://localhost:3000请求 api 接口，接口地址为 http://localhost:5000/students | http://localhost:5001/cars浏览器发起 ajax 请求时，会存在跨域问题。
2023-10-15 19:28:09
456
原创 【11】基础知识：React脚手架
xxx 脚手架：用来帮助程序员快速创建一个基于 xxx 库的模板项目1、包含了所有需要的配置（语法检查、jsx 编译、devServer…）2、下载好了所有相关的依赖3、可以直接运行一个简单效果。
2023-10-15 12:07:36
233
原创 【10】基础知识：React - DOM的diffing算法
如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的。key 是虚拟 DOM 对象的标识，在更新显示时 key 起着极其重要的作用，提高渲染效率，防止渲染错误。1、最好使用每条数据的唯一标识作为 key , 比如 id、手机号、身份证号、学号等唯一值。若对数据进行，逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实 DOM 更新。当状态中的数据发生变化时，React 会根据【新数据】生成【新的虚拟DOM】key的内部原理是什么？
2023-10-14 23:06:52
372
原创 【09】基础知识：React组件的生命周期
组件从创建到死亡它会经历一些特定的阶段。React 组件中包含一系列勾子函数（生命周期回调函数 生命周期钩子函数 生命周期函数 生命周期钩子），会在特定的时刻调用。我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。初始化阶段：由 ReactDOM.render() 触发，初次渲染1、构造器：constructor()2、组件将要挂载的钩子：componentWillMount()3、组件渲染或组件更新的钩子：render()4、 组件挂载完毕的钩子：componentDi
2023-10-14 22:17:00
718
原创 【08】基础知识：React中收集表单数据（非受控组件和受控组件）
页面中所有输入类的 DOM，随着输入，将内容维护到状态 state中，当需要使用时，直接从 state 中读取，这类 DOM属于受控组件。2、若 A 函数，调用的返回值依然是一个函数，那么 A 就可以称之为高阶函数。// 阻止表单提交，form中的button默认也是onSubmit方法。// 阻止表单提交，form中的button默认也是onSubmit方法。1、若 A 函数，接收的参数是一个函数，那么 A 就可以称之为高阶函数。// 阻止表单提交，form中的button默认也是onSubmit方法。
2023-10-14 15:08:39
360
原创 【07】基础知识：React中的事件处理
不要过度使用 ref （比如，元素获取自身属性时，通过 event 对象，而不是 ref）为了更好的兼容性：React 使用的是自定义（合成）事件，而不是使用的原生 DOM 事件。为了的高效：React 中的事件是通过事件委托方式处理的（委托给组件最外层的元素）/* 事件委托机制，React会把事件加在最外层元素，div 身上 */// event 为 右侧 input。// 展示左侧输入框的数据。// event 为 按钮。// 展示右侧输入框的数据。// 创建ref容器。// 渲染组件到页面。
2023-10-14 14:22:32
330
原创 【06】基础知识：React组件实例三大核心属性 - ref
执行 1+n*2 次，初次渲染和更新时执行（第一次null，第二次DOM元素），不会产生什么问题。
2023-10-14 13:58:01
484
原创 【05】基础知识：React组件实例三大核心属性 - props
理解1、每个组件对象都会有 props（properties的简写）属性2、组件标签的所有属性都保存在 props 中作用通过标签属性从组件外向组件内传递变化的数据注意组件内部不要修改 props 数据需求：自定义用来显示一个人员信息的组件姓名必须指定，且为字符串类型；性别为字符串类型，如果性别没有指定，默认为男年龄为字符串类型，默认为182、对 props 进行限制React 中使用 propTypes 对标签属性进行类型、必要性的限制React.PropTypes 形式 React v15.5 开始
2023-10-14 00:03:35
685
原创 【04】基础知识：React组件实例三大核心属性 - state
/ console.log(this) // this为undefined，因为babel会将jsx转换为严格模式，严格模式下自定义函数中this为undefined。// 自定义方法：要用赋值语句的形式（将changeWeather放在实例对象上，而不是原型对象上）+ 箭头函数（箭头函数没有this，指向父级的this，为实例对象）// that = this // ********了解：赋值this给that。// let that // ********了解：定义变量，缓存this。
2023-10-13 17:18:25
443
原创 【03】基础知识：React组件
2、发现组件是使用类定义的，随后 new 出来该类的实例，并通过该实例调用到原型上的 render 方法。2、发现组件是使用函数定义的，随后调用该函数，将返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中。// * 类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。当应用的 js 都以模块来编写的，这个应用就是一个模块化的应用。// 2、渲染组件到页面（组件必须书写为标签形式，且闭合）当应用是以多组件的方式实现，这个应用就是一个组件化的应用。
2023-10-13 13:10:53
306
原创 【02】基础知识：React - jsx语法规则
全称为JavaScript XML，是 react 定义的一种类似于 XML 的 JS 扩展语法JS + XML 本质是 React.createElement(component, props, …children) 方法的语法糖，用来简化创建虚拟 DOM写法：var ele = Hello JSX!注意：它不是字符串，也不是 HTML/XML 标签它最终产生的就是一个 JS 对象。
2023-10-13 11:24:49
346
原创 【01】基础知识：React简介与案例
React 概述React 是一个将数据渲染为 HTML 视图 的开源 JavaScript 库React 由 FaceBook 开发，且开源为什么要学习 React1、原生 JavaScript 操作 DOM 繁琐、效率低（使用 DOM-API 操作 UI）2、使用 JavaScript 直接操作 DOM，浏览器会进行大量的重绘重排3、原生 JavaScript 没有组件化编码方案，代码复用率低React 的特点1、采用组件化模式、声明式编码，提高开发效率及组件复用率。
2023-10-13 11:23:17
316
原创 【06】基础知识：typescript中的泛型
在软件开发中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能支持当前数据类型，同时也能支持未来的数据类型，这在创建大型系统时提供了十分灵活的功能。在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据，这样用户就可以以自己的数据类型来使用组件。通俗理解，泛型就是解决类、接口、方法的复用性，以及对不特定数据类型的支持（类型校验）。
2023-10-11 18:03:01
378
原创 uni-app, 实现 scroll-view 自动滚动到底部，并控制触发频率
在频繁触发场景下，为了降低执行频率，可以增加节流函数 throttle，让 chatScrollTop 方法在规定时间内只执行一次，如果不需要可以忽略。当 scroll-view 内容改变时，调用 chatScrollTop 方法，就可以实现 scroll-view 内容区域自动滚动到底部效果。通过类名获取 scroll-view、和 scroll-view内容容器，得到两个元素的高度，动态设置 scrollTop 值。想要实现 scroll-view 滚动到底部，只需要让。
2023-09-22 17:11:18
3303
2
原创 uni-app 框架中使用 vuex（store）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。，不需要额外安装。
2023-09-22 11:04:04
958
原创 【05】基础知识：typescript中的接口
接口定义了某一批类所需要遵守的规范，接口并不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。通过关键字 interface 定义接口，在类中通过关键字 implements 来实现接口。在面向对象编程中，接口是一种规范的定义，它定义了行为和动作的规范；属性接口用来对 json 进行约束，对批量方法传入参数进行约束。typescript 中的接口类似于 java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。
2023-08-17 16:22:33
244
原创 【04】基础知识：typescript中的类
typescript定义类；typescript类的继承 extends、super；typescript类的修饰符；typescript类的静态属性、静态方法；typescript中的多态；typescript中的抽象类
2023-08-17 14:01:42
135
原创 【02】基础知识：typescript数据类型
也许在某处你想传入一个 string 或 null 或 undefined，你可以使用联合类型 string | null | undefined。默认情况下 null 和 undefined 是所有类型的子类型。元组属于数组的一种，元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。ts定义数组分为两种方式，一种是在元素类型后面接 []，表示由此类型元素组成的数组；never 类型表示从不会出现的值， never 类型是任何类型的子类型。枚举类型用于定义数值集合。
2023-08-11 18:43:55
1298
原创 【01】基础知识：typescript安装及使用，开发工具vscode配置
tsc : 无法加载文件C:\Users\ASUS\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅
2023-08-11 17:00:56
1307
原创 微信小程转发/预览文件、自定义转发/预览文件名称功能实现
在小程序中如何实现呢？先使用 wx.downloadFile 将网络文件下载到本地，然后使用 wx.shareFileMessage 进行 转发、wx.openDocument 进行预览。比如，预览 PDF 文件、把 PDF 文件转发到微信聊天、自定义预览/转发的 PDF 文件名称。本地用户文件提供了一个用户文件目录给开发者，开发者对这个目录有完全自由的读写权限。文件系统是小程序提供的一套以小程序和用户维度隔离的存储以及一套相应的管理接口。项目中需要对网络文件进行转发/预览，并且自定义网络文件名称，
2023-08-10 15:20:01
1210
原创 vue项目中使用节流throttle 和 防抖debounce
在 vue 项目中，想要给 methods 中的某个方法 fn 增加节流或防抖，应该如何实现？节流：频繁输入、频繁操作的时候，保持一定频率连续触发，比如 scroll 事件、click 事件。防抖：频繁输入、频繁操作的时候，在最后才触发事件处理函数，比如 input 输入事件。
2023-08-04 16:34:19
1044
原创 微信小程序接入腾讯云天御验证码
验证码组件引入的路径，必须和在 app.json 或 manifest.json 中声明的名称一致。比如，在 manifest.json 中声明的名称叫 captcha ，那么引入时的路径就是 plugin://captcha/t-captcha，才能正确引入。
2023-08-01 18:07:37
1865
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人