JavaScript
易-水寒
这个作者很懒,什么都没留下…
展开
-
JS原型链的理解
java作为面向对象的一门后台开发语言,有类的概念,有继承、封装、多态。但是js是基于对象,没有类,包括es6的class本质上还是对象,和java中的class并不相同。但是想一下在实际开发经常用到toString这些方法,为什么可以直接使用而不用每次都去定义,这一切都要归功于原型链构造函数构造函数其实就是一个普通函数,但是在命名上习惯采用首字母大写的方式,其次调用的时候需要使用new关...原创 2019-10-17 00:39:01 · 372 阅读 · 1 评论 -
JS经典面试题-下面代码输出什么
for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1);}for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1);}结果 3 3 3and0 1 2解析:由于JavaScript中的事件执...原创 2019-08-28 18:57:29 · 2667 阅读 · 0 评论 -
前端跨域之PostMessage详解
window.postMessage()方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数Document.domain设置为相同的值) 时,这两个脚本才能相互通信。otherWindow.postMessage(message, targetOrigin,...原创 2019-09-05 18:51:37 · 3353 阅读 · 1 评论 -
前端跨域之JSONP详解
为什么会产生跨域首先,跨域是针对客户端而言的,服务端是不存在跨域安全限制的。由于浏览器同源策略(同一协议,同一域名,同一端口号)的限制,非同源下的请求,都会产生跨域问题。JSONP处理跨域的一种解决方案,那jsonp是如何突破同源策略限制实现跨域的呢1.jsonp原理在平时的开发工作中,不管是script标签的src还是img标签的src,或者说link标签的href都可以...原创 2019-09-07 19:21:04 · 1120 阅读 · 0 评论 -
DOM事件流
DOM事件流所描述的就是从页面中接受事件的顺序,有三个阶段事件捕获阶段(Capture Phase)事件的第一个阶段是捕获阶段。事件从文档的根节点出发,随着 DOM 树的结构向事件的目标节点流去。途中经过各个层次的 DOM 节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。目标阶段(Target P...原创 2019-09-17 15:06:22 · 625 阅读 · 0 评论 -
一行JS实现时间戳转日期格式
function time(time = +new Date()) { var date = new Date(time + 8 * 3600 * 1000); // 增加8小时 return date.toJSON().substr(0, 19).replace('T', ' ');}time(); // "2019-09-17 17:38:26"function g...原创 2019-09-17 18:29:54 · 709 阅读 · 0 评论 -
前端跨域之CORS详解
CORS:跨源资源分享Cross-Origin Resource Sharing。它是W3C标准,是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没...原创 2019-09-19 11:17:27 · 6448 阅读 · 0 评论 -
如何实现一个完整的深拷贝
浅拷贝和深拷贝浅拷贝:创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址 ,所以如果其中一个对象改变了这个地址,就会影响到另一个对象。深拷贝:将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象实现1.第三方库(0分)Lodash,...原创 2019-09-29 15:39:10 · 1626 阅读 · 2 评论 -
JS闭包与内存泄露
链式作用域:子对象会一级级地向上寻找所有父对象的变量。所以,父对象的所有变量对子对象都是可见的,反之则不成立。var n=999;function f1(){ alert(n);}f1(); // 999function f1(){ var n=999;}alert(n); // error闭包:在实际开发过程中,由于种种原因是需要能够访问其他函数内的局部...原创 2019-09-30 17:20:21 · 1684 阅读 · 2 评论 -
JS中this、apply、call、bind
this指向记住一句:this永远指向在执行时最后调用它的对象,举几个栗子了解一下栗子1function a(){ var user = "CXK"; console.log(this.user); //undefined console.log(this); //Window}a();最后调用a()执行的地方前面没有调用对象,那就是默认全局对象win...原创 2019-10-09 11:06:22 · 233 阅读 · 0 评论 -
JS常用工具函数-获取指定范围内的日期
export function getDateRange (date) { let startDate = new Date() let endDate = new Date() endDate.setDate(startDate.getDate() + date) let dataArr = [] let weeks = ['周日', '周一', '周二', '周三', '...原创 2018-12-08 15:56:45 · 1404 阅读 · 0 评论 -
JS常用工具函数-倒计时
倒计时是业务中常见需求,写一下固定时间倒计时和指定结束时间倒计时<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>倒计时<...原创 2018-08-26 21:32:26 · 1587 阅读 · 0 评论 -
JS常用工具函数-节流和防抖
节流和防抖是属于面试和日常开发过程中常见的问题函数防抖(debounce)在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。用户在不断输入值时,用防抖来节约请求资源。场景:监听input的每一次onkeyup事件请求,调用接口做模糊匹配。在频繁的输入中,如果每次都去调用接口,不仅会造成资源的浪费,而且在实际场景中,用户输入完成后再去请求。export const ...原创 2018-08-29 15:58:57 · 1120 阅读 · 0 评论 -
JS常用工具函数-获取URL参数
getSearch(key) { let {search} = location; if (!search) return null; let searchArray = search.replace("?", "").split("&"); let searchInfo = {}; let info; searchArray.forE...原创 2018-06-27 14:07:37 · 575 阅读 · 0 评论 -
JS常用工具函数-截取文件路径中的文件名(兼容IE)
function getFileName(path) { var pos1 = path.lastIndexOf('/'); var pos2 = path.lastIndexOf('\\'); var pos = Math.max(pos1, pos2); if (pos < 0) { return path; } ...原创 2018-06-27 10:33:03 · 605 阅读 · 0 评论 -
JS常用工具函数-input输入过程中校验只能输入数字或小数
文本框的正则校验大部分是在输入完成后进行的 但有时候需求是在输入过程中就去校验 不符合规则禁止输入function validateInput(obj){ obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"." obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字而...原创 2018-06-26 19:43:40 · 2899 阅读 · 0 评论 -
localStorage、sessionStorage、Cookie、ApplicationCache的区别及用法
Cookiecookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制,而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名,当浏览器再次访问这个域名时,便使这个cookie可用。因此,cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用...原创 2018-06-27 13:28:43 · 2069 阅读 · 0 评论 -
JS常用工具函数-复制功能(不限于文本框且有选中操作)
好的插件能够在效率和兼容性上为开发提供很大帮助,但是在实际项目中还是需要根据需求来确定是否使用“复制”这个功能属于项目中常见需求,很多人包括我一开始都会选择使用clipboard这个插件,针对不同前端框架又衍生了新的升级插件,比如vue-clipboard,最近项目中需要实现这个功能,总感觉为此引入一个插件不值得,虽然没多大,所以去看了下源码,发现核心代码其实很简单,更多的是做了各种平台框架下...原创 2018-06-27 15:35:06 · 933 阅读 · 0 评论 -
JS常用工具函数-中文按拼音排序
汉字转拼音/*---description: Pinyin, to get chinese pinyin from chinese.provides: [Pinyin]...*///(function( window, undefined ){// var Pinyin = new Class({var pinyin = (function() { var Piny...原创 2018-07-07 15:01:13 · 29729 阅读 · 0 评论 -
彻底弄懂JavaScript 执行机制
很多人在面试的时候都会碰到这么一道面试题:给一段代码,写出执行结果和顺序。其中侧重的知识点可能也不尽相同。写这篇文章,主要是把其中可能涉及到的知识点都简单说一下,自己也好好梳理一下。如果文章有说的不对的地方,尽管diss。浏览器内核分为渲染引擎和JS引擎,不过由于JS引擎越来越独立,内核就特指渲染引擎了。常见浏览器内核:IE-Trident引擎、Firefox-gecko引擎、Chrom...原创 2018-09-27 16:57:11 · 1654 阅读 · 0 评论 -
canvas合成海报图
根据接口返回的参数生成一个带有相关链接的二维码 然后和接口返回的背景图片列表n 合成n张海报图并可以下载到桌面所需要的参数和图片列表都是父组件传过来的 使用了之前写过的alert弹窗<template> <v-alert hide-cont :min-width="imageList.length*canvasWidth" :width="...原创 2018-09-17 20:17:28 · 2260 阅读 · 0 评论 -
JS实现排行动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C...原创 2018-06-29 12:58:05 · 2068 阅读 · 0 评论 -
完美解决移动端video视频层级问题
H5页面视频播放的问题相信曾经让很多同学崩溃,video标签的层级问题始终无法得到完美的解决方案。这次的需求是这样的:在浏览器中扫码打开一个H5页面,要将一个视频当成背景图片来播放(gif太大,所以不用)通过给video标签设置postion z-index等属性,明显是不可行的。方案1:<video id="video-ios" src="./ceshi.mp4" web...原创 2019-06-14 15:40:29 · 33573 阅读 · 4 评论 -
JS常用工具函数-限制文件选择类型和大小
<input type="file" onchange="checkFile(this)">function checkFile(target) { var isIE = /msie/i.test(navigator.userAgent) && !window.opera; var fileSize = 0; var filetypes =[".jp...原创 2018-08-29 16:17:12 · 1180 阅读 · 0 评论