4 zhang070514

尚未进行身份认证

不喜欢运动的程序员不是好的工程师!

等级
TA的排名 5w+

前端面试之函数防抖和节流

前言js防抖和节流函数不仅是前端面试中经常问到的问题,也是我们平常开发中频繁处理dom事件时会用到的。在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数频繁调用,会加重浏览器的的负担,导致用户体验非常糟糕。此时,我们就可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。一、函数防抖函数防抖(debounce):...

2019-08-23 09:52:32

js实现IE9及以下对placeholder的兼容性

在做项目的时候,发现input的placeholder属性只支持i9以上的浏览器,ie9以下的就不显示信息提示了,体验很不好。最后自己用js实现了i9及以下placeholder的效果。实现效果很简单,先说一下思路:使用下面这个方法判断ie是否支持placeholder属性functionplaceholderSupport(){return'place...

2019-05-12 11:57:27

原生js实现select下拉框选择

最近在做一个项目需要兼容到ie不同版本,在使用select时遇到了各种问题。后来索性就自己使用原生js实现了这样一个下拉框,话不多说,直接上代码吧。<htmllang="en"><head><metacharset="UTF-8"><title>自定义select</title></head>&...

2019-05-09 18:44:15

js实现Map结构

functionmyMap(){ varlength=0; varobj=newObject(); /*判断对象中是否包含给定的key*/ this.containsKey=function(key){ return(keyinobj) } /*向map中添加数据*/ this.put=function(key,value){ ...

2018-11-12 21:39:25

JS继承

最近在面试中被问到js的继承,当时回答的不太好,所以今天特别总结一下。我们先来看一个基于原型链的继承 //父类 functionPerson(){} //子类 functionStudent(){} //继承 Student.prototype=newPerson();我们只要把子类的prototype设置为父类的实例,就完成了继承,也就是js里面的原型链继承。接...

2018-11-11 11:05:41

一个高度自适应的div,里面有两个div,一个div高度为100px,另一个填满剩余的高度

html代码如下 <divclass="main"> <divclass="box1"></div> <divclass="box2"></div> </div>第一种方式,利用定位 html,body{ height:100%; margi

2018-11-08 22:00:19

Flexbox——快速布局神器

一、Flex布局是什么?Flex是FlexibleBox的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容易都可以指定为Flex布局。Flexbox通常能让我们更好的操作它的子元素布局:如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行。可以快速让他们布局在一列。可以方便让他们对齐容器的左、右、中间等。无需修改结构就可以改变他们的显示...

2018-10-30 09:27:42

vue生命周期学习

vue实例从创建到销毁的过程就是生命周期,它总共分为8个阶段,分别是:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestorydestoryed下面是vue官网上的一张生命周期图,我们借助它来分析在不同时期都做了什么操作。闲话少说,直接上代码,通过打印的log来分析各个钩子函数<!D...

2018-10-12 14:46:51

js复习二之事件

1、事件的传播一个事件发生后,会在子元素和父元素之间传播。这种传播分为是三个阶段。第一阶段:从window对象传到到目标对象(上层传到底层),称为“捕获阶段”。第二阶段:在目标节点上触发,称为“目标阶段”。第三阶段:从目标节点传到回window对象(从底层传回上层),称为“冒泡阶段”。阻止事件传播,使用事件对象的stopPropagation方法。//html代码<div...

2018-09-26 10:55:14

理解setTimeout()

1、setTimeout()setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。setTimeout函数接受两个参数,第一个参数func|code是将要推迟执行的函数名或者一段代码,第二个参数delay是推迟执行的毫秒数。注意:如果回调函数是对象的方法,那么setTimeout使得方法内部的this关键...

2018-09-18 09:16:53

js复习一

1、break和continue区别break语句用于跳出代码块或循环;continue语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环。2、JavaScript共有六种数据类型,分别是数值(number)字符串(string)布尔值(boolean)undefinednull对象(object)ES6又新增了第七种Symbol类型。3、typ...

2018-09-17 15:39:33

css实现三角形

首先我们新建一个100x100的正方形div,为了方便我们查看,设置一个背景颜色。css代码如下:width:100px;height:100px;background-color:#333;接着给这个div添加两个border,width:100px;height:100px;background-color:#333;border-left:50p...

2018-09-12 08:34:33

webpack+axios配置代理进行跨域访问数据

在学习vue的axios时,访问自己的本地数据出现了跨域问题,如下图主要代码有varroot='http://172.16.188.107:8080/im'、、、getData(){this.$api.get('/data1.json',null,r=>{console.log(r);},f=>{...

2018-09-04 14:07:37

webpack入门一

什么是webpackWebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件...

2018-07-22 13:50:31

js将dom对象转换成字符串

functionnodeToString(node){//createElement()返回一个Element对象vartmpNode=document.createElement("div");//appendChild()参数Node对象返回Node对象Element方法//cloneNode()参数布尔类型...

2018-07-17 08:43:40

js逻辑运算符短路操作

js逻辑运算符有三个:逻辑非!、逻辑与&&、逻辑或||。所谓短路操作就是,当&&的第一个操作数的值是false时,直接返回第一个操作数的值,不再对第二个操作数进行计算;varbar1=0&&c;console.log('bar1====='+bar1);//bar1=====0varfoo1=...

2018-02-24 11:05:33

webstorm配合git使用一

最近开发工具换成了webstorm,公司用的是git管理代码,所以现在总结一下webstrom配合git的使用。代码是自己github上的一个小项目。首先,把代码down到本地。1、点击CheckoutfromVersionControl,选择Git。2、接着弹出下面这个窗口,填写相关信息。第一个填写仓库地址,第二个是下载到你电脑哪个位置,最后一个文件夹名(项目名),一看就

2018-01-25 15:26:01

第二个div高度随着父div高度改变而改变的几种实现方式

最近遇到这样一个需求,一个大的div高度不固定,里面有两个小的div,第一个div高度固定(比如为100px),第二个div高度填满大div的剩余高度。实现也很简单,想到了好几种实现方式,记录一下。因为外面大的div高度不固定,我在这里就默认填满body。1、定位:外面大的div相对定位,第二个div绝对定位,设置top:100px。代码如下:outer设置overflow:hidden去

2018-01-18 10:55:41

ul中li水平垂直居中

我们在写轮播图时,底部的小圆点或数字会放在一个ul下li里,这时候一般都要求小圆点或数字垂直居中,今天就写一个简单的li在ul中水平垂直居中。  轮播图一般有两种,左右轮播和上下轮播,对应的ul中的li也分为水平排列和竖直排列,下面就针对这两种情况分别说明。1、轮播图左右轮播,li水平排列:divclass="box">ul>li>

2018-01-06 10:37:20

使用weinre调试移动端真机

weinre是webinspectorremote(远程web检查器)的缩写。本文主要是在node环境下使用。一、安装首先确保你的电脑上有node环境,然后使用cnpm或npm安装,windows环境下:npminstallweinre-g二、运行weinre在命令行输入:weinre–httpPort8081–boundHost-all-8081是调试服务器运行的

2017-11-16 15:05:29

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。