随笔分类 - 工作实战
准确判断一个变量的数据类型
摘要:准确判断一个变量的数据类型 由于typeof无法判断引用数据类型 所以需要调用 Object.prototype.toString.call上的方法 /** * 获取变量准确类型的函数 * @param { * } target "目标变量" * @returns { String } */ con
样式穿透
摘要:应用场景 Vue组件中写样式,通常如下方代码: <style scoped> .comA .data { background: red; } </style> 因为关键字scoped的原因,style标签内的样式只会对当前组件内容生效,因为最终生成出来的样式选择器是这样的: .comA .data
深度克隆(深拷贝)
摘要:深度克隆(深拷贝) export const deepClone = (targetObj)=> { return new Promise(resolve => { const { port1, port2 } = new MessageChannel(); port1.postMessage(ta
按字典排序(中文排序)
摘要:// 按字典排序(中文排序) const cityArr = ['湖北', '广州', '上海', '重庆', '厦门']; function changeCity(arr, callback) { callback(arr.sort((a, b)=> { return a.localeCompar
npm 包 - serve 使用
摘要:前言 前端打包后,有时需要将打包好的项目跑一下看看效果,这时就可以使用 serve 工具,在本地启动一个静态文件服务器。本文主要简单记录下 npm 包 serve 的基本使用命令。 一、全局安装 serve yarn global add serve or npm install --global
开发实战-CSS3背景总结
摘要:CSS3 背景 背景图 background-image 默认情况下,背景图会在横坐标和纵坐标中进行重复。 background-repeat 可以控制图片是否重复 background-size 背景图尺寸 预设值 contain:保证图片显示在盒子中不能改变比例 cove:图片一定要把这个区域撑
调度中心-发布与订阅
摘要:// 调度中心 var bus = { list: [], // 订阅 subscribe(callback) { // console.log(callback); this.list.push(callback) }, // 发布 publish(text) { // 遍历注册集合,执行回调函数
工作实战-字符串常用的API
摘要:字符串常用API String.prototype.slice[start, end) // 字符串分割(截断) start 从第几位开始截 end 截到第几位 // 举个栗子 let userName = '码农哥哥' let handelUserName = (userName) => { le
webstorm里面react快速创建模板
摘要:webstorm里面react快速创建模板 rcc + tab键 - - 用ES6模块系统创建一个React组件类 rccp + tab键 - - 创建一个带有PropTypes和ES6模块系统的React组件类 rcfc + tab键 - - 创建一个带有PropTypes和所有生命周期方法以及E
手机号脱敏
摘要:前端对手机号脱敏 /** * 手机号码脱敏 * @param { string } phone * @return { String } */ function phoneNuberConvert (phone) { if (!phone) return "" let pat = /(\d{3})\
js函数注释
摘要:JS函数注释规范 | 常用符号 | 说明 | 用法 | | | | | | @param | 参数 | @param { type } name 备注 | | @returns | 返回值 | @return {type} | /** * 测试 * @param { number } num 备注
vue封装自己的axios
摘要:在项目中封装自己的axios 在src目录下建立一个unit文件夹 // unit => http.js import axios from "axios"; const http = axios.create({ baseURL: "xxxx", // 设置基础路径 timeout: xxxx /
vue打包部署时页面布局混乱
摘要:vue打包部署样式混乱 问题分析:样式混乱最根本的原因就是样式冲突。 样式冲突是如何产生的? 由于一个页面由多个.vue文件组成,后每个.vue文件都有style,所以就导致冲突了 解决方案:检查每个.vue文件的style,是否加入scoped,不管有没有用该.vue,style都必须加上scop
js删除数组指定元素
摘要:js删除数组指定元素 const person = [ { id: 0, name: 'zhangsan' }, { id: 1, name: 'wangwu' }, { id: 2, name: 'zhaoliu' } ]; // 删除对象id为1的元素 person.splice(person.
router.afterEach 与 router.beforeEach
摘要:vue 中 router.afterEach用法,和router.beforeEach用法 router.afterEach是vue全局的导航钩子函数,我个人的理解是,进入某个路由之后触发的钩子函数,我用的比较多的有两种用法 修改,每个页面的title 首先在路由元中meta添加一个title属性,
Vue兼容苹果跳转回退不刷新页面(不触发mounted)
摘要:苹果跳转回退不刷新页面 场景一:当点击某个按钮 跳转到其他页面,再次返回就不会刷新页面,不刷新页面导致数据还是老数据。 场景二:在缴费系统中,用户选中一定金额,由于临时更变金额,点击取消支付,回来也会导致页面不刷新,在次拉起支付还是之前的价格 // 兼容苹果跳转回退不刷新页面(不触发mounted)
LocalStoreage 和 SessionStoreage 区别与用法
摘要:LocalStoreage 和 SessionStoreage 区别与用法 了解一下WebStorage 区别和特点