徐小夕_社区达人页

2022年05月

• 05.06 13:51:26
  发表了文章 2022-05-06 13:51:26

  前端进阶: 如何用javascript存储函数?

  任何一家Saas企业都需要有自己的低代码平台.在可视化低代码的前端研发过程中, 发现了很多有意思的技术需求, 在解决这些需求的过程中, 往往也会给自己带来很多收获, 今天就来分享一下在研发Dooring过程中遇到的前端技术问题——javascript函数存储.

  
• 05.06 13:48:55
  发表了文章 2022-05-06 13:48:55

  前端推荐!从零开发一套基于React的加载动画库

  之前在项目开发中经常会遇到需要开发各种各样加载动画的需求, 我们可以使用已有的动画库手动改造实现(比如说基于 loaders.css 手动改造), 也可以自己独立设计, 但是这意味着需要花一定的时间调研和开发.

  
• 05.06 13:47:15
  发表了文章 2022-05-06 13:47:15

  lerna + dumi + eslint多包管理实践

  在开发大型项目时, 我们通常会遇到同一工程依赖不同组件包, 同时不同的组件包之间还会相互依赖的问题, 那么如何管理组织这些依赖包就是一个迫在眉睫的问题.

  
• 05.06 13:44:20
  发表了文章 2022-05-06 13:44:20

  5分钟教你快速掌握Github Action持续集成

  前端时间发布了一个滑动验证组件包 react-slider-vertify , 里面用到了 Github Action 作为自动化打包发布工具, 我们只需要简单的配置就能轻松的在执行 git push 的时候自动打包项目并将其一键发布到 npm 中.

  
• 05.06 13:42:33
  发表了文章 2022-05-06 13:42:33

  从零开发一款轻量级滑动验证码插件

  之前一直在分享 低代码 和 可视化 的文章，其中涉及到很多有意思的知识点和设计思想，今天继续和大家分享一款非常有趣且实用的前端实战项目——从零基于 react + canvas 实现一个滑动验证码，并将其发布到 npm 上供他人使用。当然如果大家更喜欢 vue 的开发方式，也不用担心，文中的设计思想和思路都是通用的，如果大家想学习如何封装 vue 组件并发布到 npm 上，也可以参考我之前的文章: 从零到一教你基于vue开发一个组件库。

  
• 05.06 13:37:50
  发表了文章 2022-05-06 13:37:50

  从零开发一款可视化搭建框架dooringx-lib

  去年上线的可视化编辑器 H5-dooring 至今已有一年的时间，期间有很多热心的网友和大佬提出了非常多宝贵的建议，我们也在一步步实现中，以下是几个比较典型的低代码可视化平台需求:

  
• 05.06 13:34:14
  发表了文章 2022-05-06 13:34:14

  从零开发一款图片编辑器Mitu

  我们知道，为了提高企业研发效能和对客户需求的快速响应，现在很多企业都在着手数字化转型，不仅仅是大厂(阿里，字节，腾讯，百度)在做低代码可视化这一块，很多中小企业也在做，拥有可视化低代码相关技术背景的程序员也越来受重视。

  
• 05.06 13:30:32
  发表了文章 2022-05-06 13:30:32

  学会这几招,轻松让你的github脱颖而出

  今天分享的内容我想每一位对开源感兴趣的朋友都或多或少的知道, 也是我在做开源项目中用到的一些强大的工具, 可以让我们的开源项目和 github 主页更加富有展现力, 最后会分享一个我自己的 github 主页的 readme.md, 大家可以参考学习一下. 在读完本文之后大家可以收获:

  
• 05.06 13:28:04
  发表了文章 2022-05-06 13:28:04

  这款国外开源框架, 让你轻松构建自己的页面编辑器

  前段时间我一直在设计和研究低代码搭建平台，也开源了几款可视化编辑器框架，最近在 github 上发现了一款非常强大的基于自然流布局的页面搭建框架 GrapesJS，接下来我就带大家摸索一下这款框架。

  
• 05.06 13:23:53
  发表了文章 2022-05-06 13:23:53

  如何解决前端多语言选型和实现难题？

  多语言(i18n)支持 是企业项目走向国际化的必经之路，也是前端工程师最佳实践的内容之一。不过，多语言框架众多，会带来一系列选型问题，相信大家在平时对项目进行多语言支持时，也往往会遇到如下几个问题：

  
• 05.06 13:16:15
  发表了文章 2022-05-06 13:16:15

  如何设计可视化搭建平台的组件商店？

  之前一直在做 lowcode 和可视化相关的项目，也围绕可视化技术输出了一系列技术文章，今天我继续和大家来聊聊可视化平台相关的话题——组件商店。这个需求其实很早在我开源 H5-Dooring 之后就有网友提出过 issue

  
• 05.06 13:03:23
  发表了文章 2022-05-06 13:03:23

  从零设计可视化大屏搭建引擎

  几个月前我写了一篇关于从零开发一款可视化大屏制作平台 的文章， 简单概述了一下可视化大屏搭建平台的一些设计思路和效果演示， 这篇文章我会就 如何设计可视化大屏搭建引擎 这一主题， 详细介绍一下实现原理。

  
• 05.06 12:57:38
  发表了文章 2022-05-06 12:57:38

  从零使用electron搭建桌面端可视化编辑器Dooring

  之前有朋友希望我基于H5-Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooring-electron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooring-electron的github地址供大家参考学习. 如果大家有更好的方案, 可以随时和我讨论.

  
• 05.06 00:06:20
  发表了文章 2022-05-06 00:06:20

  (低代码)可视化搭建平台数据源设计剖析

  低代码平台属于APaaS（应用平台即服务），其解决的是企业内部应用协调和人效成本的问题. 随着计算机技术诸如云服务等的发展, 传统软件服务已无法满足数字化浪潮的压力,

  
• 05.06 00:03:44
  发表了文章 2022-05-06 00:03:44

  canvas图像识取技术以及智能化设计的思考

  笔者最近一直在研究 前端可视化 和 搭建化 的技术, 最近也遇到一个非常有意思的课题, 就是基于设计稿自动提取图片信息, 来智能化出码. 当然本文并不会介绍很多晦涩难懂的技术概念, 我会从几个实际应用场景出发, 介绍如何通过canvas图像识取技术来实现一些有意思的功能. 最后会总结一些对智能化的思考以及对低代码方向的规划, 希望能对各位有所启发.

  
• 05.06 00:00:48
  发表了文章 2022-05-06 00:00:48

  分享10款2021年国外顶尖的lowcode开发平台

  笔者近期调研了几家国外的lowcode平台, 也参考了很多资料, 确实收获很多, 接下来就来给大家介绍一下国外比较有名的lowcode开发平台.

  
• 05.05 23:58:02
  发表了文章 2022-05-05 23:58:02

  这些经典的前端基础算法题, 你会做几道?

  之前因为工作原因接触了很多有意思的算法知识,为了巩固大家的算法基础和编程能力,笔者总结了8道算法题, 供大家学习参考. 接下来我们来看看题目.

  
• 05.05 23:54:50
  发表了文章 2022-05-05 23:54:50

  前端进阶：细数2年内我做的15个开源项目

  从19年到21年,笔者利用空余时间陆陆续续做了一些开源项目, 大部分开源项目都立足于企业实际业务需求, 所以笔者觉得有必要做一个总结和复盘,在复盘的过程中希望也能对大家有所帮助.今后笔者的开源项目都会放在这篇文章中,如果想学习的可以多交流.

  
• 05.05 23:52:12
  发表了文章 2022-05-05 23:52:12

  Node-RED, 一款基于流的低代码编程工具

  笔者最近在逛github社区的时候发现一个非常有意思的工具—— Node-RED, 官网非常简洁, 接下来我就来给大家介绍一下该工具和使用方法. Node-RED 是一种编程工具，用于以新颖有趣的方式将硬件设备，API和在线服务连接在一起。 它提供了一个基于浏览器的编辑器，使得我们可以轻松地使用编辑面板中的各种节点将流连接在一起，只需单击即可将其部署到其运行时。

  
• 05.05 23:50:18
  发表了文章 2022-05-05 23:50:18

  从零搭建一款PC页面编辑器PC-Dooring

  没有太多时间做PC端搭建化项目, 好在搭建平台很多原理都是通用的, 所以早在去年我就开发好了面向PC端的编辑器PC-Dooring, 虽然在设计上还有些不足(在后面的内容中会提到) , 但是基本模型已经实现, 接下来就和大家一起分享一下具体的实现.

  
• 05.05 23:47:43
  发表了文章 2022-05-05 23:47:43

  从零开发一款可视化大屏制作平台

  几个月前开源的H5页面制作平台H5-Dooring 收到了很多热心的反馈和交流, 顺着笔者之前的规划, 我们又做了一款可视化大屏编辑器V6.Dooring. 接下来笔者就来带大家一起看看我们的方案设计和技术实现.

  
• 05.05 23:44:02
  发表了文章 2022-05-05 23:44:02

  从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)

  最近几年涌现出了很多技术博客和技术社区, 也有很多技术同仁开始打造自己的博客, 我们可以把自己的博客同步到不同的技术平台, 但是随着技术平台的增多, 我们文章同步所花费的时间会越来越多, 那么有没有一个工具能快速的将博客发布到不同的平台呢? 或者有没有一个工具, 可以把html直接转化为技术平台能够识别的“语言”直接发布呢? 我们都知道程序员最爱的写博客的“语言”就是makedown, 并且目前大部分的技术社区都支持makedown语法, 所以说只要有makedown, 我们就能快速的同步到不同的技术平台.

  
• 05.05 23:32:23
  发表了文章 2022-05-05 23:32:23

  可视化搭建平台的参考网格线设计

  最近一工作一直很忙, H5-Dooring也在持续更新迭代中, 接下来笔者将带大家介绍一下H5-Dooring的新功能, 并介绍网格参考线的实现方案, 内容很短, 实现方案也很简单, 欢迎大家提出更好的方案和实现思路.

  
• 05.05 23:24:31
  发表了文章 2022-05-05 23:24:31

  如何使用nodejs自动发送邮件?

  之前用Nodejs做了很多服务端模块, 最近抽空复盘一下, 接下来笔者将介绍如何使用Nodejs来自动向用户发送邮件. 笔者将详细介绍自动发送邮箱的实现方案, 以及通过一个实际的案例来带大家掌握使用nodejs自动发送邮件, 最后会介绍一些实际的应用场景, 来加深对该方案的理解, 达到学以致用的目的.

  
• 05.05 23:22:12
  发表了文章 2022-05-05 23:22:12

  轻松教你使用纯css实现H5-Doorin编辑器中的水波动画

  css3给我们前端开发带来了很便利, 我们可以使用css3 的新特性实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5-Dooring编辑器 中的水波动画.

  
• 05.05 23:19:00
  发表了文章 2022-05-05 23:19:00

  做了N+1个企业项目之后, 我总结了这些React必备插件

  为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件.

  
• 05.05 23:17:13
  发表了文章 2022-05-05 23:17:13

  看了10款文档编辑器之后, 我决定...

  作为一名技术工作者, 我们经常会遇到编写技术文档, 技术分享等需求, 网上也有很多现成的文档管理工具, 出于好奇心, 我拉着朋友一起实现了一个, 用来自给自足. 接下来就来介绍一下轻量级且灵活方便的文档编辑工具—— powerNice.

  
• 05.05 23:14:46
  发表了文章 2022-05-05 23:14:46

  2021如何让你的Table组件无限可能

  在管理后台中我们会使用大量的表格表单组件, 导入导出各种报表, 有些场景还需要对报表数据进行可视化分析, 动态生成可视化图表, 笔者将基于以上场景, 总结一些实用的 Table 组件开发技巧, 让前端开发不再吃力.

  
• 05.05 23:09:44
  发表了文章 2022-05-05 23:09:44

  轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报

  最近笔者专注于研究可视化搭建平台的解决方案, 分析了很多拖拽组件和页面动态化技术, 也在 H5-Dooring 项目中做了很多技术实现, 包括:

  
• 05.05 23:06:15
  发表了文章 2022-05-05 23:06:15

  基于自然流布局的可视化拖拽搭建平台设计方案

  LowCode 是高效、高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向——基于自然流布局的可视化搭建平台.

  
• 05.05 23:04:14
  发表了文章 2022-05-05 23:04:14

  从零打造一款轻量且天然支持SSR的CMS系统——simpleCMS

  2年前笔者开发了一款基于 nodejs 的全栈开源 cms 系统 XPCMS, 主要是为了解决技术开发者搭建自身内容平台的局限以及降低使用成本, 虽然1.0版本已经完成, 但是从整体部署和二次开发的便捷度上还是存在很多缺点, 更加适合有一定技术能力的开发者来使用. 为了解决 XPCMS 的不足, 去年笔者和朋友特地开发了一款轻量便捷的内容管理系统——simpleCMS, 目前已在 github 上开源, 且能同时适配PC端和移动端.

  
• 05.05 23:01:08
  发表了文章 2022-05-05 23:01:08

  可视化搭建平台的地图组件和日历组件方案选型

  可视化搭建平台除了需要为用户提供简单便捷的操作方式之外, 还需要提供丰富的组件支持和组件扩展, 这样才能满足更多用户的业务需求.

  
• 05.05 22:58:05
  发表了文章 2022-05-05 22:58:05

  坚持写一年的技术博客, 我收获了这些 | 掘金年度征文

  在技术平台写文章差不多一年了, 累计写了150多篇, 基本涵盖了前端的每一个角落, 也是笔者4年工作中的实践和学习积累. 中间踩过很多坑, 也从中积累了很多解决问题的方法和思路. 虽然牺牲了很多业余时间, 但也给我带来了很多收获. 笔者将利用2020年的最后几天, 好好回顾一下这一年的学习和坚持写作的收获.

  
• 05.05 22:55:00
  发表了文章 2022-05-05 22:55:00

  巧用css圆角实现有点意思的加载动画

  作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画.

  
• 05.05 22:50:44
  发表了文章 2022-05-05 22:50:44

  如何利用Qrcode制作一个二维码生成器?

  玲琅满目的二维码在我们的都市和朋友圈中随处可见, 很多平台都提供了定制二维码的服务, 那么作为一名程序员, 我们如何自己实现一个简单的二维码生成器呢? 接下来笔者就来带大家一起利用Qrcode实现一个二维码生成器.

  
• 05.05 22:48:17
  发表了文章 2022-05-05 22:48:17

  复盘node项目中遇到的13+常见问题和解决方案

  笔者之前陆陆续续接手过几个nodejs项目, 也参与过几个有点意思的nodejs开源项目, 最近把其中遇到的一些问题和解决方案做一个梳理, 避免大家继续踩坑. 话不多说我们开始吧~

  
• 05.05 15:52:47
  发表了文章 2022-05-05 15:52:47

  如何搭积木式的快速开发H5页面?

  2个月前开源的H5编辑器 H5-Dooring 目前已经成功迭代到1.0版本, 从最开始的基本的页面生成框架到现在的支持更丰富的组件资源,交互能力和数据追踪能力, 期间做了很多的设计和迭代,也收获了很多网友的反馈和启发, 也有很多志同道合的朋友加入进来一起让 H5-Dooring 变的更好更强大, 在此特意分享一下我们最新的版本和功能实现.

  
• 05.05 15:48:51
  发表了文章 2022-05-05 15:48:51

  手撸一个在线css三角形生成器

  为了提高 前端开发 效率, 笔者先后写了上百个前端工具, 有些是给公司内部使用的, 有些单纯是因为自己太“懒”, 不想写代码, 所以才“被迫”做的. 接下来介绍的一款工具——css三角形生成器也是因为之前想要解放设计师的生产力, 自己又懒得切图或者写css代码, 所以想来想去还是自己做一个能自动生成css三角形代码的工具吧.

  
• 05.05 15:45:27
  发表了文章 2022-05-05 15:45:27

  如何快速将你的应用封装成js-sdk?

  本文将介绍前端如何封装一款 js-sdk 以及如何快速将你的应用变成 js-sdk , 我们将总结一些封装 js-sdk 的原则和案例, 来帮大家更快的上手 sdk 开发. 其中笔者还会以H5-Dooring 为例子, 介绍如何将 H5 页面编辑器封装成一个 js-sdk 供他人使用.

  
• 05.05 15:39:42
  发表了文章 2022-05-05 15:39:42

  前端高效开发必备的 js 库梳理

  之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结. 首先我觉得在学习任何知识之前必须要有一个明确的学习目标, 知道自己为什么要学它, 而不是看网上说的一股脑的给你灌输各种知识, 让你学习各种库, 从而不断的制造大家的焦虑感.

  
• 05.05 15:37:08
  发表了文章 2022-05-05 15:37:08

  前端如何实现一键截图功能?

  网页截图功能目前也是非常常见的需求, 尤其是在在线教育领域. 我们朋友圈的微信海报, 活动海报等, 一般都是运营/市场人员通过设计工具设计而成, 但是如何更好的映射到自己的服务体系里面, 比如H5页面中, 植入更多信息收集, 交互能力. 这一块的应用探索, 页面截图是一个非常好的解决方案.

  
• 05.05 15:35:24
  发表了文章 2022-05-05 15:35:24

  有点意思的gif动图生成平台开发实战(二)

  笔者之前利于业余时间开发了一个gif动图生成平台, 具体开发背景我也在上一篇文章手把手教你撸一个能生成抖音风格动图的gif制作平台中介绍过了, 我们今天继续来实现该平台, gif动图平台的实现方式比较将完全用前端的手段来实现, 所以大家在接下来的内容中会发现很多有意思的前端插件. 接下来我们看看主要要实现的功能点:

  
• 05.05 15:27:31
  发表了文章 2022-05-05 15:27:31

  手把手教你撸一个能生成抖音风格动图的gif制作平台

  又到了一周一次的周总结, 笔者基于之前的开源项目 blink , 开发了一款能在线配置故障艺术, 并一键生成gif动图的平台, 这里暂时取名为QT. 接下来笔者将复盘一下该可视化平台的实现步骤以及功能点, 让大家都能做自己的Gif动图生成平台. 在线访问地址: 趣图——一款轻量级生成抖音风格动效的在线工具

  
• 05.05 15:23:39
  发表了文章 2022-05-05 15:23:39

  低代码开发平台核心功能设计——组件自定义交互实现

  笔者最近一直在研究Lowcode(低代码)平台, 也做了非常多的实践, 对于页面可视化搭建平台有了基本的研发方向和解决方案, 后期会陆续分享我对低代码平台的一些理解和解决方案, 并在企业应用层做一些探索.

  
• 05.05 15:21:05
  发表了文章 2022-05-05 15:21:05

  深入浅出node中间件原理

  中间件是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的。

  
• 05.05 15:18:03
  发表了文章 2022-05-05 15:18:03

  如何实现后台管理系统的权限路由和权限菜单

  本文是继 前端如何一键生成多维度数据可视化分析报表 实战的最后一篇文章, 主要介绍如何实现后台管理系统的权限路由和权限菜单. 希望通过这3篇文章的复盘和实战, 可以让大家开发企业应用的时候更加游刃有余.

  
• 05.05 15:15:55
  发表了文章 2022-05-05 15:15:55

  前端如何一键生成多维度数据可视化分析报表

  本文是基于上一篇文章介绍**H5编辑器 后台管理系统实战的第二篇文章, 也是比较重要的一篇文章, 主要介绍后台系统中如何基于已有数据表格自动生成多维度可视化报表**. 笔者之所以会花3篇文章去介绍这一块的内容, 是因为目前B端产品很多都有类似的需求, 比如导入导出excel, 在线编辑表格(table),基于表格数据生成可视化图表, 用户权限路由和权限菜单设计等. 这里笔者总结为如下3点核心知识:

  
• 05.05 15:06:25
  发表了文章 2022-05-05 15:06:25

  antd popover定位不准闪跳解决+自己实现popover库

  我在写H5-dooring时，发现我们用的popover会发生闪跳，而且第一次闪跳就算了，每次还会有另一个方向的闪跳。 于是我大概百度了下，基本都说需要给固定宽高即可，让后试了下发现没用，就算触发组件和弹窗元素都给了宽高，也一样闪跳。由于antd的popover底层的实现是套其他第三方的库，第三方库又用到了其他的前端组件, 所以锁心自己实现一个。

  
• 05.05 15:04:18
  发表了文章 2022-05-05 15:04:18

  如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)

  最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解决方案. 笔者将分成3篇文章来复盘, 主要解决场景如下

  
• 05.05 14:59:03
  发表了文章 2022-05-05 14:59:03

  如何设计H5编辑器中的模版库并实现自动生成封面图

  HTML5是HTML最新的修订版本，设计目的是为了在移动设备上支持多媒体, 以便为我们呈现更丰富的页面表现. HTML5 还是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。因此衍生出不同场景下的应用, 比如移动端官网, H5活动页, H5营销页等. 随着互联网对的发展, 在大数据领域中的移动端BI模型, 也可以用H5来承载.