前端开发
关注
分享
扫一扫
rainylululululu
这个作者很懒，什么都没留下…
展开
-
水平居中实现的方式
flex布局实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document...原创 2020-05-05 22:29:18 · 201 阅读 · 0 评论 -
防止margin重叠
什么叫边距重叠外边距重叠是指两个或者多个盒子（相邻或者嵌套）的相邻边界重合在一起，margin全部为正值，取最大；一正一负相加；没有正值则取绝对值最大，之后用0减去这个值父子边距重叠<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g...原创 2020-05-05 19:55:41 · 370 阅读 · 0 评论 -
三种方式画一条0.5px的线
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl...原创 2020-05-05 16:18:51 · 2874 阅读 · 1 评论 -
前端性能优化工作
在webpack打包时设置externals配置项，不打包如loadsh,echarts这些插件，而使用CDN加载边缘服务器上面的资源，防止网络阻塞带来的影响发布网站时，不希望有console.log()这种输出，可以使用babel-plugin-transform-remove-console插件，prodution环境时清除console图片的压缩，首先图片转为base64，然后canv...原创 2020-04-29 11:00:35 · 344 阅读 · 0 评论 -
防止高频触发的方法：防抖、节流
防抖：多次高频操作，只在最后一次执行。策略是当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi...原创 2020-04-29 11:52:03 · 487 阅读 · 0 评论 -
实现跨域请求的几种方法
跨域都需要后端配合修改的，可以使用jsonp,iframe,cors,或者h5的postMessage方法，websocket方法，也可以使用代理跨域，如nginx，nodejsjsonp跨域请求 （只能实现get一种请求）html可以加载js、css，img等静态资源，根据这个原理，使用jsonp请求，相当于首先创建一个script标签，之后src引用静态资源，之后用回调函数，接收返回的...转载 2020-04-28 17:15:50 · 414 阅读 · 0 评论 -
get、post、delete和put请求区别及用法
简单请求和复杂请求的区别简单请求：get,postimg的src、script的js可以发起get请求，获取数据（类似于对数据库的select操作），post提交数据（类似于对数据库的insert操作），请求可以发起，而服务端可以进行拒绝，浏览器认为这是安全的。复杂请求：put,deleteput请求，更新数据（类似于对数据库的update操作），delete请求，删除数据（类似于对数据库...原创 2020-04-28 16:52:19 · 2355 阅读 · 0 评论 -
JS按照对象某个属性进行排序
var products = [ {name:'grape',price:15}, {name: 'Banana', price:7}, {name: 'Apple', price:17}, {name: 'Orange', price:12}, {name:'stawberry',price:30}]function compareFunc(propName){ ...原创 2020-04-28 09:33:05 · 157 阅读 · 0 评论 -
点击一个url到页面加载完成了哪些步骤
DNS（域名解析系统，将域名和IP一一映射）双方TCP握手客户端发起http请求服务器端处理请求并传输数据浏览器端解析渲染页面原创 2020-04-27 15:17:26 · 178 阅读 · 0 评论 -
JS实现数组扁平化方法
reduce累加器+递归可区分null,数值，字符串，bool类型function flatten(arr){ return arr.reduce((result,item) =>{ return result.concat(Array.isArray(item) ? flatten(item) : item) },[])}var arr = [1,[[2,true]...原创 2020-04-26 12:29:45 · 168 阅读 · 0 评论 -
promise的基础用法
var flag1 = true var flag2 = false var pro1 = new Promise((resolve,reject) => { setTimeout(()=>{ if(flag1){ resolve('正确1') } else{ r...原创 2020-04-26 11:35:43 · 192 阅读 · 0 评论 -
apply,call,bind原生实现方式
apply Function.prototype.apply1 = function(context,arr){ var context = Object(context) || window context.fn = this let result = !arr ? context.fn() : context.fn(...arr) dele...原创 2020-04-26 10:55:27 · 147 阅读 · 0 评论 -
JS事件冒泡和事件捕获
冒泡和捕获概念事件冒泡：事件开始时，由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件具体例子<html lang="en"><head> <meta charset="UTF-8"> <title>测试事...原创 2020-04-26 10:13:39 · 147 阅读 · 0 评论 -
JS实现对象深拷贝的几种方法
遍历+递归function deepClone(obj){ let newObj = {} for(let key in obj){ if(obj.hasOwnProperty(key)){ if(typeof(obj[key]) === 'object' && obj[key] !== null){ newObj...原创 2020-04-25 23:01:04 · 543 阅读 · 0 评论 -
ES5继承和ES6继承区别
ES5继承原型链继承缺点:来自原型对象的引用属性是所有实例共享的,创建子类实例时，无法向父类构造函数传参 function Animal(SuperName){ this.SuperType = SuperName } Animal.prototype.SuperAge = "1000" function Dog(Name){ this.Typ...原创 2020-04-24 22:29:22 · 295 阅读 · 0 评论 -
箭头函数的this指向问题及其具体使用场景
obj = { name:'lili', age:20, sayAge1:function(){ // obj调用sayAge1()，则this指向obj,this.name相当于obj.name console.log('my name is ' + this.name + ' my age is ' + this.age) }, sayAge2:() =&g...原创 2020-04-23 15:15:36 · 289 阅读 · 0 评论 -
position定位及各自应用在什么场景
static:默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何top、bottom、left 或 right 声明）,相当于没有定位，基本上用不到这个属性。relative:相对于自己在文档流中原本的位置进行定位，不脱离文档流，原来位置留下空白，如果想要盒子偏离自己原本的位置，却保留在文档流中，可以使用relativeabsolute:应用...原创 2020-04-23 15:09:50 · 1494 阅读 · 0 评论