- 博客(18)
- 收藏
- 关注
RSS订阅原创 记录一次 react/taro 页面加载百分比
最近接手一个需求，写一个h5页面，taro技术栈，语法和react很像，奈何本人对react不熟，但也只能硬接上去。页面内很多内容显示，写成不同的组建，把组建放在一个数组中，再根据字段变化调用不同的组建显示，类似：// 存放text 组建 let showTemplate = { text1, text2, text3 }// 调用<View> {sh...
2019-08-23 00:48:06
1004
转载 vue 单页应用（spa）前端路由实现原理
写在前面：通常 SPA 中前端路由有2种实现方式：window.history location.hash下面就来介绍下这两种方式具体怎么实现的一.history1.history基本介绍window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个...
2019-04-27 00:27:52
393
原创 vue 不同环境打包配置
vue项目里面，通过vue-cli中的npm run build 可对项目进行打包，可是在实际工作中可能有生产环境，测试环境甚至更多，每个环境的请求地址都是不同的，如果我们每次都手动修改请求地址并打包，将非常繁琐，所以我们需要稍微配置一下，可以实现项目不同环境的打包配置：1、首先安装cross-env，命令:npm i --save-dev cross-env;2、在config文件夹里...
2019-03-17 00:23:06
3924
转载 微信小程序性能优化
【微信小程序】性能优化内容整理于微信公开课为什么要做性能优化？一切性能优化都是为了体验优化1. 使用小程序时，是否会经常遇到如下问题？ 打开是一直白屏 打开是loading态，转好几圈 我的页面点了怎么跳转这么慢？ 我的列表怎么越滑越卡？ 2. 我们优化的方向有哪些？ 启动加载性能 渲染性能 3. 启动加载性能1. 首...
2019-02-22 11:25:47
1224
转载 vue定时器销毁问题
定时器问题:我在a页面写一个定时，让他每秒钟打印一个1，然后跳转到b页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的。如下图所示： 解决方法1：首先我在data函数里面进行定义定时器名称：data() { return { timer: null /...
2019-02-22 10:28:22
2248
转载 Vue.js中 watch 的高级用法
假设有如下代码：<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div>new Vue({ e
2019-02-20 15:13:35
234
转载 深入浅出JavaScript运行机制
一、引子本文介绍JavaScript运行机制，这一部分比较抽象，我们先从一道面试题入手：console.log(1);setTimeout(function(){console.log(3);},0);console.log(2);请问数字打印顺序是什么？复制代码这一题看似很简单，但如果你不了解JavaScript运行机制，很容易就答错了。题目的答案是依次输出1 2 3，...
2019-02-19 15:17:06
111
转载 vue中页面加载进度条效果的实现
有图有真相，上图为页面跳转时显示的进度条。我们在vue项目中，为了减少首屏加载的时间，通常会开启路由的懒加载。路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间。然而，路由懒加载会使得我们在第一次打开一个新页面的时候，会有一个加载时间。如果在这个时候我们没有一个提示的话，给人的感觉会是好像我点了页面跳转但是没反应。所以，这个时候我们可以加一个进度条来告知用户。具体实...
2019-02-19 09:45:38
12933
2
原创 vue 跨域设置cookie
最近做项目登录认证的时候，出现登录了但是后续的接口请求却无法认证的情况，查看请求头发现因为没有把登陆时返回的cookies设置到第二次请求的头里面，所以，这就需要我们使用withCredentials这个属性了。vue：axios.defaults.withCredentials = true；jquery请求带上xhrFields: {withCredentials: true}...
2019-01-16 17:58:27
12730
原创 setInterval() 参数
突然被同事问到 setInterval的一些小问题，这里做过小记录，一些小坑，看代码setInterval(test,1000);setInterval(test(),1000);setInterval("test()",1000);function test(){ console.log(1)}三种不同的调用方式。（1）setInterval(test,1000)...
2019-01-15 15:14:35
10588
原创 JavaScript reduce()基本使用
reduce()函数，官方定义：方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值，接收四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。这里不做过多说明，说下简单的使用。1、数组去重。let str = 'asdfsfewfsdfsfzfefac';let array = str.split('');...
2019-01-15 11:15:27
163
原创 vue-router 路由小知识
1、主动刷新路由。开发中有时候我们需要手动去刷新页面，实现页面数据的重载，用比较传统的window.reload(）和$router.go(0)这两个方法会使页面刷新，但会进入一段空白页，影响用户体验，我们可以使用provide/inject 这个小技巧。这样刷新页面也不会出现空白页。app.vue<template> <div id="app"> ...
2018-12-27 15:53:33
205
原创 Vue 跨域处理和打包环境配置
在前端开发过程中，总会遇到跨域这个问题，一般如果用通常的jquery的话，配置跨域一个jsonp就行了，如果是vue，则需要配置代理了，项目中找到config下的index文件，在dev下增加代码，如下图因为目前项目有三个接口，我就配了三个地址，那么相应的请求地址也就是：this.http.post('/read',data).then(res=>{}).catch(err=&...
2018-11-14 00:23:39
5276
原创 javascript简单事件
绑定事件 为一个元素绑定事件，比如一个按钮，<input type="button" id="btn" value="点击"/>；通常我们的做法可以是：(1)、document.getElementById('btn').onclick = function(){}(2)、document.getElementById('btn').addEventListener('c...
2018-07-22 01:42:01
208
原创 简单的图片上传（base64）
小菜鸟一枚，朋友问到图片上传，就写了个小demo，不多说，祭上主要代码<input type="file" id="img_upload_file" /><label>图片预览</label> <img id="img_upload_show" /> $("#img_upload_file").change(fun
2018-03-21 11:06:23
1177
原创 前端基础面试总结
自己总结一些前端基础的面试题，和大家分享下。1、img图片标签的title和alt属性的区别：title表示鼠标停留在图片上时，显示的一个悬浮框，里面的文字；alt表示图片没有显示时在图片本来的区域内显示的文字说明2、css中link和import的区别：link是html的一个标签，import是css的一个标签；页面被加载时，link同时被加载，而import引
2017-10-23 15:19:06
281
原创 vue.js实现简单轮播
学习了vue.js也有一段时间了，做了个小demo来熟悉一下，很常见的demo，-------轮播图，没学vue之前的轮播图用JavaScript或者jquery都非常简单，发现用vue来写也挺有意思的。说下简单的思路，图片的轮播用v-if或者v-show来代替原来的Js滑动，过度效果用transition可简单实现，注意，滑动过程中是能看见两张图的，所以要用两个transition。（1）先
2017-10-10 00:35:33
2457
原创 双飞翼布局
双飞翼布局，实质就是两边宽固定，中间自适应的三行布局，还是比较简单的，直接上代码，这是第一种方法。双飞翼布局div{float: left;height: 50px}.left{width: 100px;background: red;margin-left: -100%}.right{width: 100px;backg
2017-09-30 22:46:19
188
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人