DeepSeek等AI人工智能工具如何改变前端 Web 开发？

近年来，人工智能 (AI) 的快速发展已引起 IT 行业（尤其是 Web 开发）的根本性变化。AI 技术已变得如此普及，以至于它们现在既是许多开发人员的目的，也是手段。换句话说，开发团队经常使用 AI 驱动的工具来促进编程的各个方面，同时收到在 Web 项目中实现 AI 功能的请求。

在本文中，我们将重点关注 AI 作为开发过程的辅助，强调这一趋势的优缺点，并分享 DHTMLX 与 AI 的经验。

DHTMLX Suite 最新版下载

人工智能成为 Web 开发的新驱动力

AI 技术已经存在了很长时间，但随着生成式 AI 的出现，尤其是 2022 年底 ChatGPT 的推出，它们才登上了主流头条。这个工具和其他很棒的工具，如 GitHub Copilot、Gemini、Claude 等，已经成为 Web 开发的新驱动力。这些工具越来越多地融入到开发生命周期中，可以非常有效地减少重复和平凡的任务数量，并提供帮助解决问题，从而提高开发人员的工作效率。Capterra 团队在最新一期的开发者调查中采访的专业开发人员指出了 AI 工具的以下好处：
 

来源：2024 年 Stack Overflow 开发者调查

AI 在开源项目中的受欢迎程度也在飙升。根据 Octoverse 2024 的数据，去年 GitHub 上的开发人员创建了超过 70,000 个新的公共和开源生成式 AI 项目，对 GitHub 上所有生成式 AI 项目的总贡献增加了近 60%。大多数受访者 (73%) 使用 GitHub Copilot 等工具进行编码或文档编写。自 GitHub Copilot 推出以来，GitHub 团队发现 GitHub 用户在平台上的活动有所增加。

来源：Octoverse 2024

可以肯定的是，人工智能工具将在 2025 年及以后继续发展，尤其是随着 DeepSeek 等新参与者的出现，使开发团队能够在开发过程中解决更复杂的任务。至于人工智能功能，Gartner 预测，到 2026 年，超过 80% 的企业将使用生成式人工智能 API 或模型，和/或在生产环境中部署支持 GenAI 的应用程序，而 2023 年这一比例还不到 5%。

与此同时，开发人员必须牢记，AI 并不是 Web 开发各个方面的通用解决方案。虽然 AI 工具的好处不可否认，但它们也存在一些潜在的缺点，例如：

• 准确性问题
• 安全和隐私
• 复杂性限制
• 道德考量

AI 工具可以很好地补充技术栈中包含的传统 JavaScript 工具和库，但必须注重 AI 的平衡使用，这在行业中正逐渐获得发展动力。

现在，我们想分享一些关于使用 AI 工具和 DHTMLX 的见解。

使用带有 JavaScript UI 组件的 AI 工具时需要考虑的事项

在相对较短的时间内，生成式人工智能领域已经取得了令人惊奇的成就。许多 DHTMLX 开发人员已经亲身体验了上文中强调的人工智能工具在 Web 开发中的优势，并对其表示赞赏。但是，我们想以 DHTMLX 为例，重点介绍如何将人工智能工具与 JavaScript 开发工具结合使用。

生成式 AI 工具使用公开数据（文档、教程、示例、社区等）进行训练，因此与知名度较高的工具搭配使用时，其效率会高于知名度较低的工具。特定开发工具的在线资源质量和数量对于 AI 生成有意义的输出至关重要。

当谈到将 AI 工具与 DHTMLX JavaScript 组件结合使用时，结果可能会因用例场景而异。由于 DHTMLX 产品在网络上的覆盖率适中，因此必须谨慎对待所使用的 AI 工具中请求的复杂性。

DHTMLX 团队已经探索了 AI 驱动的编码辅助，以了解它与我们的 JavaScript 库和组件的集成效果。我们可以肯定地说，ChatGPT 可以很好地处理诸如检测代码错误或调整样式之类的任务。

以下是几个示例：

• 代码错误

在此代码片段中，事件未显示在时间线视图中。如果您要求 ChatGPT 检查此示例并找出此问题的原因，它将正确地注意到数据集中的任何事件都不包含section_id属性，并为这种场景提供更正的代码。

• 自定义主题

如果您使用此文档页面提供的关键 CSS 变量并要求 ChatGPT 为您的JavaScript 日程安排日历创建自定义深色主题，您将获得一个修改后的代码块，该代码块可启用以下主题：
 

查看示例 >

但是当涉及到更复杂的场景时，由于互联网上没有充分涵盖，您可能会遇到障碍。

例如，您可以尝试挑战 ChatGPT 或任何其他 AI 聊天机器人，以提供自定义解决方案，用于在JavaScript 甘特图组件中实现任务之间的虚线链接（依赖关系） ，如下例所示。
 

查看示例 >
AI 聊天机器人应该提供有关如何实现这些目标的说明，但由于缺乏必要的训练数据，这些解决方案很可能不起作用。

新的 DeepSeek 工具提供了一个不存在的配置：

gantt.config.links = {     link_class : function ( link ) { return “ gantt_link_dashed ” ; } } ;

ChatGPT 建议使用链接模板是正确的，但假设甘特图中任务之间的链接是作为 SVG 元素绘制的，因此提供了错误的样式：

.dashed-link {
    stroke-dasharray : 5 , 5 ; /* 创建虚线 */
    stroke : #FF0000 ; /* 设置虚线链接的颜色 */
    stroke- width : 2px ; /* 调整粗细 */
}

在这种情况下适当的样式如下：

.gantt_line_wrapper div {
    background ：未设置；
    边框： 1px 虚线 #a1a4a6 ；
    盒子大小：边框；
}

在这种情况下，您还必须对与 AI 结合使用的库有充分的了解。否则，聊天机器人提供的建议可能会被误解或不正确实施，从而导致代码效率低下、兼容性问题或项目中出现意外错误。

总结

现代人工智能工具是 Web 开发的强大盟友，可加快工作流程、减少错误并提高生产力。但人工智能聊天机器人并非完美无缺，开发人员应保持警惕并不断验证输出以避免不准确的建议。通过平衡人类专业知识与人工智能能力，开发人员可以显著提高项目的质量和效率。

—————加入DHTMLX技术交流QQ群（764148812），与更多小伙伴一起探讨提升开发技能。

原文地址：https://blog.csdn.net/qq_36129733/article/details/145567970

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！