![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端知识
文章平均质量分 84
航航
学习是一种生活方式
展开
-
react-dnd 拖拽能力教程
一个完整的拖拽流程分为两部分:拖动+放置让一个元素支持拖动是一件非常容易做到的事情,只需要在对应的 dom 节点增加 `draggable="true"` 的属性即可。原创 2022-12-12 13:21:48 · 3326 阅读 · 0 评论 -
React-Router v6 使用教学
React-Router V6 出版一段时间,前端的小伙伴们也开始向着 v6 版本进行升级。v5 和 v6 的版本 api 有些差异。对此写一篇文档整理了下 v6 的使用教学,文章已实际使用为主。原创 2022-04-20 20:40:27 · 2870 阅读 · 0 评论 -
@alitajs/dform 移动端表单库 3.0 强势来袭
@alitajs/dform 移动端表单库 3.0 强势来袭一、回顾 2.0前言为了解决从事移动端 h5 开发的小伙伴被长表单支配的恐惧,我们在 2020 年年初推出了 dform 的第一个版本。经过一年多的时间的沉淀,在公司内部数十个项目中得到锤炼,不断的完善优化。升级了稳定的 2.0 版本。基础功能介绍我们借鉴 antd@4 的 Form 组件,对底层表单库进行二次封装。补充了 radio 单选、checkbox 多选、rangeDatePicker 时间区间选择器 等 antd-mob原创 2021-08-21 11:12:47 · 618 阅读 · 0 评论 -
命令行创建模版页面教程
命令行创建模版页面教程一、前言在日常的业务开发中,我们经常会在不同的项目中,甚至是相同的项目中开发相似的页面。那小伙伴的基本操作肯定是去翻找旧项目,然后 copy 代码过来改造(浪费时间)。今天我们就来学习个项目,实现通过一行命令帮你在项目中创建特定的页面代码。二、准备工作我们需要将项目推上 npm,才能实现该功能,所以没有 npm 账号的小伙伴提前去创建个 npm 账号。并给这个项目创建一个 git 仓库。创建一个 git 仓库在仓库中执行 npm init 给项目一个初始化的 pack原创 2021-08-19 20:42:21 · 272 阅读 · 0 评论 -
React Context基本用法
React Context基本用法Context简介与前言简单的理解简单的逻辑最简代码演示`./theme.ts``index.tsx`(页面)`BigComp.tsx` // 外层组件`SmallComp.tsx` // 内层组件API(参考[官网文档](https://react.docschina.org/docs/context.html#when-to-use-context))createContextProviderConsumerContext简介与前言Context 提供了一种在组件原创 2021-03-05 10:53:49 · 407 阅读 · 1 评论 -
使用 node 和 socket 实现在线聊天室
使用 node 和 socket 实现在线聊天室使用 node 和 socket 实现在线聊天室简介一、静态页面二、建立连接nodeweb三、发送、接收消息nodeweb四、多人聊天室nodeweb五、番外功能1、loading 状态2、增加 `enter` 监听事件[项目 git 地址](https://github.com/hang1017/socketDemo)编写不易,给个star吧~使用 node 和 socket 实现在线聊天室简介在 h5 端通过 socket 实现在线聊天室的功能,服务原创 2021-05-02 22:41:59 · 307 阅读 · 0 评论 -
Array.from()简介
Array.from()Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。什么是类数组对象:具有 length 属性的对象。若 Array.from 参数为类数组对象将类数组对象转换成真正的数组必须具备一下条件:该类数组对象必须具有 length 属性。如果没有,则会返回一个空数组。该类数组的对象的 key 必须为数值型或者字符串型的数字。数组元素均为 undefind例子:let array = { 0: 'tom', 1: '65',原创 2021-03-31 11:13:50 · 798 阅读 · 0 评论 -
高德地图基础使用教程(附demo)
高德地图基础使用教程简介带大家一步步实现地图显示特定位置,或定位到当前位置。并且拖拽地图界面能够查询出指定位置周边的信息。通过关键字搜索周边信息。本教程适合初学者。demo git 地址一、获取使用高德api的key打开高德开发平台,登录后,鼠标覆盖右上角头像,点击应用管理进入到我的应用界面。点击右上角创建新应用。为该应用添加一个 key。二、在项目中引入地图API在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key;<script原创 2021-03-31 11:08:06 · 4635 阅读 · 4 评论 -
强大的移动端表单开发方案 @alitajs/dform(附视频)
强大的移动端表单开发方案 @alitajs/dform强大的移动端表单开发方案 @alitajs/dform一、开发设想二、基础使用三、提效点1、`picker` 组件:2、一行代码配置样式3、不敲一行代码帮你配置 `data` 的JSON数据强大的移动端表单开发方案 @alitajs/dform一、开发设想从事移动端 H5 开发的小伙伴有没有经历过被长表单支配的恐惧?是一个个表单项纯手写实现的吗?那一个页面你可能要做一天,欲哭无泪,心力憔悴。为什么表单实现这么难?是使用 antd-mobile原创 2020-07-02 20:10:42 · 935 阅读 · 5 评论 -
H5 分包实现首屏加载时间优化
H5 分包实现首屏加载时间优化H5 分包实现首屏加载时间优化一、为什么首屏加载需要优化二、分析产物三、分包实现四、解析 splitChunksH5 分包实现首屏加载时间优化一、为什么首屏加载需要优化因为做了很多事情:初始化 webView -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js/css 资源 -> dom 渲染 -> 解析 JS 执行 -> JS 请求数据 -> 解析渲染 -> 下载渲染图片在 dom渲染 之前用户原创 2020-06-28 16:41:40 · 1198 阅读 · 0 评论 -
React ref 多场景使用教程(附demo)
React ref 多场景使用教程React ref 多场景使用教程一、父组件: class, 子组件: class1、子组件不使用 `dva` 情况2、子组件使用 `dva` 情况二、父组件: hook, 子组件: hook三、父组件: class, 子组件: hook四、父组件: hook, 子组件: classReact ref 多场景使用教程React16.8 后,我们就不断的拥抱 Hook 开发,在组件化开发已经成为我们必不可缺的开发方式时,ref 的使用就显得尤为重要。但是 class 开原创 2020-06-20 14:48:58 · 731 阅读 · 2 评论 -
图片添加水印、文件转图片、图片转文件、html2canvas截屏功能
图片添加水印、文件转图片、图片转文件、html2canvas截屏功能工作中遇到了关于图片的处理方法,做个记录分享给小伙伴们。一、图片添加水印(包括图片压缩)做法:将图片转为 canvas对图片进行内容填充将图片转化成 base64 的格式下面先提供代码,并对代码做进一步的讲解:picWaterMark = ({ // 1 url = '', textAlign = 'l...原创 2020-04-25 10:42:16 · 641 阅读 · 0 评论 -
详解执行上下文、执行栈、this 指向
详解执行上下文、执行栈、this 指向本文目录:├── 一、什么是执行上下文 ├── 二、执行上下文的类型(3种)│ ├── 1、全局执行上下文│ ├── 2、函数执行上下文│ ├── 3、Eval 全局执行上下文(不讨论)├── 三、执行上下文的生命周期(3个阶段)│ ├── 1、创建阶段│ │ ├── (1)、生成变量对象│ │ ├── (2)、建立...原创 2020-03-16 16:07:40 · 209 阅读 · 0 评论 -
使用 nodeJs 实现 js/ts 文件翻译功能
使用 nodeJs 实现 js/ts 文件翻译功能一、搭建环境二、读文件三、列出文中的所有中文内容四、替换中文五、实现翻译功能关于实现翻译(已中翻英为例)的功能,我们可以分成几个步骤:读文件找出文中的中文将文中的出现的中文词组或者句子组成一哥数组调用公共的翻译接口进行异步翻译将翻译出来的英文回填会文件中一、搭建环境打开终端,键入:node -v如果出现 -bash: node...原创 2020-01-09 15:03:40 · 3238 阅读 · 0 评论 -
Redux 源码共读 -- 1
Redux 源码共读-1Redux 源码共读-1一、Utils1、actionTypes.ts2、warning.ts3、isPlainObject.ts二、src1、index.ts2、createStore.ts4个判断其一:4个判断其二:4个判断其三:4个判断其四:5个赋值:6个方法其一:getState()6个方法其二:dispatch(action)6个方法其三:ensureCanMut...原创 2019-11-10 16:19:27 · 136 阅读 · 0 评论 -
Redux 源码共读 -- 2
Redux 源码共读-2Redux 源码共读-23、combineReducers.ts3个方法其一:getUndefinedStateErrorMessage()3个方法其二:assertReducerShape(reducers)3个方法其三:getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpect...原创 2019-11-10 16:09:36 · 159 阅读 · 0 评论 -
Redux 入门级教学文档
Redux 入门级教学文档Redux 入门级教程文档一、概念说明1、什么是 Redux, 为什么要使用 Redux2、为什么要使用 Redux二、环境搭建1、安装2、概念简单说明3、目录结构三、搭建数据源四、编写页面1、创建仓库2、展示页面3、修改仓库数据五、编写 action六、中间件-异步1、代码操作(第2点是知识点讲解,小伙伴们要看哈)2、知识点3、补充记得双击么么哒~Redux 入门级教...原创 2019-11-02 17:33:40 · 297 阅读 · 0 评论 -
VS code 插件开发3 --- 装饰数字(官网demo) 教程文档
VS code 插件开发3 --- 装饰数字-官网demo 教程文档一、效果展示二、安装三、创建功能文件框架四、专注装饰数字核心代码五、自动执行装饰数字插件六、注意事项!!!七、控制插件执行速度记得双鸡么么哒~一、效果展示小伙伴们,今天我们来学习一下如果装饰我们想要的内容。如果数字长度3展示一种样式,长度小于3的话展示另一种样式。二、安装关于安装,我在VS Code插件开发教程–树视图+...原创 2019-10-15 12:52:23 · 1000 阅读 · 1 评论 -
VS Code插件开发教程2 -- StatusBar 状态栏
VS Code插件开发教程2 -- StatusBar 状态栏一、安装二、在状态栏上展示文字三、状态栏上显示文本的总字数四、使该插件自动化,增加监听事件五、来个小tip(弹框显示选中的文字)六、再来个小tip(显示选中多少行文本)记得双鸡么么哒~一、安装关于安装,我在VS Code插件开发教程–树视图+网页视图这里的开头有详细的介绍。如果是刚入门的小伙伴们请先花费5分钟的时间来这里看下如何安装...原创 2019-10-13 17:08:56 · 4204 阅读 · 0 评论 -
Dva.js 入门级教学文档-1
Dva.js 入门级教学文档-1简介一、介绍1、什么是 dva2、dva 的作用是什么二、环境搭建和使用1、环境搭建2、创建项目3、使用 antd三、全局架构1、index.js(重点)(1)、创建 dva 实例(2)、装载插件(3)、注册 Model(4)、配置路由(5)、启动应用2、router.js使用解释一下3、components 包4、routes 包5、services 包6、uti...原创 2019-05-12 21:51:01 · 2964 阅读 · 2 评论 -
Dva.js 入门级教学文档-2
Dva.js 入门级教学文档-2简介四、Model 包下文件架构(重点)1、namespace2、state3、reducers(1)、save(2)、state(3)、action(4)、payload(5)、return4、effects(1)、*(2)、query(3)、payload(4)、call(5)、put(6)、select(5)、subscription五、connect 连接 ...原创 2019-05-12 21:58:49 · 2061 阅读 · 0 评论 -
VS Code插件开发教程--树视图+网页视图--完整demo+图--1
VS Code插件开发教程--树视图+网页视图完整demo+图--1简介一、安装二、初识 VS code 插件 demo三、treeView: 重识 package.json简介你好!本人为 2019.7 毕业的应届毕业生,目前从事前端工程师的职业。对知识充满渴望。如果本文中有什么错误的地方,还请各位指正。谢谢。本文定位为初次接触vs code插件开发的小伙伴,开始有详细的教程如何一步一步...原创 2019-08-10 11:45:13 · 8492 阅读 · 2 评论 -
VS Code插件开发教程--树视图+网页视图--完整demo+图--2
VS Code插件开发教程--树视图+网页视图完整demo+图--2简介四、treeView: 在视图中显示想要的 item五、创建 webView 并嵌入百度页面简介你好!本人为 2019.7 毕业的应届毕业生,目前从事前端工程师的职业。对知识充满渴望。如果本文中有什么错误的地方,还请各位指正。谢谢。本文定位为初次接触vs code插件开发的小伙伴,开始有详细的教程如何一步一步的运用基础...原创 2019-08-10 11:55:38 · 7093 阅读 · 9 评论 -
VS Code插件开发教程--树视图+网页视图--完整demo+图--3
VS Code插件开发教程--树视图+网页视图完整demo+图--3简介六、不同 item 显示不同的页面(数据传递: VS code -> html)七、iframe 页面的数据传递指 VS code(iframe -> html -> vscode)简介你好!本人为 2019.7 毕业的应届毕业生,目前从事前端工程师的职业。对知识充满渴望。如果本文中有什么错误的地方,还...原创 2019-08-10 12:02:34 · 3491 阅读 · 2 评论 -
基于 React 的登录页获取验证码流程
基于 React 的登录页获取验证码流程简介登录页全流程教学文档介绍画出静态页面流程一、验证码点击事件二、`model` 层异步操作1、`state` 初始化数据2、`effects` 调取接口3、`reducers` 同步数据三、page 页面操作四、model 层修改 `verificationBtn` 标识结语简介你好!本人为 2019.7 毕业的应届毕业生,目前从事前端工程师的职业。...原创 2019-05-24 16:43:44 · 5894 阅读 · 4 评论