Justicky-优快云博客

原创 webpack4构建前端项目

在使用webpack 4.x版本构建前端项目的时候，遇到了一些坑点，这里做一下记录，详细内容见注释。1、项目目录： 2、基本配置内容webpack.base.config.js'use strict';const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plug...

2019-01-02 23:06:49 1958

原创前端常用正则校验

前端校验验证器：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 6054

原创 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 5506 3

原创基于canvas实现图片压缩

用法：compressImg(target.files[0], 2).then(base64 => { console.log(base64) // 在这里实现压缩后的上传操作 // ...}).catch(err => { // 压缩异常 Indicator.close() _this.$toast(err)})详细见代码注释/** * 图片...

2018-12-27 22:53:56 576

原创 react实现图片预览组件

功能主要包括：下载图片、等比缩放、旋转、全屏拖拽用法：import ImgPreview from '@/components/ImgPreview'{/* 图片预览组件 */}<ImgPreview visible={previewVisible} // 是否可见 onClose={this.closePreview} // 关闭事件 src={licenc...

2018-12-27 22:17:40 11293 2

原创 JSX语法解析变量中的换行符实现换行

在react中，经常会碰到从后端获取到的一段字符串中包含‘\n’换行符的情况，此时，我们要在dom中渲染该字符串，并让其在换行符的地方实现换行。如果直接去使用jsx语法渲染的话，可能不能如你所愿。jsx引入了dangerouslySetInnerHTML下面是react官网对dangerouslySetInnerHTML的介绍：dangerouslySetInnerHTMLdang...

2019-03-18 16:36:23 15561 1

原创 css实现文字两端对齐

先看下效果图：css实现方法：方法1：实现文字两端对齐，我这里借助了一个行内空标签，这里使用标签也可实现。部门.form-item-title{ flex: 0 0 120px; marg

2019-03-18 15:51:46 780

原创 JS垃圾回收机制

JavaScript 具有自动垃圾收集机制，执行环境会负责管理代码执行过程中使用的内存。原理：找出那些不再继续使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间），周期性地执行这一操作。通常有以下两个策略：标记清除（最常用）：当变量进入环境（例如，在函数中声明一个变量）时，就将这个变量标记为“进入环境”。而当变量离开环境时，则将...

2019-02-17 12:59:47 314

原创监听页面滚动实现加载更多功能

1、功能描述：当页面内容超过一屏，没有分页功能，且页面滚动到底部时，希望自动加载更多数据。这时候就需要监听页面是否滚动到底部，并在滚动到底部时，执行回调函数。2、代码实现：/** * 页面滚动到底部触发监听,执行回调 * @param callBack */export function scrollToBottom (callBack) { window.onscrol...

2019-01-30 12:01:08 2031

原创基于localStorage封装带过期限制的缓存功能模块

每个项目中都很有可能使用到本地缓存来处理逻辑，这里基于window.localStorage封装了带过期限制的缓存功能模块。使用方式： import cache from '@/utils/cache.js' // 根据项目目录而定let data = { name: 'Justicky', work: 'front end'}1、设置缓存数据：ca...

2019-01-29 15:57:44 593

原创 iOS唤起键盘页面被顶上去且无法自动回退带来的问题及解决方案

一、问题描述：问题1：iOS唤起软键盘，将页面顶出屏外，且无法自动回退到正常位置详细描述：在开发H5页面时，会遇到这样的问题，在iPhone访问有提交按钮fixed在底部页面，且页面中有input框等可录入信息的元素时，点击input框唤起键盘，输入信息，这时候页面会被顶出屏外，且在点击键盘的完成按钮收起键盘时，页面不会回到原来正常的位置。问题2：点击fixed在底部的提交按钮无反应...

2019-01-18 22:04:18 10462 3

原创 npm常用命令及package-lock.json的作用

介绍一些npm常用的命令，以及其对应的简写，在项目中安装一些包的时候，推荐在命令行中加上--save，以保证添加的包依赖会被保存到package.json文件中。注意：1、如果你是新版本npm（5.x以上），不加--save会默认将依赖加到package.json文件的dependencies里。2、npm@5.x以上版本，会在下载包或更新包的时候生成package-lock.json...

2019-01-17 22:59:23 1223

原创引用类型深拷贝

// 递归实现引用类型数据的拷贝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 382

原创 node-模块系统exports与module.exports的区别

node笔记——exports与module.exports的区别注意：node每个模块中，exports和module.exports指向同一对象，但每个模块默认返回module.exports。使用场景：1、将多个需要导出成员挂载到exports对象中导出，这样在使用导出的成员时，就需要通过对象属性获取如：var exportsObj = require('./b.js') /...

2019-01-16 23:00:18 327

原创伪造点击事件下载当前网页

通过点击按钮实现当前网页的下载：example： downloadAsHtml('test')const STYLE = 'body{...}' // css样式，保证下载后得到的本地css文件样式不丢失// .../** * 将页面已html格式文件下载至本地 * params name 下载文件名 **/function downloadAsHtml (name) {...

2019-01-16 13:02:30 668

原创 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 7139 2

原创 XMLHttpRequest.withCredentials 解决跨域请求头无Cookie的问题

XMLHttpRequest.withCredentials 属性是一个Boolean类型，它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用withCredentials属性是无效的。此外，这个指示也会被用做响应中...

2019-01-07 19:01:24 4412

原创基于es6 import()实现本地数据mock

import()动态加载相关资料：https://blog.youkuaiyun.com/Zckguiying/article/details/85864233需求描述：前端项目中必定要有本地数据mock的模块，实现前后端分离，解决开发时因前后端接口的依赖而导致开发效率低下的问题。实现方案：这里主要使用了es6 import()动态加载模块来实现mock功能。1、准备需要mock的json数据，命...

2019-01-05 20:59:18 1282

转载 es6 import()函数用法

import()函数简介前面介绍过，import命令会被 JavaScript 引擎静态分析，先于模块内的其他模块执行（叫做”连接“更合适）。所以，下面的代码会报错。// 报错if (x === 2) { import MyModual from './myModual';}上面代码中，引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在i...

2019-01-05 18:17:46 2022

原创 react 在componentWillUnmount中卸载异步操作设置状态

react中经常会遇到这样的wraning：Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions an...

2019-01-02 23:30:56 15912

原创使用less注意的地方

1、制作模糊背景效果（毛玻璃效果） filter: blur('10px'); // 注意：css正常写法filter: blur(10px); 此时10px不需要加引号2、css计算属性 width: calc(~'100% - 260px'); // 注意： ~符号表示不在编译时计算结果，而是让浏览器去计算100% - 260px的结果3、backgro...

2019-01-01 21:03:29 446

原创 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 286

原创前端解析当前url中的参数

前端项目中，必不可少的需要用到解析当前url，从而获取其中的参数。测试：注意：这里获取的参数值都为String类型/** * url参数解析 * @example String "https://mp.youkuaiyun.com?id=123456&a=b" * @return Object {id:"123456",a:"b"} */export function ur...

2019-01-01 19:43:35 1763

原创移动端开发调试工具——eruda

移动端开发调试是一个比较麻烦的事情，本篇文章将介绍使用eruda来完成移动端开发调试。一、直接使用：在前端项目的index.html中直接通过js写入eruda工具<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport"

2018-12-27 23:50:50 2140

Justicky