Frontend FAQ

Frontend FAQ

  1. 您谈论前端常见问题解答. 请在适当的情况下共享指向它的链接，以便在内容过时时引起更多关注.
  2. 保持简短和简单. 只要答案需要两个以上的句子，它就不属于这里.
  3. 尽可能提供背景. 链接到相关的源代码，问题/史诗或其他文档有助于理解答案.
  4. 如果您看到某些内容，请执行某些操作. 看到后，请删除或更新任何过时的内容.

FAQ

Check the ‘page’ data attribute

最简单的方法是在相关页面上的浏览器中键入以下内容：

在此处找到的源代码 .

Rails routes

The rake routes command can be used to list all the routes available in the application, piping the output into grep, we can perform a search through the list of available routes. The output includes the request types available, route parameters and the relevant controller.

2. modal_copy_button vs clipboard_button

该使用copy_to_clipboard.js行为，这是在页面加载初始化，所以如果有不会在页面加载存在（如那些在基于 VUE 剪贴板按钮GlModal ），他们没有相关的点击处理程序与剪贴板包.

添加了modal_copy_button ，用于管理特定于该组件实例的的实例，这意味着剪贴板事件在安装时绑定并在按钮按下时销毁，从而减轻了上述问题. 它还具有绑定到可用的特定容器或模式 ID 的功能，以与我们的 GlModal 创建的焦点陷阱一起使用.

该组件尚未符合我们设计系统中定义的正确样式. 引用此组件的外观时，请参考 Design System 文档.

例如，在撰写本文时，可以针对所有表单组件观察到这种类型的警告. 但是，这并不意味着不应使用该组件.

只要有合适的组件，GitLab 都会要求使用<gl-*>组件. 它使代码库变得统一，并且将来可以更轻松地进行维护/重构.

确保在 MR 审查中审查不合格组件的使用. 提出后续问题，并将其附加到” 睡衣设计系统组件”史诗中的组件实现 .

4. My submit form button becomes disabled after submitting

如果在表单内使用提交按钮，并且在表单元素上附加了onSubmit事件侦听器，则将在提交表单时向提交按钮添加一个disabled类选择器. 为避免这种情况，请将js-no-auto-disable类添加到按钮.

Example:

另外，请尽量不要在前端中对路径进行硬编码，而应从后端接收它们（请参阅下一节）. 引用后端导轨路径时，请避免使用*_url ，而应使用 .

Example:

6. How should the Frontend reference Backend paths?

我们不希望通过硬编码路径添加额外的耦合. 如果可能，请将这些路径作为数据属性添加到 JavaScript 中引用的 DOM 元素.

Example:

  1. 停止 webpack： gdk stop webpack .
  2. 打开gitlab.yaml位于您gitlab安装文件夹，向下滚动到webpack部分和变化dev_server到enabled: false .
  3. Run yarn webpack-prod && gdk restart rails-web.

生产构建需要几分钟才能完成； 仅在再次执行上面的第 3 项后，此时才会显示任何代码更改. 要返回正常的开发模式：

  1. 打开gitlab.yaml位于您gitlab安装文件夹，向下滚动到webpack部分和变回dev_server到enabled: true .
  2. yarn clean以除去生产资产并释放一些空间（可选）.
  3. 重新启动 GDK： gdk-restart rails-web .