迷失的羔羊over-优快云博客

通过JS实现队列的数据结构，首先是最普通的队列，先入先出// 队列function createQueue() { // 队列 let queue = [] // 入队 const enQueue = (data) => { if(data == null) return queue.push(data) } // 出队 const deQueue = () => { if(queue.length === 0) return

2022-05-19 14:58:08 6331 1

原创 JS 遍历哨兵模式优化

通过在遍历的时候，添加哨兵对数组进行优化，对比了下，在极限情况大概一千万条可以减少60%以上的遍历时间// 遍历const find = (num, key) => { let arr = [] for(let i = 0; i < num; i++) { arr.push(i) } const startTime = new Date() let i = 0 const n = arr.length while(i < n) { if( a

2022-05-11 17:51:52 293

原创 JS 链表实现LRU 最终使用淘汰算法

LRU： LRU是Least Recently Used的缩写，即最近最少使用，是一种常用的页面置换算法，选择最近最久未使用的页面予以淘汰。JS链表库 linked-listhttps://github.com/wooorm/linked-list大家也可以自己写链表import { List, Item } from "linked-list";`// LRU实例export default class LRUItem extends Item { constructor(value)

2022-05-11 17:41:19 366

原创 webapck 5 背景图无法正常加载

因为我之前用的webpack 4，但是新安装的用的webpack5，然后我图片还是按照老一套的进行配置的，图片使用的url-loader，然后背景图片就无法加载了，最终通过看帖子和文档才发现，新版本的需要进行特殊设置或者可以使用最新的所以如果继续使用url-loader { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', o

2022-01-11 09:32:38 338

原创 redux文件结构优化

因为公司的redux结构不是太分明，因此研究了下redux的文件结构首先我们对reducer功能进行分离，这样更利于后期维护。// clearGoodsReducer.jsimport constants from "../constants";const { GOODS_CLEAR } = constantsexport const clear = () => ({ type: GOODS_CLEAR})export const reducer = (state, action

2021-12-29 17:48:41 502

原创 antd-mobile 多层modal弹框导致mask层显示异常

最近用antd-mobile2.30，因为需求需要输入大量信息，因此用到了多层弹窗，然后发现在安卓中多层弹窗正常，但是在ios弹窗中的Modal.alert弹框的mask层无法正常显示因此看了下它的css属性发现，wrap层存在z-index, translateZ两个属性在两个系统中渲染顺序的问题.am-modal-wrp { z-index: 999; transform: translateZ(0.2667rem);}z-index在安卓中等级较高，而translateZ在ios中等级较

2021-12-13 10:52:23 2890 1

原创使用ftp-deploy进行自动化发布

最近准备整个自动化发布，发现了react架构中可以直接使用ftp-deploy，于是开搞首先安装依赖npm install ftp-deploy然后在项目build目录下新建ftp-deploy.jsconst FtpDeploy = require('ftp-deploy')const ftpServ = new FtpDeploy()let config = { user: username, // 服务器登录账号 password: password, // 服务器密码

2021-12-09 15:52:47 1495

原创 antdesign-mobile 图片选择器ImagePicker反写

今天遇见一个问题，是把base64数据重新反写倒ImagePicker中，稍微研究了一下首先需要先把base64进行转换。// base64 to fileconst dataURLtoFile = dataurl => { let binary = atob(dataurl.split(',')[1] let mime = dataurl.split(',')[0].match(/:(.*?);/[1]) let array = [] for(let i = 0; i < b

2021-11-19 18:11:39 646

原创 antd-mobile teaxtarea出现异常滚动条

今天在开发一个页面的时候，发现文本输入框里面，多出来一条灰色的由于在我的手机上没有出现，而是在一个老版本的安卓手机上出现的这就让我感觉很有意思，后面我就试了试，发现它还会随着内容变长，我感觉基本就是一条滚动条了，但是还是记录下只需要在内部样式.am-text-area-control { overflow: hidden; .am-text-area-control { textarea { overflow: hidden; } }}...

2021-09-14 17:36:13 347

原创 react List点击父节点绑定点击事件

今天我在做一个List的点击选择的时候，我发现平常我都是直接把List中的每一个Item都会进行点击事件绑定，这样性能似乎不太好，我完全可以在父节点上进行绑定。<List onclick={e => fun(e.target.offesetParent.parentNode.id)}> arr.map((item, index) => ( <div id={index} key={String(index)}> {item.data} </div&

2021-09-01 17:52:09 545

原创 taro-ui at-input的title样式无法修改的问题

今天要对input组件进行二次封装以下，发现在组件中样式文件写进去没效果.at-input__title { font-size: 34PX; width: 34PX; color: #3C3C3C;}具体原因我还是没发现，但是通过class选择器确实无法修改样式，最终通过诸多尝试，我发现可以使用标签选择器label { font-size: 34PX; width: 34PX; color: #3C3C3C;}这样就可以了...

2021-08-23 09:52:10 996

原创变量声明与循环变量冲突

今天写taro代码的时候，发现报此变量声明与循环变量冲突，我百思不得其解，明明map和平常是一样的写的，最后我多番尝试，发现自己犯了一个基础问题，class命名不规范，export default class index extends Component {}class名首字母应该大写export default class Index extends Component {}...

2021-08-13 11:12:55 216

原创 Taro 下载图片到手机

最近需要做一个微信下载图片到手机的需求，因为涉及到微信的照片权限，因此做个记录// 鉴权操作判断是否有保存到相册的权限// 有就直接下载没有就弹窗提示给权限downImg() { Taro.getSetting({ success: res => { if(!res.authSetting['scope.writePhotosAlbum']) { Taro.authorize({ scope: 'scope.writePhotosAlbum', suc

2021-08-12 10:51:00 881

原创 vue 多页面打包配置

因为我们公司的项目是多页面应用，不同于传统单页面应用，一个包就可以了。我们必须要分模块打包，因此特意研究了下webpack，然后整理了一下多页面打包的逻辑。1.首先，用vue-cli搭好基本的项目结构。安装vue-clinpm install --global vue-cli然后用测试下vue -V 然后生成项目vue init webpack hndlBuild然后这是生成的项目结构接下来我们对这个结构进行下调整2. 项目结构调整由于每个功能的路由也是单独的，因此我们需要

2021-05-24 15:58:48 1679

原创 Vue 数据可视化大屏适配

最近手里有个需求，需要做大屏适配，原本在本地展示正常的页面，放在大屏上展示就无法满屏了，在网上搜集了一点资料最终自己总结了下首先在mounted生命周期中，监听window的变化window.addEventListener('resize', () => { console.log('resize') this.resize()})然后在methods中增加resize方法resize() { // 记录开发时候的尺寸 const width = 1550 ,h

2021-05-15 17:44:32 2826

原创 Echarts 折线图渐变区域

series: [ { name: "农村", type: "line", data: [20,10,20,10,20], symbol: "none", // 去掉折现图上的圆点 areaStyle: { // 折线下区域样式 color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgba(0, 101, 203,1)" }, {.

2021-04-27 10:06:44 284

原创微信浏览器音乐不自动播放

在进行微信公众号开发的时候，发现在微信公众号中直接调用audio.play()会报错，Uncaught (in promise) DOMException,在了解过后发现时因为浏览器本身的原因，但是浏览器也提供了解决方案只需要通过var audio = doucument.getElementById('id');audio.load()var playPromise = audio.play()if(playPromise !== undefined) { playPromise.then(f

2021-02-04 17:19:34 518

原创 eggjs session传递不成功

最近自己写node后台的时候遇见一个问题，在egg框架中，跨域参数设置成config.cors = { origin: 'http://localhost:3000', allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS' };无法进行session传递，登录接口获取session后并没存储起来于是乎发现需要允许cookie跨域config.cors = { origin: 'http://localhost:3000',

2021-01-26 15:06:31 833 1

原创 vue 使用element-ui input输入框输入值不变

同事在使用el-input组件时，在v-model绑定对象的时候，发现输入不生效<el-input v-model="model.name" placeholder="请输入内容"></el-input>data() { return { model: {} }， methods: { getData() { model.name = 'zs'; } }}后来我检查发现是由于在初始化时并未设置name属性，在设置该参数后无法监听参数的改变&lt

2021-01-15 09:42:53 3670

原创 echart图标渐变色

渐变色调用echarts内部对象{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ { offset: 0, color: '#41c469' }, { offset: 1, color: '#ffffff' } }])}

2021-01-15 09:10:55 234

原创 js 深拷贝

JS的深拷贝由于基本数据类型一般存储在栈中，而引用类型栈中只存储了一个引用，真正的内容存储在堆中比如我们对一个基本类型进行赋值var a = 1var b = aa = 3console.log(a) //3console.log(b) //1我们发现b并未因为a的改变而被改变而对一个引用类型进行赋值时var a ={ name: 'zs', age: 33,}var b = ab.age = 35console.log(a.age) // 35console.log(b

2020-12-21 13:39:15 116

原创前端 css 模块居中

通过父盒子flex布局father-box { display: flex; align-items: center; justify-content: center;}通过子盒子margin和transformbox { margin-top: 50%; margin-left: 50%; transform: translateX(-50%) translateY(-50%);}通过子盒子绝对定位box { width: 100px; height: 100.

2020-12-16 16:28:12 452

原创 echart 折线图点击区域获取对应参数

今天有个新需求，需要点击某片区域获取对应参数，但是发现echart折线图必须点到点上面才可以，于是查阅了几篇博客，总算解决了，解决方法如下：首先需要在option的xAxis中增加triggerEvent: true然后调用echart.setOption(optionData)生成图形后新增点击事件chart.getZr().on('click', function(params) { var pointInPixel = [params.offsetX, params.offsetY]

2020-12-10 10:22:02 2839

原创 CocosCreator笔记

Cocos creator声音控制增加声音先在全局增加一个节点Node 再在script中创建一个sound脚本集中控制声音再通过对脚本进行挂载然后脚本可以通过传入参数进行判断播放什么声音全局对象定义对于全局需要使用的对象，类似商商城，人物信息等，可以通过window全局对象进行挂载,如window.g_login通过延迟调用来实现在别的js中调用该js然后再node中把js挂载在把挂载的node拖到需要调用的js中 properties: { canvas: requir

2020-11-02 15:11:58 1726

原创 webpack 笔记

webpackurl-loader小图片可以通过url-loader转换成base64文件监听在修改页面后要立马刷新，而不是手动去构建，可以通过文件监听来完成。启动webpack命令时，带上 --watch参数在webpack.config.js 中设置watch: true缺点：需要手动刷新原理是：轮询判断文件的最后编辑时间是否变化某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等aggregateTimeoutmodule.export = { // 是否监听

2020-11-02 15:10:14 312

原创小程序笔记

小程序小程序点击事件bindtap 会穿透catchtap 不会穿透函数中this会指向函数本身需要给事件处理函数指定参数只能通过dataset来指定 <button bindtap="hello" data-say="hello">点击</button>然后在js中e.target.dataset.say小程序无法实现数据的双向绑定可以调用this,setData({ name: value}) // 直接赋值无法实现通知界面做出变化所以不使用t

2020-11-02 15:03:57 175

空空如也

空空如也