- 博客(38)
- 收藏
- 关注
RSS订阅原创 value为空时，不显示placeholder
在antd某些组件中，value为空时，显示为空。空在组件里面代表有值，如果想显示placeholder，需要判断当value为空时设置为undefined，就可以显示placeholder了。
2021-02-21 15:21:43
465
原创 控制台警告：Warning：[antd：Form.Item] `children` is array of render props cannot have `name`.
背景：项目中使用 antd 组件的 textarea，由于项目中安装的 antd 版本不支持 textarea 显示输入字数（如15/50），修改项目的 antd 版本可能会导致其他样式发生改变，所以需要手动实现。出现原因在项目中使用 Form.Item 包含了一个 antd 的 textarea 标签和一个 p 标签，且在获取表单元素值时，会得到 undefined ，取不到值。解决办法使用 Form.Item 包裹 textarea 标签，但是样式会发生改变。给 Form.Item 标签添加
2021-02-21 14:51:19
2886
原创 git常用命令
Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库git clone 远程仓库地址：clone远程仓库代码git add：把修改的文件添加到暂存区，一次可以add多个文件，用空格隔开（也可以通过 git add . 命令将所有文件添加到暂存区）git commit -m ‘xxx’：把暂存区的所有内容提交到本地仓库（当前分支）git log：显示从最近到最远的提交日志，看到一大串类似2e70fd…的是commit.
2021-02-20 18:41:51
98
原创 数组的includes方法
includes方法属于ES7。与indexOf比较indexOf方法：如果存在要查找的值，会返回索引下标，如果不存在会返回-1；其内部使用的是严格等式运算符(===)进行判断，会导致对NaN的误判(因为NaN === NaN会返回false，如果数组中存在该元素，则无法找到)。例子：//indexOf[1, 2, 3].indexOf(2); // 1 [1, 2, 3].indexOf(4); // -1 [1, 2, NaN].indexOf(NaN); // -1//in
2021-02-20 14:09:38
1038
原创 对象的解构赋值
栗子先来看一个解构赋值的例子：let uesr = { name: 'wenyue', age:20,}let { name, age } = user;console.log(name); //wenyueconsole.log(age); //20user.name的值存储到变量name中，user.age的值呗存储到变量age中。设置默认值let uesr = { name: 'wenyue',}let { name, age } = user;console.
2021-02-20 13:15:01
99
原创 React的函数组件与通信
定义函数组件是通过function来定义的，例如：function myComponent(props) { const { name } = props; return <h1>hello,{name}</h1>;}组件通信父组件传值给子组件：父组件：通过 属性名 = 值 的形式传递给子组件数据；子组件：通过 props 参数获取父组件传递过来的参数，可以参考上面的例子。可以通过propTypes对传入的参数进行验证。注：不可以使用this.props直接
2021-02-18 23:01:05
462
原创 react refs
React 中的 Refs 提供了一种访问 render() 方法中创建的 React 元素（或 DOM 节点）的方法。使用场景管理焦点（如文本选择）或处理表单数据。refs可以使用react.createRef()创建，通过ref属性附加到react元素。refs通常在react组件的构造函数中定义，或作为函数组件顶层的变量定义。...
2021-02-18 22:36:41
75
原创 react中的state
stateReact官方建议把State当做是不可变对象，State中包含的所有状态都应该是不可变对象，当State中的某个状态发生变化，我们应该重新创建这个状态对象，而不是直接修改原来的状态。State根据状态类型可以分为三种。数字，字符串，布尔值，null，undefined这五种不可变类型。因为其本身就是不可变的，如果要修改状态的话，直接赋新值就可以，例如：this.setState({ num: 1, string: 'hello', ready: true});数组
2021-02-18 20:28:49
187
原创 react添加多个classname
在react原生动态添加多个classname会报错。解决方案1.使用es6模板字符串：className={`title ${index === this.state.active ? 'active' : ''}`}2.classnames安装：npm install classnames --save使用：import classnames from 'classnames'<div className=classnames({ 'class1': true, //
2021-02-18 19:48:51
744
原创 react中引入图片的方式
平常，我们引用图片的方式: <img src='../../images/xx.png' />但在react中不允许使用这种方式，会报错，可以通过以下方式进行引入：import pic from '../../images/xx.png' <img src={pic} /><img src={require('../../images/xx.png')} />...
2021-02-18 16:31:11
285
原创 移动端自适应布局
vh vw将屏幕分成100份，无论屏幕大小怎么变，份数是不变的，每份所占的百分比不变。媒体查询通过媒体查询，设置断点，性能更高，不同屏幕大小设置不同的根元素的font-size大小（由于设计稿尺寸是二倍的，所以计算时要把二倍算进去），根据根元素font-size大小计算出px对应的rem的值。...
2021-02-18 14:41:00
93
原创 img标签与div元素拼接留白问题
在写样式时，有遇到过一个问题，当我写一个img标签与一个div元素进行拼接时，会有空隙，经查阅，得知是对img标签不够了解。img标签是一个图片标签，用法：<img src="url" title="名称" alt="加载失败显示数据"/>...
2021-02-18 14:33:33
445
原创 es6扩展运算符 (...)
es6的扩展运算符就是取出参数对象中的所有可遍历属性，拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }实际上是通过Object.assign方法实现的。let baz = Object.assign({}, bar); // { a: 1, b: 2 }/*将源对象（source）的所有可枚举属性，复制到目标对象（target）*/如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后
2020-08-27 10:12:40
344
原创 选择器权重问题
例：以下代码中，p 元素是什么颜色？<div class="a b c"> <p class="d">test</p></div><style> .a .d {color: green} p.d {color: yellow} .a.b p.d {color: red} .a p.d {color: black}...
2020-02-20 15:23:40
510
原创 获取url中各个部分的方法
示例：http://www.home.com:8080/windows/location/page.html?ver=1.0&id=timlq#lovewindow.location.host; //返回URL 的主机部分(带端口号)，www.home.com:8080window.location.hostname; //返回www.home.com:8080 window.lo...
2020-02-04 19:00:02
828
1
原创 小米前端面试
html5语义化重绘和回流闭包（应用、缺点）响应式bootstrapseo防抖节流和应用http和https（对称加密、非对称加密）水平垂直居中构造函数怎么创建一个对象 ？？？？项目中用过 hotcss ：实现原理jquery里的链式调用vue实现双向数据绑定的原理项目中：webpack实现了什么功能浏览器拿到页面后。。。。jsonp懒加载http状态码 301...
2019-09-11 15:49:04
235
原创 360前端面试
数组扁平化实现keep-alivepromise和settimeout执行顺序懒加载实现原理 可视窗口怎么判断定义变量的方法 var let const的区别null和undefined的区别伸缩性布局 flex布局 align-items justify-content闭包的理解 应用场景原型_proto_和prototype区别string为什么是基本数据类型typ...
2019-08-28 11:54:59
294
原创 4种常用的AJAX请求方式
在jQuery中，AJAX常见的请求方式主要有一下4种：1、$.ajax()返回其创建的 XMLHttpRequest 对象 $.ajax() 只有一个参数：参数key/value对象，包含各配置及回调函数信息。如果你指定了dataType选项，那么需要保证服务器返回正确的MIME信息，(如 xml 返回 “text/xml”)。实例：保存数据到服务器，成功时显示信息。$.ajax({...
2019-08-26 21:19:40
580
原创 用友前端面经
==与===的区别float和定位有什么区别BFC因为我的项目中用到了懒加载所以问到了：懒加载实现原理利用数组的api实现队列怎么实现sass怎么选中父元素水平垂直居中html语义化改变this指向的方法箭头函数以及什么时候不可以用怎么判断数组...
2019-08-23 11:09:21
455
原创 Web Sockets 通信
WebSocket API是纯事件驱动的。应用程序代码监听WebSocket对象上的事件，以便处理输入数据和连接状态的改变。WebSocket协议也是事件驱动的。客户端应用程序不需要轮询服务器来得到更新的数据。消息和事件将在服务器发送它们的时候异步到达。//实例化一个WebSocket对象，并传入要连接的决定URLvar socket = new WebSocket("url"); //url...
2019-08-01 21:53:05
129
原创 jq中的contains方法
定义和用法$.contains() 方法用于判断指定元素内是否包含另一个元素。即判断另一个DOM元素是否是指定DOM元素的后代。实例检测一个元素包含在另一个元素之内：$(function () { function funcontain( html ){ document.body.innerHTML += "<br>" + html; ...
2019-08-01 19:12:07
2475
原创 html5跨文档消息传递（可实现跨域）
跨文档消息传送（cross-document messaging），简称XDM，指的是来自不同域的页面间传递消息。XDM的核心是postMessage()方法。目的：向另一个地方传递数据。对于XDM而言，“另一个地方”指的是包含在当前页面中的<iframe>元素，或者由当前页面弹出的窗口。postMessage()方法接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。第...
2019-08-01 18:48:06
530
原创 css之边框
什么是边框？边框就是环绕在标签宽度和高度周围的线条边框的属性格式连写（同时设置四条边的边框）border: 边框的宽度 边框的样式 边框的颜色连写（分别设置四条边的边框） border-top: 边框的宽度 边框的样式 边框的颜色; border-right: 边框的宽度 边框的样式 边框的颜色 border-bottom: 边框的宽度 边框的样式 边框的颜色 border-...
2019-07-29 22:47:08
167
原创 css之精灵图
什么是精灵图？css精灵图是一种图像合成技术精灵图作用：可以减少请求次数，以及可以降低服务器的处理压力。如何使用精灵图css精灵图需要配合背景图片和背景定位来使用。需要注意的一点是：在使用定位时，在前端中，x轴水平向右为正，而y轴则是垂直向下为正...
2019-07-29 22:34:04
195
原创 css之background
如果想让一张图片的中心部分总是显示在最中央，可以设置background-position: center top;背景属性的缩写格式background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;注意点：background属性中，任何一个属性都可以被省略关联方式 （默认情况下背景图片会随着滚动条的滚动而滚动）如果不想让背景图片随着滚动条滚动而滚动，可以修改背景图片和滚...
2019-07-29 22:29:18
122
转载 自适应PC端网页制作使用rem
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080使用了几种办法1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常2.长,宽,left,top,right,bottom都采用了rem...
2019-07-29 14:09:33
3050
原创 响应式布局
纯css实现响应式布局（媒体查询）1)设置 Meta 标签,在标签里加入meta标签。<meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no”>2)@media 类型 and (条件1) and (条件二){css样...
2019-07-29 13:05:19
144
转载 css百分比参照问题
CSS 百分比参照问题参照父元素宽度的元素：padding margin width text-indent参照父元素高度的元素：height参照父元素属性:font-size line-height特殊：相对定位的时候，top(bottom)， left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度...
2019-07-22 11:44:48
181
转载 HTML5中section元素的使用
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。section元素标签用来表现普通的文档内容或应用区块。一个section通常由内容及其标题组成，但section元素标签并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section。section 字面上理解为“块”，“部分”，s...
2019-07-20 22:46:42
7345
原创 Vue生命周期
vue生命周期第一个框框 new Vue() 表示开始创建一个Vue实例对象var vm = new Vue()第二个框框 表示刚初始化了一个vue空的实例对象，这个对象上，只有默认的一些生命周期函数和默认的事件，其他的东西都未创建。第一个生命周期函数 beforeCreate ，在这个函数执行时，data和methods中的数据都还没有初始化。下一个框框 进行初始化第二个...
2019-07-19 14:30:20
323
转载 JS创建数组的三种方法
1.隐式创建var arr = ['Audi','Bmw','Volvo'];2.直接实例化var arr = new Array('Audi','Bmw','Volvo');3.创建数组并给数组元素赋值var arr = new Array();arr[0] = 'Audi';arr[1] = 'Bmw';arr[2] = 'Volvo';...
2019-07-05 22:51:47
4211
转载 apply、call、bind的区别
相同点：把一个函数应用到其他对象上，都是用来改变this对象的指向的，第一个参数都是this要指向的对象，都可以利用后续参数传参。不同点：call、apply是修改函数的作用域，即修改this指向并且立即执行。bind是返回了一个新的函数，不是立即执行。而call和apply的区别是call接受逗号分隔的无限多个参数列表，apply则是接受数组作为参数。...
2019-07-05 22:45:58
83
转载 Websocket原理
Websocket概念Websocket是HTML5出的东西（协议），是一个持久化的协议，是基于HTTP协议的，并借用HTTP协议完成一部分握手。在HTTP中，一个request对应一个response，且是被动的，不能主动发起。通过Update:websocket、Connection:Upgrade告诉Apache、Nginx服务器：发起的是Websocket协议，不是HTTP协议。a...
2019-07-05 22:36:33
149
原创 css实现垂直居中、水平居中、垂直水平居中
css实现垂直居中or水平居中垂直居中1.如果是单行文字（包括下拉框、按钮等），可以设置行高等于父元素高度，如果是多行文字，可以用一个div把其包裹起来，并设置为display:inline-block，然后设置行高等于父元素高度。2.absolute+margin负值：（如果已知宽高）利用绝对定位，top，left均设置为50%，然后margin-top，margin-left均改为负的宽...
2019-07-03 17:13:01
199
转载 从url输入到显示发生了什么
从url输入到显示发生了什么1.浏览器显查看浏览器缓存、系统缓存、路由器缓存，如果缓存中有，会直接在屏幕中显 示页面内容2.发送http请求前，需要域名解析，解析获取相应地址3.浏览器向服务器发起tcp连接，建立tcp三次握手4.握手成功后，浏览器向服务器发起htpp请求，请求数据包5.服务器处理收到的请求，将数据包返回给浏览器6.浏览器收到http响应7.读取页面内容 解析...
2019-07-02 23:49:32
76
转载 HTML&HTML5
HTML&HTML51.编程语言和标记语言编程语言 (programming language)可以例如 c, perl, javascript标记语言( markup language ), 有 xml, html, xhtml ( xml 和 html 的合体 )你会见到他们都是以 “ml” 结尾的.标记语言的存在用来被读取的, 例如 svg 的图档其实就是用 xml 写出来的...
2019-06-30 15:39:51
123
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人