前端技术
关注
分享
扫一扫
kinjaze
一个快要秃头的程序员
展开
-
js 计算两个经纬度之间的距离
Rad(d) { return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。 }, //lat 纬度//lng 经度 GetDistance(lat1, lng1, lat2, lng2) { var radLat1 = this.Rad(lat1); var radLat2 = this.Rad(lat2); ...原创 2021-02-20 15:47:45 · 1909 阅读 · 0 评论 -
时间格式化工具函数
/* * str:String 需要格式化的格式 * date:Number 输入的毫秒数 * return :String 返回格式化后的数据 * */ formatTime: (str, date) => { let time = new Date(date); let obj = { 'M+': time.getMonth() + 1, //月份 'd+':...原创 2020-12-16 17:53:06 · 171 阅读 · 0 评论 -
原生JavaScript封装cookie工具类
export default{ /* 设置cookie key:String 键名 val:String 值 expires:string 到期时间 单位秒 */ setCookie(key,val,expires){ let nowTime = new Date().getTime(); let endTime = new Date(nowTime + expires*1000);原创 2020-12-01 15:04:12 · 170 阅读 · 0 评论 -
vue实现非父子组件之间的通信
首先创建一个中间通信的文件VueEvent.js文件内容// 接收数据的中间文件import Vue from 'vue'var VueEvent = new Vue()export default VueEvent在根组件引用两个子组件<template> <div id="app"> <v-home></v-home> <br> <br> <br>原创 2020-11-19 11:22:14 · 248 阅读 · 0 评论 -
关于promise的一些小笔记
promise的作用将异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。promise的状态待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。已兑现（fulfilled）: 意味着操作成功完成。已拒绝（rejected）: 意味着操作失败。promise的链式调用可以用 promise.then()，promise.c转载 2020-11-09 20:50:43 · 491 阅读 · 0 评论 -
关于js继承和原型链的分析
构造函数,原型和实例的关系每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针.JS对象的查找属性规则:如果试图引用对象(实例instance)的某个属性,会首先在对象内部寻找该属性,直至找不到,然后才在该对象的原型(instance.prototype)里去找这个属性.如果让原型对象指向另一个类型的实例即: constructor1.prototype = inst原创 2020-11-08 21:24:38 · 102 阅读 · 0 评论 -
手写call，apply，bind功能
call、apply的实现原理 function fn(x, y) { console.log('我想喝手磨咖啡' ); console.log(this); console.log(x + y); } var obj={ name :'andy' }; //1、将函数设置为对象的属性 obj.fn = fn //2、原创 2020-10-27 15:34:25 · 96 阅读 · 0 评论 -
宏任务和微任务讲解（附带例题）
宏任务分类：setTimeout、setInterval、requestAnimationFrame特点：宏任务所处的队列即为宏任务队列第一个宏任务队列只有一个任务，执行主线程中的js代码宏任务队列可以有多个当宏任务队列中的任务执行完毕之后，会查看是否有微任务队列，有则执行微任务 队列中的任务，没有则查看是否有宏任务队列微任务分类：Promise的回调函数、 process.nextTick特点：微任务所处的队列即为微任务队列只有一个微任务队列在上一个宏任务队列执行完毕之后如果原创 2020-10-21 20:34:30 · 1350 阅读 · 2 评论 -
JavaScript闭包的详解（附例题讲解）
什么是闭包?密闭的容器，类似于set、map容器，用于存储数据闭包是一个对象，存放数据的格式为： key ：value形成的条件函数的嵌套内部函数调用外部函数的局部变量闭包的优点延长外部函数局部变量的的声明周期闭包的缺点容易造成内存泄漏注意点合理使用闭包使用完闭包及时清除（销毁）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-10-21 10:53:39 · 434 阅读 · 0 评论 -
函数节流和防抖的实现
函数节流减少被调用的次数，让其在规定的时间内只调用一次<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>节流函数的实现</title> <style>原创 2020-10-20 22:00:50 · 112 阅读 · 0 评论 -
JavaScript变量提升的综合性考法（很绕）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script&原创 2020-10-20 21:10:28 · 110 阅读 · 0 评论 -
移动端适配rem的实现
话不多说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>rem适配问题</title> <style> *{原创 2020-10-20 19:59:27 · 186 阅读 · 0 评论 -
使用flex（新老本版方法解析）让盒子水平垂直居中
话不多说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新老版本</title> <style> .box,原创 2020-10-20 11:34:17 · 427 阅读 · 0 评论 -
实例分析js中的隐式转换
隐式转换隐式转换的规则转换为String类型：+ （字符串连接符）转换为Number类型： ++/–（自增自减）+、-、*、/、%（算术运算符）>、 < 、>= 、<=、 == 、!=、 === 、!=== (关系运算符)转换为boolean类型：！（逻辑非运算符）隐式转换例子字符串连接符与算术运算符隐式转换规则混淆 console.log(1+"true");//1true 分析：Number类型的数据与String类的数据用+原创 2020-10-07 20:59:29 · 199 阅读 · 0 评论 -
JavaScript中的reduce数组方法详解
语法arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])参数callback执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数： 1、accumulator：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。 2、currentValue：数组中正在处理的元素。 3、index （可选）原创 2020-10-06 16:53:41 · 183 阅读 · 0 评论 -
通过正则表达式去除字符串中多余的空格
话不多说直接上源码function reverseStr (str) { return str.match(/[^\s]+/g).join(' ');}console.log(reverseStr("this is my way"))//this is my way实现的思路通过正则表达式捕获所有的非空的数据存到数组中，然后通过join方法将所有的数组元素以空格连接即可取除多余的空格。match中的正则的意思是，出现一次或多次的任意一个非空格数据全局匹配match的基本使用可原创 2020-10-05 20:18:06 · 4562 阅读 · 2 评论 -
JavaScript中String类的replace方法详细解析
语法格式str.replace(regexp|substr, newSubStr|function)参数regexp (pattern) ：一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。substr (pattern)： 一个将被 newSubStr 替换的字符串。其被视为一整个字符串，而不是一个正则表达式。仅第一个匹配项会被替换。newSubStr (replacement)：用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊原创 2020-09-30 20:42:28 · 1450 阅读 · 0 评论 -
vue 为不同的页面动态设置背景图片
可以通过为body添加一个样式在组件被加载的时候添加这个样式，被销毁时移除这个样式即可。举一个栗子，代码如下<style >*{ margin:0; padding:0;}.loginBgc{ background: url("../image/login.jpg") no-repeat center fixed; width:100%; height:100%; background-size:cover;}</sty原创 2020-09-11 08:51:12 · 2976 阅读 · 1 评论 -
浅谈js中节点的浅拷贝和深拷贝
浅拷贝node.cloneNode();括号内为空或者false时为浅拷贝效果：只复制标签不复制标签的内容深拷贝node.cloneNode();括号内true时为深拷贝效果：复制标签和标签的内容代码对比和效果截图<body> <ul> <li>1</li> <li>2</li> </ul> <script&g原创 2020-07-07 22:44:55 · 343 阅读 · 0 评论 -
实例演示 js中的数组方法
检测是否为数组 var a = [] var b = 123 // 第一种方法 console.log(a instanceof Array); console.log(b instanceof Array); // 第二种方法 console.log(Array.isArray(a)原创 2020-07-07 11:46:37 · 1186 阅读 · 0 评论