2019年01月_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 1913

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

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

2019-01-30 12:01:08 1971

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

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

2019-01-29 15:57:44 554

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

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

2019-01-18 22:04:18 10283 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 1167

原创引用类型深拷贝

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

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

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

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

2019-01-16 13:02:30 640

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

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

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

2019-01-07 19:01:24 4291

原创基于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 1246

转载 es6 import()函数用法

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

2019-01-05 18:17:46 1943

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

原创使用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 412

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

原创前端解析当前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 1718

Justicky