5 zhang070514

尚未进行身份认证

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

等级
TA的排名 4w+

call、apply了解一下

对javascript的call()和apply()这两个方法可以说是既熟悉又陌生,熟悉的是经常会在面试或是平常开发中会遇到,陌生的是对它俩一直是一知半解。刚好最近工作不是太忙,抽出时间来学习一下这两个方法。1、定义在javascript中,call和apply都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部this的指向。 function ...

2019-12-22 11:50:31

面试官:如何实现深拷贝

写在前面 深拷贝应该是前端面试中经常被问到的问题之一,搞定它可以让我们在面试中如鱼得水。那么什么是深拷贝呢?它和浅拷贝有什么区别呢?如何实现一个深拷贝?相信看完这篇文章你就能回答上面的问题了。一、简单解释 我们都知道js的数据类型包括两种:基本数据类型和引用数据类型。我们今天所说的深拷贝和浅拷贝都只针对引用数据类型,浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内...

2019-11-05 18:01:10

vue父子组件相互传递数据

前言vue父子组件之间相互传递数据应该是我们开发中最常见的场景。今天刚好有时间就写两个简单的小例子记录一下。一、父组件向子组件传递数据父组件向子组件传递数据相对简单,主要是通过props作为中间桥梁,下面是代码: <div id="app"> <input v-model="msg"> <child :message="m...

2019-09-16 17:30:09

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

前言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属性 function placeholderSupport() { return 'place...

2019-05-12 11:57:27

原生js实现select下拉框选择

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

2019-05-09 18:44:15

js实现Map结构

function myMap(){ var length = 0; var obj = new Object(); /*判断对象中是否包含给定的key*/ this.containsKey=function(key){ return (key in obj) } /*向map中添加数据*/ this.put = function(key,value){ ...

2018-11-12 21:39:25

JS继承

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

2018-11-11 11:05:41

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

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

2018-11-08 22:00:19

Flexbox——快速布局神器

一、Flex布局是什么?Flex是Flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容易都可以指定为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时,访问自己的本地数据出现了跨域问题,如下图 主要代码有var root = '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时,直接返回第一个操作数的值,不再对第二个操作数进行计算; var bar1 = 0&&c; console.log('bar1====='+bar1); //bar1=====0 var foo1 =...

2018-02-24 11:05:33

webstorm配合git使用一

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

2018-01-25 15:26:01

查看更多

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