- 博客(35)
- 收藏
- 关注
RSS订阅原创 React的状态管理Redux
Redux状态管理前言一、Redux是什么？二、安装三、核心概念1.state 对象2.state 是只读的3.通过纯函数修改 state4.纯函数 -- 函数式编程的一种概念5.action 对象6.Store 对象 (负责存储的仓库)四、redus 三大原则五、基本使用六、combineReducers核心概念作用总结前言本文介绍了一下React中的如何使用状态管理库一、Redux是什么？Redux 是一个独立的JavaScript 状态管理库， 非React内容之一 。Redux
2021-07-30 20:22:57
318
原创 React 核心 Hooks & 路由
React的Hooks跟路由的使用React hooksReact hooks是什么?React Hooks的优势?为什么使用 Hooks?常用 hookuseStateuseEffect代码案例:Hook 使用规则React 路由路由SPA前端路由React Router基于 Web 的 React Router组件BrowserRouter 组件HashRouter 组件HashRouter与BrowserRouter的区别Route 组件exactLink 组件to 属性NavLink 组件activ
2021-07-29 20:25:28
1056
原创 React组件核心
文章目录前言一、Props 的只读性二、State 和 setState正确地使用 Stateprops和state的区别三、事件处理函数组件当中使用:类式组件当中使用:四、子传父五、组件通信(跨组件)为什么使用Context?Context.ProviderContext.Consumer六 非受控组件与受控组件非受控组件受控组件总结前言本文介绍了一下React中的 props&state、事件处理、子传父、组件通信以及非受控组件与受控组件,希望对你有所帮助。一、Props 的只读性p
2021-07-27 20:25:30
266
原创 一文带你玩转React
React是什么?一个用于构建用户界面的 JavaScript 库React中文文档声明式React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。以声明式编写 UI，可以让你的代码更加可靠，且方便调试。组件化构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。由于组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并保持状态与 DOM 分离。如何使用 React基于浏览
2021-07-26 20:13:48
220
原创 TypeScript常用语法之函数与泛型
函数函数是 JavaScript 应用程序的基础，它帮助你实现抽象层，模拟类，信息隐藏和模块。在 TypeScript 里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义行为的地方。TypeScript 为 JavaScript 函数添加了额外的功能，让我们可以更容易地使用。// 封装了一些重复使用的代码,在需要的时候直接调用即可(()=>{ // js书写方式,ts也可以书写 // 函数声明,命名函数 // function add(x, y){
2021-07-02 19:16:49
311
1
原创 TypeScript常用语法之接口跟类的使用
接口TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口（Interfaces）来定义对象的类型。接口是对象的状态(属性)和行为(方法)的抽象(描述)// 定义人的接口interface IPerson { // 只读属性: readonly readonly id: number name: string age: number // 可选属性: ? sex?: string}const person1: IPerson = { id:
2021-07-01 19:05:31
239
原创 TypeScript的常用语法之基础类型
基础类型TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。布尔值最基本的数据类型就是简单的 true/false 值，在JavaScript 和 TypeScript 里叫做 boolean（其它语言中也一样）。let flag: boolean = false;flag = true;console.log(flag)数字和 JavaScript 一样，TypeScript 里的所有数字都是浮点数。 这些浮点数的类型是 num
2021-06-30 19:28:21
226
原创 快速学习TypeScript
什么是TypeScript?TypeSctipt 是以JavaScript为基础构建的语言,是JavaScript的超集,TypeScript扩展了JavaScript,并添加了类型,可以在任何支持JavaScript的平台执行,TypeScript不能被JavaScript解析器直接执行,JavaScript不利于维护,TypeScript易于维护TypeScript 的特性类型系统从 TypeScript 的名字就可以看出来，「类型」是其最核心的特性。我们知道，JavaScript 是一门非常
2021-06-29 19:56:34
180
原创 小程序生命周期函数
生命周期生命周期是指一个小程序从创建到销毁的过程中一系列的操作小程序的两种生命周期在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面小程序的生命周期注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。参数属性类型默认值说明onLaunchfunction否生命周期回调——监听小程序初始化。onShowf
2021-06-28 20:39:13
280
原创 一篇教你学会小程序组件的生命周期
小程序组件生命周期组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。created：组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添
2021-06-25 20:47:47
218
1
原创 小程序的云开发
在说云开发之前,先了解一下非云开发非云开发非云开发，也就是传统的开发，所有的前后端搭建都靠自己，数据库、服务器等等，架构设计后后期运维都需要懂点，不然就可能写写，越写越恶心。云开发云开发就是除了前端页面，后面那一大坨都包装了下，给了一些简洁的接口。如果是本身不熟悉代码或者是想快速上手的，可能更合适些。不过因为包装了，那么服务器的容量占用、数据库的调用等都会有一定限制，毕竟免费给了些空间，省了直接租服务器的钱！云开发和非云开发的区别云开发无需建服务器，小程序云提供了一个免费基础版本，如果是非云
2021-06-24 20:51:11
4561
1
原创 小程序中的webSocket介绍以及使用
什么是 webStoket?WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。现在，
2021-06-23 20:43:20
1152
原创 小程序的父子组件传参以及插槽详解
新建一个 Component创建两个空的文件夹, 开发者工具中 鼠标右键 其中一个文件夹 ,选择 新建 Component,比如我这里新建一个 index子组件在 demo-1里面的 index.wxml中写<view> <button type="primary" bindtap="clickFn">接收父组件的值</button></view>在 demo-1里面的 index.js中写Component({ /** *
2021-06-22 20:40:21
344
原创 初入小程序
什么是小程序?小程序是一个不需要下载安装就可以使用的一个应用，它实现了应用触手可及的梦想，用户扫一扫或者搜一下即可打开应用。也体现了用完即走的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。在介绍小程序的时候，一般都会用APP进行对比分析，用APP来理解小程序很形象，小程序对很多人来说是个陌生的新物种，但是APP大家都熟悉。因此，可以将小程序理解为一个轻便的APP。网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开
2021-06-21 21:02:48
189
原创 初学git
什么是Git?Git 是一个开源的免费的分布式版本控制系统,可以更高效的处理项目文件。它的性能好,内存小,运行快,易上手。Git 提供了3种不同的状态已修改已暂存已提交还有一个特殊的状态未追踪还有3个区域工作区 :我们能看到的区域,在这里面进行一系列的操作。暂存区:工作区操作完的文件通过一些命令放到暂存区。历史记录区(仓库):然后通过命令提交到仓库中。安装在 Git 官网 下载对应电脑的 版本,无脑 next初始化 (创建仓库)首先创建一个空目录,然后鼠标右键
2021-06-10 20:51:12
85
原创 webpack 中的插件(Plugins)
为什么要使用插件?它是webpack中的一个重要功能,主要是用来提高你的开发效率,在webpack中用来扩展功能,它在整个构建过程中生效。既然它是插件,那肯定不止一个,所以当你需要某个插件的时候,要先安装在去使用,现在我就给大家介绍几个插件常用的插件吧。HtmlWebpackPlugin它会在你项目打包完成后,自动生成一个 html的文件,并把你自己的模板引入该html文件中。使用它之前要先安装,命令行输入命令 :npm install --save-dev html-webpack-plug
2021-06-09 21:00:31
506
原创 webpack中的Loaders
什么是Loader?因为webpack本身只理解 JavaScript 和 JSON 文件 ,所以出来一个 loader 来允许 webpack来处理其它类型的文件,并将其转为有效的 模块(module)。模块里面肯定有不同的rules(规则) 它里面有 2 个必选属性:test:该属性标识应该转换哪个或哪些文件。use:属性指示应该使用哪个loader来进行转换。特点可以是同步的也可以是异步的可以使用 options 对象进行配置处理各种文件类型转化为有效模块使用比如当前项目
2021-06-08 20:38:27
271
原创 一文教你学会webpack
什么是webpack?webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言 (Scss,TypeScripe等) ,并将其打包为合适的格式以供浏览器使用。webpack可以做的事情 代码转换,文件优化,代码分割,模块合成,自动刷新,代码校验,自动发布安装(npm)因为 webpack 是基于 node.js 开发的,所以安装之前要先安装配置 node 环境变量创建一个文件夹, 然后进入文件夹 ,在 命令行
2021-06-07 20:55:42
171
1
原创 ES6 模块化(概念)
模块化前端为什么用模块?举例：要想实现一打开页面，弹框和页面效果同时加载加载模块三种规范：后端：CommonJS是主要为了JS在后端的表现制定的CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。前端：1. CMD规范 即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载（可以
2021-06-06 19:57:32
195
原创 vscode安装sass
安装 Ease Sass在 设置 > 扩展设置 中的 settings.json文件中修改配置"easysass.compileAfterSave": true, "easysass.formats": [ //nested：嵌套缩进的 css 代码。//expanded：没有缩进的、扩展的css代码。//compact：简洁格式的 css 代码。//compressed：压缩后的 css 代码 { "format": "expanded"
2021-06-06 19:43:38
409
原创 JavaScript 正则(基础)
正则创建方式通过new关键字创建var reg=new RegExp('要匹配的元素','修饰符');字面量的创建var reg=/a/;元字符符号含意\d数字字符’0’~‘9’\D非数字字符\w数字、字母、下划线字符：即单词字符\W非单词字符\s空格字符\S非空格字符\b单词边界//匹配的只是一个位置 这个位置的一侧是构成单词的字符 另一侧为非单词字符 字符串的开始和结束位置\B非单词边界.表示
2021-06-06 19:20:13
91
1
原创 JavaScript 中find跟findIndex
find跟findIndex的区别findconst arr = [1,2,4,8,12];var arr1 = arr.find(value => value> 8);console.log(arr1); //12var arr2 = arr.find(value => value > 12);console.log(arr2); //undefinedfindIndexconst arr = [1,2,4,8,12];var arr1 = arr.fi
2021-06-06 18:49:12
505
1
原创 深入理解箭头函数
深入理解箭头函数箭头函数不仅仅是编写简洁代码的“捷径”。它还具有非常特殊且有用的特性。JavaScript 充满了我们需要编写在其他地方执行的小函数的情况。例如：arr.forEach(func) —— forEach 对每个数组元素都执行 func。setTimeout(func) —— func 由内建调度器执行。……还有更多。JavaScript 的精髓在于创建一个函数并将其传递到某个地方。在这样的函数中，我们通常不想离开当前上下文。这就是箭头函数的主战场啦。箭头函数没有"thi
2021-05-30 19:26:46
128
原创 ES6 Symbol
SymbolES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。特点唯
2021-05-29 15:17:42
276
原创 JavaScript 递归
什么是递归?递归是一种编程模式，在一个任务可以自然地拆分成多个相同类型但更简单的任务的情况下非常有用。或者，在一个任务可以简化为一个简单的行为加上该任务的一个更简单的变体的时候可以使用。或者，就像我们很快会看到的那样，处理某些数据结构。当一个函数解决一个任务时，在解决的过程中它可以调用很多其它函数。在部分情况下，函数会调用 自身。这就是所谓的 递归。两种思考方式简单起见，让我们写一个函数 pow(x, n)，它可以计算 x 的 n 次方。换句话说就是，x 乘以自身 n 次。pow(2, 2) =
2021-05-28 13:51:36
459
7
原创 点击劫持攻击
点击劫持攻击点击劫持攻击允许恶意页面 以用户的名义 点击"受害网页"原理我们以 FaceBook 为例子,解释点击劫持是如何完成的:访问者被恶意页面吸引。怎样吸引的不重要。页面上有一个看起来无害的链接（例如：“变得富有”或者“点我，超好玩！”）。恶意页面在该链接上方放置了一个透明的 <iframe>，其 src 来自于 facebook.com，这使得“点赞”按钮恰好位于该链接上面。这通常是通过 z-index 实现的。用户尝试点击该链接时，实际上点击的是“点赞”按钮。案例
2021-05-27 20:13:04
256
原创 HTML5 video
video 视频1. video介绍HTML5中提到最多的是视频处理,视频也是互联网中的重要应用.在HTML5中,增加了一个元素,以便在HTML文档中插入和播放视频,这个元素机试video元素.video元素提供了 播放,暂停和音量控件来控制视频.也提供了 width 和 height 属性 控制视频的尺寸.注意:IE8或者更早的IE版本不支持video元素2. video支持格式使用video元素至少要提供两种视频格式的文件:OGG和MP4OGG:包含Theora视频和Vorbis音频解码
2021-05-23 19:19:57
1097
3
原创 原生js文字搬运工
文字搬运工功能文字挨个从左往右移,左边删掉第一个,右边添加刚刚删掉的移动过程中，按钮不能重复点击有进度条，进度条延迟消失有统计数字没有输入内容给个弹窗提示一下实现思路左侧的内容一个一个删除掉,右侧内容一个一个添加声明一个变量存储左侧里面的值效果图css样式 <div id="wrapper"> <textarea id="left"></textarea> <div id="center"> <a href=
2021-05-23 10:00:23
178
原创 axios 介绍 安装 及 使用
什么是axios?Axios 是 基于 Promise 的 HTTP库,可以用在 浏览器 和 node.js 中特性从浏览器中创建 XMLHttpRequests从 node.js创建 http 请求支持Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRFnpm 安装npm install axios vue-axios在 vue-cli 入口文件 main.js 中 引入使用import Vue from 'v
2021-05-21 10:10:46
303
原创 Vue项目登录退出功能
Vue实现登录退出功能登录实现用户输入用户名跟密码数据提交到后台验证验证成功跳转到项目首页功能实现判断用户是否登录需要用到登录的强制跳转到登录页(比如购物车收藏 , 关注等等)使用 localStorage 存 token// 路由全局守卫写判断router.beforeEach(async (to, from, next) => {// 存一个token 字符串类型(String) const token = localStorage.getItem('to
2021-05-17 20:30:48
2132
6
原创 cookie设置过期时间 toUTCString() 方法
<script> var d = new Date() d.setTime(d.getTime()+7*1000*60*60*24) //7天后过期 document.cookie='sex=女;expires='+d.toUTCString()+";path=/"</script>
2021-01-11 15:00:55
599
1
原创 JavaScript---Promise(简单认识)
Promise 是一个 ECMAScript 6 提供的类, 目的是更加优雅地书写复杂的异步任务.Promise 对象有以下两个特点:1. 对象的状态不受外界影响, Promise 对象代表一个异步操作，有三种状态：pending: 初始状态, 不是成功或失败状态fulfilled: 意味着操作成功完成rejected: 意味着操作失败只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态.2. 一旦状态改变，就不会再变, 任何时候都可以得到这个结果.Promise
2020-11-10 19:36:52
405
原创 Canvas实现鼠标效果
排版(布局)<body> <canvas id="cc" width="" height=""></canvas></body>css样式<style type="text/css"> *{ margin: 0; padding: 0; } body{ background-color: black; } </style>js代码<script type="text/javascri
2020-11-04 10:20:09
1010
原创 纯css摩天轮旋转动画
布局(html代码块)<body> <div class="box"> <div class="pic1"> <img src="./images/boy.png"/> </div> <div class="pic2"> <img src="./images/girl.png"/> </div> <div class="pic3"> <
2020-11-01 19:17:02
1214
原创 js实现简单的点名器随机色
js简单实现点名器随机色布局(排版)<body> <button onclick="star()">开始</button> <button onclick="stop()">结束</button> <div id="box"> </div></body>css样式<style> #box{ width: 240px; height: 400px; } #a{
2020-09-17 09:55:49
2133
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人