自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

马优晨

撰写自己前端开发心得

  • 博客(529)
  • 资源 (2)
  • 论坛 (6)
  • 收藏
  • 关注

原创 HSF 服务是什么

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

2021-04-07 22:05:37 8

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

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

2021-04-07 21:54:55 12

原创 antd输入框禁止回车

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

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

转载 微前端和原子设计

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

2021-03-31 16:48:08 30

原创 antd模糊搜索框

antd的模糊搜索框该如何使用,这里通过一个列子说明一下:HTML <Item label="企业名称"> {getFieldDecorator('enterpriseId', { rules: [ { required: true, message: '请输入企业名称', }, ], onChange:handleChangeCom, i.

2021-03-31 16:07:37 27

原创 HTML框架

一、框架实例垂直框架水平框架混合框架框架结构标签(<frameset>)注意事项二、内联框架添加 iframe 的语法<iframe src="URL"></iframe>URL 指向隔离页面的位置。Iframe - 设置高度和宽度height 和 width 属性用于规定 iframe 的高度和宽度。属性值的默认单位是像素,但也可以用百分比来设定(比如 “80%”)。Iframe - 删除边框frameborder 属性规.

2021-03-25 10:50:15 15

原创 antd过滤table里面的某个字段

问题:如下所示,这里是一个antd的一个table数据,现在需要在某种情况下不展示'作者昵称',其他情况展示,需要如何实现呢? let columns = [ { title: '内容ID', dataIndex: 'id', width:90, }, { title: '标题', dataIndex: 'title', width:150, }, { title: '作者昵称'

2021-03-16 11:50:11 36

原创 flex平均分布换行后自动对齐

目的效果:如何可以使用flex布局 进行平均分布,又可以换行呢?我最开始是这样做的: display: flex; display: -webkit-flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap;效果:如果我多添加几个空白的html是不是就搞定了? .bt_classify_name_empty{ margin: 5px;

2021-03-16 11:38:31 125

原创 height:100%和height:100vh的区别

(1)vh (视口高度)和 vw(视口宽度)介绍vh就是当前屏幕可见高度的1%,也就是说height:100vh == height:100%;效果:当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,但是设置height:100vh,该元素会被撑开屏幕高度一致。vh: 相对于视窗的高度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位

2021-03-16 11:08:01 52

原创 一些常见问题

1、输出一段文本,小于9个字符全部展示,超过只展示9个字符 <View className="normal_div_2"> {stageString(“这里是需要处理的文字”)} </View> const stageString = (str) => { if(str.length > 9){ return str.substr(0,11); }else{ return str; }

2021-03-08 16:26:41 20

原创 富文本编辑器收集

富文本编辑器收集1、Braft Editor :简单易用、扩展性强dome地址:https://braft.margox.cn/2、wangEditor:开源,轻量简洁,最重要的是开源且中文文档齐全,设计的UI漂亮。dome地址:http://www.wangeditor.com/index.html3、simditor:样式好看,插件不多,基本满足需求dome地址:https://simditor.tower.im/总结:建议使用第一种—Braft Editor,功能较全、简单易用、

2021-03-08 14:41:13 35

原创 异常的捕获与处理

一、异常介绍 按键无法点击、元素不展示、页面白屏,这些都是我们前端不想看到的场景。在计算机程序运行的过程中,也总是会出现各种各样的异常。例如:页面元素异常(例如按钮无法点击、元素不展示),页面卡顿,页面白屏。异常虽然不会导致计算机宕机,但是往往会导致用户的操作被阻塞。二、异常分类执行 JS 期间可能会发生的错误有很多类型。每种错误都有对应的错误类型,而当错误发生的时候就会抛出响应的错误对象。ECMA-262 中定义了下列 7 种错误类型:三、异常捕获1 window.onerror

2021-02-25 18:24:26 87

原创 react列表元素hover

常见的列表元素hover,我们使用的方式是,在获得原始数组对象的时候加一个标识符,然后mouseIn 的时候改变状态,mouseOut的时候恢复状态;一、举例演示const arr = [ {name:'123',age:13,sex:'man'}, {name:'125',age:13,sex:'man'}, {name:'124',age:13,sex:'man'} ](1)添加标识const arr = [ {name:'123',age:13,sex:'man',sho

2021-02-25 17:57:47 127

原创 mac中打开nginx位置

(1)在文件夹中搜索(1)在右上角的搜索框检索

2021-02-04 17:23:08 130

原创 一些JS优化小技巧

1. if多条件判断如果if里面包含多个判断条件,可以把判断条件存到一个数组,然后在去这个数组中检索”输入的值“是否满足条件;// 冗余if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {}// 简洁if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {}2. if…else…单个if else可以直接使用变量赋值替代,省时省力// 冗余let test: boolean;

2021-02-01 14:51:55 132 2

原创 动态高度过渡动画

动态高度过渡动画先看一个demo本质想的想法是通过给元素切换它的.up,.down类,让它实现展开、合上的动画{ height: unset; transition: all 0.3s linear; will-change: height; &.up { height: 0; } &.down { height: unset; }}很奇怪,明明给height属性设置了...

2021-02-01 12:16:40 86

原创 合并多个commit记录

场景:(1) 在自己的开发分支上开发一个功能提交多次,有多个commit,想将多次提交的commit合并成一个commit,方便代码管理。 例如将最近四次提交的commit合并成一个(2) 将dev分支或者很多零散的分支merge到一个公共release分支里。举例:开发分支: develop_test上线分支: release_brand在线上分支release_brand上面合并develop_test,使用命令 git merge --squash develop_test .

2021-01-28 16:00:46 132

原创 css设置全屏轮播

配置全屏图片HTML <div className="listImg" style={{ background: `url(${item.img}) no-repeat` }}>CSS .listImg { background-size: cover !important; height: 100%; width: 100%; position: absolute; }

2021-01-28 14:21:50 78 1

原创 CSS磨砂效果

几个样式效果(1) 磨砂标签 background-color: rgba(28, 28, 28, 0.45); font-size: 12px; display: inline-block; color: rgba(255, 255, 255, 0.85); margin-right: 8px; backdrop-filter: blur(10px); // 磨砂效果 (2)渐变文字颜色 .caseChooseLabel{ backgr

2021-01-18 11:43:17 244

原创 npm -S -D的区别

npm install XXX -S-s 即--save(生产环境)包名会被注册在package.json的dependencies里面,在生产环境下这个包的依赖依然存在npm install XXX -D-d 即--dev(开发环境)包名会被注册在package.json的devDependencies里面,仅在开发环境下存在的包用-D,如babel,sass-loader这些解析器i 、-S、-D代表什么i 是install 的简写;-S就是--save的简写,–save会将

2020-12-17 17:57:21 131

原创 TS学习总结

(1)编译开发TS可以使用(2)数据类型数据类型主要作用是:方便数据维护和数据校验;布尔类型 boolean数字类型 number字符串类型 string数组类型 array元组类型 tuple枚举类型 enum任意类型 anynull 和 undefinedvoid类型never类型数组的三种写法:var arr:number[] = [11,22,33];console.log(arr);var arr:Arrary<number> =[11,22,33

2020-12-11 10:35:54 575

转载 性能优化之图片懒加载

本文在github做了收录 github.com/Michael-lzg…demo源码地址 github.com/Michael-lzg…为什么要进行图片懒加载我们先来看一下页面启动时加载的图片信息。图片懒加载的原理我们先来看下页面结构 <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> img {

2020-12-09 16:14:46 395

原创 React Hook “useState“ is called in function xx which is neither a React function component or

如上图报错信息:问题就出现在函数的取名,函数名首字母要大写 我的函数名是slider 改为Slider就不会报错了;

2020-12-09 10:55:49 272

原创 react 条件渲染

在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。(1)元素变量你可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分,而输出的其他部分不会更改。if (isLoggedIn) { button = <LogoutButton onC

2020-12-07 10:28:47 51

原创 es6变量赋值重命名

es6变量赋值重命名:var cc = { te: “ni hao”,};var { te } = cc;var { te: bb } = cc;console.log(te); // ni haoconsole.log(bb); / /ni hao常用于 避免命名重复和 简化命名的情况;

2020-11-26 20:03:38 285

原创 获取对象的属性,并且判断对象属性是否存在

(1)获取对象的属性,并且判断对象属性是否存在举例:let test = {name:’22’,age:67,sex:’man’}; 获取age属性值;简单写法:if(test && test.age ){ console.log(test.age);}优化写法:let test = {name:’22’,age:67,sex:’man’}; console.log(test && test.age); // 直接获取age的值;(2)引入图片(图

2020-11-26 19:53:50 586

原创 Error: listen EADDRINUSE: address already in use :::8080

这个问题想必很多人都遇到过,端口被占用了;这里说一下MAC端口占用的处理办法:(1)第一步// 查看被占用进程的pidsudo lsof -i:8080查找占用8080端口的pid(2)第二步举例:查找到pid 是54939(3)第三步sudo kill 54939然后再检查是否杀死sudo lsof -i:8080...

2020-11-17 17:10:35 1305

原创 在tsx中引入less会提示模块找不到,但是可以运行

在tsx中引入less或者 sass文件会提示模块找不到,但是可以运行,想必很多人都遇到过这个问题?具体提示:处理方案:(1)使用变量接收const cls = require('./index.module.less');(2)配置全局ts文件全局ts配置文件typings.d.ts,也可能叫.d.ts配置declare module '*.module.scss' { const classes: { [key: string]: string }; export defaul

2020-11-17 16:38:20 1164

原创 gulp,grunt,bower,feoman,fis 简单说明

grunt说明(1)grunt网址:https://www.gruntjs.net/getting-started(2)说明:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。(3)安装gruntsudo npm install -g grunt-cli找个文件夹npm initsud

2020-11-16 21:06:08 47

原创 iceworks-cli构建模块说明

github地址:https://github.com/1255598067/ice/tree/master/tools/iceworks-cli

2020-11-16 18:16:14 57

原创 react hooks实例演示

(1)useState的使用设置count的值和name的值;上边的情况会发生,name的值设置不进去,这注意:如果是对象或者数组等类型,必须要返回一个新的数组或者是对象才是可以的;初始值是对象初始值是数组(2)useEffect的使用useEffect的第二个参数第二个参数不写,只要dom变化都会进行监听,都会触发。如果是【】,只会触发一次。也可以专门去监听某一个值,比如上面的count, count的值变化,effect 就会执行;如果要想要清除副作用,则可以在effec

2020-11-12 14:41:11 248

原创 react hook问题讲解

React Hook 官网地址:https://react.docschina.org/docs/hooks-faq.html(1)问题分析?Hook 是什么?Hook 是一个特殊的函数,它可以让你“钩入” React 的特性。例如,useState 是允许你在 React 函数组件中添加 state 的 Hook。稍后我们将学习其他 Hook。什么时候我会用 Hook?如果你在编写函数组件并意识到需要向其添加一些 state,以前的做法是必须将其它转化为 class。现在你可以在现有的函数

2020-11-11 15:35:14 214

原创 使用await实现多接口并行调用

const [ { data: { code }, }, { data: { code: aCode, data: aInfo }, } ] = await Promise.all([ stop.getEnrollment({ data: { userId, }, }), stop.properties({ data: { ...

2020-10-27 16:20:48 334

原创 js的神奇问题

记录一个JS的神奇问题,求高人解答一下:{function a(){};a= 1;function a(){}a= 2;}console.log(a);//1

2020-09-21 14:22:20 89

转载 中断promise

中断或取消 Promise 链Promise 已经成为了 JavaScript 管理异步操作的重要工具之一. 然而, 有的时候还是会很头痛:Promise // 等价于 `Promise.resolve(undefined).then`. .then(() => { // 开始. }) .then(() => { if (wantToBreakHere) { // 怎样在这里终止这个 Promise 链?

2020-08-17 10:02:18 400

原创 美团面试总结1

(1)简单理解Vue中的nextTick?https://www.jianshu.com/p/a7550c0e164f(2)keep-alive是如何实现的?https://www.jianshu.com/p/f3c52707656a(3)js遍历JSONhttps://www.cnblogs.com/qingqingzou-143/p/7079725.html(4)js遍历树https://www.cnblogs.com/cangqinglang/p/11307369.html(5)Vue

2020-08-06 09:58:54 317

原创 阿里面试总结1

(1) react组价设置react纯静态的组件:const Home = () => ( <> <Head> <title>Home</title> </Head> <div><Button>我是按钮</Button></div> </>)react动态的组件import React,{useState} from 'react

2020-07-30 22:15:39 245

原创 前端算法2

(1)日期格式化按所给的时间格式输出指定的时间格式说明对于 2014.09.05 13:14:20yyyy: 年份,2014yy: 年份,14MM: 月份,补满两位,09M: 月份, 9dd: 日期,补满两位,05d: 日期, 5HH: 24制小时,补满两位,13H: 24制小时,13hh: 12制小时,补满两位,01h: 12制小时,1mm: 分钟,补满两位,14m: 分钟,14ss: 秒,补满两位,20s: 秒,20w: 星期,为 [‘日’, ‘一’, ‘二’, ‘三

2020-07-26 23:37:08 171 2

原创 前端算法1

创建DOM第一种:for(let i=0;i<1000;i++){ var el = document.createElement('p'); el.innerHTML = i; document.body.appendChild(el);}第二种:let html =[];for(let i=0;i<100;i++){ html.push('<p>'+i+'</p>');}document.body.innerHTML = html.jo

2020-07-19 10:37:22 178

原创 PC端页面常见编辑

(1)PC端规则常用样式HTML<body> <div class=”rule”><div class=”rule-box”> <h2></h2 ></div></div></body>CSSbody{ min-width:1333px;}背景设置背景图:.rule{ height:630px; background:url(‘xxxxxx’) no-repea

2020-07-07 00:42:19 280

jqueryGoToTop.zip

前端页面回到底部按钮,滚动超过一屏会出现,一屏幕内会消失,点击会将页面缓慢滚动到顶部,非常实用。可以替换滚动图标,可以设置滚动时间。

2020-06-22

ejs常用操作.zip

ejs数据处理,express数据处理,欢迎下载。数据渲染,数据遍历,引入文件,动态处理数据,数据转移和非转移 等等~~~~

2020-06-20

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除