ahao430 的博客

原生js中，我们可以通过onDrag和onDrop事件来实现拖拽效果。而在react中，有一个强大的库，react-dnd，对拖拽相关能力进行了封装。react-dnd强大的好处是高度自由性，但是各种代码需要去手动实现。 我们海星二期装修页面需要实现一个拖拽（排序和复制），这里我们选择一个基于react-dnd二次封装的库，react-smooth-dnd。 文档安装1npm i react-smooth-dnd 示例1234567891011121314151617181920import React, { Component } from 'react';import { Container, Draggable } from 'react-smooth-dnd';class SimpleSortableList extends Component { render() { return ( <div> <Container...

原项目是在webpack里配置entry为列表，遍历多个活动页面打包。现改造项目拆分为独立的项目，又想能够在需要时遍历所有项目打包，所以在根目录加了一个build命令，并写了一个脚本去执行。 命令：1234567891011121314{ "name": "@mono/dsp", "version": "0.1.0", "private": true, "type": "module", "scripts": { "build": "npm run build:prod", "build:dev": "cross-env NODE_ENV=production VUE_APP_ENV=dev node build/index.mjs", "build:test": "...

活动需求要做一个顶部弹窗图片的toast效果，想起element中通过命令调用toast组件的方式，去调研一番，实现了一个类似效果。 相关api：核心需要用到两个api： Vue.extend方法，通过模板创建Vue构造器：https://cn.vuejs.org/v2/api/?#Vue-extend vm.$mount方法，获取vm实例：https://cn.vuejs.org/v2/api/?#vm-mount 第一步，创建模板如下，写一个Vue组件，就像我们平常手动引入使用的组件那样。但是不用写props，所有的配置对象写到data里。关闭的时候，要销毁dom对象。我们知道vm.$el可以拿到组件的dom元素，因此可以通过this.$el.parentNode.removeChild(this.$el)来移除dom。在此之前，用vm.$destroy销毁vm实例。 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556...

最近做一个果树活动，其中有一段金币红包下落的动画是用css写的。批量生成了多个金币和红包元素，起始位置随机。 但是如果手动写一大堆样式代码就太不方便了，记得less可以写循环，又搜了一下less可以用js生成随机变量。于是实现如下： 批量生成红包和元素123456789101112131415161718<div class="tree-box"> <img :class="['tree-head', { shake: treeShake }]" src="@/assets/imgtree-head.png" /> <img class="tree-body" src="@/assets/img/tree-body.png" /> <div :class="['coins', { up: coinUp, down: c...

https://ahao430.github.io/dev/

**背景：**之前做小程序浮标时尝试做过拖拽效果，但是跟自带原生客服、调试等组件的体验相差甚远。发现sjs文档中有事件响应，尝试用sjs事件开发拖拽组件，真机效果完美（模拟器还是有穿透效果）。 js开发拖拽组件 之前用js开发拖拽组件，实际上是在组件的data中设置位置数据，监听onTouchStart、onTouchMove、onTouchEnd事件，实时修改data中的数据，触发axml中的相关渲染。 在js的touch事件中，我们可以获得事件对应的touches坐标，以及元素本身。在touchstart获得初始touch点坐标并记录，在touchmove中获得当前touch点的坐标，计算与初始位置的偏差，就得到了移动的距离。通过这个距离，我们可以更新组件的定位信息，或者给组件设置transform。 但是要注意，下一次拖拽的时候，组件的初始定位或者transform已经发生了变化。因此，需要记录上一次的改动，或者初始时重新获取。 js实现拖拽主要存在几个问题： - 滑动会穿透到页面，拖拽浮标的时候，页面也会跟着动。给容器加catchtoumove还是...

当前的小程序脚手架中，写了不同环境的配置文件，再通过环境变量读取指定的配置文件输出到dist。 12345678910// gulpfile.jsconst ENV = process.env.NODE_ENVgulp.task('env', done => { return gulp.src(`./config/config.${[ENV]}.js`) .pipe(rename(function (path) { path.extname = '.json' })) .pipe(gulp.dest(OUTPUT_PATH))}) 这样，创建多个不同环境的配置文件，就可以在编译时实现不同环境配置的注入了。 但是，这样用起来比较麻烦，实际上我们不同环境的配置文件，可能大部分是相同的，只有小部分不同。我们希望可以有一个公用的配置文件，再合并不同环境的配置。 12345678// config/index.js...

创建仓库 创建仓库 创建了四个仓库，分别命名活动总仓库，vue分仓库，react分仓库，gulp分仓库。 执行git submodule进行组织 拉取总仓库代码，在终端中执行git submodule命令，添加分仓库git submodule add xxx 。 这样就将分仓库关联进来了。主仓库提交代码不会影响分仓库。 第一次拉取总仓库时，带上递归参数可以同步拉取分仓库。 1git clone xxx --recurse-submodules 也可以先拉取总仓库，然后执行命令获取分仓库： 12git submodule init git submodule update 使用monorepo+yarn组织子项目，共享依赖monorepo的理念是将多个项目放在一个git仓库中进行管理。 这样复制代码，共享组件等操作都更加方便；并且代码都在一起更易维护。进一步地，通过共享node_modules，可以做到安装一次依赖，后续再创建子项目可以立刻使用，节约时间和磁盘空间。 我们通过lerna + yarn来管理。 lerna是一个Lerna 是一个管理工具，用于管理包含多个软件...

1. 安装直接运行brew install mysql报错。去mysql.com下载社区版安装 2. 环境变量12cd ~vi ~/.bash_profile 添加两行path： 12export PATH=$PATH:/usr/locol/mysql/bin export PATH=$PATH:/usr/local/mysql/support-files 保存。 再执行source ~/.bash_profile 3. 处理node报错在node中登录mysql报错，网上查询是因为mysql 8.0以后的版本采用了新的加密方式，而node还没有跟进。 解决方式是在终端中登录mysql： 1mysql -u root -p 再输入以下命令，其中密码改成自己的： 12ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '密码';flush privileges; 执行exit。重新登陆，发现新的密码生效了。 再去...

现有业务中，存在大量复杂的判断，如弹窗逻辑，内部有一系列复杂的if判断，不同弹窗之间存在优先级，当上级弹窗符合条件时代码判断终止，否则继续向下级判断。 12345678910111213function modal (option) { // 追偿 if (isRecovery === '0' || isRecovery === '2') { ... return } // 未授权 if (...) { ... return } ...} 这里的函数过大，且不同逻辑都在一起，一方面看着不是很清晰直观，一方面不利于将来的维护，比如调整弹窗优先级等等。可以引入责任链模式进行优化。 责任链模式责任链模式：使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。 先给Function原型绑定一个after函数，用于在两个函数之间生成责任链。并定义一个标识’nextS...