haixin-fang-CSDN博客

原创 node实现比较git两个不同分支的组件差异(新增、删除、更新)及获取组件版本号，踩坑之旅！！！

大家好，我是，我给大家分享使用node比较git分支差异和踩坑过程中的解决思路，希望大家在类似的需求上面可以迎刃而解和帮助到大家。

2024-03-21 14:12:49 761 1

原创开源表单设计器颗粒度级别控制表单的显示条件原理分析

通过以上剖丝薄茧, 我相信大家对动态表单显示与隐藏的判断应该了如指掌了, 如果要阅读源码, 请移步github 地址预览。

2024-03-21 14:00:24 1210

原创可视化表单设计器首页资源体积从3.9M到1.5M, 如何做到的?

以上差不多都是把首屏不需要的资源进行拆包, 减少js体积, 不过效果也挺大的. 同时也认识到可视化分析代码体积的重要性和必要性, 希望对大家有些思考.github 地址预览。

2024-03-21 13:59:10 1271 2

原创开源表单设计器vue-form-design自动化校验实现原理

表单校验可以改善用户体验和减轻服务器的压力, 而动态配置表单校验能极大的提高动态表单的扩展性、灵活性, 满足多样性、差异化需求

2024-03-20 15:38:54 4421

原创图片编辑器中实现文件上传的三种方式和二进制流及文件头校验文件类型

最近在 vue-design-editor 开源项目中实现 psd 等多种文件格式上传解析成模板过程中, 发现搞定设计文件上传没有使用 input 实现文件上传, 所以我研究了一下相关技术, 总结了以下三种文件上传方法。文件扩展名是文件让电脑识别它的识别器，文件本身的格式是内在的，扩展名是外在的，一般情况下，他们是相互对应的，但如果扩展名被操作或修改，就不能与文件本身的格式对应，就会遇到打不开，打开乱码或无法显示，无法识别等情况。虽然文件后缀可以手动改，因此可以直接通过读取文件的二进制来判断。

2024-03-20 15:36:24 1291

原创使用 pnpm + Monorepo + rollup 实现Psd、Sketch 转 json开源库, 该json支持作为fabric.js画布模板

在本项目中，我们核心内容，是包含在packages/*, 其中是解析各个文件的核心代码psd-json.js 解析 psd 转 json 的类库sketchtojson 解析 sketch 转 json 的类库tojson.js 解析 psd、sketch 转 json 的类库开源库的开发无非就几步选择技术架构开发调试发布 npm希望大家都有自己的开源仓库github 地址: https://github.com/haixin-fang/tojson.js。

2024-01-15 18:28:45 1375

原创 sketch文件转fabric.js画布模板json的实现原理

是仿搞定设计的一款开源图片编辑器, 支持多种格式的导入,包括png、jpg、gif、mp4, 也可以一键psd转模板(后续开发)github地址预览上个开源库是基于Vue3的可视化表单设计器，拖拽式操作让你快速构建一个表单, 让表单开发简单而高效。github地址预览。

2024-01-15 18:27:55 1135

原创 psd文件转fabric.js画布模板json的实现原理

是仿搞定设计的一款开源图片编辑器, 支持多种格式的导入,包括png、jpg、gif、mp4, 也可以一键psd转模板(后续开发)github地址预览上个开源库是基于Vue3的可视化表单设计器，拖拽式操作让你快速构建一个表单, 让表单开发简单而高效。github地址预览。

2024-01-08 19:25:21 2137 4

原创如何魔改不维护的开源库来满足自己的需求

支持多点渐变渐变绑定的数据是linear-gradient字符串,不满足个性化需求,提供了渐变底层数据,可以使用gradientData数据双向绑定或者gradientDataChange方法获取支持线性或经向渐变按钮自定义展示,通过 gradientType: “linear | radial | both” 控制修复透明度输入框有小数问题文档支持事件打印,可直观看数据结构和事件方法可长期维护。

2024-01-08 19:15:01 887

原创基于fabric.js的图片编辑器, 画布背景实现原理

基于vue3 + fabric.js + vite + element-plus + typescript等技术,画布背景原理分析

2023-11-14 10:34:10 927 4

原创对动态表单编辑器指定dom绑定快捷键不生效,原来缺少了这个属性

开发低代码动态表单设计器过程中,为了方便快速对表单进行操作,使用了快捷键的方式对表单进行复制、粘贴、剪切、上移、下移等操作.而其中有两个坑需要注意

2022-08-06 11:47:17 393

原创 vue3+vite+typescript实现低代码表单编辑器

低代码表单设计器,基于monorepo架构.技术栈为vue3,vite,element-plus等.

2022-07-30 18:39:17 3867

原创 eslint报错与警告，error Unexpected mutation of “---“ prop vue/no-mutating-props，warning Delete `␍`

错误截图eslint不建议子元素通过v-model修改父元素传的props值在starfisih-h5低代码项目中需要这样的场景，所有解决方案是把该eslint规则给禁用了rules: { 'vue/no-mutating-props': 0, },

2021-09-29 20:53:04 7228

原创 2021-09-28，从零开始架构Vue3+typescript低代码平台starfish-h5出现的问题，鼠标监听与顺序拖拽冲突问题

问题1 编辑绑定事件导致拖拽组件内部不能调整顺序监听编辑器导致draggable库中内容不能通过拖拽调整顺序出现问题的dom结构[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FScKGnWK-1632810894974)(D:\MyConfiguration\haixin.fang\AppData\Roaming\Typora\typora-user-images\image-20210928142955785.png)]对顶层元素监听了鼠标down事件导致drag

2021-09-28 14:38:04 266

原创从零开始架构Vue3+typescript低代码平台starfish-h5，页面结构完成，编辑模块拖拽或监听鼠标模块移动，实现放大缩小，公共方法防多次点击

为了从零搭建一个大型的项目，自己研究学习参考开发一款属于自己的低代码平台技术栈Vue3typescriptwebpack目录结构pages 存放页面Editer 编辑组件页面styles 全局样式utils 全局公共方法_ 公共方法editMouse 编辑器鼠标拖拽和监听鼠标滚动事件更新2021/9/26 更新配置完善、路由新增、sass模块引入2021/9/27 更新编辑模块移动与拖拽和鼠标滑动联动，放大缩小编辑页面随鼠标拖拽移动// 获取用户点击编

2021-09-27 21:11:28 1021

原创 sass 两个小坑，Syntax Error: SassError: Expected newline，this.getOptions is not function

this.getOptions is not functionvue3中引用sass-loade网上查阅相关问题，是我安装的 scss-loader 版本太高，卸载安装低版本即可npm uninstall --save sass-loader // 卸载npm i -D sass-loader@8 // 安装npm uninstall --save node-sass // 卸载npm i [email protected] // 安装// 如果node-sass安装失败，也可以直接在packa

2021-09-26 21:12:27 2042

原创前端性能优化

性能优化 - 加载理解加载瀑布图基于HRA存储于重建性能信息速度指标（speed Index 页面上的内容多久能让用户看到 )4s重要测量指标TTFB（请求出去响应回来需要加载的时间）页面加载时间（所有资源加载完需要多久）首次渲染（从白屏到第一个出现内容的时间）响应交互动作的反馈时间帧率FPS（越大越好）（60fps）异步请求的完成时间（在1s之内完成，完成不了加loading动画）RAIL评估标准响应：处理事件应在50ms以内完成动画：每10ms产生一帧空闲：尽

2020-12-06 09:42:19 194

原创 JavaScript实现超大整数相加(腾讯面试题之一)

function add(a, b){ // 把字符串转为数组并倒序，且把每位数转为number型，为了让数组下标为0的值为个位，符合人的思维 var arrA = a.split('').reverse().map(i => parseInt(i)) var arrB = b.split('').reverse().map(i => parseInt(i)) // 获取最长数组的长度，为了创建一个结果数组在最长数组的长度加1 // 符合进位思想 var maxLen = arrA.

2020-07-29 21:22:09 695

原创 javascript小知识点总结

var arr = [1, 2, 3]arr = [] //这个不是真正清空arr.length = 0 // 这个才是真正清空

2020-07-19 10:40:35 180

原创 LeetCode2 电话号码的字母组合

给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。给出数字到字母的映射如下（与电话按键相同）。注意 1 不对应任何字母。示例:输入：“23”输出：[“ad”, “ae”, “af”, “bd”, “be”, “bf”, “cd”, “ce”, “cf”].说明:尽管上面的答案是按字典序排列的，但是你可以任意选择答案输出的顺序。var letterCombinations = function(digits) { let tel = ['', 1, 'abc', 'def

2020-07-18 18:06:37 146

原创重学算法1，LeetCode题目，使用javascript反转字符串中的单词

给定一个字符串，你需要反转字符串中每个单词的字符顺序，同时仍保留空格和单词的初始顺序。示例 1:输入: “Let’s take LeetCode contest”输出: “s’teL ekat edoCteeL tsetnoc”注意：在字符串中，每个单词由单个空格分隔，并且字符串中不会有任何额外的空格方法1var reverseWords = function (s) { return s.split(' ').map(item => { return item.s

2020-07-18 11:34:59 181

原创发布模块到npm应该怎么操作？及错误问题解决方案

在命令行中输入npm whoami来查询是否登录在命令行中输入npm config ls判断源是否为npm，千万不要是cnpm如果未登录输入npm adduser进行登录，根据提示进行操作，返回Logged in as fang_haixin on https://registry.npmjs.org/.使用npm publish发布包如果报如下错误，则说明包名被使用了，重新定义一个name 403 Forbidden - PUT https://registry.npmjs.org/roads

2020-07-02 14:39:19 274

原创使用npx -p @storybook/cli sb init安装失败，手把手搭建专属的storybook

1.全局安装Storybooknpm i -g storybook2.执行以下命令安装@storybook/reactnpm i --save-dev @storybook/react3.在package.json文件中{ "scripts": { "storybook": "start-storybook -p 9009 -s public", "build-storybook": "build-storybook -s public" }4.在工程根目录创建.s

2020-06-30 11:38:11 1563

原创使用sass中的映射(Map)和@each

sass中的映射相当于对象，不过是使用括号$theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark);@each 循环就是去遍

2020-06-29 10:20:44 968

原创 git warning: LF will be replaced by CRLF in package.json解决办法

在修改了package.json文件之后，使用git add . 提交代码出现以下报错：warning:LF will be replaced by CRLF in package.json.The file will have its original line endings in your working directory查询了一下资料，发现：windows中的换行符为 CRLF，而在Linux下的换行符为LF，所以在执行git add . 时，会出现warning。解决办法git

2020-06-28 09:14:55 2436 1

原创 jest测试，组件测试

Jest 可帮你实现无痛的 JavaScript 单元测试支持，由 Facebook 推出。test('test common matcher', () => { expect( 2 + 2 ).toBe(4)// 判断2+2是否等于4 expect( 2 + 3 ).not.toBe(4)})test('test to betrue or false', () => { expect(1).toBeTruthy()//判断1是否为真 expect(0).t

2020-06-27 21:33:16 755

原创使用sass中的@mixin

为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在Sass中，除了@import和@extend可以使你的代码更加具有重复利用性，@mixin指令也同样能提高你代码的重复使用率并简化你的代码。@extend指令通过继承从而简化了代码，但是它也有缺陷之处，首先是不够灵活，其次它还会将你不需要的其他地方具有相同类名的样式都继承过来。@mixin指令是另一种简化代码的方法。Mixins可以包含任意内容且可以传递参数，因此比@extend更加灵活和强大。定义Mixins通过@mixin加名称的方式就

2020-06-27 20:45:53 734

weixin_43768107的博客