js
Justicky
别再最能吃苦的年纪选择安逸!
展开
-
基于canvas实现图片压缩
用法:compressImg(target.files[0], 2).then(base64 => { console.log(base64) // 在这里实现压缩后的上传操作 // ...}).catch(err => { // 压缩异常 Indicator.close() _this.$toast(err)})详细见代码注释/** * 图片...原创 2018-12-27 22:53:56 · 545 阅读 · 0 评论 -
监听页面滚动实现加载更多功能
1、功能描述:当页面内容超过一屏,没有分页功能,且页面滚动到底部时,希望自动加载更多数据。这时候就需要监听页面是否滚动到底部,并在滚动到底部时,执行回调函数。2、代码实现:/** * 页面滚动到底部触发监听,执行回调 * @param callBack */export function scrollToBottom (callBack) { window.onscrol...原创 2019-01-30 12:01:08 · 1977 阅读 · 0 评论 -
基于localStorage封装带过期限制的缓存功能模块
每个项目中都很有可能使用到本地缓存来处理逻辑,这里基于window.localStorage封装了带过期限制的缓存功能模块。使用方式: import cache from '@/utils/cache.js' // 根据项目目录而定let data = { name: 'Justicky', work: 'front end'}1、设置缓存数据:ca...原创 2019-01-29 15:57:44 · 559 阅读 · 0 评论 -
伪造点击事件下载当前网页
通过点击按钮实现当前网页的下载:example: downloadAsHtml('test')const STYLE = 'body{...}' // css样式,保证下载后得到的本地css文件样式不丢失// .../** * 将页面已html格式文件下载至本地 * params name 下载文件名 **/function downloadAsHtml (name) {...原创 2019-01-16 13:02:30 · 644 阅读 · 0 评论 -
input光标总是在内容最末端
前端在优化用户体验的时候,经常会遇到这样的需求:当input框有值的时候,用户再去编辑这个input,无论用户点input的什么位置,总是将光标置于input已有内容的最末端。下例是基于vue框架的写法:<input type="text" @click="focusEnd('name-inp-hook')" class="name-inp" id="name-inp-hook...原创 2019-01-08 13:11:28 · 6739 阅读 · 2 评论 -
XMLHttpRequest.withCredentials 解决跨域请求头无Cookie的问题
XMLHttpRequest.withCredentials 属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-site Access-Control)请求。在同一个站点下使用withCredentials属性是无效的。此外,这个指示也会被用做响应中...原创 2019-01-07 19:01:24 · 4315 阅读 · 0 评论 -
引用类型深拷贝
// 递归实现引用类型数据的拷贝function deepCopy(oldObj, newObj){ var newObj = newObj || {} for(let i in oldObj){ if(typeof oldObj[i] === 'object'){ if (oldObj[i].constructor === Array) { newObj[i] = [...原创 2019-01-17 12:53:13 · 360 阅读 · 0 评论 -
js日期格式化
测试: /** * @param date 标准日期格式,example:new Date() * @param fmt 格式化数据类型,example:'yyyy-MM-dd hh:mm:ss' || 'yyyy年MM月dd日' * @returns {*} */export function formatDate (date, fmt) { if (/(y+)/.tes...原创 2019-01-01 20:01:47 · 260 阅读 · 0 评论 -
前端解析当前url中的参数
前端项目中,必不可少的需要用到解析当前url,从而获取其中的参数。测试:注意:这里获取的参数值都为String类型/** * url参数解析 * @example String "https://mp.csdn.net?id=123456&a=b" * @return Object {id:"123456",a:"b"} */export function ur...原创 2019-01-01 19:43:35 · 1727 阅读 · 0 评论 -
基于es6 import()实现本地数据mock
import()动态加载相关资料:https://blog.csdn.net/Zckguiying/article/details/85864233需求描述:前端项目中必定要有本地数据mock的模块,实现前后端分离,解决开发时因前后端接口的依赖而导致开发效率低下的问题。实现方案:这里主要使用了es6 import()动态加载模块来实现mock功能。1、准备需要mock的json数据,命...原创 2019-01-05 20:59:18 · 1252 阅读 · 0 评论 -
es6 import()函数用法
import()函数简介前面介绍过,import命令会被 JavaScript 引擎静态分析,先于模块内的其他模块执行(叫做”连接“更合适)。所以,下面的代码会报错。// 报错if (x === 2) { import MyModual from './myModual';}上面代码中,引擎处理import语句是在编译时,这时不会去分析或执行if语句,所以import语句放在i...转载 2019-01-05 18:17:46 · 1950 阅读 · 0 评论 -
前端常用正则校验
前端校验验证器:export const Validator = { isEmil: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, // 校验邮箱 isPhoneNumber: /^1[3456789]\d{9}$/, // 手机号码验证 isMobileNumber: /^(\(\d{3,4...原创 2018-12-29 10:27:54 · 6026 阅读 · 0 评论 -
移动端开发调试工具——eruda
移动端开发调试是一个比较麻烦的事情,本篇文章将介绍使用eruda来完成移动端开发调试。一、直接使用:在前端项目的index.html中直接通过js写入eruda工具<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport"原创 2018-12-27 23:50:50 · 2065 阅读 · 0 评论 -
Promise实现接口超时限制
主要思想:通过Promise.race()实现接口超时限制 // 定义上传文件接口函数export const uploadFile= (params) => { let uri = serverSrc + '/api/xxx/xxx' // 设置请求地址 return Promise.race([ uploadFilePromise(uri, params),...原创 2018-12-27 23:22:17 · 5453 阅读 · 3 评论 -
JS垃圾回收机制
JavaScript 具有自动垃圾收集机制,执行环境会负责管理代码执行过程中使用的内存。原理:找出那些不再继续使用的变量,然后释放其占用的内存。为此,垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间),周期性地执行这一操作。 通常有以下两个策略:标记清除(最常用):当变量进入环境(例如,在函 数中声明一个变量)时,就将这个变量标记为“进入环境”。 而当变量离开环境时,则将...原创 2019-02-17 12:59:47 · 284 阅读 · 0 评论