马优晨_CSDN博客-前端开发,小技巧,vue领域博主

原创 21年10月到11月一个月学习总结

1、《当我谈跑步时谈些什么》这本书中，村上春树讲到自律，到死都要像18岁一样保持热爱；感悟：喜欢的事情自然可以坚持，不喜欢的怎么也坚持不了；2、北大学长：如何提升专注度（1）避免假努力 ★ 一边学一边发朋友圈； ★ 选错方向做无用功； ★ 感觉自己付出时间精力但是做的东西毫无效率；（2）选择适合自己的学习环境，避免手机信息干扰（社交，娱乐，其他信息）等；（3）使用西红柿法则，间隔30min,...

2021-11-26 22:07:11 321

原创 typescript数组，对象，接口实例

一、typeScript 数组1、数组解构 /* let [x:number,y:string,z:number] = [1,'1',3]; 报错，不支持 *//* let x:number; let y:string; let z:Array<number>; let testArray =[0,'nihao',[1,2,3]]; [x,y,z] = testArray; console.log(x,y,z); 不能使用其他类型 */ let

2021-11-25 20:41:48 112

原创 typeScript的函数实例

// 1、遍历const myBooks =['白菜','青菜','黄瓜'];myBooks.forEach((title, idx, arr) => console.log(idx + '-' + title));// 2、参数类型和返回类型function createUserId(name: string, id: number): string { return name + id;}const createName = (name:string,age:numbe.

2021-11-25 14:59:54 126

原创 ts交叉类型

typeScript 交叉类型是将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。interface IPerson { id: string; age: number;}interface IWorker { companyId: string;}type IStaff = IPerson & IWorker;const staff: IStaff = { id: 'E1006', age: 33

2021-11-25 11:52:42 9

原创 typescript可辨识联合

如果一个类型是多个类型的联合类型，且多个类型含有一个公共属性，那么就可以利用这个公共属性，来创建不同的类型保护区块。enum CarTransmission { Automatic = 200, Manual = 300}interface Motorcycle { vType: "motorcycle"; // discriminant make: number; // year}interface Car { vType: "car"; // discriminan

2021-11-25 11:43:27 98

原创 typescript使用in关键字进行类型守卫

类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内。换句话说，类型保护可以保证一个字符串是一个字符串，尽管它的值也可以是一个数值。类型保护与特性检测并不是完全不同，其主要思想是尝试检测属性、方法或原型，以确定如何处理值。目前主要有四种的方式来实现类型保护,这里主要演示使用in关键字进行类型守卫；interface YuZhouK{ name:string, dis:number}interface YuZhouV{ name:string,

2021-11-25 11:25:14 187

原创 typescript断言

有时候你会遇到这样的情况，你会比 TypeScript 更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其他语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。（1）"尖括号"语法let someSB:any = 'you are sb';let someSBLength:number = (<string...

2021-11-25 11:19:39 358

原创 typescript基本类型demo

//常量定义let isDone: boolean = false;let age:number = 30;let sex:string = 'man';let list:number[] = [1,2,3,4,5];let list2:Array<number> = [6,7,8];let sexTodo:string[] = ['man','sex'];let countList:Array<number> = [89,90];// let tupleType..

2021-11-24 15:31:27 9

原创 react组件之间重用状态

有时候我们会想要在组件之间重用一些状态逻辑。目前为止，有两种主流方案来解决这个问题：高阶组件和render props。但是这里我们讲一种自定义hook的方式：首先，我们把公用逻辑抽取到一个叫做useFriendStatus的自定义 Hook 里： useFriendStatus组件import React, { useState, useEffect } from 'react';function useFriendStatus(friendID) {...

2021-11-03 15:14:10 22

原创在网页中使用react

一、使用原生的方式引入完整代码： like_button.js'use strict';const e = React.createElement;class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.like...

2021-11-03 14:55:27 21

转载什么是SSR

（1）什么是SSR？SSR是服务端渲染：在后台将vue实例渲染为HTML字符串直接返回，在前端激活为交互程序。（2）传统的服务端渲染实现原理：客户端发送请求给服务器服务器查询数据库，使用视图、模板引擎等拼接成html字符串，返回给客户端客户端渲染html优点：网页内容在服务器端渲染完成，一次性传输到浏览器，所以首屏加载速度非常快有利于SEO，因为服务器返回的是一个完整的html，在浏览器可以看到完整的dom，对于爬虫、百度搜索等引擎就比较友好缺点：在后续跳...

2021-10-26 20:25:55 368

原创 vue3绑定多个事件

注意：(1)如果需要传递参数并且带上事件：使用$event的作为事件对象参数(2)如果需要传递多个事件，事件之间使用逗号隔开即可

2021-10-15 21:20:16 44

原创 vue3 数据双向绑定demo

打印app 查看结果

2021-10-15 15:04:48 41

原创判断手机浏览器还是桌面浏览器

（1）使用navigator.userAgent最简单的方法就是分析浏览器的 user agent 字符串，它包含了设备信息。JS 通过navigator.userAgent属性拿到这个字符串，只要里面包含mobi、android、iphone等关键字，就可以认定是移动设备。if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { // 当前设备是移动设备}// 另一种写法if ( navigator.userAgent.m

2021-10-13 17:54:23 26

原创倒计时插件与函数

（1）使用倒计时函数 const countDown = (current, ends) => { const leftTime = ends - current; let [h, m, s] = ['00', '00', '00']; if (leftTime >= 0) { h = Math.floor((leftTime / 1000 / 60 / 60) % 24) >= 10 ? Math.floor(

2021-10-12 14:28:37 35

原创一个列表中按钮的不同样式

如上图所示，假设这是一个传统的秒杀购买场景：（1）问题概述：状态：（1,2）进入秒杀（3）立即预约（4）宝贝秒光（5）活动结束文字：进入秒杀文字颜色#fff，其他文字颜色都是 #ff3B56；宝贝秒光，活动结束，文字带透明度30%；描边：只有立即预约有描边，其他状态都没有按钮透明度：立即预约 8% 进入秒杀 100% 宝贝秒光 8% 活动结束 8%（2）解决方案：拿到这个问题，首先很多人想想到的是...

2021-10-12 11:02:37 29

原创将16进制的颜色转为rgb颜色

考虑到通用性，就定义一个colorToRGB函数吧，将16进制的颜色值当做参数传入。　　首先需要将参数转为字符串类型的，'color = ""+color;'　　检查第一个字符是否为"#"，如果第一个字符为“#”，截取“#”之后的字符，判断当前color的位数，需要考虑到色值是可以简写为3位的，如果是3位颜色值，每一位重复一次代表一个颜色，例如#fff，其实是#ffffff的简写，然后分别取得rgb三个色值：color1, color2, color3。　　到这一步之后，就没什么了，...

2021-10-12 10:39:48 44

原创使用n切换node版本

今天在运行项目的时候遇到一个问题：./src/global.scssError: Missing binding /Users/youchenma/Documents/alibaba/business/node_modules/_node-sass@4.14.1@node-sass/vendor/darwin-x64-83/binding.nodeNode Sass could not find a binding for your current environment: OS X 64...

2021-07-08 19:49:53 1128

原创 SDK 和 API 有什么区别

贴近生活讲讲两者的关系：有一杯密封饮料，它的名字叫做“SDK”。饮料上插着吸管，吸管的名字叫“API”。把你叫做“XX系统”。如果你想喝到SDK里的饮料（让系统拥有SDK中的功能），你必须通过API这根吸管来实现（通过API连接你的系统和SDK工具包），否则你就喝不到饮料。所以：SDK＝放着你想要的软件功能的软件包API＝SDK上唯一的接口讲个小故事：研发人员A开发了软件A，研发人员B正在研发软件B。有一天，研发人员B想要调用软件A的部分功能来用，但是他又..

2021-07-06 15:38:00 85

原创 ES10的动态导入文件

(1) 传统动态导入JS文件的方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态 import </title></head><body

2021-06-30 15:51:06 80

原创 Promise.allSettled

Promise.allSettled是ES10的特性。为什么会产生这个API？在某些场景，我们可能会遇到多个异步操作并行执行。如果使用promise.all()的话，有一个promise报错的话，整个流程都会走的失败行列里面。假设现在需要多个promise同时执行，不管其中部分执行失败，统一进入到成功的回调里面。这时候，就需要Promise.allSettled登场了。<!DOCTYPE html><html lang="en"><head> &

2021-06-30 15:22:22 53

原创可选链操作符

为什么要介绍可选链操作符？答：因为它大大的节约了，写一些重复代码的时间举例：获取config对象化中db下面的host的值。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g

2021-06-30 15:11:13 33

原创大整形运算

定义大整形let n = 521n;console.log(n,typeof(n)); // 521n "bigint"整形转换成大整形let m = 123;console.log(BigInt(m)); //123nconsole.log(BigInt(1.2)); //报错大数值运算 let max = Number.MAX_SAFE_INTEGER; console.log(max); //9007199254740991

2021-06-30 14:57:51 24

原创关于生活与工作的一些反思

做人一定要明确自己生活的价值和意义，努力的方向。常见的问题有三点：（1）不能明确工作内容价值；（2）不能自己调控情绪应对挫折；（3）缺乏自信，不敢和人沟通；自己总结了一些个人点：（1）穷不可怕，可怕的是穷而不自知。大道：自己动手丰衣足食。（2）赚钱是一个智力的游戏，各个社会阶层也是一个智力的游戏，没有相应的智力，没有强者的心，那就根本没有办法突破。（3）多看书，比如：老子，鬼谷子，多多反思做好短期规划；（4）工作中，听话，照做，执行（用心）；（5）永...

2021-06-30 14:24:12 128

原创 async与await封装ajax请求

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>发送 AJAX 请求</title></head><body> <scri.

2021-06-29 14:35:27 207

原创 async和await结合读取文件

上一篇已经介绍过，使用promise的方式读取文件，大大的减轻了使用回调地狱的困难。下面使用async和await结合读取文件实例看看，可以实现同样的效果：//1. 引入 fs 模块const fs = require("fs");//读取『为学』function readWeiXue() { return new Promise((resolve, reject) => { fs.readFile("./resources/为学.md", (err, dat

2021-06-29 14:24:37 131

原创 Promise读取多个文件

传统回调读取多个文件？const fs = require("fs");fs.readFile('./resources/为学.md', (err, data1)=>{ fs.readFile('./resources/插秧诗.md', (err, data2)=>{ fs.readFile('./resources/观书有感.md', (err, data3)=>{ let result = data1 + '\r\n' +dat

2021-06-29 11:52:30 66

原创 Promise封装ajax

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>发送 AJAX 请求</title></head><body> <scri.

2021-06-29 11:42:12 26

原创迭代器自定义遍历对象

要说起迭代器自定义遍历对象，首页要知道什么是迭代器？生成器概念在Java，Python等语言中都是具备的，ES6也添加到了JavaScript中。Iterator可以使我们不需要初始化集合，以及索引的变量，而是使用迭代器对象的 next 方法，返回集合的下一项的值，偏向程序化。迭代器是带有特殊接口的对象。含有一个next()方法，调用返回一个包含两个属性的对象，分别是value和done，value表示当前位置的值，done表示是否迭代完，当为true的时候，调用next就无效了。ES5中遍历集

2021-06-29 10:59:04 63

原创为什么使用ES6生成器

官方解释：1、异步编程，文件操作，网络操作(ajax, request) 数据库操作使用生成器操作更加方便；2、有效的解决回调地狱的问题；举例：请在控制台 1s 后控制台输出 111 ，2s后输出 222 ，3s后输出 333。（1）使用传统的的回调写法 setTimeout(() => { console.log(111); setTimeout(() => { ..

2021-06-27 16:26:03 51

原创 git merge 和 git rebase的区别

git rebase 让你的提交记录更加清晰可读git rebase 的使用rebase 翻译为变基，他的作用和 merge 很相似，用于把一个分支的修改合并到当前分支上。如下图所示，下图介绍了经过 rebase 前后提交历史的变化情况。...

2021-06-19 11:35:26 175

原创 react封装子组件弹框

{/* 协议弹框 */} <Protocol visible={visible} register={ async (tick) => { setVisible(false); if(tick){ setSwitchChecked(true); setAlertShow(true); setTimeout(()=>{ .

2021-06-15 19:27:03 167

原创时间控制插件调用接口

（1）一个时间控制插件：需求，根据时间组件选择的时间，来根据选择的这个时间段去”搞事情“；（2）组件的代码分析：组件的js和样式代码如下index.js/**** DurationSelector**/import React from 'react';import { Button, DatePicker, message } from 'antd';import moment from 'moment';import PropTypes from 'prop-types'

2021-06-15 18:18:52 56

原创 rax+react hook 实现分页效果

'use strict';import { createElement, useState, useEffect, memo } from 'rax';import View from 'rax-view';import { request } from './core/index';import './index.less';import Card from './components/index';import ScrollView from 'rax-scrollview';impor.

2021-06-15 16:35:31 136

原创编译时和运行时区别

编译时编译时顾名思义就是正在编译的时候.那啥叫编译呢?就是编译器帮你把源代码翻译成机器能识别的代码.(当然只是一般意义上这么说,实际上可能只是翻译成某个中间状态的语言.比如Java只有JVM识别的字节码,C#中只有CLR能识别的MSIL.另外还有啥链接器.汇编器.为了了便于理解我们可以统称为编译器)那编译时就是简单的作一些翻译工作,比如检查老兄你有没有粗心写错啥关键字了啊.有啥词法分析,语法分析之类的过程.就像个老师检查学生的作文中有没有错别字和病句一样.如果发现啥错误编译器就告诉...

2021-06-15 16:03:06 204

原创 CSS3动画---移动端上下固定高度，中间自适应

问题描述：移动端，手机显示界面，需要头部高度10vh,底部高度10vh,中间的高度自适应；效果展示：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document

2021-04-30 17:30:39 219 4

原创 HSF 服务是什么

HSF简介（摘自《企业IT架构转型之道》）HSF 概述

2021-04-07 22:05:37 234

原创一方包,二方包，三方包的区别

一方包（也称一方库）：本工程中的各模块的相互依赖二方包（也称二方库）：公司内部的依赖库，一般指公司内部的其他项目发布的jar包三方包（也称三方库）：公司之外的开源库，比如apache、ibm、google等发布的依赖...

2021-04-07 21:54:55 431

原创 antd输入框禁止回车

问题：比如这里，我输入一个淘宝账号名：结果按回车，就触发了冒泡。处理办法： const preventBubble = function (e) { e.preventDefault(); };<Item label="淘宝账号名"> {getFieldDecorator('taobaoNick', { rules: [ { required: true, message: '请输入淘宝账号名'

2021-04-01 19:57:18 911 1

转载微前端和原子设计

「1」微前端（Miro frontends）"微前端" 应该是我们 2020 年里听的最多的一个前端技术。现在非常多的大厂都在尝试这个新技术来解决大型前端项目中的问题。虽然我们前端开发中有模块化（modular）的组件（components），但是它相比后端的 “微服务” 是大有不同的。在了解 “微前端” 之前，我们先给没有接触过后端的同学科补一下后端的 “微服务” 知识。微服务是什么？微服务是一种开发软件的架构和组织方法，其中软件由通过明确定义的 API 进行通信的小型独立服务组成。这些服.

2021-03-31 16:48:08 122