- 命令前面的代码已经涉及到几个命令了,我们把会修改节点状态的操作通过命令来调用,每调用一个命令就会保存一份当前的节点数据副本,用来回退和前进。命令类似于发布订阅者,先注册命令,然后再触发命令的执行:class Command { constructor() { // 保存命令 this.commands = {} // 保存历史副本 this.history = [... 命令前面的代码已经涉及到几个命令了,我们把会修改节点状态的操作通过命令来调用,每调用一个命令就会保存一份当前的节点数据副本,用来回退和前进。命令类似于发布订阅者,先注册命令,然后再触发命令的执行:class Command { constructor() { // 保存命令 this.commands = {} // 保存历史副本 this.history = [...
- 简介思维导图是一种常见的表达发散性思维的有效工具,市面上有非常多的工具可以用来画思维导图,有免费的也有收费的,此外也有一些可以用来帮助快速实现的JavaScript类库,如:jsMind、KityMinder。本文会完整的介绍如何从头实现一个简易的思维导图,最终成果预览:https://wanglin2.github.io/mind-map/。 技术选型这种图形类的绘制一般有两种选择:sv... 简介思维导图是一种常见的表达发散性思维的有效工具,市面上有非常多的工具可以用来画思维导图,有免费的也有收费的,此外也有一些可以用来帮助快速实现的JavaScript类库,如:jsMind、KityMinder。本文会完整的介绍如何从头实现一个简易的思维导图,最终成果预览:https://wanglin2.github.io/mind-map/。 技术选型这种图形类的绘制一般有两种选择:sv...
- 如果以前问我ES5的继承和ES6的继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么区别呢,不要走开,下文更精彩!本文会先回顾一下ES5的寄生组合式继承的实现,然后再看一下ES6的写法,最后根据Babel的编译结果来看一下到底有什么区别。 ES5:寄生组合式继承js有很多种继承... 如果以前问我ES5的继承和ES6的继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么区别呢,不要走开,下文更精彩!本文会先回顾一下ES5的寄生组合式继承的实现,然后再看一下ES6的写法,最后根据Babel的编译结果来看一下到底有什么区别。 ES5:寄生组合式继承js有很多种继承...
- 我司的APP是一个典型的混合开发APP,内嵌的都是前端页面,前端页面要做到和原生的效果相似,就避免不了调用一些原生的方法,jsBridge就是js和原生通信的桥梁,本文不讲概念性的东西,而是通过分析一下我司项目中的jsBridge源码,来从前端角度大概了解一下它是怎么实现的。 js调用方式先来看一下,js是怎么来调用某个原生方法的,首先初始化的时候会调用window.WebViewJavas... 我司的APP是一个典型的混合开发APP,内嵌的都是前端页面,前端页面要做到和原生的效果相似,就避免不了调用一些原生的方法,jsBridge就是js和原生通信的桥梁,本文不讲概念性的东西,而是通过分析一下我司项目中的jsBridge源码,来从前端角度大概了解一下它是怎么实现的。 js调用方式先来看一下,js是怎么来调用某个原生方法的,首先初始化的时候会调用window.WebViewJavas...
- 背景笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持在浏览器中运行,但是功能基本是和VSCode一样强大的,所以在笔者看来Monaco Editor等于VSCode的编辑器核心。另外笔者是一个颜控,不管做什么项目,都热衷于配套一些好看的皮肤、主题... 背景笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持在浏览器中运行,但是功能基本是和VSCode一样强大的,所以在笔者看来Monaco Editor等于VSCode的编辑器核心。另外笔者是一个颜控,不管做什么项目,都热衷于配套一些好看的皮肤、主题...
- 按需加载是所有组件库都会提供的一个基础能力,本文会分析ElementUI、Vant及varlet几个组件库的实现并进行相应实践,帮助你彻底搞懂其实现原理。 先搭个简单的组件库笔者从ElementUI里copy了两个组件:Alert和Tag,并将我们的组件库命名为XUI,当前目录结构如下:组件都放在packages目录下,每个组件都是一个单独的文件夹,最基本的结构是一个js文件和一个vue文件... 按需加载是所有组件库都会提供的一个基础能力,本文会分析ElementUI、Vant及varlet几个组件库的实现并进行相应实践,帮助你彻底搞懂其实现原理。 先搭个简单的组件库笔者从ElementUI里copy了两个组件:Alert和Tag,并将我们的组件库命名为XUI,当前目录结构如下:组件都放在packages目录下,每个组件都是一个单独的文件夹,最基本的结构是一个js文件和一个vue文件...
- 简介在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要一开始就加载,完全可以在需要的时候再去请求,这也可以减少页面首次加载的资源体积,要在Vue中使用异步组件也很简单:// AsyncComponent.vue<template> <div>我是异步组件的内容</div></template><script>export defaul... 简介在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要一开始就加载,完全可以在需要的时候再去请求,这也可以减少页面首次加载的资源体积,要在Vue中使用异步组件也很简单:// AsyncComponent.vue<template> <div>我是异步组件的内容</div></template><script>export defaul...
- 我司有一个工作台搭建产品,允许通过拖拽小部件的方式来搭建一个工作台页面,平台内置了一些常用小部件,另外也允许自行开发小部件上传使用,本文会从实践的角度来介绍其实现原理。ps.本文项目使用Vue CLI创建,所用的Vue版本为2.6.11,webpack版本为4.46.0。 创建项目首先使用Vue CLI创建一个项目,在src目录下新建一个widgets目录用来存放小部件:一个小部件由一个Vu... 我司有一个工作台搭建产品,允许通过拖拽小部件的方式来搭建一个工作台页面,平台内置了一些常用小部件,另外也允许自行开发小部件上传使用,本文会从实践的角度来介绍其实现原理。ps.本文项目使用Vue CLI创建,所用的Vue版本为2.6.11,webpack版本为4.46.0。 创建项目首先使用Vue CLI创建一个项目,在src目录下新建一个widgets目录用来存放小部件:一个小部件由一个Vu...
- 笔者早期开发了一个导航网站,一直想要重构,因为懒拖了好几年,终于,在了解到微前端大法后下了决心,因为工作上一直没有机会实践,没办法,只能用自己的网站试试,思来想去,访问量最高的也就是这个破导航网站了,于是用最快的时间完成了基本功能的重构,然后准备通过微前端来扩展网站的功能,比如天气、待办、笔记、秒表计时等等,这些功能属于附加的功能,可能会越来越多,所以不能和导航本身强耦合在一起,需要做到能独... 笔者早期开发了一个导航网站,一直想要重构,因为懒拖了好几年,终于,在了解到微前端大法后下了决心,因为工作上一直没有机会实践,没办法,只能用自己的网站试试,思来想去,访问量最高的也就是这个破导航网站了,于是用最快的时间完成了基本功能的重构,然后准备通过微前端来扩展网站的功能,比如天气、待办、笔记、秒表计时等等,这些功能属于附加的功能,可能会越来越多,所以不能和导航本身强耦合在一起,需要做到能独...
- 笔者不久前翻译了一篇介绍树布局算法的文章【译】绘制一棵漂亮的树,但是那篇文章对于算法只是大致介绍了实现的思路,属于启发式文章,虽然有完整的代码,但是要理解起来还是有一定难度,并且要基于该算法实现思维导图也需要进行一定修改,所以本文会通过图解的方式一步步的分解该算法,并最终实现一个思维导图布局。阅读本文前推荐先阅读一下译文,方便理解文中提到的一些概念。 算法图解节点类如下,请务必仔细看一下ri... 笔者不久前翻译了一篇介绍树布局算法的文章【译】绘制一棵漂亮的树,但是那篇文章对于算法只是大致介绍了实现的思路,属于启发式文章,虽然有完整的代码,但是要理解起来还是有一定难度,并且要基于该算法实现思维导图也需要进行一定修改,所以本文会通过图解的方式一步步的分解该算法,并最终实现一个思维导图布局。阅读本文前推荐先阅读一下译文,方便理解文中提到的一些概念。 算法图解节点类如下,请务必仔细看一下ri...
- 场景复现笔者最近给自己的项目CodeRun增加了一个直接在浏览器上使用ES模块的功能,之前使用一个包前需要先找到它的在线CDN地址然后引进来,就像这样:现在可以直接这样:那么这是怎么实现的呢,很简单,使用Skypack,上图中的导入语句实际上最终会变成这样:import rough from 'https://cdn.skypack.dev/roughjs'这个转换是通过babel实现的,... 场景复现笔者最近给自己的项目CodeRun增加了一个直接在浏览器上使用ES模块的功能,之前使用一个包前需要先找到它的在线CDN地址然后引进来,就像这样:现在可以直接这样:那么这是怎么实现的呢,很简单,使用Skypack,上图中的导入语句实际上最终会变成这样:import rough from 'https://cdn.skypack.dev/roughjs'这个转换是通过babel实现的,...
- 简介随着Markdown越来越流行,Markdown编辑器也越来越多,除去所见即所得的实时预览编辑器外,通常其他Markdown编辑器都会采用源代码和预览双栏显示的方式,就像这样:这种方式一般会有一个同步滚动的功能,比如在编辑区域滚动时,预览区域会随着滚动,反之亦然,方便两边对照查看,如果你用过多个平台的Markdown编辑器的话可能会发现有的平台编辑器同步滚动非常精确,比如掘金、segm... 简介随着Markdown越来越流行,Markdown编辑器也越来越多,除去所见即所得的实时预览编辑器外,通常其他Markdown编辑器都会采用源代码和预览双栏显示的方式,就像这样:这种方式一般会有一个同步滚动的功能,比如在编辑区域滚动时,预览区域会随着滚动,反之亦然,方便两边对照查看,如果你用过多个平台的Markdown编辑器的话可能会发现有的平台编辑器同步滚动非常精确,比如掘金、segm...
- 前言笔者最近闲来无事给自己做了一个在线文档平台,支持白板、思维导图、文档、电子表格、PPT、流程图、Markdown等,界面是这样的:其实现在市面上有很多这种在线文档平台,笔者为什么要自己做一个呢,且听笔者短话长说。最开始笔者只是想在开源白板项目excalidraw的基础上增加云端存储的功能,因为它的云端保存版是要收费的,况且加个数据库的增删改查也不是什么难事,做完以后想到自己做了一个开源... 前言笔者最近闲来无事给自己做了一个在线文档平台,支持白板、思维导图、文档、电子表格、PPT、流程图、Markdown等,界面是这样的:其实现在市面上有很多这种在线文档平台,笔者为什么要自己做一个呢,且听笔者短话长说。最开始笔者只是想在开源白板项目excalidraw的基础上增加云端存储的功能,因为它的云端保存版是要收费的,况且加个数据库的增删改查也不是什么难事,做完以后想到自己做了一个开源...
- 前两篇给大家介绍了一下矩形的绘制、选中、拖动、旋转、伸缩,以及放大缩小、网格模式、导出图片等功能,本文继续为各位介绍一下箭头的绘制、自由书写、文字的绘制,以及如何按比例缩放文字图片等这些需要固定长宽比例的图形、如何缩放自由书写折线这些由多个点构成的元素。 箭头的绘制箭头其实就是一根线段,只是一端存在两根成一定角度的小线段,给定两个端点的坐标即可绘制一条线段,关键是如何计算出另外两根小线段的坐... 前两篇给大家介绍了一下矩形的绘制、选中、拖动、旋转、伸缩,以及放大缩小、网格模式、导出图片等功能,本文继续为各位介绍一下箭头的绘制、自由书写、文字的绘制,以及如何按比例缩放文字图片等这些需要固定长宽比例的图形、如何缩放自由书写折线这些由多个点构成的元素。 箭头的绘制箭头其实就是一根线段,只是一端存在两根成一定角度的小线段,给定两个端点的坐标即可绘制一条线段,关键是如何计算出另外两根小线段的坐...
- 世界太小了有一天我们的小矩形说,世界这么大,它想去看看,确实,屏幕就这么大,矩形肯定早就待腻了,作为万能的画布操控者,让我们来满足它的要求。我们新增两个状态变量:scrollX、scrollY,记录画布水平和垂直方向的滚动偏移量,以垂直方向的偏移量来介绍,当鼠标滚动时,增加或减少scrollY,但是这个滚动值我们不直接应用到画布上,而是在绘制矩形的时候加上去,比如矩形用来的y是100,我们... 世界太小了有一天我们的小矩形说,世界这么大,它想去看看,确实,屏幕就这么大,矩形肯定早就待腻了,作为万能的画布操控者,让我们来满足它的要求。我们新增两个状态变量:scrollX、scrollY,记录画布水平和垂直方向的滚动偏移量,以垂直方向的偏移量来介绍,当鼠标滚动时,增加或减少scrollY,但是这个滚动值我们不直接应用到画布上,而是在绘制矩形的时候加上去,比如矩形用来的y是100,我们...
上滑加载中
推荐直播
-
香橙派AIpro的远程推理框架与实验案例
2025/07/04 周五 19:00-20:00
郝家胜 -华为开发者布道师-高校教师
AiR推理框架创新采用将模型推理与模型应用相分离的机制,把香橙派封装为AI推理黑盒服务,构建了分布式远程推理框架,并提供多种输入模态、多种输出方式以及多线程支持的高度复用框架,解决了开发板环境配置复杂上手困难、缺乏可视化体验和资源稀缺课程受限等痛点问题,真正做到开箱即用,并支持多种笔记本电脑环境、多种不同编程语言,10行代码即可体验图像分割迁移案例。
回顾中 -
鸿蒙端云一体化应用开发
2025/07/10 周四 19:00-20:00
倪红军 华为开发者布道师-高校教师
基于鸿蒙平台终端设备的应用场景越来越多、使用范围越来越广。本课程以云数据库服务为例,介绍云侧项目应用的创建、新建对象类型、新增存储区及向对象类型中添加数据对象的方法,端侧(HarmonyOS平台)一体化工程项目的创建、云数据资源的关联方法及对云侧数据的增删改查等操作方法,为开发端云一体化应用打下坚实基础。
即将直播
热门标签