JavaScript
文章平均质量分 58
丿刘先森
努力,奋斗!
展开
-
开发常用方法记录
1,获取数据类型 getType() { var obj = Array.prototype.shift.apply(arguments); var toString = Object.prototype.toString; var map = { "[object Boolean]": "boolean", "[object Number]": "number", "[object String]": "str原创 2022-03-14 22:07:41 · 1109 阅读 · 1 评论 -
开发常用正则验证表达式
// 合法urlexport function validateURL(textval) { const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1...原创 2020-04-21 17:47:59 · 1913 阅读 · 1 评论 -
阿里云OSS上传文件设置请求头
之前写过一篇发送文件消息的,原生input上传文件(聊天发送文件消息),那么这次的需求就是更改上传地址,使用阿里云OSS上传。那么,这次选择使用elementUI的upload插件,样式各位大哥根据自己的需求实现吧。要使用OSS,首先需要安装,引入,创建,这里就不详解了,推荐一遍文章:阿里oss前端上传使用。这位大哥是基于promise来创建OSS,也可以选择不使用Promise:data(){ return { ossConfig: { // ossConfig 的内原创 2021-02-05 21:19:50 · 7364 阅读 · 2 评论 -
http请求属性 Accept enctype Content-Type
enctype 是什么表单(<form>)用来收集用户提交的数据,发送到服务器。比如,用户提交用户名和密码等。而要将用户的数据传递到后台就需要 HTTP请求,表单提供四种编码方式向后台传递相应的数据,而编码格式由表单的 enctype 属性决定。enctype 属性决定了 HTTP 头信息的 Content-Type字段的值,默认情况下这个字段的值是 application/x-www-form-urlencoded。GET 方法如果表单使用GET方法发送数据,en...原创 2021-04-12 16:31:04 · 1486 阅读 · 0 评论 -
File、URL、Base64、Blob、ArrayBuffer格式转换,图片压缩
图片转base64/** * 图片转base64 */ convertImgToBase64(url, callback, outputFormat) { let canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image img.crossOrigin = 'Anonymous' img.onload =原创 2021-03-12 18:35:19 · 1481 阅读 · 0 评论 -
JavaScript Function中你可能不知道的知识点
函数是一段可以反复调用的代码块。函数还能接受输入的参数,不同的参数会返回不同的值。函数的声明function命令function print(s) { console.log(s);}函数表达式var print = function(s) { console.log(s);};Function 构造函数var add = new Function( 'x', 'y', 'return x + y');// 等同于function add(x,..原创 2021-03-12 17:53:15 · 351 阅读 · 0 评论 -
js中的事件冒泡,事件捕获,默认事件
js中的事件传递方式有两种: 冒泡 和 捕获。事件冒泡js中事件会以冒泡的形式由内到外的向上传递。由最内层点击元素向外扩散到最外层元素,激活外层注册的相应事件,这就是事件冒泡。事件冒泡是js语言中事件的传递过程,传递方式,我们会需要用到它来做一下事情,但有时它的存在也会影响我们的操作。使用:事件代理(事件委托)什么是事件代理:利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,使用父元素来代理多个子元素的事件。这样做可以减少DOM操作,减少事件的注册步骤,提升性能原创 2021-03-04 20:25:05 · 1693 阅读 · 3 评论 -
自定义右键菜单
主要用到 oncontextmenu 事件:oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。下面是自己写的小demo:// prevent 禁用浏览器默认的右键事件<div @contextmenu.prevent="rightClick"> <div class="rightList"> <div class="list_item" @click="rightOneClick">你瞅啥</div原创 2021-02-06 17:51:41 · 356 阅读 · 0 评论 -
原生input上传文件(聊天发送文件消息)
上传文件如果不是特殊的需求,推荐使用elementUI等UI框架自带的文件上传,方便快捷。elementUI上传文件这次的需求是这样的:点击图标发起文件发送操作,选择文件主要还是利用input[type="file"]的change事件,获取选择的文件内容发送图标的样式就不展示了,个人需求不同,样式不同,主要是图标的点击事件中执行input file的click事件。self.$refs.uploadFile.click();<!-- 图片/文件上传 multipl原创 2021-01-26 14:56:37 · 669 阅读 · 0 评论 -
节流函数、防抖函数实现及应用
项目中点击创建、编辑、删除等按钮都会发送http请求,网络卡顿的情况下点击按钮之后不能快速的响应,此时点击btn会重复发送请求,一定量造成卡顿延迟问题,对于此问题,有两种解决方案第一,设置全局变量,在发送请求后,将按钮禁用,在响应回来之前按钮一直处于禁用状态,响应回来之后取消禁用, 在后台管理类项目中是少不了表格的,表格数据加载有loading状态,设置按钮disable...原创 2019-04-29 17:50:46 · 2844 阅读 · 2 评论 -
Date相关日期格式转换
需要注意的一点:下面的方法之间是存在相互调用关系的。/** * * 获得当前时间 */ var getCurrentDate = function() { return new Date(); };/** * * 将给定时间转换为时间字符串形式,如: 2019-07-18 */ getNowDate(time) { var date = new Date(time) var seperator1 = '-' var year =原创 2020-09-15 23:51:37 · 5365 阅读 · 0 评论 -
getBoundingClientRect() 获取元素的大小及其相对于视口的位置
getBoundingClientRect方法返回元素的大小及其相对于视口的位置,该方法没有参数。返回值是一个对象(DOMRect对象)// 获取视窗的宽度var doc= win.document.documentElementconsole.log(doc.getBoundingClientRect()) // 获取位置集合上述输出内容,即getBoundingClientRect方法返回元素的大小及其相对于视口的位置集合:DOMRect {x: 0, y: 0, width:.原创 2020-09-14 22:51:29 · 932 阅读 · 0 评论 -
location.hash 原生js页面跳转/路由
使用vue开发项目非常方便,vue全家桶让你想实现什么功能都更加便捷,但是使用原生js,jquery开发,页面之间跳转怎么实现呢,下面说一下window.location.hash,概念性的东西大家看这篇文章,也比较全面,这里主要说下用法:当前在做的这个项目,页面跳转使用的是hash,基本原理非常简单,在主页面跳转按钮中分别加上一个属性,data,id等都可以,用来标识当前要跳转的页面,然...原创 2019-09-02 13:14:02 · 3133 阅读 · 0 评论 -
event对象的offsetX、clientX、pageX、screenX及 window.innerWidth、outerWidth使用详解
offsetoffsetX、offsetY为当前鼠标点击位置距离当前元素参考原点(左上角)的距离,而不同浏览器参考原点的位置不尽相同,FF及Chrome中参考原点为内容区域左上角,不包含元素边框offsetX 鼠标当前点击位置距离当前点击元素内容区域最左边(不包含边框)的距离 offsetY 鼠标当前点击位置距离当前点击元素内容区域最上边(不包含边框)的距离 点击不同位置,参考原点不同,则距离不同以下四个点可供理解offset的相对位置及尺寸client...原创 2020-05-12 13:59:20 · 1337 阅读 · 0 评论 -
字符串encodeURIComponent/decodeURIComponent编码方法
URL编码方法是属于 Global 全局对象的,encodeURI() 和 encodeURIComponent() 方法可以对URI(通用资源标示符)进行编码,以便发送给浏览器,有效的URI中不能包含某些字符,例如空格。而这两个URI编码方法就可以对URI进行编码,它们用特殊的UTF-8编码替换所有无效的字符,从而让浏览器能够接受和理解。 其中 encodeURI() 主要用于...原创 2019-12-11 19:59:28 · 1139 阅读 · 0 评论 -
JavaScript知识点
****JavaScript语言构成 一个完整的JavaScript实现应该由下列三个不同的部分组成: >>核心(ECMAScript) 主要包含这门语言的主要组成部分:语法、类型、语句、关键字、保留字、操作符、对象。 基本数据类型包括 Undefined、Null、Boolean、Number、String。按值访问 ......原创 2019-11-13 19:01:55 · 273 阅读 · 0 评论 -
js 中的 this 指向问题(作用域问题)
箭头函数:1、箭头函数是没有this的,this是继承来的2、箭头函数的this来源于声明的环境,就是说从声明环境中寻找this,如没有找到那就是window对象3、因为箭头函数没有this,而是从声明环境(向上)寻找,所以也就不存在arguments、super、new.target变量4、由于箭头函数没有自己的this,所以当然也就不能用call()、apply()、bind(...原创 2019-10-30 19:52:21 · 1135 阅读 · 2 评论 -
forEach()与each()方法的区别
forEach()为JavaScript(ES5)的方法,而each()方法是JQuery的方法,forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。注意:forEach() 对于空数组是不会执行回调函数的。forEach()的回调函数有两个参数,index,value,index为当前元素的索引值,value为当前元素。var arr = ["你好","我好"...原创 2019-01-07 20:52:16 · 8052 阅读 · 0 评论 -
window onload和$(document).ready()及DOMContentLoaded的区别(DOM加载完毕前后调用)
这两个函数的差别就在于调用的时机不同,一般情况一个页面响应加载的顺序是:域名解析-加载html-加载js和css-加载图片等其他信息。在日常开发中我们经常需要获取页面的元素进行操作,而在编写代码的时候为了代码易读性我们会将js代码放在一起引入页面中,这就导致js引擎编译代码时可能会出现一些错误,如方法、变量未定义等,这是因为当操作页面DOM元素的js代码执行时,页面中相应的DOM元素还没有渲染,所...原创 2019-01-08 20:22:45 · 5289 阅读 · 0 评论 -
浏览器对象详解(BOM)
在进行开发的时很多时候需要使用到浏览器对象,通过学习对浏览器对象有了一个大概了解,这里总结一下。window window对象充当全局作用域,同时也代表浏览器窗口。 属性:innerWidth 浏览器窗口的内部宽度 innerHeight 浏览器窗口的内部高度 outerWidth 浏览器窗口的...原创 2019-01-15 18:07:03 · 528 阅读 · 0 评论