前端开发指南
Gitea 在其前端中使用 Fomantic-UI （基于 jQuery ）和 Vue3 。
HTML 页面由 Go HTML Template 渲染。
源文件可以在以下目录中找到：
web_src/css/
web_src/js/
web_src/js/components/
templates/
通用准则
我们推荐使用 Google HTML/CSS Style Guide 和 Google JavaScript Style Guide 。
Gitea 特定准则：
js-
前缀。
helpers.less
中。
ctx.PageData["myModuleData"] = map[]{}
将复杂数据传递给前端，但不要将整个模型暴露给前端，以避免泄露敏感数据。
elem.disabled = true
而不是
elem.setAttribute('disabled', 'anything')
，优先使用
$el.prop('checked', var === 'yes')
而不是
$el.prop('checked', var)
。
<button class="ui button">
而不是
<div class="ui button">
。
!important
，如果无法避免，添加注释解释为什么需要它。
ce-
。
gt-
前缀（
gt-relative
），而 Gitea 自身的私有框架级 CSS 类使用
g-
前缀（
g-modal-confirm
）。
可访问性 / ARIA
在历史上，Gitea大量使用了可访问性不友好的框架 Fomantic UI。
Gitea使用一些补丁使Fomantic UI更具可访问性（参见
aria.js
和
aria.md
），
但仍然存在许多问题需要大量的工作和时间来修复。
框架使用
不建议混合使用不同的框架，这会使代码难以维护。 一个 JavaScript 模块应遵循一个主要框架，并遵循该框架的最佳实践。
推荐的实现方式：
不推荐的实现方式：
为了保持界面一致，Vue 组件可以使用 Fomantic-UI 的 CSS 类。 尽管不建议混合使用不同的框架， 但如果混合使用是必要的，并且代码设计良好且易于维护，也可以工作。
async 函数
只有当函数内部存在
await
调用或返回
Promise
时，才将函数标记为
async
。
不建议使用
async
事件监听器，这可能会导致问题。
原因是
await
后的代码在事件分发之外执行。
参考：
https://github.com/github/eslint-plugin-github/blob/main/docs/rules/async-preventdefault.md
如果一个事件监听器必须是
async
，应在任何
await
之前使用
e.preventDefault()
，
建议将其放在函数的开头。
如果我们想在非异步上下文中调用
async
函数，
建议使用
const _promise = asyncFoo()
来告诉读者
这是有意为之的，我们想调用异步函数并忽略Promise。
一些 lint 规则和 IDE 也会在未处理返回的 Promise 时发出警告。
HTML 属性和 dataset
禁止使用
dataset
，它的驼峰命名行为使得搜索属性变得困难。
然而，仍然存在一些特殊情况，因此当前的准则是：
对于旧代码：
$.data()
重构为
$.attr()
。
$.data()
将一些非字符串数据绑定到元素上，但强烈不推荐使用。
对于新代码：
node.dataset
，而应使用
node.getAttribute
。
显示/隐藏元素
v-if
和
v-show
来显示/隐藏元素。
.gt-hidden
和
showElem()/hideElem()/toggleElem()
来显示/隐藏元素，请参阅
.gt-hidden
的注释以获取更多详细信息。
Go HTML 模板中的样式和属性
建议使用以下方式：
<div class="gt-name1 gt-name2 {{if .IsFoo}}gt-foo{{end}}" {{if .IsFoo}}data-foo{{end}}></div>
<div class="gt-name1 gt-name2{{if .IsFoo}} gt-foo{{end}}"{{if .IsFoo}} data-foo{{end}}></div>
以使代码更易读。