日常积累
关注
分享
扫一扫
喵大叔、
活到老，学到老，学到老，活到老---学无止境
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
npm的organizations
npm的organizations大家在自己写一些库或者日常开发的时候都会发现很多的包名称是如下的"devDependencies": { "@babel/helper-compilation-targets": "^7.15.4", "@vue/cli-plugin-babel": "^4.1.0", "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-service": "^4.1.0" }他们的结构为: @your_o原创 2022-01-07 10:58:19 · 2224 阅读 · 0 评论 -
npm link npm unlink usr/bin/node usr/bin/env node
npm link:npm link you-lib : 将当前项目中node_modules下指定的库文件连接到node全局node_modules下的库文件npm link: 将当前项目连接到node全局node_modules中作为一个库文件，并解析bin文件配置创建可执行文件npm unlink将当前项目从node全局node_modules中一处#!/usr/bin/node#!/usr/bin/env node第一种是直接执行/usr/bin/目录下面的node第二种事在环境变原创 2022-01-05 19:58:46 · 1207 阅读 · 0 评论 -
在微信环境内打开H5，接口的HTTP的status状态为0
故事前景今天项目开发中遇到了一个问题，有个功能页面是H5页面，在正式环境中，用ios手机打开正常，在安卓手机使用微信却打不开 ，但是复制地址，在浏览器内又能打开，在测试环境中，ios和安卓又都可以。这一下子把我搞蒙了。排查问题跟项目经理确认后，增加生产环境的调试工具，发现在安卓机的微信环境打开h5页面，axios请求返回的http的status为0.没有正常响应。然后测试环境和正式环境的接口区别就是正式环境用了安全证书。其余东西都一样。推测是安全证书引起的问题确认问题跟后台以及运维了解，正式环境使原创 2021-04-12 17:33:42 · 4012 阅读 · 0 评论 -
iOS safari 阻止“橡皮筋效果”
window.onload = function(){ var stopScrolling = function(event) { event.preventDefault(); } document.addEventListener('touchstart', stopScrolling, {passive: false}); document.addEventListener('touchmove', stopScrolling, {pas原创 2021-04-07 10:50:09 · 623 阅读 · 0 评论 -
移动端H5兼容性问题
移动端H5兼容性问题HTML方向调用系统功能使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能，使用能快速调用移动设备的的图库/文件。这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。<!-- 拨打电话 --><a href="tel:10086">拨打电话给10086小姐姐</a><!-- 发送短信 --><a href="sms:10086">发送短信给10086小姐姐&l转载 2021-02-02 14:53:02 · 3160 阅读 · 1 评论 -
flex布局中设置宽度被压缩的问题
flex布局中设置宽度被压缩的问题当父级使用了flex布局，当内部子元素总宽度大于它的宽度时，就会等比例压缩子元素宽度，解决方法就是1、给所有的子元素设置flex-shrink：0；2、将所有子元素的width属性更改为min-width；...原创 2021-01-07 14:09:05 · 6479 阅读 · 0 评论 -
关于前端代码埋点数据上报的实现
前提最近项目有需求，需要对一个小程序以及官网项目就行数据埋点上报，但是又不让使用第三方的SDK，要自己封装，哎，难搞，没办法，就各种抠脑壳查资料，在这做个笔记，总结一下什么是数据埋点，有什么用个人理解就是对网站，项目进行业务数据，用户行为数据及其他实际需要的数据进行采集上报，是了解用户行为，分析用户行为，提高用户体验的一种方式，通过这些采集来的数据就可以进行分析，知道用户来源，访问量，点击量，停留时长等数据，将用户使用产品的行为进行可视化，对产品进行优化调整，常见的解决方案有三种，代码埋点、可视化埋原创 2020-12-16 16:25:04 · 4220 阅读 · 3 评论 -
前端开发中的长列表优化
众所周知，浏览器在渲染dom节点的时候，节点越复杂数量越多那么所消耗的时间就会越长。当业务需求为一次性要渲染大量的数据时，数据量过大且一次性全部渲染出来的时候会使浏览器卡顿或者卡死。一般情况下，列表形式的数据展示形式是最常见的，大部分情况下，常见的方式时普通分页加载和无限滚动加载，普通分页加载在这里就不说了大部分后台管理都采用这个方式，无限滚动则是根据鼠标滚动触底时加载下一页数据，实现的思路大致是监听父元素的 scroll 事件（一般是 window），通过父元素的 scrollTop 判断是否到了页面是.原创 2020-12-15 14:06:00 · 3244 阅读 · 0 评论 -
scrollTop offsetLeft scrollHeight offsetTop
在项目开发中，经常会遇到`scrollTop` `offsetLeft`等等与元素节点位置相关的参数，来进行需求开发，但对于每个参数具体含义总是搞忘或者用错，每次都需要查找好多资料，所以为了弄懂这些含义，在这做个笔记，加深印象原创 2020-12-10 14:24:43 · 168 阅读 · 0 评论 -
通过闭包，来实现简单的状态存储的简单模块化demo
当我们的项目越来越大，那么需要保存的数据与状态就越来越多，因此，我们需要一个专门的模块来维护这些数据，这个时候，一个叫做状态管理器的东西就应运而生，下面是一种简单的方式，模仿状态管理器的实现原理// 自执行创建模块(function() { // states 结构预览 // states = { // a: 1, // b: 2, // m: 30, // o: {} // } var states =原创 2020-11-10 13:16:38 · 687 阅读 · 0 评论 -
直播评论滚动到上面渐隐特效
大家都在看直播的时候看那个评论区评论，到顶部的时候会渐隐消失（如下图），现在小程序或者H5做直播或者视频播放的时候，也要实现该功能，那怎么实现呢，主要用了mask ，-webkit-mask-image这个css属性。下面写了个小demo，供大家参考，如果是小程序端 那自行替换标签，使用cover-view。评论区文字滚动当成轮播就行了，列子中视频地址自己更换成自己的（自己拿手机拍个视频放自己电脑上就行了）<!doctype html><html lang="en"><原创 2020-11-09 11:34:18 · 2546 阅读 · 0 评论 -
关于axios的公共部分封装
axios.interceptors.request.use( config => { /*此处是针对请求头做一系列处理的地方，比如加token或者一些其他公共参数，但切记一定要将config return出去，否则无法正常发送请求 */ // const token = localStorage.getItem('token') // if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token // con原创 2020-10-28 16:10:43 · 427 阅读 · 0 评论 -
解决Chrome浏览器无法自动播放音频视频的问题
谷歌浏览器做了改革，不再允许自动播放音频和视频。Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频。<video autoplay></video> 所以好多需求会要求在网页背后播放一段音频文件这种需求就头疼了，解决方案1. 比较常规的做法是，为video标签设置muted属性，使它静音，这样视频就能自动播放了，但是没有声音。然后待用户在网页上有了任意触发后，再将muted去掉。或者让用户手动去打开音频（腾讯视频就是这样做的）。2.使用iframe来触发权限原创 2020-10-16 17:19:33 · 9181 阅读 · 4 评论 -
处理emoji表情字符
关于对emoji表情，将自己整理到的方法写个记录一、前端处理1. 过滤掉emoji表情，但是emoji表情更新，会存在漏网之鱼，且用户体验感不好function filteremoji(){ var ranges = [ '\ud83c[\udf00-\udfff]', '\ud83d[\udc00-\ude4f]', '\ud83d[\ude80-\udeff]' ]; var emojireg = $("#emoji_input").val(); emoj原创 2020-09-25 10:05:59 · 1149 阅读 · 0 评论 -
计算数组（内部元素为对象）某个key值出现的次数
// 判断元素重复次数 arrCheck(data, key) { let arr = JSON.parse(JSON.stringify(data)); var newArr = []; let obj = {}; for (var i = 0; i < arr.length; i++) { var temp = arr[i][key]; var count = 0; for (var j = 0原创 2020-09-18 16:50:26 · 954 阅读 · 0 评论 -
前端 sign参数验签
签名生成的通用步骤如下：第一步，设所有发送或者接收到的数据为集合M，将集合M内非空参数值的参数按照参数名ASCII码从小到大排序（字典序），使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串stringA。特别注意以下重要规则：◆ 参数名ASCII码从小到大排序（字典序）；◆ 如果参数的值为空不参与签名；◆ 参数名区分大小写；◆ 接口可能增加字段，验证签名时必须支持增加的扩展字段第二步，在stringA最后拼接上key得到stringSignTe原创 2020-09-03 15:20:35 · 2246 阅读 · 0 评论 -
谷歌浏览器接口请求cookie突然无法携带的问题
最近突然遇到一个奇怪的事情，公司的一个后台项目，突然在自己浏览器上无法登陆，查看接口发现是接口没有携带cookie，但是换个浏览器就可以，比如火狐，别人的电脑在谷歌上却能登陆，这个问题可把我搞蒙了，找了一圈资料，终于发现一篇有用的。首先如果你用axios，那么先设置withCredentials为true，然后打开谷歌浏览器在Chrome中访问chrome://flags/，搜索SameSite并设置为disabled即可。原因是Chrome升级到80版本之后cookie的SameSite属性默认值由原创 2020-07-31 16:26:30 · 7937 阅读 · 11 评论 -
Rreact学习笔记一
React与Vue的对比分析1. 开发者react 是Facebook公司创建维护的，Vue是有国内尤雨溪大神创建的，在生态圈上，React更完善一些，但在近几年发展中，Vue生态圈也逐步变的更加完善，个人感觉在国内，Vue的开发者占比应该要高于React（个人看法）2.框架vue - 本质是 MVVM 框架，由 MVC 发展而来React - 本质是前端组件化框架，不是一个完整的MVC框架，可以认为是MVC中的V（View）使用两者来开发完整应用都需要使用路由，状态管理等插件来完成3.模板语原创 2020-07-27 17:44:26 · 213 阅读 · 0 评论 -
对展开运算符和object.assign()的理解
Object.assignObject.assign是用来合并对象是浅拷贝，实现原理主要是将所有可枚举属性的值从一个或多个源对象复制到目标对象，同时返回目标对象。主要是用使用for…in 循环遍历出所有可枚举的自有属性。并复制给新的目标对象（使用 hasOwnProperty 获取自有属性，即非原型链上的属性）扩展运算符扩展运算符可以用来合并数组，拆分字符串，合并对象（浅拷贝）等作用，扩展运算符在调用时，它会调用该数据结构的 Interator接口，也就是遍历器，然后将该数据转为用逗号分隔的参原创 2020-07-09 11:04:20 · 1805 阅读 · 1 评论 -
涉及到英文文本换行问题
在项目中，把div设置了固定的width和height，有时会出现文字不能自动换行的情况，仔细查看就会发现如果是中文就会自动换行，如果是英文就不会，主要原因是因为英文文本之间没有加空格，浏览器会认为这是一个特别长的单词；解决方法.wrap { width:100px; height:100px; word-wrap:break-word; word-break:break-all;}...原创 2020-06-24 09:42:07 · 922 阅读 · 0 评论 -
使用vue开发的一些小技巧和注意事项
写这个呢是为了做个笔记，主要记录日常工作中遇到的一些问题和知识点。scoped属性在组件的style标签大家经常会注意到scoped属性，这个属性的作用主要是 使css只作用于当前组件中的元素。实现原理就是给当前页面元素加上唯一的自定义属性：data-v-唯一的属性，大家自己打开浏览器检查样式就会发现什么情况了。在项目开发中经常会覆盖使用的UI库组件样式，最好加个外层标签，防止样式污染，如下 /* 一般借助深度作用选择器 >>> */ div >>原创 2020-06-09 17:04:14 · 457 阅读 · 0 评论 -
git解决pre -commit hook failed (add --no-verify to bypass)的问题
1. 在同步本地项目到github是出现这个错误：pre -commit hook failed (add --no-verify to bypass)pre-commit钩子惹的祸当你在终端输入git commit -m "xxx",提交代码的时候，pre-commit(客户端)钩子，它会在Git键入提交信息前运行做代码风格检查。如果代码不符合相应规则，则报错。解决办法git c...原创 2020-03-19 13:10:23 · 868 阅读 · 1 评论 -
meta标签设置
<meta charset=’utf-8′> 声明文档使用的字符编码<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome<meta name=”description” content=”不超过150个字符”/> 页面描述...原创 2020-02-19 09:17:47 · 270 阅读 · 0 评论 -
vue+ iview oss签名直传
上传图片上传到oss上，先请求接口获取oss需要的签名策略信息现在项目的utils文件下创建ossUpload.js,内容如下import axios from '@/axios'import { publicApi } from "@/api/index.js";const basic = require("@/config/index.js");// 文件上传urllet upl...原创 2020-01-10 13:29:55 · 547 阅读 · 2 评论 -
iwew的Switch组件不显示问题
有些小伙伴使用ivew-ui， 在页面使用Switch组件时发现不显示，主要是没有配置 iview-loader， 具体配置请看我的这篇博客，方法二就是配置方法，https://blog.youkuaiyun.com/weixin_43990297/article/details/103404126...原创 2019-12-05 14:55:01 · 995 阅读 · 0 评论 -
给element-ui和ivew-ui的组件中的change事件传自定义参数
给element-ui和ivew-ui的组件中的change事件传自定义参数主要将方法再进行包装， 在组件的方法中 通过箭头函数将默认值传给函数内的方法，以下是ivew开关组件的，其他地方也适用 <Switch v-model="row.state" @on-change="((val)=>{handleSwitch(val,row)})"/>...原创 2019-12-05 14:51:14 · 310 阅读 · 0 评论 -
element-ui+vue-treeselect下拉框的校验
element-ui+vue-treeselect下拉框的校验(ivew也适用)在项目开发中 使用了vue-treeselect的话，使用element-ui或者ivew自带的表单校验发现，trigger中blur和change均不生效，在选择了值之后验证依然存在，解决方法主要是使用vue-treeselect官网中api给出的事件中的input，在value改变后触发，将trigger设为b...原创 2019-12-04 10:20:49 · 4555 阅读 · 4 评论 -
swiper插件兼容问题及版本选择
swiper插件适用于移动端，PC端上面有版本兼容问题，在IE9及以下，使用swiper2的任何版都可以，swiper2 还是很强大的；在IE10以上，以及其他的浏览器，swiper的版本都可以用。所以现在大家在开发的时候，移动端采用swiper的所有版本都可以，PC端采用swiper2版本。...原创 2019-11-25 09:17:40 · 5268 阅读 · 0 评论 -
城市选择json数据
ELEment上的城市JSON数据http://shamoyuu.bj.bcebos.com/DontDelete/citys.json数据来源：https://www.cnblogs.com/shamoyuu/p/element_cascader.html原创 2019-11-12 13:50:21 · 974 阅读 · 0 评论 -
项目开发中常见兼容问题
1. button标签里面包裹a标签，在IE浏览器上会出现兼容问题问题描述： a标签会被隐藏不显示解决方案:将button标签直接替换成a标签，不要包裹了在button标签上用onClick事件来进行页面跳转<button οnclick="window.location.href('/jsp/manage/manage-context.jsp')" ></button...原创 2019-11-06 18:56:01 · 687 阅读 · 0 评论 -
vuex与本地存储，持久化存储
在vuex的时候 刷新以后里面存储的state就会被浏览器释放掉，因为我们的state都是存储在内存中的，所以一刷新页面就会把state中的数据重置，这就涉及到vue数据持久化的问题。在vuex中使用subscribe 和plugins 来实现本地存储与vuex相关联，实现vuex持久存储https://vuex.vuejs.org/zh/api/#plugins 具体细节可查阅官方文档 ...原创 2019-11-06 17:40:30 · 1718 阅读 · 1 评论 -
文本溢出省略号方案
第一种，单行文本溢出变成省略号单行文本溢出变成省略号，css控制，核心代码:overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容）white-space: nowrap；（设置文字在一行显示，不能换行）text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本）优点兼容好省略号出现的位置合适超出范围才会出现省略号...原创 2019-11-06 13:29:38 · 462 阅读 · 0 评论 -
遇到的好玩，实用的css属性
遇到的好玩，实用的css属性查看页面布局的方法javascript: (function(){ var style = document.querySelector('#_outline_'); if (style) { style.parentNode.removeChild(style); } else { style = document.createElement('...原创 2019-10-29 14:43:22 · 233 阅读 · 0 评论 -
利用节点伪元素实现数字递增
在项目中经常会遇到如图的布局那么使用伪元素就很方便了。 li{ font-size:24px; font-weight:400; color:rgba(255,255,255,1); margin-bottom: 36px; line-height: 1.6; position: relative;...原创 2019-10-25 11:19:58 · 319 阅读 · 0 评论 -
修改浏览器滚动条样式
/定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 兼容谷歌和360/::-webkit-scrollbar { width: 16px; height: 16px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-b...原创 2019-06-29 13:52:45 · 549 阅读 · 0 评论