JS
文章平均质量分 83
想必是渣渣宇了
soCoooooool~
展开
-
zzy-project-cli,提供多个框架的脚手架
将多个可选的框架提供给使用者选择,选中后自动下载对应模板,快捷使用。原创 2023-10-19 14:21:38 · 367 阅读 · 0 评论 -
react组件封装:可视页面内盒子渐显上浮
需求滑动到可视窗口时,自下向上进行渐显不影响内部盒子的布局结构高度自定义(延迟时间,下沉距离)效果图(gif较慢,实际上要快一些):实现思考像这种的需求,由于很多参数都是需要变量填充的,而且得保证内部盒子不会受影响,所以首先排除绝对定位来实现,而是使用 transform:translate(l/r,t/b) 来进行一个位置的变换。然后再配合opacity完成渐显。设置过渡(transition)来决定延迟时长步骤首先它得是一个组件获取到当前页面所有的目标dom判断当前视图中有原创 2021-10-15 09:13:38 · 453 阅读 · 0 评论 -
从零开始搭建一个自己的脚手架
此文为已有一个自己的框架为前提,npm角度出发搭建一个脚手架发布流程不阐述,自行发布项目地址,npm地址均在文末步骤创建项目创建脚手架命令控制台与用户交互获取创建信息远程下载模版发布创建项目目标父级文件夹:// 创建文件夹mdkir zzy-react-cli(你的脚手架名称)// 进入创建的文件夹cd zzy-react-cli// npm 初始化npm init...一路enter首先创建下文件夹,npm初始化之后对package.json进行改造{原创 2021-10-13 16:38:41 · 567 阅读 · 0 评论 -
webpack4 升级至 webpack5 过程总结
本文章记录本次从webpack4框架升级为webpack5之后衍生出来的所有更改框架主体为 zzy-javascript-frame(地址在文末) 此项目为自行开发构建,包含原 webpack4 版本 和升级后的 webpack5 版本框架技术栈为 react、react-router、HOOK、react-redux(已安装,未使用)、antd-mobile(UI框架)插件相关改动...原创 2021-09-03 10:59:06 · 7176 阅读 · 3 评论 -
react 中 swiper.js 的使用
基础yarn add swiper -Dimport { Swiper, SwiperSlide } from 'swiper/react'// 引入 Swiper 样式import 'swiper/swiper.min.css'<Swiper initialSlide={1} // 初始化显示哪一个 loop={true} // 是否循环 // 滑动触发 onSlideChange={() => console.log('slide change')} //原创 2021-08-24 18:28:12 · 1107 阅读 · 0 评论 -
跨页面拖拽DOM - transmat
亮点:跨越浏览器边界,实现数据共享本文仅简述如何快速在页面内实现,若想了解原理,请前往文末的链接!实现方式 react - HOOK拖拽方: // 引入 js文件 <script src="https://unpkg.com/transmat/lib/index.umd.js"></script> // jsx // 设置 draggable="true" 表示此DOM可进行拖拽 <div className="draggable"原创 2021-07-16 10:50:37 · 458 阅读 · 0 评论 -
bytemd 代码编辑器的安装与使用 (by react)
说明bytemd这个编辑器是字节跳动的掘金团队所使用的编辑器,今天碰巧读到了一篇解析的文章,奈何水平有限看不明白,但厉害是真的(笑),所以自己简单上手安装使用了一手,在此做做记录。Ps: 相关地址都在文末。安装安装相关内容:主要 bytemd(核心) @bytemd/react(react所需要使用的插件)插件@bytemd/plugin-gfm (支持GFM(自动链接文字,删除线,表,任务列表))@bytemd/plugin-gemoji(支持Gemoji短代码)@bytemd/原创 2021-06-11 16:26:38 · 5419 阅读 · 4 评论 -
js 常用功能代码片集合
都是自己一点点实践敲出来的,未来不定期更新。WebH5验证码倒计时按钮技术栈:react-HOOK<div className="getCode" onClick={getCode}> {codeTxt}</div>const [codeTxt, setCodeTxt] = useState('获取验证码')let timerconst getCode = () => { if(codeTxt !== '获取验证码') return s原创 2021-02-20 16:53:14 · 151 阅读 · 0 评论 -
前端进阶问题答疑汇总(mine)
这是我完成答题之后的有问题的问题的记录,如果你们也想试一下的话可以到文末 clone 一波,自己试试。var/let // 1 function a1() { console.log(name); // 显示 undefined 但不会报错,因为已经提升变量了,在运行到定义位置前都是undefined console.log(age); // 暂时性死区 ReferenceError var name = 'Arthas' let age = 21 }thi原创 2021-02-18 11:30:00 · 1025 阅读 · 2 评论