JavaScript
学习笔记
mrhaoxiaojun
这个作者很懒,什么都没留下…
展开
-
前端普通文件导出处理
// 这是一个接口请求,要求返回responseType是blob格式this.$api.xxx(parameters, 'blob').then(res => { tableExport(res, name)})// 导出流格式的处理export const tableExport = (res, fileName) => { const link = document.createElement('a') let blob = new Blob([res], { typ原创 2021-12-02 18:12:39 · 499 阅读 · 0 评论 -
解决Cannot read property ‘range‘ of null 错误
问题eslint做语法检查的时候 Cannot read property ‘range’ of null代码λ npm run eslintfix> dataloader@1.0.0 eslintfix E:\zyrf-git1.5\dataloaderui> eslint --fix --ext .js,.vue srcCannot read property 'range' of nullTypeError: Cannot read property 'range'原创 2021-01-22 17:48:34 · 2996 阅读 · 2 评论 -
navigator 与语言相关的属性在各大浏览器的差异,及获取浏览器语言的正解
问题描述各浏览器对 navigator 对象中几个与语言相关的属性(language、userLanguage、browserLanguage、 systemLanguage)的返回值存在很大的差异。问题分析首先查看一下 navigator 对象中的这几个与 language 相关的属性。navigator 对象包含有关浏览器的信息。没有应用于 navigator对象的公开标准,不过所有浏览器都支持该对象。但是其内部一些属性及其返回值在各浏览器并不统一。language:返回当前的浏览器语原创 2021-01-21 15:28:06 · 1381 阅读 · 0 评论 -
块级作用域中的变量提升?
由于 JavaScript 的变量提升存在着变量覆盖、变量污染等设计缺陷,所以 ES6 引入了块级作用域关键字来解决这些问题。不聊存储栈和变量环境和**词法环境(**不清楚的百度)只说不知道的let的变量提升let myname= 'a'{ console.log(myname) let myname= 'b'}【最终打印结果】:VM458:4 Uncaught ReferenceError: Cannot access ‘myname’ before initialization原创 2021-01-19 15:36:41 · 488 阅读 · 0 评论 -
html2canvas 截屏功能脱坑
html2canvas 1.0.0-alpha.11 https://html2canvas.hertzen.comCopyright © 2018 Niklas von Hertzen https://hertzen.comReleased under MIT Licensehtml2canvas将页面dom 元素画到 canvas 上,视觉上 达成截图的 效果。该脚本允许您直接...原创 2020-01-07 18:12:56 · 5404 阅读 · 0 评论 -
JS解决clearInterval()函数不生效
每次,执行play函数的时候,let ctime,导致ctime并不是之前 setInterval返回的值。你可以在clearInterval(ctime)前执行 console.log(ctime),将会打印出 undefined所以,一个方法,是将ctime的定义放在 play函数之外,这样每次执行便不会初始化ctime。另一个方法,保存在state中,即需要保证执行 ...转载 2019-03-18 15:35:10 · 4829 阅读 · 0 评论 -
jsonp 的原理与实现
jsonp是一种跨域通信的手段,它的原理其实很简单:首先是利用script标签的src属性来实现跨域。 通过将前端方法作为参数传递到服务器端,然后由服务器端注入参数之后再返回,实现服务器端向客户端通信。 由于使用script标签的src属性,因此只支持get方法 下面详细讲讲如何实现jsonp。实现流程 设定一个script标签callback定义了一个函数名,而远程服务端...转载 2018-08-20 17:00:23 · 265 阅读 · 0 评论 -
手把手带你走进MVVM
剖析Vue实现原理 - 如何实现双向绑定mvvm 本文能帮你做什么?1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定参考地址 (https://github.com/DMQ/mvvm)本文源码地址(https://github.com/mrhaoxiaojun/MVVM.git) 欢迎start特此申明:小编我怀着一颗诚挚的内心,通...原创 2018-07-16 14:03:25 · 413 阅读 · 0 评论 -
js对于鼠标滚轮事件的监听
实现:通过js对鼠标滚轮的事件进行监听。描述:首先,不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件。 具体实现:1. 需要添加事件监听,代码如下:兼容firefox采...原创 2018-06-21 17:29:38 · 5919 阅读 · 0 评论 -
localStorage使用
export default { setStorageSync: function(KEY, DATA) { try { DATA = JSON.stringify(DATA); } catch (e) { DATA = DATA; } window.localStorage[K...原创 2018-05-15 14:00:14 · 339 阅读 · 0 评论 -
ios中设置readonly还会有光标?
在input上添加 unselectable=”on” onfocus=”this.blur()” 即可原创 2018-05-15 13:55:38 · 850 阅读 · 0 评论 -
文件拖拽上传实例
dragFile() { var self = this; this.$nextTick(function() { var dropzone = document.getElementById('dropzone'); dropzone.ondragover = function(ev) { //阻止浏览器默认打开文件的操作...原创 2018-04-16 15:45:51 · 1200 阅读 · 0 评论 -
使用AJAX实现文件拖拽上传功能详解
原文概述对于微云、百度云等网盘提供的文件存储服务而言,文件上传是一个重要功能。文件上传的方式主要有两种:二进制数据上传、表单上传。本文会详细解析表单上传的协议规范,前端上传文件的两种方式:对话框选择方式、拖拽选择方式,服务端接收上传的文件以及文件上传功能的技巧等。表单上传协议详解RFC1867(https://www.ietf.org/rfc/rfc1867.txt) 规范了表单上传的协议格式。下...转载 2018-04-16 15:39:43 · 460 阅读 · 0 评论 -
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
原文我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢?原理分析提取操作:复制=>粘贴=>上传在这个操作过程中,我们需要做的就是:监听粘贴事件=>获取剪贴板里的内容=>发请求上传为方便理解下文,需要先明白几点:我们只能上传网页图(在网页上右键图片,然后复制)和截图(截图工具截的...转载 2018-04-16 15:10:10 · 1968 阅读 · 1 评论 -
Promise的队列与setTimeout的队列有何关联?
setTimeout(function(){console.log(4)},0);new Promise(function(resolve){ console.log(1) for( var i=0 ; i<10000 ; i++ ){ i==9999 && resolve() } console.log(2)}).then...原创 2018-03-06 16:12:02 · 233 阅读 · 1 评论 -
理解 JavaScript 的 async/await
随着 Node 7 的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await。我第一次看到这组关键字并不是在 JavaScript 语言里,而是在 c# 5.0 的语法中。C# 的 async/await 需要在 .NET Framework 4.5 以上的版本中使用,因此我还很悲伤了一阵——为了要兼容 XP 系统,我们开发的软件不能使用高于 4.0 版本的 .NET Fr转载 2018-01-31 10:48:52 · 193 阅读 · 0 评论 -
库和框架的区别
库:库是更多是一个封装好的特定的集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权在使用者手中,在库中查询需要的功能在自己的应用中使用,我们可以从封装的角度理解库;框架:框架顾名思义就是一套架构,会基于自身的特点向用户提供一套相当于叫完整的解决方案,而且控制权的在框架本身,使用者要找框架所规定的某种规范进行开发。框架和库的比较可以想像为: 假如我们要买原创 2018-01-23 18:28:44 · 288 阅读 · 0 评论 -
javascript中apply、call和bind的区别
在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。 在说区别之前还是先总结一下三者的相似之处: 1、都是用来改变函数的this对象的指向的。 2、第一个参数都是this要指向的对象。 3、都可以利用后续参数传参。 那么他们的区别在哪里的,先看一个例子。 var xw = { name : "小王原创 2018-01-22 17:41:28 · 184 阅读 · 0 评论 -
什么是闭包,如何使用它,为什么要使用它?
还是上面的题目,做个变形。var x = 0;var foo = { x:1, bar:function () { console.log(this.x); var that = this; return function () { console.log(this.x) co转载 2018-01-10 17:46:36 · 4435 阅读 · 1 评论 -
JavaScript 中 this 是如何工作的 ?
var x = 0;var foo = { x:1, bar:{ x:2, baz: function () { console.log(this.x) } }}var a = foo.bar.bazfoo.bar.baz() // 2a() //0this 永远指向函数运行时所在的对象,而不是函数创建时所在原创 2018-01-10 17:45:15 · 973 阅读 · 0 评论 -
forEach、for、$.each()跳出循环比较
说起跳出循环,第一时间想起的是 break \ continue,这是经典的for循环。 1、for 循环 体会 break 与 continue 的不同。 continue 结束本次循环,继续执行循环体; break 结束所有循环。在本例中当“2”满足条件后,继续进行下一轮判断,当’3‘满足条件后,break 结束所有循环。 2原创 2017-11-30 17:43:49 · 10152 阅读 · 1 评论 -
ajaxSetup,ajaxComplete
var ajaxCallArr = [];$(document).ajaxComplete(function(event, xhr,settings ) {if( xhr.getResponseHeader('loginUrl') ){window.location.href = xhr.getResponseHeader('loginUrl');}});原创 2017-09-01 14:52:15 · 1227 阅读 · 0 评论 -
判断IE各版本浏览器的最直接有效的方式
首先,判断是否是IE浏览器,有如下两种方式:第一种,通过userAgent信息来判断[javascript] view plain copy print?if(navigator.userAgent.indexOf("MSIE")>0){ //是IE浏览器 } 第二种:通过ActiveXObject这个IE浏览转载 2017-08-15 11:12:36 · 489 阅读 · 0 评论 -
运用JS设置cookie、读取cookie、删除cookie
JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,在B页面的时候,同样需要使用JS来引用temp的变量值,对于JS中的全局变量或者静态变量的生命周期是有限转载 2017-07-25 11:00:33 · 225 阅读 · 0 评论 -
数组,父子数组删除相同项
删除,两个数组相同项,返回其余组成的数组var parent = [1,2,3,4,5],children = [1,2,5];children.forEach(function(e, i) { fn(e)})function fn (item){ parent.forEach(function(ele, index) { if (item == ele) {原创 2017-07-04 14:49:14 · 289 阅读 · 0 评论 -
一二维数组转换
var newAry = [],ary =[1, 2, 3, 4, 5, 6, 7, 8],i=0,len = ary.length / 2;for (; i < len; i++){ newAry.push(ary.splice(0, 2))}; console.log(newAry)[[1,2],[3,4],[5,6],[7,8]].join(",").split(",")原创 2017-06-27 10:25:27 · 404 阅读 · 0 评论 -
js中将数字格式的日期化为yyyy-MM-dd样式
1、在js中先加载一下代码,不需要做任何修改Date.prototype.format = function (format) { var o = { "M+": this.getMonth() + 1, //month "d+": this.getDate(), //day "h+": this.getHours(), //hour原创 2017-05-27 11:07:13 · 1366 阅读 · 0 评论 -
JavaScript中的可枚举属性与不可枚举属性
在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。一、怎么判断属性是否可枚举 js中基本包装类型的原型属性是不可枚举的,如Object, Array, Number等,如果你写出这样的代码遍历其中的属性:1234转载 2017-04-27 11:40:52 · 2224 阅读 · 0 评论 -
js精度问题解决方案
Math.formatFloat = function(f, digit) { var m = Math.pow(10, digit); return parseInt(f * m, 10) / m; } var numA = 0.814; var numB = 0.315; alert(Math.formatFloat(numA/numB, 2));原创 2017-04-20 10:16:19 · 657 阅读 · 0 评论 -
js/javascript代码注释规范与示例
注释在代码编写过程中的重要性,写代码超过半年的就能深深的体会到。没有注释的代码都不是好代码。为了别人学习,同时为了自己以后对代码进行‘升级’,看看js/JavaScript代码注释规范与示例。来自:http://www.56.com/style/-doc-/v1/tpl/js_dev_spec/spec-comment.html 文件注释 文件注释位于文件的最前面,应包括文件的以下转载 2017-03-01 15:19:07 · 1628 阅读 · 0 评论 -
根据日期筛选
日期筛选demo 起始查询时间: 结束查询时间: 查询 时间 性别 暂住地 2原创 2016-10-18 21:26:37 · 1564 阅读 · 0 评论 -
javascript函数节流 keyup
Document var n = 0; function resizehandler() { console.log(++n); } function throttle(method, context, delay) { clearTimeout(method.tId); met原创 2016-10-18 10:13:52 · 869 阅读 · 0 评论 -
Javascript函数节流
最近在做网页的时候有个需求,就是浏览器窗口改变的时候需要改一些页面元素大小,于是乎很自然的想到了window的resize事件,于是乎我是这么写的DOCTYPE html>html>head> title>Throttletitle>head>body> script type="text/javascript"> n=0; fu转载 2016-10-18 10:11:19 · 246 阅读 · 0 评论 -
事件捕获,点击其他body的其他区域,对body特定区域进行操作且排除此区域点击触发
$("body").on("click", function(e) { e = e || window.event; // if(! 点击触发动作的区域的父级元素 && 点击区域在显示的状态下}{ // ==>即:点击其他body的其他区域 并且 在操作区域显示情况下 才进入判断 // ==>该区域隐藏 // } if原创 2016-09-29 16:05:17 · 2183 阅读 · 0 评论 -
非兼容ie,上传图片demo
Document .upload { width: 114px; height: 143px; margin-right: 20px; } .upload .upload-body {转载 2016-08-17 17:57:54 · 232 阅读 · 0 评论 -
ajaxfileupload
ajaxfileupload .upload { width: 114px; height: 143px; margin-right: 20px; } .upload .upload-body {原创 2016-08-17 16:34:23 · 458 阅读 · 0 评论 -
页面元素用JS动态添加的有效事件绑定方式(on)
常规事件绑定方式,直接监听匹配元素事件"test1"> type="button" class="btn" value="按钮1"/> type="button" class="btn" value="按钮1"/> type="button" class="btn" value="按钮1"/> type="button" class="add" value=转载 2016-06-12 14:50:43 · 2299 阅读 · 0 评论 -
ajax是否能够抓取302状态码
服务器端的响应是302 Found,在ajax的回调函数中能够获取这个状态码吗?能够从Response Headers中得到Location的值进行重定向吗?让我们来一起动手写写代码看看实际情况吧。在ajax请求中,如果服务器端的响应是302 Found,在ajax的回调函数中能够获取这个状态码吗?能够从Response Headers中得到Location的值进行重定向吗?让我们转载 2016-06-02 14:39:01 · 8830 阅读 · 0 评论 -
千分位分隔符的demo
Document//当用户失去焦点的时候触发验证事件$(".test").blur(function(){//1、获取表单内容var text = $(this).val();//2、进行前端表单验证(如果有验证可以忽略这步)//根据需求可以不再这里验证,假如我们验证了,那么需要前端验证成功了再去调用下面的方法//3、当前端验证ok触原创 2016-06-01 16:13:22 · 1819 阅读 · 0 评论 -
pc直接粘贴到div图片
Document function ReSizePic(ThisPic){ var RePicWidth = 200; //这里修改为您想显示的宽度值 //============以下代码请勿修改================================== var TrueWidth = ThisPic.width; //图片实转载 2016-05-19 11:42:29 · 596 阅读 · 0 评论