- 博客(133)
- 收藏
- 关注
RSS订阅原创 react hooks中的useState如何实现的
react useState如何实现的import { useState } from 'react';export function User() { const [name, setName] = useState(''); const [age, setAge] = useState(18); const onChangeName = (e) => { setName(e.target.value); } const onChangeAge = (e) => { se
2021-10-24 22:14:10
401
原创 webpack编写Plugin
webpack编写pluginclass MyPlugin{ constructor(options){ } // Webpack 会调用 BasicPlugin 实例的 apply 方法给插件实例传入 compiler 对象 apply(compiler){ compiler.plugin('compilation',function(compilation) { }) }}module.exports = MyPlugin;Compiler 和 Compil
2021-08-02 19:11:09
276
原创 webpack自定义loader
webpack loader开发同步loaderconst loaderUtils = require('loader-utils');/** * * @param {*} content 文件信息 * @param {*} map 文件映射信息 * @param {*} meta * source是输入的内容 * sourceMap是可选的 * meta是模块的元数据，也是可选的 */module.exports = function(content, map, meta) {
2021-08-02 17:07:01
189
原创 webpack基础使用
# webpack基本使用## 样式资源引入import"index.css"{ test: /\.css$/, use: [ // 创建style标签，将js中的样式资源添加到header中生效，且不是直接写入到html中，是通过js执行时写入 'style-loader', // // 将css变成commonjs模块加载到js中，里面的内容是样式字符串 'css-loader' ]}处理css和js中的图片用到file-loader、url-load{
2021-08-02 14:32:18
234
原创 Tapable的使用
Tapable的使用Tapable是webpack核心同步钩子注册在该钩子下面的插件的执行顺序是顺序执行只能使用tap注册，不能使用toPromise和tapAsyncSyncHookconst { SyncHook } = require('tapable');const hook = new SyncHook(['name']);hook.tap('hello', (name) => { console.log(`hello ${name}`);});hook
2021-08-02 10:14:31
384
原创 SCSS学习
SCSS学习父选择器 &.container { color: red; &:hover { color: #ffffff; } body .other & { color: #000000 }}编译结果.container {color: red;}.container:hover { color: #ffffff;}body .other .container { color: #000000
2021-02-22 16:09:03
840
原创 SHELL 入门
SHELL 入门##常用环境变量echo $PATH #环境变量echo $HOME #当前用户目录echo $SHELL #所用的bash shell的路径echo $PWD #当前脚本路径echo $USER #当前用户名echo $$ # 当前进程号Shell脚本的执行1.输入脚本的绝对路径或相对路径2.bash或sh +脚本3.在脚本的路径前再加". " 或source区别：第一种和第二种会新开一个bash，不同bash中的变量无法共享。但是使用. ./脚本.sh 这种方
2021-02-08 18:15:17
128
原创 linux 各种信息查看
zengwe:ssh$ lsb_release -cCodename: bioniczengwe:ssh$ cat /proc/versionLinux version 4.4.0-19041-Microsoft (Microsoft@Microsoft.com) (gcc version 5.4.0 (GCC) ) #488-Microsoft Mon Sep 01 13:43:00 PST 2020zengwe:ssh$ uname -aLinux DESKTOP-DHK0I3K
2021-02-06 14:28:00
511
原创 win10下ubuntu自动开启ssh 远程连接
1.建txt文件写入set ws=wscript.createobject("wscript.shell")ws.run "wsl -d ubuntu -u root /etc/init.d/ssh start",vbhide2.更改文件后缀sshd.vbs放入windows的开机自启动中C:\Users\USER_NAME\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\StartupUSER_NAME为windows主机用户
2021-02-06 11:56:18
271
原创 win10 系统垃圾清理（windows.old）
1.按win+R，输入“cleanmgr”，按下回车。2.弹出对话框，点击下面的“清理系统文件”。
2021-02-06 09:56:09
698
原创 JavaScript Symbol.iterator
粗略的实现Array的功能interface MyArray<T> { [key: number]: T}class MyArray<T> { constructor() { // Object.defineProperties(this, { // length: { // enumerable: false // } // });
2020-11-22 17:13:25
408
原创 react hooks之useRef
在函数组件中的一个全局变量，不会因为重复 render 重复申明const SaveVal = () => { let timer = setTimeout(() => {}); let ref = useRef(timer); let [count, setCount] = useState(0) return ( <div> {timer}~{ref.current}~{count}<br />
2020-11-03 19:39:17
426
原创 typescript Object is possibly ‘null‘.
明知道这个值不可能为null， 但是类型系统判断可能为null解决这个问题只需要加’!’const SaveEle = () => { let ref = useRef<HTMLInputElement>(null); let [val, setVal] = useState(0); return ( <div> <div>{val}</div> <inpu
2020-11-03 19:08:26
1224
原创 react hooks之useEffect
相对于class component来说，所有的生命周期都在effect中effect定义官方的index.d.tstype EffectCallback = () => (void | (() => void | undefined));type DependencyList = ReadonlyArray<any>;function useEffect(effect: EffectCallback, deps?: DependencyList): void;接受的第一
2020-11-02 21:36:21
1066
原创 react hooks之useState
import React , { useState } from 'react';export const Demo11 = () => { let [count, setCount] = useState(() => { return new Date().getTime(); }); return ( <div> <div>{count}</div>
2020-11-02 20:33:56
168
原创 react&react-redux中各种类型定义
import React, { FC } from 'react';import { connect, ConnectedComponent } from 'react-redux';export interface IPropsFromParent { name: string;}export interface IPropsFromRedux { count: number;}export interface IProps extends IPropsFromParent,
2020-10-26 14:46:40
449
原创 nodejs前后端共享代码
如果用 …/…/./这样的路径会出现找不到，或者不在编译范围内npm publish到npm库，私有的东西可能放到库上不可以可以修改package.json中的dependences，然后install，相当于安装本地的包来源{ "dependencies" : {//下面这两个是常见的 "aaa" : "2.0.1", "ccc" : "latest",//下面是http URL "ccc" : "http://asdf.com/asdf.tar.gz",//下
2020-09-18 17:34:32
504
原创 nestjs vscode debug 断点调试
command+shift+pToggle Auto Attach命令行输入 npm run start:debug
2020-09-18 17:24:09
2592
原创 设计模式之抽象工厂
设计模式之抽象工厂解释抽象工厂模式（Abstract Factory Pattern） 围绕一个工厂虚类创建 实体工厂。隔离工厂边变，让其不与实际的类产生依赖关系类图优点隔离了具体类的生成 ， 更换一个具体工厂就变得相对容易。所有的具体工厂都实现了抽象工厂中定义的那些公共接口，因此只需改变具体工厂的实例，就可以在某种程度上改变整个软件系统的行为 。缺点在添加新的产品对象时，难以扩展抽象工厂来生产新种类的产品，这是因为在抽象工厂角色中规定了所有可能被创建的产品集合，要支持新种类的产品就意味着要
2020-08-17 11:12:48
132
原创 angular中forRoot&forChild的作用
angular中forRoot&forChild的作用用法import { NgModule, ModuleWithProviders } from '@angular/core';import { CommonModule } from '@angular/common';@NgModule({ declarations: [], imports: [ CommonModule ]})export class ChildModule { static forCh
2020-07-02 11:22:22
2373
原创 angular 在模板中申明临时变量（指令实现）
指令代码import { Directive, ViewContainerRef, TemplateRef, Input } from '@angular/core';@Directive({ selector: '[let]'})export class ExpAsDirective { _context: any = {}; @Input() public set letContext(val) { this._context = val; this._update
2020-05-11 15:15:46
803
原创 rxjs学习记录 热流 冷流
rxjs 热流冷流冷流 let count = 1; let obs = Observable.create(observer => { observer.next(count++); }); let sub1 = obs.subscribe(res => console.log('sub1', res)); // sub1 1 l...
2020-04-25 22:01:34
575
原创 win10 linux 操作
cmd切换到bashcmd下敲bashlinux重启开启关闭admin cmdnet stop LxssManagernet start LxssManagernet restart LxssManager
2020-04-23 15:52:10
155
原创 linux 下代码统计
zengwe$ sudo apt-get install cloczengwe$ cloc --exclude_dir="node_modules" ./
2020-04-23 15:16:47
276
原创 angular 代理http到https
{ "/api": { "target": "https://www.XXXX.com", "changeOrigin": true }, "/public": { "target": "https://www.XXXX.com", "changeOrigin": true }}
2020-03-30 14:48:29
1837
1
原创 .npmrc
项目中的npmrc文件存放在项目根目录.npmrcregistry=https://registry.npm.taobao.org
2020-02-29 17:24:34
1485
原创 storybook for angular
storybook for angular 初试安装依赖 @storybook/clizengwe$ npm i -g @storybook/cli在angular项目下运行zengwe$ getstorybook 初始化成功后会在项目下增加连个文件夹./.storybook./src/stories在stories下会有storybook的demo示例import { a...
2020-02-29 16:23:02
555
原创 typescript 单元测试 测试private protected 方法
需要测试的classclass People { protected status: string; construct(public name: string, sex: 'male'|'female', age: number) { } private excrete(): void { this.status = '撒尿中'; } public talk(who: stri...
2020-01-07 11:13:02
1629
1
原创 nestjs 单元测试
nestjs单元测试启动单元测试zengwe$ npm run test运行效果 PASS src/admin/controllers/zeng-Try.controller.spec.ts Test Suites: 1 skipped, 14 passed, 14 of 15 totalTests: 7 skipped, 57 passed, 64 tot...
2020-01-03 11:03:14
2670
原创 react-redux的使用
react-redux的使用代码：github-learn-react分别存放action和reducer如postReducerexport const postReducer = function (state: any = { list: [{ title: 'hellow', id: -1 }] }, action: any) { switch (action.type) {...
2019-10-21 21:09:13
209
原创 reac之reducer初步使用
redux 初步学习创建reduceconst counterReducer = function(state: any = {count: 1}, action: any) { switch(action.type){ case 'COUNT_ADD': return {...state, count: state.count + 1}; default: ...
2019-10-14 20:30:48
440
原创 nestjs 引入sequelize
安装依赖 $ npm install --save sequelize sequelize-typescript mysql2 $ npm install --save-dev @types/sequelize建立table映射和提供privadorimport { Table, Column, Model, PrimaryKey } from 'sequelize-typescri...
2019-09-28 16:48:49
2763
原创 react之受控组件和非受控组件
react受控组件和非受控组件代码受控组件import React from 'react';import './controll.scss';export interface IControllProps {}export interface IControllState { username: string; password: string;}export class...
2019-09-08 22:17:14
183
原创 react路由
路由代码：github-learn-react安装zengwe$ npm install react-router-dom --savezengwe$ npm install @types/react-router-dom --save-dev用的typescript所安装@types/react-router-dom使用import React from 'react';i...
2019-09-04 17:13:27
324
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人