- 博客(38)
- 收藏
- 关注
RSS订阅原创 reduce() 方法
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 可以作为一个高阶函数，用于函数的 compose。注意: reduce() 对于空数组是不会执行回调函数的。实用案例let arr = [1,2,11,22];一、求数组之和let result = arr.reduce((prev, cur) => { return prev + cur}, 0)console.log(result)由于传入了初始值0
2021-04-06 15:08:23
186
原创 简单实现一个进度条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单实现进度条</title> <style> #hd {
2021-01-05 16:05:52
192
1
原创 常用的javaScript数据处理方法
const students = [ { name: 'Alice', score: 100 }, { name: 'Bob', score: 90 }, { name: 'Trunp', score: 80 }, { name: 'Biden', score: 70 }, { name: 'Joe', score: 60 }, { name: 'Sunshine', score: 50 }, { name: 'Elon', score: 40 },.
2020-12-10 14:49:17
282
原创 el-input 实现模糊查询
<el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect" > <el-button>搜索</el-button></el-auto
2020-10-09 16:02:53
2890
原创 Vue中下载 execl 表格
在项目下载 execl 表格的功能实现逻辑：前端请求后端接口，后端返回 execl 文件流，前端对文件流进行下载操作；前端封装请求一定要设置responseType:‘blob’；封装请求：export function getDownloadTable(data){ return { url:'请求接口', method:'POST'， responseType:'blob', params:data }}组件中请求接口：methods:{ // 点击下载表格事件
2020-09-28 16:36:36
437
转载 递归
递归函数是在一个函数通过名字调用自身的情况下构成的例如：function factorial(num){ if (num <= 1){ return 1; } else { return num * factorial(num-1); } }这是一个经典的递归阶乘函数。虽然这个函数表面看来没什么问题，但下面的代码却可能导致它出错。var anotherFactorial = factorial; factorial = null; alert(anotherFact
2020-08-21 15:48:58
94
原创 构造函数中 new 做了什么操作
(1) 创建一个新对象；(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；(3) 执行构造函数中的代码（为这个新对象添加属性）；(4) 返回新对象。
2020-08-20 15:54:41
237
原创 vue路由拦截
通常在项目中，我们需要用户登录才能使用户正常访问vue 中的beforeEach 对路由做拦截。如未登录跳转登陆页面，登录成功的正常访问const router = new Router({}) //正常配置路径router.beforeEach((to, from, next) => { // 通过 js-cookie 设置、保存、删除 cookie // 判断是否登陆 let token = Cookies.get('token'); var nowTime = new
2020-08-13 15:07:40
114
原创 mac上使用svn
打开appStore 搜索 Snailsvn下载免费应用安装完成之后正常使用，创建版本库、输入地址，拉取代码、更新代码、查看日志等常规操作
2020-08-13 09:49:23
404
原创 git使用教程
查看当前电脑是否安装git 打开cmd 或者终端 输入 git 即可没有请下载安装 git配置 git 基本操作git 使用相关指令git init本地初始化 创建暂存区，会生成有后缀名为 .git 的隐藏文件（建议不要修改）git add 文件名工作区==>暂存区 指定文件夹git add *工作区==>暂存区 所有文件git commit -m ‘这次上传的描述’上传文件时的描述git status查看工作区的状态，是否有未上传状态git checko
2020-07-20 21:39:44
108
原创 Vue上传文件到 oss
VUE项目中遇到将文件上传到阿里 oss中1.安装 ali-ossnpn install ali-oss --save2.在utils 文件下创建 client.js//Client.js const OSS = require('ali-oss');export default function Client(data) { //后台返回数据 return new OSS({ region: data.region, accessKeyId:
2020-06-19 14:27:09
1412
1
转载 记录一次vue-cli3踩坑
解决vue-cli3不停请求 /sockjs-node/info?t= 问题如果你的项目没有用到 sockjs，那么就找到报错的地方，将其注释掉即可。路径在/node_modules/sockjs-client/dist/sockjs.js，第1606行： // try { // self.xhr.send(payload); // } catch (e) { // self.emit('finish', 0, ''); // self._cleanup(false);
2020-05-21 15:10:20
345
原创 调起微信支付
在微信内置浏览器中调起微信支付整体结构：第一个页面（首页）为活动简介，点击开通按钮跳转到第二个页面（业务逻辑 + 支付按钮），调起微信支付功能，用户支付，判断当前用户是否支付成功||失败||取消支付，做相关业务逻辑<!-- href跳转的链接微信授权的结算页面 --> <!-- redirect_uri:微信授权的结算页面(需要对网址进行url转码) --><!-- 转码网址（网上搜）http://tool.chinaz.com/tools/urlencode.asp
2020-05-21 11:22:28
666
原创 前端实现上传图片
<div class="photo"> <div class="photo_img"> <img src="./images/update.png" alt="" id="sitting"> </div> <input type="file" name="file" id="Image"></div>$('#Image').on('change', function (e) {
2020-05-21 11:02:36
993
原创 简单明了的自适应布局 rem
rem 布局阿里提供了一套自适应布局的方案，很方便amfe-flexible下载安装 amfe-flexible引入js<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><scri...
2020-05-07 10:08:41
168
原创 闭包
1.事件防抖应用场景在i nput 框，每次输入文字需向后台请求结果，用 change监听， 会大量向后台请求结果，导致页面卡顿解决function antiShake(fn,wait){ let timeOut = null; return ()=>{ if(timeOut) clearTimeOut(timeOut); timeOut = setTimeOut(fn,...
2020-04-06 19:24:24
102
原创 Axios 响应拦截
Axios 响应拦截 methods: { sendAjax() { // 添加请求拦截器 // 简单做配置 this.$axios.interceptors.request.use(config => { // 请求之前做的内...
2019-10-12 11:34:41
351
原创 js 数组去重
js 数组去重llet arr = [1,11,2,55,11,246,22,2,22,556];方法1：采用reduce+indexOf的双层遍历实现，相当于双层for遍历 arr.reduce(function(result,item){ if(result.indexOf(item)===-1){ result.push(item) } return re...
2019-10-08 11:49:01
76
原创 懒加载和预加载
懒加载和预加载懒加载图片进入可视区域之后加载图片资源对于电商等图片很多，页面很长的业务场景适用减少无效资源的加载并发加载的资源过多会阻塞 js 的加载，影响网站的正常使用相关代码<div class='image-list'> <img src='' class='image-item' lazyload='true' data-original='真实...
2019-08-27 16:30:49
111
原创 ios键盘唤起，键盘收起以后页面不归位
ios键盘唤起，键盘收起以后页面不归位问题描述输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑出现原因分析固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件解决方法在失去焦点时采用当前方法:function blur(){ let u = nav...
2019-08-09 11:38:47
637
原创 js 保留小数点后两位
var num = 1.257123154315;num = num.toFixed(2);console.log(num);保留小数点后四位var num = 1.257123154315;num = num.toFixed(4);console.log(num);
2019-07-22 11:54:40
4715
3
原创 js 获取当前值在数组的下标
js 获取当前值在数组的下标const arr = [1, 2, 3, 4, 6, 22, 55, 33, 66, 44];const getIndex = ((arr,item)=>{ for(var i in arr){ if(arr[i] == item){ return i; }; ...
2019-06-12 17:51:15
13457
原创 js冒泡获取数组中最小值、最大值
js冒泡获取数组中最小值、最大值 const arr = [1, 2, 3, 4, 6, 22, 55, 33, 66, 44]; const getMin = (arr) => { const arrLength = arr.length; for (var i = 0, ret = arr[0]; i < arrLength; i++) {...
2019-06-12 17:46:54
421
原创 Ajax请求数据之前、之后
Ajax请求数据之前、之后前端从后台请求数据，通常采用Ajax，在网络慢的情况下，页面会有空白页出现，为了解决这类问题，加载中通常会有一个loading样式，代表正在加载，此时就需要Ajax的beforeSend、complete方法；案例：$.ajax({ url: url, type: "get", data:data async:true, ...
2019-06-03 13:19:12
2656
原创 Axios
AxiosAxios是基于Promise的HTTP请求，可以用在浏览器和node.js中。Features1.从浏览器中创建XMLHttpRequests2.从node.js中创建http请求3.支持Promise API4.拦截请求和相应5.转换请求数据和响应数据6.取消请求7.自动转换JSON数据8.客户端支持防御XSRFAxios官方API拦截器在请求或响应被 th...
2019-05-14 10:12:03
76
原创 Vue中 全局守卫
Vue 全局守卫使用全局守卫简单举个例子 实现用户是否需要登陆 <div id="app"> <router-link to="home">首页</router-link> <router-link to="blog">我的博客</router-link> <!-- <a h...
2019-05-12 17:34:45
856
原创 Vue 获取DOM元素 ，给DOM增加事件的特殊情况
Vue 获取DOM元素 ，给DOM增加事件的特殊情况给标签绑定ref属性 使用this.$refs.xxx 获取原生的jsDOM对象ref属性值不能重名 Vue.component('subCom',{ template:`<div class="subCom"></div>` }) var App = { temp...
2019-05-12 17:23:58
4595
原创 Vue 生命周期
Vue 生命周期举了个例子，可以在控制台看输出的结果，就一目了然了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...
2019-05-12 17:18:00
82
原创 Vue 计算属性
Vue 计算属性（computed）简单实现利用计算属性的方法实现点击切换音频 <div id="app"> <audio :src="getCurrentSrc" autoplay controls></audio> <ul> <li v-for="(item,index) in...
2019-05-12 17:14:47
220
原创 Vue Watch监听
Vue Watch监听watch监听单个属性基本数据类型是简单监视，复杂的数据类型深度监视 <div id="app"> <input type="text" v-model="msg"> <h3>{{msg}}</h3> <button @click="arr[0].name='小板栗'">点击</bu...
2019-05-12 17:11:00
183
原创 Vue 过滤器的使用
Vue 过滤器的使用作用：为页面中数据进行添油加醋的功能有两种：1.局部过滤器 2.全局过滤器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
2019-05-04 21:52:07
141
原创 Vue父子组件之间的通信
Vue父子组件之间的通信创建两个全局组件1.Parent 2. Child父组件往子组件通信现在父组件中绑定自定义属性在子组件中使用props接收父组件传递的数据在子组件中可以任意使用Vue.component('Child',{ template:`<div> <p>我是子组件</p> <input type="...
2019-05-03 14:37:46
100
原创 Vue全局组件的创建
Vue全局组件的创建//全局组件Vue.component("App",{ data(){ return { msg:"我是全局组件" } }, template:`<div>{{msg}}</div>`})new Vue({ el:"#app", components:{ App }, template:`<App>&...
2019-05-03 14:13:04
183
原创 vue v-model：双向数据绑定
v-model：双向数据绑定v-model: 双向数据绑定的体现,只会体现在有value属性的它是v-bind:value v-on:input 的体现<div id=”#app”> <!--<input type=”text” v-model=”msg”>--> <input type=”text” :value=”msg” @input...
2019-05-02 22:24:25
174
原创 Vue指令系统
Vue指令系统1: v-test: innerText2: v-html: innerHTML3: v-if: 数据属性对应的值，如果为假不渲染，如果为真则渲染 appendChild()、removeChild();4：v-show: 控制DOM元素显示隐藏，display:none|block;项目中如果频繁使用切换，建议使用v-show, 如果运行条件很少改变，则使用v-if,...
2019-05-02 22:19:32
75
原创 简单用js实现小型点击数字游戏（可以锻炼大脑哦）
简单用js实现小型点击数字游戏（可以锻炼大脑哦）实现逻辑1.随机生成0-36的数字，且打乱数字（改游戏是以6*6的形式呈现出，所以可以自定义），每一个数字等比的宽高，边距，方便在游戏中快速点击且不误点。function fnLuanXu(num) { var aLuanXu = []; for (var i = 0; i < num; i++) { ...
2019-04-16 17:03:51
1134
原创 md5.js加密和base64加密解密
md5.js加密和base64加密解密md5.js加密 /** * jQuery MD5 hash algorithm function * * <code> * Calculate the md5 hash of a String * String $.md5 ( String str ) * </code> * * ...
2019-04-15 11:05:08
288
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人