![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
晨梦天旭
学习前端,加油
展开
-
利用JS API优化输入框粘贴体验
前言今天有点小勤奋,就再写一篇博客吧。本文章是在张鑫旭大神博客上学习,大家可以去学习,我会在文章末尾贴出链接。目前输入框的体验输入框输入内容我们有时候为了方便,会直接粘贴内容,例如IP,网址,或者陌生人的手机号。但是,有时候我们复制的内容包含冗余信息,或者格式不准确,还需要重新编辑,体验就不好了。下面贴出一张图,是淘宝的注册利用JS API改变剪贴板内容下面先贴出代码:/**@de...转载 2018-11-20 22:47:10 · 198 阅读 · 0 评论 -
call、apply和bind方法的用法以及区别
前言最近在学习的时候,遇见了apply()函数,发现自己对于call,bind函数不了解,所以今天来看看。正文因为这三个函数的作用都是改变函数运行时this的指向,所以我们要来先看看this。函数调用有以下几种方法:方法调用模式:当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的this被绑定到这个对象。 var a...转载 2019-03-07 20:04:26 · 354 阅读 · 0 评论 -
防抖和节流
前言防抖与节流函数是一种最常用的 高频触发优化方式,能对性能有较大的帮助。正文防抖 (debounce): 将多次高频操作优化为只在最后一次执行,通常使用的场景是:用户输入,只需再输入完成后做一次输入校验即可。function debounce(fn, wait, immediate) { let timer = null return function() { ...原创 2019-03-07 21:37:18 · 422 阅读 · 0 评论 -
Cookie
前言今天聊一聊cookie吧正文1.认识cookie首先先来认识一下cookie打开CSDN,开发者模式,Application->Cookies可以看到:可以看到左边栏Cookies下方会列举当前网页中设置过cookie的域都有哪些。上图中只有一个域,即“https://www.csdn.net”。而右侧区域显示的就是某个域下具体的 cookie 列表,对应上图就是“http...转载 2019-03-15 14:44:36 · 411 阅读 · 0 评论 -
数组常用方法
前言总结一下常用的数组方法正文1. mapmap() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 var arr = [1,2,3,4,5] const newarr = arr.map(x=>x*2) console.log(newarr); //[2, 4, 6, 8, 10] var new_ar...原创 2019-03-11 19:49:34 · 378 阅读 · 0 评论 -
字符串常用方法
标题原创 2019-03-15 23:15:11 · 181 阅读 · 0 评论 -
React 生命周期
React生命周期先贴出图示:当组件在客户端被实例化,第一次被创建时,以下方法依次被调用:1、getDefaultProps2、getInitialState3、componentWillMount4、render5、componentDidMount当组件在服务端被实例化,首次被创建时,以下方法依次被调用:1、getDefaultProps2、getInitialState...原创 2019-03-20 22:15:11 · 142 阅读 · 0 评论 -
原生ajax封装成Promise
代码: function myAjax(method,url,params){ this.state = 'FULFILLED' this.fulfillList = [] this.rejectList = [] (function(that){ var data = null ...转载 2019-03-21 10:09:10 · 1156 阅读 · 0 评论 -
轮播图实现
前言做一下轮播图的效果正文1.轮播图实现要求:页面:1.视觉窗口,即可见区域2.包含所有图片的容器3.具体的每一张轮播图片4,锚点列表, 点击可跳到具体某一页5.左右切换按钮让每一个轮播页大小刚好等于视图窗口大小1.设置视图窗口宽度, 让超过的部分隐藏2.设置包含所有图片的容器的宽度为 10000%, 目的是为了让容器足够大. 因为如果容器不够大的话容器中每一张图片就算...转载 2019-03-18 19:45:44 · 511 阅读 · 0 评论 -
深复制和浅复制
正文我们都知道js数据中有基本类型和引用类型。那引用类型复制的时候,有两种情况传值和传址。浅复制Object.assign(target,obj)深复制function getType(obj){ //tostring会返回对应不同的标签的构造函数 var toString = Object.prototype.toString; var map =...原创 2019-03-22 21:49:35 · 154 阅读 · 0 评论 -
CSRF 和 XSS
前言今天是CSRF 和 XSS正文1.XSSXSS 全称(Cross Site Scripting) 跨站脚本攻击, 是Web程序中最常见的漏洞。指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击者的目的. 比如获取用户的Cookie,导航到恶意网站,携带木马等。XSS 是如何发生的呢假如有下面一个textb...原创 2019-03-14 20:55:52 · 244 阅读 · 0 评论 -
前端面试题总结三
前言学习学习!正文1.判断数组的三种方法Object.prototype.toString.call()每一个继承 Object 的对象都有 toString 方法,如果 toString 方法没有重写的话,会返回 [Object type],其中 type 为对象的类型。但当除了 Object 类型的对象外,其他类型直接使用 toString 方法时,会直接返回都是内容的字符串,所以...转载 2019-03-10 17:19:23 · 186 阅读 · 0 评论 -
async/await内执行顺序
前言有好久没写博客了,主要是时间不够加上自己技术不够,最近开始校招。所以准备用写博客来总结一些技术点。今天在网上看到有人问到关于async/await 内的执行问题,所以自己看了一下官方文档。正文先贴出代码<!DOCTYPE html><html lang="en"><head> <meta cha原创 2019-02-28 11:14:27 · 931 阅读 · 0 评论 -
前端面试题总结
前言在网上看到一些好的题,拿来研究研究。正文1. 深度优先遍历和广度优先遍历本次是实现html的遍历 <body> <div class="parent"> <div class="child-1"> <div class="child-1-1"> <div转载 2019-03-09 11:30:57 · 184 阅读 · 0 评论 -
前端面试题总结四
前言越继续越发现自己差的多,加油吧!正文1.统计字符串中每个字符的出现频率,返回一个 Object,key 为统计字符,value 为出现频率不限制 key 的顺序输入的字符串参数不会为空忽略空白字符//自己思考let str = 'hwllo wird'function count(str){ //去重 let newStr = str.replace(' ',...转载 2019-03-13 21:44:18 · 198 阅读 · 0 评论 -
cookie localStorage sessionStorage
前言今天学习一下前端浏览器缓存的三种方式。正文三者的异同特性CookielocalStoragesessionStorage数据的生命期可设置失效时间,默认是关闭浏览器后失效除非被清除,否则永久保存仅在当前会话下有效,关闭页面或浏览器后被清除存放数据大小4K左右一般为5MB一般为5MB与服务器端通信每次都会携带在HTTP头中,如果使用coo...原创 2019-03-14 13:53:54 · 280 阅读 · 0 评论 -
跨域
前言关于跨域,自己看了很多博客,但总是有一种无法贯通的感觉,今天自己总结一下,希望能更好的理解。正文1.什么是跨域首先要了解同源和跨源的概念,同源的定义:如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源。三个任一不相同 则为跨域。跨域不一定是浏览器限制了发起跨站请求,而也可能是跨站请求可以正常发起,但是返回结果被浏览器拦截了。最好的例子是 CSRF 跨站攻击原...转载 2019-03-14 13:55:49 · 169 阅读 · 0 评论 -
Promise 原理解析
前言今天深入了解一下promise正文MDN描述:Promise 对象是一个代理对象(代理一个值),被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法(handlers)。 这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的promise对象、一个 Promise有以下几种状态:pend...转载 2019-03-14 15:11:48 · 954 阅读 · 0 评论 -
前端面试题总结二
前言继续学习。。正文1.已知如下数组:var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];编写一个程序将数组扁平化去并除其中重复部分数据,最终得到一个升序且不重复的数组自己的实现var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8,...转载 2019-03-10 13:34:54 · 168 阅读 · 0 评论 -
JS 原型与原型链
前言总结一下原型链正文1.普通对象与函数对象JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object 、Function 是 JS 自带的函数对象。下面举例说明:var o1 = {}; var o2 =new Object();var o3 = new f1();function f1(){}; var f2 = function(){}...转载 2019-03-14 19:20:06 · 162 阅读 · 0 评论 -
HTTP响应状态代码
前言总结一下http常用的一些知识。正文1.HTTP 响应状态代码HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成。响应分为五类:信息响应,成功响应,重定向,客户端错误和服务器错误。信息响应100 Continue这个临时响应表明,迄今为止的所有内容都是可行的,客户端应该继续请求,如果已经完成,则忽略它。101 Switching Protocol该代码是响应客户端...原创 2019-03-10 16:02:30 · 811 阅读 · 0 评论 -
前端面试题总结五
前言继续。。正文1.写 React / Vue 项目时为什么要在组件中写 key,其作用是什么vue和react都是采用diff算法来对比新旧虚拟节点,从而更新节点。在vue的diff函数中。可以先了解一下diff算法。在交叉对比的时候,当新节点跟旧节点头尾交叉对比没有结果的时候,会根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点(这里对应的是一个key => in...原创 2019-03-24 13:58:55 · 227 阅读 · 0 评论