低代码平台实现中遇到的问题收集(一) | 青训营笔记

129 阅读4分钟

这是我参与「第四届青训营」笔记创作活动的的第6天。

这是我参与「第四届青训营」笔记创作活动的的第6天。在实现低代码平台的过程中,我遇到了许多问题,在此分为两篇进行总结。第一篇是低代码平台实现的早期摸索阶段收集的问题,主要与课程对接,拿到课程提供的工具和方法,初次实践必定会遇到许多奇怪的问题,所收集的问题来自前端会接触到的各种工具和语言,如Vite、CSS、Vue等等。

HTML:draggable

这个属性是枚举类型,而不是 布尔类型 。这意味着必须显式指定值为 true 或者 false ,像 <label draggable>Example Label</label> 这样的简写是不允许的。正确的用法是 <label draggable="true">Example Label</label>。

具体效果是,像图片

具体的拖拽实现

drop通过e.dataTransfer.getData()传参

VS Code:格式化

你的格式化现在有至少三个插件:Prettier、Vetur、Formatting Toggle,最终解决是搜索tabsize发现Vetur的tabsize还是为2导致的问题,注意下插件的空格一致。

Vite:安装失败

Vuetify3.0.0官网那个过时了,直接去Vite官网复制

Vite+TS:require出问题

解决了ts里引入js的问题(链接),又有一个问题:啥啥node,请安装type/node

看这篇博客罢:blog.csdn.net/li_jia_h/ar…

友情提示:如果你的项目用的是Vite,即框架是 Vue3+TypeScript+Vite,那么require是不能被使用的,vite中并没有require这种静态资源加载方法,因此如果是想动态的加载静态资源,应该到vite的官网上去查找vite如何引入静态资源,或者看博主的另一篇问题解决方法…博文地址如下:Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源

这是另一篇博客的,不过最后的type应该写成types

这编译器有些毛病,一开始以为修好了,上面东西一写好切回去,还是报错,没解决问题,这样的事重复了三次。

  • 结果是都没解决,把lang=’ts’去掉,改回用js,解决了
  • 结果第二天打开,想用用ts写枚举类型,结果发现,“完美解决”了,能用了?

HTML:绑定自定义数据dataset

data-*全局属性构成一类称为自定义数据属性的属性,允许通过脚本在HTML和其DOM表示之间交换专有信息。所有这些自定义数据都可以通过属性设置的元素的HTMLElement 接口来访问。  HTMLElement.dataset 属性可以访问它们。

  • ``可以使用遵循xml名称生产规则的任何名称来被替换,并具有以下限制:
  • 该名称不能以xml开头,无论这些字母用于什么情况;
  • 该名称不能包含任何分号 (U+003A);
  • 该名称不能包含A至Z的大写字母。

注意,HTMLElement.dataset属性是一个StringMap,并且自定义数据属性data-test-value可以通过HTMLElement.dataset.testValue( 或者是HTMLElement.dataset["*testValue*"] )  来访问,任何破折号(U+002D) 都会被下个字母的大写替代(驼峰拼写)。

(在拖动组件时传参用到了,用:data-index=’index’,利用事件冒泡传过去的)

详见www.php.cn/manual/view…

实际使用体验:

1.png 只有div等(HTML原生标签)上有这个dataset及其他HTML tag一些东西,而这之外的,有的是Proxy对象

HTML原生的ref拿出来是完整的

而HTML原生的ref拿出来是完整的

JavaScript:双问号(??)运算符

左值为null or undefined时,返回右值

Nullish coalescing operator (??): The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand. This can be seen as a special case of the logical OR (||) operator.

TypeScript:我想给type(类型别名)里的某个选填参数,用上该type里的另一个必填参数作为默认值

  • 有一点在开始时搞错了,那就是type关键字的用途。type用于给组合类型起别名,便于再次调用,以防止出现C/C++那种非人的类型,导致没auto下不了台。
  • 要给type塞带默认值的属性,也不是不行。在另一个对象里定义所有默认值,然后带进type里解构就行,Google一搜就有:stackoverflow.com/questions/6…

所以最终的解决办法是,把默认值的逻辑放在外面。

4.png

Test1因为缺少displayName,使用了默认名item.name

Test1因为缺少displayName,

使用了默认名item.name


HTML:像’text/plain’、’text/html’这样的是什么?

见MDN:链接developer.mozilla.org/en-US/docs/…

MIME types (IANA media types)media type (also known as a Multipurpose Internet Mail Extensions or MIME type) indicates the nature and format of a document, file, or assortment of bytes. MIME types are defined and standardized in IETF's RFC 6838. The Internet Assigned Numbers Authority (IANA) is responsible for all official MIME types, and youcan find the most up-to-date and complete list at their Media Types page.

中文译名叫 MIME 类型

在dataTransfer.setData里也用到了,前面的format就是要用这一类的字符