rolinabc的博客

上篇说了公众号裁剪&上传图片，裁剪使用的插件是vue-cropper，在实际验证过程中发现裁剪框移动的时候存在卡顿问题。必须要先左右移动下，上下移动才能比较平滑。搜了一下，发现也有很多人遇到了类似的问题，然后有一篇帖子给的解决方式是阻止默认“事件”，还需要修改源码。先不说麻不麻烦，我试了，但是貌似没有解决我当下遇到的问题。首先，如果我没猜错，有这个问题的，一定是把该组件放在了vant的popup中使用了。具体原因应该是样式影响的，我没扒源码，感兴趣的可以看下，然后给分享下哦，记得踢踢我。

看到这个诉求，我就去扒微信的api，发现有个属性叫wx.cropImage是做图片裁剪的，且可以传入对应的裁剪比例。在介入开发后才发现，这个是小程序的api，而非微信公众号的。阅读文档发现，小程序和微信公众号中都有一个叫chooseImage的api，但是返回的数据却不一样，小程序大家开发的都比较多了。选择成功后，返回localIds，是选定照片的本地ID列表，注意这个和小程序是不同的。组件具体的使用，我这里就不赘述了，上述github上有详细的使用文档。2、js代码，实现图片选择&裁剪&上传。

在日常开发中，肯定会遇到一些需要跨项目实时通信的场景。比如在浏览器中新开两个tab页面，A页面发送消息后，B页面实时监听并触发某些动作。类似的需求有很多，比如实时共享状态等等。那么跨项目/页面/浏览器tab的情况下如何实现通信呢？大家肯定第一时间会想到很多方案，可是如何实现实时通信呢？？？除了postMessage，sharedworker外，今天说下Broadcast Channel如何实现实时通信

难点：1、不同类型组件对应的操作符有哪些？？？2、value组件展示形式，如何确定？？？3、如何定制operator的内容以及value组件？？等。。。。。。。组件收益：1、统一协议&场景2、快速接入。

组内有组件库，在开发组件的过程中，发现大家在创建新组件的时候，都是cv之前的组件，然后再手动修改文件，觉得非常麻烦，所以就自己写了个node脚本，完成模版组件的生成。没有什么相关经验，所以基本是采用原生node来处理的，一边看文档，一边尝试，开发耗时3h。创建create.js文件后，在package.json中加入自定义命令，node执行该文件。涉及文件夹的创建，目录的获取，文件的复制及内容重写等，有意见欢迎指正呦～～～首先创建模版文件夹结构如下图（自己根据具体需求创建模版就行）

在开发项目的时候，偶然间发现一个现象：项目依赖packageA和packageB，而packageB也依赖packageA。正常来说，我们理解到的是只需要在项目依赖中安装packageA就可以了，packageB会直接使用项目中已安装的packageA。那么事实真的是这样么？？？如下图：显然不是我们想象的那样，我们发现在 packageB下也安装了packageA，这是为什么呢，当时是觉得不太理解。

无论是多么优秀的代码，都是有一个从简单到复杂的迭代过程，在这个过程里，在不影响业务项目的使用情况下，需要不断的对代码进行优化，保持或者增加代码的可读性，可维护性。

本文来给大家介绍一些日常开发中的一些小方法1. 判断两个数组是否含有重复数据在开发中我们肯定会遇到判断两个数组中是否有重复项的问题，如： [1,2,3,4]和 [2,3,4,5] ，这两个数组中重复项有2，3，那么我们最终得到的值其实应该是true的let arr1 = [1,2,3,4]let arr2= [2,3,4,5] function isRepeat(arr,newArr){ let res = newArr.every((x)=>{ retur

这两个插件，乍一看很像，功能也是一致的——让vue支持jsx语法那么他们两到底有什么区别呢？ 这里就给大家详细说一说一、背景：在使用脚手架构建项目的时候，拉取下来的项目模版，不能够支持jsx的语法，通过排查发现项目使用的是@vue/babel-plugin-jsx，随即修改为@vue/babel-preset-jsx后即可以正常解析二、@vue/babel-plugin-jsx 该组件只适用于vue3.x使用：npm install @vue/babel-plugi..

我们在部署完一个页面后，或者说写完一个通用组件后，我们肯定想要知道，当前到底有哪些人在用我们做的成果，这里就用到了数据统计。一、Microsoft Clarity是什么Microsoft Clarity 是微软提供的网站数据分析的工具，可以通过点击跟踪，滚动跟踪和热图来分析用户如何与您的网站互动，并且将数据可视化如下图所示：二、注册Microsoft Clarity您需要一个Microsoft，Facebook或Google帐户才能注册Microsoft Clarity。

在开发中，肯定会遇到一些if判断，正常来说不会有什么问题，但是一旦判断条件过多，就会给人一种非常冗余的感觉，阅读起来也是非常之头疼 这里就简单的举个????： 比如我现在有个需求，当前有十个数字输入框，需要十个输入框中的值有一个以上（包括一个）大于10的才能够执行某个操作 实现： 一、普通的if判断 if(num1 >10 || num2 > 10 || num3 >10 || ...){ ...}这样看肯定是不好的...

在开发中，肯定会遇到一些if判断，正常来说不会有什么问题，但是一旦判断条件过多，就会给人一种非常冗余的感觉，阅读起来也是非常之头疼 这里就简单的举个????： 比如我现在有个需求，当前有十个数字输入框，需要十个输入框中的值有一个以上（包括一个）大于10的才能够执行某个操作 实现： 一、普通的if判断 if(num1 >10 || num2 > 10 || num3 >10 || ...){ ...}这样看肯定是不好的...

前段时间偶然间发现组内有个项目打包后的体积非常的大，如下图所示， 这直接导致项目在部署的时候非常非常的慢，不夸张的说，喝完一杯茶了项目都没部署好，哈哈哈。真的非常影响开发体验，尤其对于博主这种总是冒火的脾气来说，每次部署都得‘骂骂咧咧’，啧啧啧。。。 所以决定，对它下手，优化一些比较刺头的包 首先第一步，找出对体积影响比较大的包，那么如何找出这些包呢？？？这里就需要引入个东西——report，不知道大家有没有见过下面这种五颜六色的图片呢？ 如果不知道那么，在这里告诉你...

在我们日常开发中，经常能够听到‘跨域’这个字眼，那么跨域是什么呢？ 跨域其实是由浏览器的同源策略造成的 那么同源策略又是什么呢？ 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 什么又是同源呢？ 如果两个 URL 的 协议、域名、端口号都相同的话，则这两个 URL 是同源。 具体看下面的表格...

在我们日常开发中，经常能够听到‘跨域’这个字眼，那么跨域是什么呢？ 跨域其实是由浏览器的同源策略造成的 那么同源策略又是什么呢？ 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 什么又是同源呢？ 如果两个 URL 的 协议、域名、端口号都相同的话，则这两个 URL 是同源。 具体看下...

一、背景我们都知道js是有精度问题的,如下图所示：在一些金额的计算时，对于精度要求的需要比较精准，所以这个时候，我们是需要特殊进行处理的，所以这个时候就引入了decimal.二、decimal介绍decimal.js是使用的二进制来计算的，所以可以更好地实现格化式数学运算，对数字进行高精度处理；使用decimal类型处理数据可以保证数据计算更为精确，还可以节省储存空间。三、使用1、npm命令引入decimal.js文件$ npm install --save d..

一、简单请求请求方法是以下三种方法之一：HEAD GET POSTHTTP的头信息不超出以下几种字段:Accept Accept-Language Content-Language Content-Type DPR Downlink Save-Data Viewport-Width WidthContent-Type的值只有以下三种(Content-Type一般是指在post请求中，get请求中设置没有实际意义)text/plain multipart/form-d

一、qs的引入yarn add qsimport qs from 'qs'二、使用介绍1.Parse Object 基本使用let obj = qs.parse('a=b'); // {a:'b'}是否有原型let nullObject = qs.parse("a[hasOwnProperty]=b", { plainObjects: true }); //无原型链var protoObject = qs.parse("a[hasOwnProperty]=b", .

在我们开发的时候，写了一个模块，在现有页面中测试都没问题。一段时间后，新需求新页面，该页面一打开，突然发现页面中样式都变样了，一查问题，原来是其他组件的样式和该页面的样式相互覆盖了。我相信大家在工作的过程中，或早或晚肯定都遇到过这样的问题吧 以往开发组件，我们都用“重名概率小”或者干脆起个“当时认为是独一无二的名字”来保证样式不冲突。显然这是不现实的，所以这个时候你就有必要来了解一下BEM的意义了 首先，BEM是什么，BEM是一个高可用的，强大的，而且简单的命名规范，它可以使得你的...

1.背景最近处理了一个需求，将图片的上传方式由原来的公有上传，改为oss私有上传方式。刚开始听到的时候有点懵，什么是私有上传，oss又是什么。所以这篇文章就当作是给大家科普啦～2.什么是对象存储oss比较官方的解释是：对象存储OSS是在云上提供无层次结构的分布式存储产品，为用户提供单价较低且快速可靠的数据存储方案。用户可通过云服务器实例或互联网使用 Web API 接口存储和检索数据。在 OSS 上的数据，用户使用指定域名的 URL 地址，通过 HTTP/HTTPS 协议存储和检索每个独立的数.