- 博客(179)
- 收藏
- 关注
RSS订阅原创 【JavaScript版】 数据结构和算法 2 -- 队列和双端队列结构
javascrit语言实现的数据结构和算法，让熟悉前端的小伙伴读起来不再苦涩，从容应对面试。一举拿下offer.
2022-11-01 10:08:53
204
1
原创 小程序手札 - 视图与逻辑
页面导航小程序中的页面导航① 声明式导航 ⚫ 在页面上声明一个 <navigator> 导航组件 ⚫ 通过点击 <navigator> 组件实现页面跳转 ② 编程式导航 ⚫ 调用小程序的导航 API，实现页面的跳转声明式导航导航到 tabBar 页面tabBar 页面指的是被配置为 tabBar 的页面。 在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性.
2022-03-01 20:52:24
222
原创 小程序手札 - 第三方插件的使用
使用npm包小程序对npm包的支持与限制目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用 npm 包有如下 3 个限制： ① 不支持依赖于 Node.js 内置库的包 ② 不支持依赖于浏览器内置对象的包 ③ 不支持依赖于 C++ 插件的包 总结：虽然 npm 上的包有千千万，但是能供小程序使用的包却“为数不多”。vant WeappVant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小
2022-03-01 19:58:24
170
原创 node 学习笔记 2 （fs模块，文件和文件夹的遍历）
1.深度优先function preDeep(dir, cb) { console.log(dir) fs.stat(dir, function (err, statObj) { console.log(statObj) if (statObj.isFile()) { console.log('object', dir, cb) fs.unlink(dir, cb) } else {
2021-12-09 22:56:39
856
原创 JS中判断对象为空的方法
在项目开发中，像字符串、数组为空的判断我们一般都能信手拈来，对于对象为空的判断是不是一时会有点脑子发懵的状态，接下来咱们捋一捋1.利用Object.keys()const obj = {};const user = {name: 'zhangsan'};/** * 判断对象是否为空 * @param {*} obj 传入的对象 * @returns true 空 fase 非空 * */const isEmptyObject = obj => { return
2021-11-25 11:35:26
740
原创 React 学习笔记 17（useShouldComponentUpdate）
封装hooks,实现通过比较状态来实现是否更新组件（原始react中是没有类似比较状态更新组件的）import {useState,useRef} from "react"function useShouldComponentUpdate(initialValue, shouldUpdate) { // 满足条件后通过调用 setState 方法更新组件 const [, setState] = useState(initialValue) // 自定义（状态） c
2021-11-16 10:44:30
416
原创 [object Object] is not a PostCSS plugin
最近在做移动端的项目时，想让px自动转换为rem布局，做到屏幕自适应。在安装postcss-pxtorem时npm install postcss-pxtorem -S然后运行npm run dev 就会报错[object Object] is not a PostCSS plugin查询资料说安装的postcss-pxtorem 版本太高目前是6.xx版本然后npm install postcss-pxtorem @5.1.1 -S再次运行 npm run dev 后，完美
2021-11-09 20:31:12
4298
1
原创 Vue3.0性能优化
一、虚拟DOM性能优化1.PatchFlag（静态标记）2.hoistStatic（静态提升）3.cacheHandler（事件监听缓存）二、SSR服务端渲染1.StaticNode（静态节点）三、Tree-shaking减少打包后的静态资源体积 程序执行更快...
2021-10-25 16:31:19
214
原创 React 学习笔记 16 （将路由状态同步到store）
1.首先安装插件npm install connected-react-router2.修改store/reducers/index.tsimport { connectRouter } from "connected-react-router";import { History } from "history";import { combineReducers } from "redux";import testReducer from "./test.reducer";cons
2021-09-30 13:45:21
470
原创 React 学习笔记 15 （antd && axios实现全局Loading）
utils/intercepter.js/** * Discription: 封装interceptor * author: ydj * Date: 2021-09-25 14:29:45 */ import axios from 'axios' import { message } from 'antd' /** * 生成基础axios对象，并对请求和响应做处理 * 前后端约定接口返回解构规范 * { * code:200, * data:"成功",
2021-09-25 17:59:41
661
原创 React 学习笔记 14（共享数据管理）
1.同步解决共享数据问题引入，我最终想实现的效果如下方案一：原生Redux// index.jsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './pages/Vote';import reportWebVitals from './reportWebVitals';import { createStore }...
2021-09-24 16:55:29
102
原创 例说发布订阅模式
1.发布 - 订阅 - 事件中心class EventEmit { constructor() { // 事件中心 this.eventMap = {} } // 订阅事件 on(type, handler) { if (!(handler instanceof Function)) { // 传入的必须是一个函数 throw new Error('必须是一个函数')
2021-09-23 10:25:45
93
原创 如何在前端显示后端返回的图片流（以Vue为例）
我们在前端显示图片一般用法是这样的<template> <el-carousel :interval="4000" type="card" height="310px" :autoplay="true"> <el-carousel-item v-for="item in dataList" :key="item.url" @click.native="jump(item)"> <img :src="item.dataSrc" alt="
2021-09-13 18:34:08
11052
2
原创 leetCode(3,树）
1.实现二叉搜索树class Node { constructor(element, parent) { this.element = element; this.parent = parent; this.left = null; this.right = null; }}// 二叉搜索树class BST { constructor() { this.root = null;
2021-09-05 21:40:22
50
原创 leetcode(2,链表）
1.单向链表class Node{ constructor(element,next){ this.element = element this.next = next }}class LinkedList{ constructor(){ this.head = null; this.size = 0; } add(index,element){ if(argumen
2021-09-03 23:00:55
65
原创 leetCode （1，计数型题目）
遇到以上字眼，不用多项先弄个map对象再说1./** * 1. 给定一个整数数组，判断是否存在重复元素。 如果存在一值在数组中出现至少两次，函数返回 true 。如果数组中每个元素都不相同，则返回 false 。 * 示例 1: 输入: [1,2,3,1] 输出: true 示例 2: 输入: [1,2,3,4] 输出: false */const containsDuplicate = functio
2021-08-09 20:22:39
103
原创 React 学习笔记 13 （Redux-saga）
redux-saga是react中解决异步最常用的中间件，它与redux-thunk相比，处理异步是接近纯函数的思维，只派发一个普通对象。我们逐步拆解它的effects1.delayconst delay = function (ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(true) }, ms) })}2.take/** *
2021-08-09 20:17:05
146
原创 这次彻底搞懂async&await
1.async 函数返回一个promise对象，可以使用then方法添加回调函async function show() { return {a:23,b:34}}console.log(show()) // //Promise {<fulfilled>: {…}}show().then(res=>{ console.log('res',res) // res {a: 23, b: 34}})2.await 关键字存在async函数表达式中，用于等待Pro
2021-07-23 11:36:30
227
原创 TypeScript 装饰器
普通装饰器 function logClass(params: any) { console.log(params) // 当前类 [Function: HttpClient] params.prototype.apiUrl = 'xxx'}// 普通装饰器 @logClassclass HttpClient { constructor() { } getData() { }}const http: any = new HttpClient(
2021-07-03 16:17:49
102
原创 MySQL 必知必会 四 （如何正确设置主键）
1.将数据表中已存在的主键删除sql：alter table 数据表名 drop primary key;2. 将数据表中已经存在的列设置为主键sql : alter table 数据表名 add primary key(列名称);3.小结一下用业务字段做主键，看起来很简单，但是我们应该尽量避免这样做。因为我们无法预测未来会不会因为业务需要，而出现业务字段重复或者重用的情况。 自增字段做主键，对于单机系统来说是没有问题的。但是，如果有多肽服务器，各自都可以录入数据，那就不一定.
2021-06-11 17:32:41
4241
2
原创 MySQL 必知必会 三 （如何操作表中的数据）
1.插入查询的结果SQL: inset into 表名 （字段名）select 字段名或值 from 表名 where 条件；
2021-06-10 16:19:38
319
原创 MySQL 必知必会 二 （表的创建和修改）
1.创建表create table 表名 （字段名1 数据类型 [字段级别约束] [默认值]，字段名2 数据类型 [字段级别约束] [默认值]，
2021-06-08 21:02:36
169
原创 MySQL 必知必会 一 （完整数据存储过程）
1.在MySQL中,一个完整的数据存储过程总共分为四步，分别是创建数据库、确认字段、创建数据表、插入数据。
2021-06-08 20:44:42
410
2
原创 React 学习笔记 12 （路由的实现原理）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hash路由</title></head><body> <div id=".
2021-06-01 16:14:57
235
原创 React 学习笔记 11 （React-Redux的实现原理）
Redux-Redux是一个连接React和Redux的库，我们都知道Redux是可以不依赖React的，我们在使用的时候需要手动派发action,自己实现订阅函数，而React-Redux的存在就是可以替我们实现这些繁琐的事情。更易于使用1.导出// index.jsimport Provider from './Provider';import connect from './connect';export { Provider, connect}2.创建上下文
2021-05-22 15:57:54
131
原创 React 学习笔记 10 （React.PureComponent原理）
React的这个API，具有浅层比较的功能，可以提高性能，减少不必要的页面渲染。实现也是比较简单，就是实现了一个浅层比较函数import React, { Component } from 'react'export default class PureComponent extends Component { isPureComponent = true //传入新的属性对象和状态对象，然后返回一个是否需要更新的boolean值 shouldComponentUpdate(ne
2021-05-14 11:19:12
132
1
原创 React 学习笔记 9 （React.CreateRef 源码简单实现）
1.React是不建议我们直接操作DOM的，如果我们在开发中还确实有必要要操作DOM,为此，特提供了ref这个API供我们使用。简单来时随着React版本的不断更新，我们操作DOM有三种方式可实现，第一种和第二种随便版本的迭代，逐渐地退出了历史的舞台，现在第三中的hooks用法是主流。第一种 ref是一个字符串class Sum extends React.Component{ add = ()=>{ let numA = this.refs.numA.value; .
2021-05-02 22:26:06
161
原创 React 学习笔记 8 （React.createContext源码简单实现）
1.获取上下文对象，提供Provider和Consumer方法，可以跨组件传递信息，一般用在React-redux中function createContext() { class Provider extends React.Component { static value; constructor(props) { super(props);//{value:xx} Provider.value = props
2021-04-28 20:15:18
244
原创 React 学习笔记 7 （React.createElement简单实现）
1.什么是React元素是React应用的最小单位，它描述了你在屏幕上看到的内容，React元素的本质是一个普通的JS对象，ReactDOM会保证浏览器中的DOM和你的React元素一致。2.使用babel转化生产元素的背后故事function createElement(type,config={},...children){ return { type, props: {...config,children}}}...
2021-04-27 17:03:20
627
原创 React 学习笔记 6 （combineReducers源码简版实现）
一个项目只有一给仓库，状态也只能有一个，但是组件会非常之多，我们为了每个组件的共享状态便于统一管理，需要将多个reducer进行合并export default function combineReducers(reducers) { const reducerKeys = Object.keys(reducers);// [counter1,counter2] return function (state = {}, action) { const nextState
2021-04-21 22:14:47
146
原创 React 学习笔记 5 （bindActionCreators源码简版实现）
绑定action的创建者export default function bindActionCreators(actionCreators, dispatch) { function bindActionCreator(actionCreator) { // dispatch(actionCreator()) return (...args) => dispatch(actionCreator(...args)) } if (typeof
2021-04-21 10:11:15
136
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人