- 博客(32)
- 收藏
- 关注
原创 事件循环(event loop)
为什么js是单线程初学计算机语言的时候,无论是C、C++还是JAVA,都是支持多线程,偏偏JavaScript是单线程,不支持多线程,这也跟JavaScript的作用有关,都知道JavaScript是主要运行在浏览器的脚本语言,最终操作的是页面的DOM结构,当两个JavaScript脚本同时修改页面的同一个DOM节点时,浏览器该执行哪个呢?所以当时设计JavaScript时,便要求当前修改操作完成后方可进行下一步修改操作。浏览器是支持多进程浏览器的每一个 tab页都是一个进...
2022-04-27 10:19:04
603
原创 react- context
React.creatContext(defaultValue) 创建一个context对象(上下文),这个context对象有两个属性provide :提供数据,可以定义默认值Provider下面的consumer都可以拿到这个valueconsumer :订阅数据,消费数据,从这个属性可以获取到数据consumer要求children是一个函数,函数的第一个参数为value...
2022-03-29 17:05:24
1222
原创 react——代码分割
打包打包是一个将文件引入并合并到一个单独文件的过程,最终形成一个 “bundle”。接着在页面上引入该 bundle,整个应用即可一次性加载。代码分割随着写的应用增大,打的代码包也会增大。尤其是在整合了体积巨大的第三方库的情况下,可能后面的运行会因代码包的体积过大而导致加载时间过长。对代码包进行分割可以避免搞出大体积的代码包。 代码分割是由诸如Webpack,Rollup和 Browserify(factor-bundle)这类打包器支持...
2022-03-23 17:18:54
1322
原创 常用linux命令
rmdir删除空的目录,也只能删除空目使用:rmdir + 目录名rmdir -p + 目录名例子:将工作目录下,名为 AAA 的子目录删除 :rmdir AAA在工作目录下的 BBB 目录中,删除名为 Test 的子目录。若 Test 删除后,BBB 目录成为空目录,则 BBB 亦予删除。rmdir -p BBB/Testrm删除非空目录或文件使用:...
2022-02-09 16:08:23
911
原创 package.json与package-lock.json
package.json记录当前项目所依赖模块的版本信息,更新模块时锁定模块的大版本号(版本号的第一位),不能锁定后面的小版本,package-lock.jsonpackage-lock.json 是在 `npm install`时候生成一份文件。记录了node_modules目录下所有模块(包)的名称、版本号、下载地址、及这个模块又依赖了哪些依赖。两者区别:npm5以前npm5以前,没有package-lock.jso...
2022-02-09 11:38:22
21840
1
原创 倒计时(未结束回到页面继续倒计时)
const countDownTimeoutIndex = React.useRef<any>(0) let seconds = 0 React.useEffect(() => { // 拿store里的倒计时结束时间,还没结束就继续倒数 const endTimeStr = Taro.getStorageSync('phone_verify_countdown') if (!endTimeStr) { return } ...
2021-12-16 15:44:39
479
原创 css 部分动画记录
出现:往上滑一段显示消失:往下滑一段后消失@keyframes enter-to { from { transform: translate(0, 10%); opacity: 0; } to { transform: translate(0, 0%); opacity: 1; }}@keyframes leave-to { from { transform: translate(0, 0%); opacity: 1;
2021-11-26 14:44:00
1104
原创 城市选择,城市联动
方法一:前置条件: 1、每个字母下的城市列表使用一个容器包着,容器带有id,方便后续锚点跳转。2、navigatorBar里的字母高定死,知道navigatorBa总高度,方便知道滑动到哪个字母。方法: 锚点跳转监听navigatorBar的滑动距离,计算出所滑动的点是在哪个字母的范围(比如我知道一共有10个字母,一个字母定高10px,我滑动了30px,30px在第三个字母的范围内,所以我就知道了我滑到了第三个字母。)取出这...
2021-11-26 12:11:29
220
原创 react-10(stateHook,effect Hook)
State Hook1、16.8以后的新特性,现在可用2、我们之前的组件都是以类的概念来实现的,里面可以 写函数、属性、state、视图,hook就是让我们在不写类的情况下也能实现效果,hook在类组件丽不生效。 (函数组件 )3、没有计划移除class,hook和class并存。(可以写类组件,也可以写函数组件)hook是什么?hook是react的一个特殊的函数,可以引入react的特性,系统的调用函数,useState()后面就带了个括号。state Hoo...
2021-10-27 18:09:57
364
原创 react-10(generator函数,redux-saga中间件)
redux的另一个中间件。前置知识点:ES6 generator函数generator函数 生成器的意思。是普通函数,但是带了一个 * 号经典形态:function* test(){}function * test(){}function *test(){}分段使用:generator函数是暂缓执行的,可以分段使用,比如我们调用function* test(){ console.log(1)}test() //没有任何...
2021-10-26 15:49:53
549
原创 react-9(redux-thunk中间件)
redux-thunkredux中间件,处理异步请求在我们用了redux-thunk,actionCreators可以返回一个函数,可以在返回的函数内部可以发送异步,(在该函数里有参数dispatch,发送异步),异步成功之后再分发一个action(纯粹改数据的action)更改数据。 所以可能需要出现两个actionCreators,一个用来分发异步action,如何在这个action里发送一步请求,拿到数据后再分发由另一个actionCreators...
2021-10-25 15:25:55
141
原创 文本超出3行后省略号,展开/关闭按钮显示全部
<p id="FEllipsis" ref="FEllipsis" class="desc"> {{ promoCouponDesc }} </p> <div class="bottom"> <div v-if="extraCouponInfo.giftDesc" class="giftDesc"> ...
2021-10-25 11:27:46
1164
原创 nvm搭建
1、下载/创建一个nvmInstall.sh脚本#!/usr/bin/env bash{ # this ensures the entire script is downloaded #nvm_has() { type "$1" > /dev/null 2>&1}nvm_echo() { command printf %s\\n "$*" 2>/dev/null}nvm_grep() { GREP_OPTIONS='' command grep
2021-10-20 15:35:12
1094
原创 react-8(react-redux)
可以看到上一篇react-7里的例子写法是比较复杂的,UI组件和容器(显示页面的UI和业务逻辑没有分离),可以使用react- redux处理一下。react-redux 在上一篇中我们知道了redux是什么和怎么样使用的,而react-redux就是可以帮助我们使用redux的时候简化代码。 思想一:react-redux的作用就是将我们之前写的类组件改成函数组件(无状态组件)在react中提倡尽可能的使用函数组件...
2021-10-18 17:01:48
438
原创 react-7(redux)
由于redux只能做同步操作,如果需要做异步操作,需要借助中间件(redux-thunk 或者 redux-saga,二选一)。在react中,只要你需要进行状态管理,就需要使用redux;如果想要简化代码,将业务逻辑和UI组件分离,就需要使用react-redux; 如果要后台进行异步交互,就需要使用redux-thunk 或者 redux-saga。react-redux 思想一:react-redux的作用...
2021-10-09 12:08:54
212
原创 从url输入到返回请求的过程
网络篇:构建请求 (对URL进行解析)为什么要解析?因为网络标准规定了URL只能是字母和数字,还有一些其它特殊符号,比如-_.!等,不包括百分号和双引号,不转义会出现歧义怎么解析?为什么不转译会出现歧义?在浏览器地址栏中输入信息,然后回车,浏览器会进行以下判断。URL是否合法?合法就会继续检查他的完整性,如果不完整,浏览器可能会对域进行猜测,对输入的内容添加协议、域名、端口号、路径、哈...
2021-09-29 15:36:35
402
原创 react-6(redux)
使用Javascript开发单页面程序的时候,我们需要管理很多很多状态(state),例如: 服务器的响应,本地生成的尚未持久化到服务器的数据(表单数据),激活的路由,选中的标签,是否显示 加载动效或分页器等等。管理不断变化的状态非常困难,状态的改变可能会引起页面的变化,而 页面的改变也会引起状态的改变,这种改变异常复杂,以至于我们很难捋清业务实现功能。为了 规范的管理各种状态,我们可以使用状态管理机制1.安装redux yarn add redux2....
2021-08-24 17:27:06
225
原创 react-5(ant-design,Ajax,Axios)
react组件库:ant-design,antVAntD Admin:基于react,ant-design,dva,Mock 企业级后台管理系统最佳实践github地址:https://gitee.com/mirrors/AntD-Admin演示地址:https://antd-admin.zuiidea.com (用户名和密码都是guest)在项目中引入 ant-designhttps://ant.design/index-cn...
2021-08-24 11:01:15
202
原创 安卓和ios的scrollTop获取的值不一致的问题记录
一段下拉刷新的代码出现了兼容bug,按理说利用 scrollHight <=clientHight *2+ scrollTop就能判断出下拉的情况,然后在触发刷新函数。代码如下:但是在使用document.documentElement.scroll获取滚动值的时候,在ios上可以得到对应的值,但是在安卓上不管怎么滑动怎么都是0。之后我就换成document.body.scrollTop,如下:然后就更奇...
2021-08-11 17:35:26
1019
原创 react-4(路由、路由机制、BrowserRouter/HashRouter、api路由跳转)
react组件库:ant-design,antVAntD Admin:基于react,ant-design,dva,Mock 企业级后台管理系统最佳实践github地址:https://gitee.com/mirrors/AntD-Admin演示地址:https://antd-admin.zuiidea.com (用户名和密码都是guest)一、路由hash路由:(推荐)localhost:3000/#/student (--后面有#号的)浏览器路由:l...
2021-08-09 11:07:03
570
原创 react-3(父子组件传值,引入样式,实现双向数据绑定)
父子组件更改数据父组件修改子组件state(不建议):父组件获取到子组件的实例(通过refs--(已被弃用)),通过子组件的setSate()来更改子组件state父组件<Child ref="child"></Child>this.refs.child.setState({msg:'hello'})子组件改父组件state:父组件传递修改自己的setState函数给子组件调用父组件文件//父组件import React, { Comp
2021-08-05 11:57:45
703
原创 react-2(创建项目,内部状态state,生命周期,事件机制)
创建react项目在控制台全局下载create-react-app和yarn( react项目推荐用yarn做包管理)npm i -g create-react-appnpm install -g yarn在文件夹下创建react项目create-react-app my-app创建好项目后,并启动cd testyarn start然后你就会看到react项目启动的页面!!!这些内容是怎么上去的呢?看看目录src下的App.js和index,js...
2021-07-20 15:35:37
200
原创 react-1(jsx语法,函数/类组件,react基础语法)
ReactReact是一个用于构建用户界面的 JAVASCRIPT 库。jsx语法在js中写HTML就是jsx语法jsx语法const temp = <h3>temp</h3>; //temp就是react元素jsx语法function MyCom(props){ // props是父组件给子组件传参存放的位置,是一个对象 // 变量渲染 let test = 'test1';...
2021-07-13 10:18:12
248
原创 vue axios--API、配置对象、响应数据、拦截器
API配置对象请求配置{ // `url` 是用于请求的服务器 URL url: '/user', // `method` 是创建请求时使用的方法 method: 'get', // default // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL baseURL: 'https://some-domain.com/api/.
2021-05-07 21:58:32
316
原创 js 判断数据类型方法
基本数据类型(5+1种)Boolean、String、Number、Null、Undefined、Symbol(ES6引入)引用数据类型(3种)Object、Function、Array判断方法1.typeof弊端:Null、Object、Array都会判断为ObjectBooleanbooleanStringstringNumbernumberUndefinedundefinedSymbolsymbolNullobject–
2021-05-07 17:24:43
75
原创 关于虚拟节点的原理和实现-
首先需要先了解了解render函数和createElement函数1.大概了解render:https://blog.csdn.net/sansan_7957/article/details/83014838 大概了解到了render函数的参数是一个createElement函数,而createElement函数返回值是一个VNode2.再大概看看VNode的各个属性和用法:https://blog.csdn.net/wbiokr/article/details/778949...
2020-10-30 23:22:20
665
原创 汇总HTTP状态码
1xx 请求正被处理2xx 请求成功处理3xx 请求需要附加操作,常见的例子如重定向4xx 客户端出错导致请求无法被处理 (一般是前端的锅~)5xx 服务端处理出错 (后端的锅~)分类2xx200 ok 请求成功。(大家都爱)201Created 已创建。请求成功,服务器正在创建请求的资源202 Accepted 已接受。服务器收到请求了,但是未处理203 Non-Authoritative Informa...
2020-10-15 22:07:51
173
原创 GitHub出现问题:Please make sure you have the correct access rights and the repository exists。---解决
GitHub出现问题:Please make sure you have the correct access rights and the repository exists。原因:公钥出问题了,要先设置用户和邮箱再重新生成ssh公钥即可。1. 删除.ssh文件夹(直接搜索该文件夹)下的known_hosts2.打开Git Bash输入:ssh-keygen -t rsa -C "username" (注:username为你git上的用户名),如果执行成功。返回的是:Gener.
2020-10-15 13:19:18
1444
原创 moment.js时间处理类库--时间戳和时间格式相互转换
nodejs引入moment(1)安装npm install moment(2)引入import moment from 'moment'; 获得当前时间var now = moment()获得时间戳(当前时间转时间戳)moment().format('X') // (大写X)以秒为单位,返回值为字符串类型moment().format('x') // (小写x)以毫秒为单位,返回值为字符串类型时间戳转换成时间moment(时间戳).format("YYY
2020-10-09 23:10:11
10104
原创 less-- CSS 预处理语言
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。less转css cnpm install -g less lessc less文件 //转css后输出到控制台 lessc less文件 css文件 //将less转到css文件里//引入外部less文件<link rel="stylesheet/less" type="text/less...
2020-09-29 23:51:33
887
原创 原生ajax、JQuryAjax、Axios的发送数据格式与content-type关系及封装My-Ajax
原生AJAX默认text/plan,发表单或者json数据都需要手动设置数据格式let xhr=XMLHttpRequest(); //-----------get方式--------------- xhr.open('get','url?查询字符串') xhr.send() //----------post方式--------------- xhr.open('post','url') //表单数据 xhr.setRquestHeader('con
2020-09-29 23:36:02
409
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人