Eason ZhangF-CSDN博客

原创 async/await中reject的问题

问题：async/await中reject的问题原因：promise 返回的 resolve 对象可能用 await 去接，但是 reject 无法用 await 接收到，所以要用 try catch 去处理示例： let token = ''; try { token = await getUploadToken(); } catch (e) { console.log('error', e) } if (!token) { const promise =

2021-07-14 21:49:17 2222

原创步骤式逻辑

constant/index.ts// 完整看房步骤export const inspectionStepsLink: { key: string; prev: string | undefined; next: string | undefined; name: string; nextTitle: string;}[] = [ { key: FilesTypeEnum.house, prev: undefined, next: FilesTypeEn

2021-06-05 12:53:08 141

原创组件封装

自定义按钮封装./components/btn/MyButton.jsimport React, { Component } from 'react'import cn from 'classname'import './MyButton.css'export default class MyButton extends Component { render() { console.log('this.props',this.props) const { t

2020-09-20 16:03:17 183

原创 git

代码托管平台githubgitee - https://www.yuque.com/hello-pg8s3/ui9z3s/nh4srz#G73oN创建了组织创建了仓库将本地仓库和远程仓库同步终端： git remote add origin url将远程代码拉到本地： git pull origin master --allow-unrelated-histories将本地代码上传远程仓库git add .git commit -m ‘环...

2020-09-17 21:13:03 123

原创 redux

为什么要使用状态管理多个组件共用一个状态状态管理，便于更新和维护为什么React需要状态管理？react不是MVC框架，单纯可以看做是V(视图层框架)，缺失了M和C，在flux/redux/mobx中，react是他们的构成部分redux的项目用法工具reduxreact-redux 数据分块redux-thunk/redux-saga redux中的数据请求redux-devtools-extension 用于激活浏览器中redux扩展插件安装一个redux

2020-08-25 22:15:59 163

原创 react-受控组件和非受控组件

针对的主要是表单在 HTML 中，表单元素（如< input >、 < extarea > 和 < select >）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。非受控组件表单自己管理自己的状态，这就叫做非受控组件即input自己的value值由自己管理我们叫这个input为非受控组件，value为非受控组件.

2020-08-24 20:16:07 378

原创 React Hooks

React Hooks 是什么？Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性React Hooks 有哪些？1.基础 Hook2.额外的 HookuseMemo返回一个 memoized 值作用：用于完成优化，用于做缓存的注意：函数组件默认帮我们做好了新旧状态判断的拦截，相当于做了shouldComponentUpdate钩子useMemo案例：src/components/Hello.js

2020-08-22 14:18:09 251 1

原创 react-生命周期

为什么我们要学习组件的生命周期钩子函数？生命周期钩子函数的使用可以帮助我们更好的控制和管理组件16版本的生命周期React生命周期分为四个阶段：初始化阶段更新阶段卸载阶段错误处理阶段【 React16.3版本之后新增】初始化阶段4个钩子函数constructor触发时间： React组件的构造函数在挂载之前被调用任务：- 1. 通过调用super将父组件绑定在自己身上的属性赋值给 this.props ， this.props = props- 2. st

2020-08-20 09:20:30 219

原创 react过渡动效

过渡动效在项目中是一个必须的业务React过渡动效通过react-transition-group和animate.css第三方模块来实现代码演示App.jsimport React, { Component } from 'react'import {CSSTransition} from 'react-transition-group'export default class App extends Component { state={ flag:true } chan

2020-08-19 19:44:04 506

原创 react-组件通信

1.父组件与子组件通信父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变App.jsimport React, { Component } from 'react'import Grandfather from './father-to-son/Father'export default class App extends Component { render() { return ( <div>

2020-08-19 19:37:47 162

原创 react的setState

setStatesetState是react的异步操作，每次调用setState都会触发更新，异步操作是为了提高性能，将多个状态合并一起更新，减少re-render调用思考：执行以下这段代码会导致这个组件被重新渲染100次，这对性能是一个非常大的负担，那么react是怎么优化的呢？for ( let i = 0; i < 100; i++ ) { this.setState( { count: this.state.count + 1 } ); console.log(this.s

2020-08-18 22:07:32 266

原创移动端上拉加载better-scroll

better-scroll - 插件网站：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans滚动原理：绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。 — 官方解释接下来操作下来

2020-08-12 23:01:40 273

原创多组件状态共享-vuex

Vuex什么是Vuex?Vuex是vue的一个状态管理工具，用于存储管理项目中的 state什么是状态管理模拟呢？用 state 控制视图，这种管理模式就是状态管理好处：我们的关注点在 state什么是状态 state?用数据控制视图，这个数据我们称之为状态Vuex什么情景下使用？当你看到或者接到项目就知道了，难就用，简单就不用当我们的项目中数据操作频繁、数据通信量大,我们需要使用vuexVue构成部分state 数据actions

2020-08-04 13:28:17 402

原创 Vue cli项目中的跨域配置 -＞反向代理

以请求猫眼电影数据为例一、在组件的methods选项中配置请求数据的方法，请求数据methods:{ getMaoyanData(){ this.$http.get('https://m.maoyan.com/ajax/movieOnInfoList',{//请求的地址：?前面的部分 params:{ token:'', optimus_uuid: '5

2020-08-02 15:31:18 547 1

转载 http缓存

分享喜欢：http缓存，很不错的一篇文章https://www.cnblogs.com/ranyonsue/p/8918908.html

2020-07-29 17:10:01 69

原创组件通信(常用)- Vue.js

一、父子通信业务逻辑：老爸给儿子2000生活费属性绑定 + props选项props的值数组 props: [‘aa’]对象 props: {aa:Number}验证函数 props: {aa: {validator (val) {}}}分析:1.老爸给儿子2000，那么数据是在Father组件身上2.数据以属性绑定的形式给3.Son组件通过props选项来接收绑定在身上的属性4.属性验证<!DOCTYPE html><html lang="en"

2020-07-29 11:15:30 115

原创 Vue响应式原理

在vue中，data选项中定义的数据数据改变，视图自动响应，我们把这个情况称之为：响应式原理底层代码实现响应式原理vue2.0响应式原理的核心： es5的属性Object.defineProperty(对象，对象的key,描述符【控制对象属性】)Object.defineProperty不支持ie8以及以下，所以vue就不支持了对象拦截，数组劫持如何实现响应式原理呢？// 1. 初始化数据定义const data={ name:'2003', age:18, sex

2020-07-23 09:26:08 104

原创后端渲染——nodejs

页面渲染前端渲染由前端写好静态的html页面然后通过http的请求获取到数据将数据更新渲染到页面上json数据格式后端渲染前端写好静态页面将静态页面交给后端后端将html部分复制进动态文件中 php jsp asp(模板引擎)对数据进行查询操作交换给浏览器端(html)后端渲染案例：项目环境目录dao/mysqlserver.js——连接数据库的配置const mysql=require('mysql');var pool = mysql.createPool({

2020-07-17 22:20:04 1046

原创页面上传、下载文件——nodejs

页面上传、下载文件思路流程前端的工作：1.先express脚手架搭建一下项目环境2.先写静态页面3.拖拽文件至指定框，发送ajax请求(文件数据用FormData对象存储)4.ajax接收后端发送过来upload下载下载文件的文件目录，然后渲染到页面上（a标签的download属性可以点击a标签下载文件）后端的工作：1.先配置路由 upload.js ，并导出路由模块2.app.js文件中引入路由模块，并使用路由中间件加载路由3.使用multer第三方模块将文件存储在服务器的磁盘上，存

2020-07-17 21:25:40 302

原创注册页验证码---nodejs

应用nodejs来写一个注册页的验证码首先，先安装nodemailer模块bash命令 npm i nodemailer -Snodemailer官网 https://nodemailer.com/官网有模板代码直接拷贝，进行删减自己所需我的验证码文件夹目录./lib/file.js自定义的读写文件模块const fs = require('fs');const path = require('path');function readFile() { return new

2020-07-15 10:50:44 237

原创服务器代理原理

服务器代理原理：用自己的服务器发请求，请求别人服务器的数据，然后再将请求过来的数据分散开request.jsconst http = require('http');const querystring = require('querystring');const {readFile,writeFile}=require('./lib/file');const server=http.createServer((req,res)=>{ if (req.url == '/favico

2020-07-14 10:22:45 157

原创路由

http—服务型模块模块就是用来提供web服务的，类似于apache服务器接下来讲一下路由的功能案例1.首先，http创建一个服务，需要有请求和响应—所有从浏览器传过来的数据从req里找—所有传给浏览器的东西在res里找2.这个服务的实例需要监听一个端口3.自定义一个读取文件的模块4.判断访问的路径，后端来返回不同文件的内容这是接下来代码的文件目录/public/html/index.html<h1>这里是首页</h1>/public/html/ne

2020-07-09 21:07:25 8764

原创事件抛发

事件侦听和抛发必须先侦听后抛发document.addEventListener("自定义事件",anhaoHandler);// new Event()指创建一个事件对象var evt=new Event("自定义事件");evt.a=10;// 向document抛发新建的event事件document.dispatchEvent(evt);function anhaoHandler(e){ console.log(e===evt);//打印结果true conso

2020-07-08 22:29:34 626

原创 Worker

Worker由html5 提供的多线程性能优化方案 ,可以提高用户体验必须在服务器环境下运行我们都知道，JS的执行环境是单线程，单线程遇到同步操作和大量运算导致阻塞，线程卡死worker的工作原理：将超大量级别的运算交给后台线程处理，由后台线程将处理好的结果交给主线程处理递归函数的案例：index.htmllet worker = new Worker('./outer.js');worker.postMessage(45); //传输数据worker.onmessage

2020-07-08 21:01:28 176 1

原创 FileReader对象和拖放事件

FileReader官方概念：FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。FileReader通过异步的方式读取文件内容，结果均是通过事件回调获取。文本预览案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi

2020-07-08 20:16:24 164

原创页面数据懒加载

数据懒加载案例：思路：滑动滚轮，当每次页面滚动条滑动至底部加载一定数量的数据。conn.php 是连接数据库的文件首先，在MySQL数据库创建了300条数据addItem.php

2020-07-06 11:20:15 1332

原创 requirejs

讲requirejs之前先来讲一下模块化的概念模块化模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。打个比方，模块化就像积木每块积木都是一个模块，可以独立存在，也可以组合使用可以存在依赖尽量减少在编程中模块是什么概念？1个JS文件1个函数1个对象1条语句1个变量模块作用：单一例如：bootstrap 依赖 jQueryjQuery-UI 依赖 jQueryjquery-tabs.js 依赖 jQue

2020-06-29 09:12:21 455

原创 MVC模式

MVC模式它是来自后台语言的一种软件设计架构不属于23种常见设计模式最早由 angular.js 带入前端angular(数据劫持+发布订阅模式) != angular.js(脏检查)2+ / 1+Model View Controller模型 / 视图 / 控制器web应用中的工作流程Model 模型数据模型(提供数据)View 视图提供和用户交互的界面(html)Cont

2020-06-27 12:24:00 127

原创闭包以及高频事件性能优化的两种方法（节流、防抖）

代码开发的格式 - 注意冲突和依赖开发项目的时候有很多种写法，像模块化开发，命名空间，闭包…，闭包其实就是一种写法闭包：它是JavaScript独有的一种函数结构(一种函数的嵌套用法)闭包的形成与变量的作用域以及变量的生存周期密切相关，变量的作用域，就是指变量的有效范围。生存周期对于全局变量是永久的，除非我们主动销毁这个全局变量。而对于在函数内用 var 关键字声明的局部变量来说，当退出函数时，这些局部变量即失去了它们的价值，它们都会随着函数调用的结束而被销毁：讲一下作用域链：当声明一个函数时，局

2020-06-19 12:05:11 631

原创面向对象的继承

了解继承前最好先看一下原型那一篇文章属性查找：1.先自身查找2.再沿原型向上查找3.直到原型链出口结束 Object.prototype.proto面向对象的三大特点：封装，继承，多态。继承：从其他对象上获得属性或方法叫做继承编程所说的继承来自面向对象编程语言类类别有继承关系（子类和父类）JS中没有类 class 它的本质是 function，它只是一个语法糖class a {};console.log(typeof a);打印结果为functionJS中的构造函

2020-06-19 11:38:09 171

原创 jQuery插件机制

jQuery 有两种语法：一、$(selector).action() jQuery的基本语法二、($ . ) jQuery工具语法例如：$.each 遍历对象和数组$.isArray 判断一个数据是否是数组，返回一个布尔值$.merge 合并数组$.type 检测数据类型jQuery的插件机制(这也是jQuery经久不衰的原因)$.extend()用来在jQuery命名空间添加函数它是jQuery的核心函数jQuery所有的工具都是用这个方法来实现的 $.ajax $

2020-06-17 11:52:42 185

原创解决跨域-jsonp

在通过ajax进行前后端交互，获取接口时，会遇到No 'Access-Control-Allow-Origin’的跨域报错为什么产生跨域错误？因为浏览器的同源策略。概念性的解释下同源策略。同源策略：同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。同源策略是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

2020-06-13 11:23:03 217

空空如也

空空如也