JavaScript
一个前端小朋友
个人的一点看法,如有错误,请不吝指教
展开
-
前端上传文件到服务器端
今天公司要让上传文件到服务器,尽管网上有很多插件,而且各种UI组件库,像iview,eleUI也都替我们封装好了,根本不用我们操心。但是由于好奇心重,于是就想研究一下,经过一下午的网上查询,得出一点结论,分享一下。 原生form表单上传文件 直接上代码 <form enctype='multipart/form-data' action="http://192...原创 2018-02-06 17:43:54 · 30244 阅读 · 5 评论 -
js 对ip地址进行排序
这里用到一个技巧 padStart(a,b)方法,对字符串进行补全。两个参数,第一个是字符串的最终长度,第二个是用于补全的字符串。还有一个类似的padEnd方法,一个由前补全,一个由后补全。’'x'.padStart(8,'abc')"abcabcax"'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12""YYYY-09-12"例子var ip = ['192.165.2.3','192.164.2.3','192.165.52.3','10原创 2020-09-28 11:03:42 · 1257 阅读 · 0 评论 -
js 监听浏览器tab关闭,清除缓存数据。
通常,我们会在浏览器中缓存一些数据。保存用户的部分信息或者一些其他信息。当关闭tab的时候我们希望清除这些数据。解决:主要是两个方法,onunload,和 onbeforeunload但是直接关闭浏览器,该方法无法无用(客户端操作无法监听) var _beforeUnload_time = 0; var _gap_time = 0; window.onunload = function() { _gap_time = new Date().getTime() - _原创 2020-09-14 18:11:43 · 2184 阅读 · 0 评论 -
axios put请求错误Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported
前端使用的封装的 axios请求,后端java出现上面的问题是因为前后端数据格式不统一。json 分为两种类型;(1) json 对象类型,即前端定义的Content type 为 application/x-www-form-urlencoded等(2) json字符串类型,即前端定义的Content type 为 application/json打印一下putconsole.log...原创 2020-04-27 17:38:03 · 3030 阅读 · 1 评论 -
js 两种快排实现方式
"快速排序"的思想很简单,整个排序过程只需要三步:(1)在数据集之中,选择一个元素作为"基准"(pivot)。(2)所有小于"基准"的元素,都移到"基准"的左边;所有大于"基准"的元素,都移到"基准"的右边。(3)对"基准"左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。第一种借用阮一峰老师的文章,选择一个基准,以数组的中间值为例,创建两个子集,循环,小于...原创 2020-03-11 18:15:54 · 2266 阅读 · 0 评论 -
聊聊浏览器的多进程和多线程的事
我们要理解浏览器进程和线程之间的关系,首先要了解什么是进程?什么是线程?1、进程进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位。示例打开谷歌浏览器,随便打开几个网页,按下shift+esc键,界面将显示目前浏览器启动的几个进程,还有相应的进程内存占用空间、CPU核数、进程ID等等。在浏览器中新打开一个tab页,浏览器会开启一个新...原创 2020-03-06 18:37:07 · 1306 阅读 · 0 评论 -
js 事件循环执行顺序(setTimeout,async,promise多层嵌套)
我们知道JS是单线程脚步语言,设计为单线程是有好处的,如果为多线程,当两个人同时操作了同一个资源,这样会造成同步问题,不知以谁为准。同时,单线程也存在一些问题,比如:for(var i = 0;i<1000;i++){ console.log(1) }console.log(2)结果就是,2将会等待1全部输出完毕后在执行,浪费了大量的时间我们希望在等待的时间去做别的事,所以...原创 2020-03-05 13:07:32 · 4880 阅读 · 2 评论 -
js实现hash路由原理
简单的上下布局,点击左侧导航,中心内容跟对变化,主要技术是检测路由的hashchange事件<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...原创 2019-11-06 17:21:41 · 878 阅读 · 1 评论 -
一维数组元素分类转换成二维数组
数组元素按照某个key分类转换成二维数组 let test =[ {id:0,code:"4"}, {id:1,code:"1"}, {id:2,code:"1"}, {id:3,code:"2"}, {id:4,code:"2"}, {id:5,code:"3"}, {id:6,c...原创 2019-06-28 18:23:29 · 1141 阅读 · 0 评论 -
工厂模式,构造函数模式,原型模式,组合模式简单理解
作为编程人员一定要知道面向对象,javascript支持面向对象编程。今天我们来简单介绍一下创建对象的几种模式。我们知道创建对象常见的方式有两种:字面量方式和new 操作符方式字面量var people1 = {name:"小明"}new操作符var people2 = new Object()people2.name="小花"尽管这两种可以满足我们的基本要求,但是在创建大量...原创 2019-05-21 11:41:56 · 503 阅读 · 0 评论 -
json数据导出excel
//原始数据,数组,多条数据 var jsonData =[{ confirmed: false identifier: "" ip: null name1: "filesystem" name2: "Volume Utilization - mgnt_cntr_vol" output: "CHECK_NRPE STATE CR...原创 2019-02-28 12:58:18 · 1737 阅读 · 0 评论 -
vue中引入外部js
我们在做vue项目时,经常会需要引入js,常用的有以下几种。第一种import XX from “路径”Vue.use(XX);这里的js文件要导出用export default {Vue.proprtypes.aa=function(){}}第二种js文件没有用export default{}直接就是纯方法解决:可以在main.js中加入以下代码,其中...原创 2018-03-01 14:33:22 · 22984 阅读 · 8 评论 -
Promise函数
promise:ES6中新推出的promise函数,是一个构造函数,它实际上是对回调函数的一种封装,对异步编程的一种改进。 它的作用:改造Ajax依赖调用,让Ajax按顺序执行,使用链式结构代替了嵌套结构。Promise(ajax1).then(ajax2).catch()Ajax请求成功,执行resolve,否则执行reject 实例:function fn(msg){ //...原创 2018-03-01 14:36:50 · 706 阅读 · 0 评论 -
子节点修改父节点样式(原生js和jquery)
<div id="parent"> 父标签 <div id="children"> 子标签 </div></div>一、原生js 只要获取子节点对象,然后对其父节点的样式修改即可。 document.getElementById('children').parentNode.style.over...原创 2018-03-06 18:09:39 · 17444 阅读 · 0 评论 -
JS实现自动打字效果
<!DOCTYPE html><html><head> <meta charset='utf-8'> <title>自动打字</title></head><body><div id='auto'></div>原创 2018-03-26 10:21:36 · 1789 阅读 · 0 评论 -
数组去重(最少代码)
数组去重求很多方法,这里我们用最少的的代码来实现这个功能。第一种 var arr = [5,3,6,4,5,6,1,4]; var newarr =[…new Set(arr)]; console.log(newarr); es6的扩展运算符可实现数组去重。 第二种 &nbs...原创 2018-04-09 10:27:01 · 715 阅读 · 0 评论 -
js获取当前日期的前30天存入数组
var lastMonth = []; for(var i = 0;i&amp;lt;30;i++){ lastMonth.unshift(new Date(new Date() .setDate(new Date().getDate()-i)) .toLocaleString().substring(0,9)) ...原创 2018-04-10 14:57:12 · 5903 阅读 · 11 评论 -
js实现数组翻转和字符串翻转
数组var arr = [1,2,3,3,4]arr.reverse();var str= ‘12354’ str.split(“”).reverse().join(“”)最简单的方式翻转当然你也可以遍历数组for(var i = 0;i<arr.length;i++){ if(newArr.indexOf(arr[i]==-1)){ ...原创 2018-05-10 10:47:53 · 10223 阅读 · 0 评论 -
for in 在遍历数组时需要注意的问题
我们知道for in 是用来遍历可枚举属性的,它既可以遍历对象,也可以遍历数组。 遍历对象var obj = {a:1, b:2, c:3}; for (var prop in obj) { console.log(prop); }输出 a b c遍历数组 var arr=[11,22,33,44,55]; for(var i ...原创 2018-04-28 18:07:55 · 3898 阅读 · 0 评论 -
移动端touch事件监听
<ul> <h3 class="tit">资产信息</h3> <li> <span class="key">品牌</span> <span class="val">{{equipData.eq_st原创 2018-05-25 15:39:56 · 2015 阅读 · 0 评论 -
监听某个div的宽高是否发生变化(MutationObserver)
web api中有一个叫做MutationObserver的接口MutationObserver接口提供了监视对DOM树所做更改的能力。DOM 的任何变动,比如节点的增减、属性的变动、文本内容的变动,这个 API 都可以得到通知。用过vue 的nextTick的就会知道,这个方法就是用到了MutationObserver下面是一个示例 // Firefox和Chrome早期版本中带有前...原创 2018-10-16 18:34:25 · 21816 阅读 · 0 评论 -
Js实现百度搜索框提示功能(利用百度接口)
这个功能的实现主要使用了jsonp跨域访问, 然后通过回调函数来将搜索到的关联内容显示出来 。JSONP(JSONwith Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。回调函数:当一个函数作为另一个函数的参数时,那么这个函数就是回调函数。效果原创 2017-09-20 19:22:50 · 5942 阅读 · 3 评论