- 博客(32)
- 收藏
- 关注
RSS订阅原创 事件循环（event loop）
为什么js是单线程初学计算机语言的时候，无论是C、C++还是JAVA，都是支持多线程，偏偏JavaScript是单线程，不支持多线程，这也跟JavaScript的作用有关，都知道JavaScript是主要运行在浏览器的脚本语言，最终操作的是页面的DOM结构，当两个JavaScript脚本同时修改页面的同一个DOM节点时，浏览器该执行哪个呢？所以当时设计JavaScript时，便要求当前修改操作完成后方可进行下一步修改操作。浏览器是支持多进程浏览器的每一个 tab页都是一个进...
2022-04-27 10:19:04
559
原创 react- context
React.creatContext(defaultValue) 创建一个context对象（上下文），这个context对象有两个属性provide :提供数据，可以定义默认值Provider下面的consumer都可以拿到这个valueconsumer ：订阅数据，消费数据，从这个属性可以获取到数据consumer要求children是一个函数，函数的第一个参数为value...
2022-03-29 17:05:24
1184
原创 react——代码分割
打包打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle”。接着在页面上引入该 bundle，整个应用即可一次性加载。代码分割随着写的应用增大，打的代码包也会增大。尤其是在整合了体积巨大的第三方库的情况下，可能后面的运行会因代码包的体积过大而导致加载时间过长。对代码包进行分割可以避免搞出大体积的代码包。 代码分割是由诸如Webpack，Rollup和 Browserify（factor-bundle）这类打包器支持...
2022-03-23 17:18:54
1296
原创 常用linux命令
rmdir删除空的目录，也只能删除空目使用：rmdir + 目录名rmdir -p + 目录名例子：将工作目录下，名为 AAA 的子目录删除 :rmdir AAA在工作目录下的 BBB 目录中，删除名为 Test 的子目录。若 Test 删除后，BBB 目录成为空目录，则 BBB 亦予删除。rmdir -p BBB/Testrm删除非空目录或文件使用：...
2022-02-09 16:08:23
881
原创 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
21734
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
445
原创 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
990
原创 城市选择，城市联动
方法一：前置条件： 1、每个字母下的城市列表使用一个容器包着，容器带有id，方便后续锚点跳转。2、navigatorBar里的字母高定死，知道navigatorBa总高度，方便知道滑动到哪个字母。方法： 锚点跳转监听navigatorBar的滑动距离，计算出所滑动的点是在哪个字母的范围（比如我知道一共有10个字母，一个字母定高10px,我滑动了30px，30px在第三个字母的范围内，所以我就知道了我滑到了第三个字母。）取出这...
2021-11-26 12:11:29
199
原创 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
353
原创 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
521
原创 react-9（redux-thunk中间件)
redux-thunkredux中间件，处理异步请求在我们用了redux-thunk，actionCreators可以返回一个函数，可以在返回的函数内部可以发送异步，（在该函数里有参数dispatch，发送异步），异步成功之后再分发一个action（纯粹改数据的action）更改数据。 所以可能需要出现两个actionCreators，一个用来分发异步action，如何在这个action里发送一步请求，拿到数据后再分发由另一个actionCreators...
2021-10-25 15:25:55
122
原创 文本超出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
1086
原创 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
1048
原创 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
382
原创 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
188
原创 从url输入到返回请求的过程
网络篇:构建请求 （对URL进行解析）为什么要解析？因为网络标准规定了URL只能是字母和数字，还有一些其它特殊符号，比如-_.!等，不包括百分号和双引号，不转义会出现歧义怎么解析？为什么不转译会出现歧义?在浏览器地址栏中输入信息，然后回车，浏览器会进行以下判断。URL是否合法？合法就会继续检查他的完整性，如果不完整，浏览器可能会对域进行猜测，对输入的内容添加协议、域名、端口号、路径、哈...
2021-09-29 15:36:35
385
原创 react-6（redux）
使用Javascript开发单页面程序的时候，我们需要管理很多很多状态（state），例如: 服务器的响应，本地生成的尚未持久化到服务器的数据（表单数据），激活的路由，选中的标签，是否显示 加载动效或分页器等等。管理不断变化的状态非常困难，状态的改变可能会引起页面的变化，而 页面的改变也会引起状态的改变，这种改变异常复杂，以至于我们很难捋清业务实现功能。为了 规范的管理各种状态，我们可以使用状态管理机制1.安装redux yarn add redux2....
2021-08-24 17:27:06
205
原创 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
190
原创 安卓和ios的scrollTop获取的值不一致的问题记录
一段下拉刷新的代码出现了兼容bug，按理说利用 scrollHight <=clientHight *2+ scrollTop就能判断出下拉的情况，然后在触发刷新函数。代码如下：但是在使用document.documentElement.scroll获取滚动值的时候，在ios上可以得到对应的值，但是在安卓上不管怎么滑动怎么都是0。之后我就换成document.body.scrollTop,如下：然后就更奇...
2021-08-11 17:35:26
948
原创 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
547
原创 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
678
原创 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
183
原创 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
228
原创 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
302
原创 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
66
原创 关于虚拟节点的原理和实现-
首先需要先了解了解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
644
原创 汇总HTTP状态码
1xx 请求正被处理2xx 请求成功处理3xx 请求需要附加操作，常见的例子如重定向4xx 客户端出错导致请求无法被处理 （一般是前端的锅~）5xx 服务端处理出错 （后端的锅~）分类2xx200 ok 请求成功。(大家都爱)201Created 已创建。请求成功，服务器正在创建请求的资源202 Accepted 已接受。服务器收到请求了，但是未处理203 Non-Authoritative Informa...
2020-10-15 22:07:51
146
原创 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
1258
原创 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
9502
原创 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
859
原创 原生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
386
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人