- 博客(225)
- 收藏
- 关注
RSS订阅原创 go并发（进程、线程、协程）
在go中启动一个协程很简单在方法前面加上go关键词，就会启动一个runtime运行函数和当前的go线程不在用一个线程，所以这里为了数据安全go提倡通过通信（channel）共享内存而不是通过共享内存而实现通信。其中根据go的两种gc方式cgo和go线程数量是不同的，其中cgo会释放掉空闲的线程提高性能，比如有用到的net包中的LookupHost方法。它们的关系按照内存大小的关系依次是进程 > 线程 > 协程（一般一个协程2K）。）一起说吧，协程可以看成是轻量级线程，go多线程能力强处理并发靠的就是协程。
2023-09-15 15:11:20
471
原创 go中的channel通道
给后续的go并发文章做准备。channel主要还是用于线程间的通信，go提倡通过通信共享内存而不是通过共享内存而实现通信。go中的通道可以理解成队列，数据是先进先出的形式。相对来说channel还是比较简单好理解的并且channel也是比较重要的。
2023-09-15 11:37:52
267
原创 js模块化CJS、AMD、CMD、UMD、ESM、IIFE理解
适用范围：浏览器（随着浏览器的发展，可以在script的标签中加入type="module"来支持）和nodejs（Node verison 13.2.0，有两种方式1：package.json中填写type: "modules"，2.将文件结尾命名为mjs）在webpack、rollup、esm各种打包器中都可以设置对应的产物类型，我们要根据我们的产物的用途来选择对应的类型，我们一般并不会关心最终的代码产物，但是对于各种类型的产物还是要有一定的了解，这篇文章算是个简单的总结。同步异步加载：：异步。
2023-09-02 23:18:14
549
2
原创 nestjs任务调度的使用
这个任务调度并不是因为node是js就草率的认为是settimeout或setinterval这样的。node的任务调度会开启一个node的子进程，在子进程中进行任务调度。当然nestjs已经帮我们封装好了相关的功能。第二种'45 * * * * *'意思是每分钟的底45秒执行一次。第一种为预设的CronExpression来定义间隔，下方的例子就是每10个小时执行一次。前端出身的我经常开会的时候会听到其他后端在说定时任务，现在写node也用到了任务调度。一个简单的任务调度的例子就完成了。
2022-09-27 11:25:46
1644
3
原创 一个简易的js，ts插件开发模板纯js及页面组件，涵盖esbuild，babel，rollup打包
一个简易的js，ts插件开发模板纯js及页面组件，涵盖esbuild，babel，rollup打包
2022-07-07 17:14:11
1438
1
原创 commonjs和es module对定义变量被改变的分析
commonjs和es module都是js模块化机制，commonjs一般用于服务端写nodejs而es module是用与web浏览器js开发。这篇文章主要说的是在两种不用的模块化机制中对于定义的变量改变的区别commonjs：commonjs 引用的js文件中的变量被改变是其他地方引用相同的文件的变量不会被改变文件test1const {a, afn} = require('./testmodule')console.log(a, '进来了')afn()setTimeout(fun
2022-03-28 16:43:34
704
原创 搭建前端测试单元
新入职小菜鸡的我一来就淹没在大佬群中，本着在猥琐发育一波的心态在业务开发之余精进了一下大佬们的测试单位并单独搭建出一个写测试用例的项目。这次的测试单元主要是针对reacthook + ts，对reacthook抽离逻辑进行单位测试。主要的测试工具我选的还是jest，针对reacthook的测试工具我选择了@testing-library/react-hooks 从0开始搭建。目录结构在之前的工作中对并不需要特别去关注单元测试这块，因此现在从0开始踩坑。坑1.jest会自动去查找项目下所有的.
2021-12-21 17:09:06
537
原创 vue的provide和inject
vue官网上有提到这两个api是类似于react的context上下文，但是默认情况下是不支持响应式的，如果要支持响应式需要传入响应式对象或者数组。这个api的主要作用可以看成是vuex的精简版共享父组件的state父组件provideexport default { data() { return { testAppProvide: {name: 10}, testAppProvide1: [1, 2, 3, 4] }; }, provide
2021-11-03 17:31:48
191
原创 web将pdf转成图片以及图片转回pdf的方法
索然无味的sass系统开发中突然加入了一个稍微有那么点意思的需求。产品对一个2年前的项目一顿花里胡哨的操作之后终于定下了这个看似高端实则有点多余的功能。我的测试项目脚手架是vite-react。1.pdf转图片主要是使用了pdf.js这个js库，可以支持base64(input选择文件)和url的形式文档：https://github.com/mozilla/pdf.js/blob/master/src/display/api.js下载：Getting Started注意：这个库我没有在npm上找
2021-09-26 14:35:21
4706
原创 0-1搭建ts-node项目编译处理路径简写问题
背景：随着react的使用我俨然已经成为了ts的深度使用者，时下react+ts+webpack的组合拳简直不要太香。作为把手伸向服务端的前端来说node是必不可少的一部分伴随着这个想法ts-node也被我提上了日程。问题：webpack中的alias给我们提供了路径简写并在打包的时候替我们寻找文件因此我们不需要去担心打包之后的路径问题。但是ts-node我并不是通过webpack进行搭建的，因此在设置了tsconfig.json的paths路径简写在ts编译成js之后原...
2021-09-20 09:46:00
1002
原创 web worker API开启浏览器js多进程
面试使人进步！！！在大厂佬们的碾压下接触到了目前工作中没有遇到的新api和新思路以及解决方案。今天就来说说这个新的api web Worker。以下是MDN原话指的是一种可由脚本创建的后台任务，任务执行中可以向其创建者收发信息。要创建一个 Worker，只须调用Worker(URL)构造函数，函数参数 `URL` 为指定的脚本。Worker也可以创建新的 Worker，当然，所有 Worker 必须与其创建者同源。很明显了就是让我们可以开启一个新的进程来处理js。js是采用的是单线程...
2021-09-17 22:16:13
588
原创 函数柯里化
通过函数柯里化加强对js函数的认识。普通柯里化 function a(b: number) { return function (c: number) { return b + c; }; } a(1)(2);进阶柯里化 function add(...args: any) { return args.reduce((a: any, b: any) => a + b, 0
2021-07-23 18:01:38
126
原创 typescript中d.ts文件使用外部定义的typescript类型
在写ts的时候遇到这样的一个情况：我需要将mongodb链接的实例对象挂载到node全局上，这个时候如果直接将类型设置为any的话在编写业务的时候回少掉很多语法提示，因此我需要在我的types.d.ts上给node全局变量的设置相关的类型。/// <reference types="node" />// 会导致types.d.ts文件失效// import GriFiled from 'gridfs-stream'declare interface nameType { na
2021-07-01 15:30:01
2811
2
原创 vue3 hook简单封装
vue3最新鲜的就是组合式API了，通过组合式API我们可以把一些复杂的逻辑或一些常用的逻辑封装成一个个hook来进行调用，这样的方式也更易于维护。使用import useTest from "../../hooks/useTest";export default defineComponent({ name: "vue3Test", setup: () => { let refTest = ref(111); // 单个值用ref const { testHoo
2021-05-08 15:05:28
3450
原创 vue3组件封装
vue2和vue3的组件封装还是有区别。父组件和vue2基本相同<!-- :onClick通过props传入回调不传参有默认参数e，@handleClick通过emit传递没有默认参数 --><components-test @handleClick="testFn" :onClick="testFn" :name="refTest"/><script lang="ts">import componentsTest from "../..
2021-05-08 14:55:50
6436
原创 vue3学习小结
目录闲谈对比vue和react生命周期setup总结闲谈今年的学习计划终于到了vue3了。自从上家公司入职之后有一年没有使用vue开发项目了，之后基本都是用的react来进行项目的开发。由于vue更新了vue3版本一方面为了提升自身的竞争力，另一方面也是对于升级之后的vue3比较充满期待。对比vue和react使用react开发了一年半左右在回头来看vue，react有两种组件模式来进行开发函数式组件和class组件官方更推荐使用函数式组件。函数式组件确实开发起来比较纯
2021-05-08 14:27:51
381
2
原创 svg动画 第二节
入门了svg的基本知识后接下来进阶svg动画。动画类型svg的动画类型可以分类css和html标签两种方式来实现。css类型useEffect(() => { setTimeout(() => { const SVGstrokeLength: any = document.getElementsByClassName('logo')[0] console.log(SVGstrokeLength.getTotalLength()) // 获取svg的path画
2021-02-21 11:36:00
503
4
原创 正则基础学习
RegExp对象：字面量：let reg = /\bis\b/g 构造函数方式：let regs = new RegExp('\\bis\\b', 'gi')第二个参数可以是g(全局),i(大小写),m(多行搜索)。也可以是组合形式详细见下方'RegExp对象属性'元字符 正则表达式中有特俗含义的非字母字符(见下方)原义文本字符 例如：我,你,a,b,c,1,2,3这样的标识匹配该字符g 全局匹配i ignore case忽略大小写(默认...
2021-02-05 15:41:27
211
原创 svg入门 第一节
什么是SVG？SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 viewport和viewBox学好svg需要先了解svg中的viewport和viewBox这两个概念。viewpart是整个svg的可见区域即svg标签.
2021-01-31 10:18:07
1984
12
原创 react.forwordRef封装插件
平时我们在写react代码的时候经常会在div标签上面加上ref这样的参数来获取div的实例，但是我们自己封装的组件如果直接传ref是获取不到我们封装的组件的实例的。这里我们就需要用到react.forwordRef来封装组件这样就可以直接通过在标签上直接传递ref来获取组件的实例了。forwordRef组件这里我加入了ts类型规范并将ts的规范暴露出来这样在我们要是用组件的时候将ts也一起拿到来规范代码。import React, {useImperativeHandle} from 'reac
2020-12-31 21:54:19
1011
原创 webapck的plugin插件的学习
weboack的插件功能相对于loader来说能实现更强大的功能。我们常见的copy-webpack-plugin、html-webpack-plugin等的插件都是在webpack执行中的某个生命周期中进行字符串操作或者文件操作。插件实际上就是一个class对象它具有apply属性可以被webpack compiler调用。主要的还是了解compiler对象相关的生命周期以及tap,tapAsync和tapPromise方法，然后根据业务需求在相应的生命周期中执行相应的操作。class...
2020-11-16 17:02:12
214
原创 手写简单的webpack-loader插件
webpack的loader主要是用来处理字符串的，这里处理的对象主要是你写的源代码或者你webpack配置中include的文件。首先webpack中module.exports = { resolveLoader: { // 默认的loader路径是node_module在这里可以添加新的路径 modules: [ 'node_modules', path.resolve(__dirname, './loader_module') ], extensions: [ '.js
2020-11-16 15:01:31
290
原创 new做了什么
// new操作符做了如下操作 function newObj() { console.log('newObj', this) this.x = 1 } let obj = new newObj()// 直接new function setObj(pObj) { let obj1 = {b: 1}// 开启一个对象 pObj.apply(obj1)// 调用开启的对象作为this上下文 obj1.__p...
2020-09-15 11:12:17
172
2
原创 脱离脚手架0-1搭建react项目
公司的项目太多了有小半年没有写博客了。今天准备更新这篇干货。背景：这段时间经历了公司，项目的洗礼让我对于项目的自主搭建有了更深刻的认识。当我们使用别人的东西开始就注定要受制于人，例如create-react-app这样的脚手架一切的东西都帮你配置好了。当你遇到想要自定义端口、打包路径、入口文件、或者引入新的wenpack插件的时候，这个时候你就需要在脚手架的基础上执行npm run eject来开启该脚手架的自定义功能；这个时候如果你已经开发到了一半那么这样的操作可能会给你带来意想不到的麻烦，当然虽然有提供
2020-06-03 17:59:10
451
1
原创 一个关于react hook计时器的问题
在react hook中使用定时器的时候遇到了一个这样的问题这样使用计时器的话会出现一个结果，n永远是2，因为定时器中的上下文指向的一直是定义n初始值为1的时刻。const [n, setN] = useState(1)<button onClick={() => { setN(1) time = setInterval(() => {...
2020-02-24 16:02:02
1097
6
原创 react的context使用方法
先看一下目录，很多博客上都是直接将父子组件全部写到同一个文件上，但是在项目中大部分需要将组件抽离成各个文件。context.jsimport React from 'react'const MyContext = React.createContext()export default MyContext父组件：通过ContextApp.Provider设置共享数据i...
2020-01-14 16:46:09
1022
原创 react在hook中使用mobx
和class组件的写法不同，hook使用mobx需要在组件的最外层包裹一层mobx-react提供的observer，在没有包裹observer的情况下可以拿到mobx的数据也可以改变mobx的数据，但是改变之后不会触发视图的更新。import React from 'react';import { withRouter } from 'react-router-dom'import s...
2020-01-14 16:37:57
4502
4
原创 android studio连接安卓手机
首先我们先把项目能跑到安卓虚拟机上https://blog.csdn.net/qq_40816649/article/details/103927840。接下来我们要连接手机到android studio进行react-native开发。1.安装android studio的Google USB Driver这个SDK tools打开file--settings找到下面这个位置然后打钩下载。...
2020-01-10 18:11:53
940
1
原创 react-native报错：Failed to apply plugin [id 'com.android.application']
背景：根据官网的环境配置方式配置了react-native环境，这里提一下官网没有配置java_home环境变量需要自己配置。https://reactnative.cn/docs/getting-started.html然后使用androidstudio打开新建的rn项目，并运行npm run adnroid然后报了一堆的错误（我是个英语只过4级的辣鸡所以谷歌翻译，大概的意思就是项目路径有非...
2020-01-10 17:16:01
1012
原创 react的静态组件
react的项目开发中有使用一些UI框架框架中有一些组件是这样写的：这是react-bootstrap轮播图组件。<Carousel activeIndex={index} onSelect={handleSelect}> { props.swiperImg ? props.swiperImg.map((item, index) => { ...
2020-01-06 16:19:11
988
原创 next第一次初始化页面请求的数据为空解决办法
开发next的过程中又遇到这样的一个问题：浏览器头一次打开next项目的某一个页面，该页面需要请求后端的数据，然而在请求到接口数据之前getInitialProps方法已经return出结果导致页面没有接口数据。当多次打开页面后就不会有这种情况。分析可能的原因:1.浏览器存在缓存，直接使用缓存的页面数据。2.项目的数据接口太深，需要在每个循环中请求数据3.重新刷新浏览器页面就正常代码问题...
2020-01-06 14:56:07
1112
3
原创 next在style标签上使用scss语法
在开发项目的过程中碰到了这样的一个问题：页面的已经在浏览器中打开了但是样式却没有。分析了一下原因可能是因为我引用页面样式是直接import外部scss文件，然后服务端渲染的过程中没有将样式文件渲染进去，因此想到的解决办法就是直接在页面的style标签上直接用jsx的模板语法来些样式。直接使用以下写法是没错的但是需要进行babelrc和的配置<style jsx>{` ...
2020-01-06 14:38:39
785
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人