开水泡饭@-CSDN博客

原创 javascript异步编程之generator(生成器函数)与asnyc/await语法糖

Generator 异步方案相比于传统回调函数的方式处理异步调用，Promise最大的优势就是可以链式调用解决回调嵌套的问题。但是这样写依然会有大量的回调函数，虽然他们之间没有嵌套，但是还是没有达到传统同步代码的可读性。如果以下面的方式写异步代码，它是很简洁，也更容易阅读的。// like sync modetry{ const value1 = ajax('/api/url1') console.log(value1) const value2 = ajax('

2022-11-01 22:42:04 256 1

原创 JavaScript的异步编程之Promise

Promise一种更优的异步编程统一方法，如果直接使用传统的回调函数去完成复杂操作就会形成回调深渊// 回调深渊$.get('/url1'() => { $.get('/url2'() => { $.get('/url3'() => { $.get('/url4'() => { $.get('/url5'() => { // 大概就

2022-10-28 23:58:03 164

原创 javascript编程单线程之异步模式Asynchronous

异步模式Asynchronous不会等待这个任务结束才开始执行下一个任务，开启之后立即执行下一个任务，后续逻辑一般会通过回调函数的方式定义，异步模式对js 非常重要，没有异步任务单线程的 js 语言就无法同时处理大量耗时任务，单线程下面的异步最大的难点就是代码的执行顺序混乱，Queue是消息队列队列也叫回调队列打印消息给同步一样执行压栈弹栈，接下来就是倒计时器，setTimeOut 就是调用了web api，web api单独运行不会阻塞js的执行, 开启倒计时器之后 setTimeOut的调用就已

2022-10-26 21:58:54 168

原创 javascript编程单线程之同步模式

javascript编程单线程之同步模式主流的js 环境都是单线程吗模式执行js 代码， js采用为单线程的原因与最开始设计初衷有关，最早是运行在浏览器端的脚本语言，目的是为了实现页面上的动态交互，实现页面交互的核心就是dom操作，这也就决定了js必须使用单线程的模式来处理，不然就会造成严重的线程同步问题。如果js多个线程同时修改dom元素，此时浏览器就无法明确以那个线程的结果为准，为了避免这种线程同步问题，所以从一开始js就被设置成了单线程模式工作。这里所说的单线程指的是javascript执行环境中负

2022-10-24 23:57:17 272

原创 JavaScript函数式编程之函子

函子(Functor)函子是一个特殊的容器，通过一个普通对象来实现，该对象具有map方法，map方法可以运行一个函数对值进行处理（变形关系），容器包含值和值变形关系（这个变形关系就是函数）。函数式编程中解决副作用的存在函数式编程的运算不直接操作值，，而是由函子完成函子就是一个实现了map契约的对象我们可以把函子想象成一个盒子，盒子里面封装了一个值想要处理盒子中的值，我们需要给盒子的map方法传递一个处理值的函数（纯函数），由这个函数来对值进行处理最终map方法返回一个包含新值所在的盒子（函子）

2022-10-23 22:40:09 184

原创 curl 下载地址中有特殊字符解决方案

curl 下载地址中有特殊字符解决方案情况使用 curl 下载地址中带有特殊字符的时候比如下面这个地址。实际访问地址不正确，参数丢失问题curl -o kspf.jpeg https://img-blog.csdnimg.cn/71ad2375855244a3b918585938236efe.png?a=1&b=2&c=3上面这个 url 实际上在服务端接受的参数只有 a = 1 ，造成在服务器端接收的时候经常出现数据丢失的情况curl -o kspf.jpeg https

2022-05-18 17:25:29 2256

原创 react 性能优化

react 性能优化React 组件性能优化的核心就是减少渲染真实DOM节点的频率，减少Virtual DOM 对比的频率，以此来提高性能1. 组件卸载之前进行清理操作在组件中为window 注册的全局事件，以及定时器，在组件卸载前要清理掉，防止组件卸载后继续执行影响应用性能我们开启一个定时器然后卸载组件，查看组件中的定时器是否还在运行 Test 组件来开启一个定时器import {useEffect} from 'react'export default functio

2021-12-02 20:25:43 612

原创创建base公共组件

公共模块基础模块参照了vant的思路，使用bem命名规范。先创建一个命名空间，这个命名空间返回创建组件函数与生成命名方法。在创建组件函数中创建name与install属性用于注册vue组件创建组件函数创建base组件npm run plop# 输入组件名称得到packages/base模块在src文件夹中创建create文件夹并创建component.ts文件用于创建组件方法。创建组件与要name属性和install方法来注册组件/** * Create a basic component

2021-08-17 21:39:14 143

原创 rollup 开发环境搭建

rollup 开发环境搭建初始化项目使用lerna管理项目使用npm init 初始化项目npm init -y 安装lerna并初始化项目npm install lerna --save-dev# npx 使用node_modules 中的包npx lerna init 现在已经生成了下面目录结构two-ui└───node_modules└───packages│ lerna.json│ package.json安装rollup并创建rollup.

2021-08-16 13:07:31 7964

原创 CSS line-break属性与中文标点换行

关于标点符号把文字带着换行的问题解决方案出现的问题最近在弄一个介绍页面的时候遇到一个很巧的问题，在文本换行的时候刚好能够放下文字，但是标点符号把这个文字带着换行了如下图所示：如果的在上一行显示，那么句号就应该在下一行显示，然而句号是避首标点，不能出现在开头。因此，“的”字就被带到下一行了中文标点的这种换行特性，即使设置word-break:break-all也是无效的，此时需要用到的CSS属性是line-break。line-break属性简介line-break属性主要用中日韩3种语言中，

2021-08-15 23:11:06 1020

原创 rollup基础

rollup 基本使用Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提

2021-08-13 22:47:47 250

原创 lerna 常用命令

lerna 介绍lerna 处理机构固定模式(fixed)所有包是统一的版本号，每次升级，所有包版本统一更新，不管这个包内容改变与否具体体现在，lerna 的配置文件 lerna.json 中永远会存在一个确定版本号：{"version": "0.0.1"}典型例子： babel、vue独立模式(independent)每个包是单独的版本号，每次lerna 触发发布命令，每个包的版本都会单独变化具体体现在，lerna 的配置文件 lern

2021-08-12 23:30:34 1041

原创无网线无显示器环境下配置树莓派连接Wi-Fi开启ssh

无网线无显示器环境下配置树莓派连接Wi-Fi开启ssh今天突然想折腾一下树莓派于是打开我的行李箱，拿出我那崭新的树莓派，当拿出树莓派的时候发生了尴尬的事情，没有网线，没有键盘显示器，这种情况下该怎么连接树莓派呢？第一时间我想树莓派的系统是烧录在sd卡中的是不是可以在系统配置中来做文章呢。所需要的物品一个手机Termux（软件我放在文末）一个读卡器（读取树莓派的sd卡）甚至可以只用手机（如果手机可以支持插sd的话，这里我条件还没那么苛刻，有一台电脑一个扩展坞）自动连接wifi原理用户可

2021-08-07 00:38:05 2029

原创 JavaScript-函数组合

纯函数和柯里化容易引起洋葱代码函数组合可以让我们把细粒度的函数重新组合生成一个新的函数函数组合并没有减少洋葱代码，只是封装了洋葱代码函数组合执行顺序从右到左满足结合律既可以把g和h组合还可以把f和g组合，结果都是一样的const _ = require("lodash");const reverse = arr => arr.reverse()const first = arr => arr[0]const toUpper = s => s.t.

2021-08-05 21:47:09 66

原创 JavaScript-柯里化

柯里化当一个函数有多个参数的时候先传递一部分参数调用它（这部分参数以后永远不变）然后返回一个新的函数接收剩余参数，返回结果//科里化演示function checkAge (age){ let min = 18; return age >= min;}//普通的纯函数function checkAge (min,age){ return age >= min;}console.log(checkAge(18,25))console.log(checkAg

2021-08-05 00:00:24 114

原创 redux工作中常用的的中间件

工作中常用的的中间件redux-thunk这个就是就是我们实现的thunk中间件，使用方式是一样的下载中间件npm install redux-thunk引入中间件、并注册中间件 import thunk from 'redux-thunk'import { applyMiddleware } from 'redux'export const store = createStore(RootReducer, applyMiddleware(thunk

2021-06-22 10:06:52 429

原创 redux中间件

Redux 中间件什么是中间件？中间件本质上就是一个函数，Redux允许我们通过中间件的方式，扩展和增强Redux应用程序，增强体现在对action处理能力上，之前的计数器与弹出框案例中。actions都是直接被reducer函数处理的，再加入了中间件以后，在出发了一个action之后这个action会优先被中间件处理，当中间处理完这个action以后，中间件会把这个action传递给reducer，让reducer继续处理加入了中间件Redux 工作流程开发Redux 中间件开发中间件模版代码

2021-06-03 10:14:19 182

原创使用react+redux实现弹出框案例

redux 实现弹出框案例实现效果，点击显示按钮出现弹出框，点击关闭按钮隐藏弹出框新建弹出框组件 src/components/Modal.js, 在index.js中引入app组件，在app中去显示计数器和弹出框组件function Modal ({ showState, show, hide }) { const styles = { width: 200, height: 200, position: 'absolute&#39

2021-06-01 18:19:35 498

原创在react中使用redux并实现计数器案例

React + Redux在recat中不使用redux 时遇到的问题在react中组件通信的数据是单向的，顶层组件可以通过props属性向下层组件传递数据，而下层组件不能向上层组件传递数据，要实现下层组件修改数据，需要上层组传递修改数据的方法到下层组件，当项目越来越的时候，组件之间传递数据变得越来越困难在react中加入redux 的好处使用redux管理数据，由于Store独立于组件，使得数据管理独立于组件，解决了组件之间传递数据困难的问题使用redux下载reduxnpm insta

2021-06-01 12:37:31 278

原创 Redux基础使用

Redux核心Redux 介绍javascript 状态容器，提供可预测化的状态管理什么是状态分页当前页数状态弹出框隐藏或者显示状态什么是状态容器状态容器就是一个JavaScript对象把页面中这些状态转换成数据保存在一个JavaScript对象中，这个JavaScript对象就是状态容器状态容器的好处把dom和状态交由框架来处理，不需要操作dom元素，直接操作dom元素对应的状态对象就可以了使用redux的好处科学化的状态管理方式，使状态管理变得容易

2021-05-31 19:18:56 208 2

原创什么是函数式编程

为什么要学习函数式编程方便测试、方便并行处理函数式编程可以抛弃this函数式编程收到越来越多的关注有很多库可以帮助我们进行函数式开发：lodash 、underscore 、ramda什么是函数式编程函数式编程(Functional Programming FP) FP是编程规范式之一面向对象编程思维方式：把现实世界中的事物抽象成程序世界中的类和对象，通过封装继承多态来演示事物事件的联系函数式编程思维方式：把现实世界中的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象）

2021-04-15 15:01:50 104

qq_36223186的博客