extjs - 在没有 sencha 付费服务的情况下开发和调试 Sencha 应用程序

Question

我开始使用示例 sencha 应用程序。我发现在我的代码中很难找到错字和错误。

我在编码期间添加了用于自动完成的 eclipse 插件。但它是一个试用版，就像煎茶建筑师一样。我对如何开发 sencha 应用程序感到非常困惑。

我想知道 sencha 开发人员正在使用的工具，以便我可以有效地部署和调试。

提前致谢。

Answer 1

开发应用程序时的工作流程/工具选择是一个主观问题，所以我将谈谈我去年作为 Sencha Touch 开发人员的经验。

我发现在我的代码中很难找到错字和错误。...我真的很困惑应该如何开发 sencha 应用程序。

在我看来，这不是工具的问题。Sencha Touch 有一个不可避免的陡峭学习曲线。您应该从简单的示例开始，当您遇到特定的编程问题时可以在这里提问（我个人发现 Sencha Touch 论坛不如 stackoverflow 有用）。

最重要的是理解基本概念：

• Sencha Touch 课堂系统（http://www.sencha.com/learn/sencha-class-system），
• Sencha 如何实现 MVC ( http://docs.sencha.com/touch/2.2.1/#!/guide/controllers ) ( http://docs.sencha.com/touch/2.2.1/#!/guide/意见），
• Sencha 触摸布局（http://docs.sencha.com/touch/2.2.1/#!/guide/layouts），
• Sencha 触控组件 ( http://docs.sencha.com/touch/2.2.1/#!/guide/components )

此外，所有这些指南都非常有用，请确保您了解它们并学习使用 Sencha Docs，它肯定有一些晦涩难懂的、未解释的属性，但在开发 Sencha Touch 应用程序时仍然应该是您的主要资源。

调试总是很棘手，不幸的是，有时在组件上设置了错误的属性，或者误解了组件的工作原理，最终会出现一些模糊的var is not defined错误。发生这种情况时不要害怕检查 Sencha Touch 源代码，代码写得很好，通常很容易理解。

这里使用的工具再次是 Sencha Touch Docs（当悬停在类标题上时，您可以直接检查其源代码以及浏览器调试控制台。使用频繁的console.debug()消息，当框架类内部发生奇怪的事情时停止执行debugger;并进入源代码代码）。

现在回到你的问题：我一直在使用以下工具：

• 网豆，
• Chrome 开发工具，
• Chrome 波纹扩展，
• Sencha 命令（可选）
• Compass CSS 创作框架
• 几个 shell 脚本

IDE 是个人选择的问题，Netbeans 有一些不错的 Javascript 建议：当变量被使用但未在当前范围内定义，或已定义但未使用时，它会突出显示变量，这确实有助于防止拼写错误。它在内存使用方面非常繁重。我猜 Eclipse，甚至更轻的一个也可能同样好。

如果你在 Windows 上，Chrome 是一个强制的选择，他们的 DevTools 非常好，确保你掌握它们，它们将是你的主要工作工具。再一次：大量的 RAM 有帮助。

Ripple 是一个非常宝贵的扩展，它允许您在不同的设备上测试您的移动应用程序，如果您使用 Phonegap 进行本地部署，它会在浏览器上模拟其 API 的一部分。

Compass 是 Sencha 推荐的用于编译他们的 sass 文件的工具。Sencha Docs 上有一个关于如何设置指南针的详细教程。

我一直在使用 Sencha 命令，但这并不是绝对必要的，如果您不关心资源缩减（但您应该），您将不会错过太多。如果您正在开发本机应用程序，您可以使用简单的 shell 脚本来弥补 Sencha 命令部署功能的不足，该脚本将 html/js/css 资源复制到 Phonegap 项目的 assets 文件夹。

另一个脚本在启动compass watch时在/resources/sass文件夹上自动激活，以避免每次都手动执行。

只是我的两分钱，希望它有帮助。

Answer 2

Anubis用手编码 Sencha Touch 覆盖了大部分的蜜蜂膝盖。

我想给小猫多加几分钱。

我个人对 IDE 的偏好是 Sublime Text。在整个代码项目中搜索任何东西，我还没有看到效率和速度相等。您可以自定义所有内容 - 尤其是颜色和键绑定。它还拥有大量可笑的插件，包括与 Chrome 和 Github 相关的工作。

煎茶指南

Miami Coder Tutorials - 实用教程的大集合，它们将帮助您比大多数其他指南更快地理解开发模式。非常适合初学者。

Figleaf Training可能有点不合常规，但它是学习 Sencha Touch 和几乎所有功能的一种很好的免费方式。也非常适合初学者。

Druck IT - 可靠的指南和 ST 信息集合。具有许多其他有用网站的链接，例如列出的这些。

Mitchell Simoens - Mitchell 是 Sencha 的员工，是一名优秀的编码员，他的网站有一些很好的建议和片段可以帮助学习。在这里，您将真正学习如何很好地编写 ST。有助于掌握，但主要用于中级以上的知识。

Ladysign - 煎茶训练师之一。其内容在其他网站和书籍甚至从未提及的许多方面都清楚地说明了“如何做”。质量信息。这些信息将使您超越基础知识并充实您的知识和理解。

Modus Create - Jay Garcia 是 ST 的开发者之一。Modus Create 是他的企业，其中包含博客中的一些有用指南。

自定义字体图标- 2.2 的完整指南。很有用。

还有一些其他网站是关于如何专业地编写 ST 的信息的令人难以置信的花絮来源。不过，上面的这些链接将有很大帮助。最重要的是，阅读源代码。它有很好的文档记录，并且本身就是如何使用代码的示例。我通过这种方式学到了很多可笑的东西。

咕噜声（使用 NPM/Node.js）！

使用咕噜！这将使您想做的绝大多数事情自动化。例如，在命令行中键入“grunt”可以 jshint/jslint 你的代码，将所有 .js 文件连接在一起，将所有 css 文件连接在一起（包括所有指南针的乐趣），混淆，压缩，运行一套全面的单元测试（尤其是Phantom），输出到所需位置，然后通过刷新浏览器窗口在顶部添加一个樱桃。添加 grunt watch 插件，它会在每次将文件保存在定义的目录中时执行此操作。您的代码中的任何错误 - 您将获得准确的特定行号，它被破坏了。

grunt 的美感通过用于不同任务的可选替代命令行来扩展。此外，您可以在几 kB 的 package.json 文件中指定您希望与您创建的 gruntfile 一起使用的插件的精确列表，从而节省数兆字节的文件传输。NPM 可以处理该文件，并下载和安装操作所需的所有内容。可在另一台计算机上进行快速设置。

旁注：Touch Node已经成熟。这允许所有 ST 的类结构来开发您的服务器端 javascript。

想要包含 Sencha Cmd？

Sencha Cmd（最后）在只收集完整库中的依赖类方面做得不错。

咕噜声-sencha-build

grunt-senchacmd

Sencha Cmd 的替代品

使用适用于 ST 和 ExtJS的 Matt Goldspink 的 grunt-sencha-dependencies扩展 Grunt ，或者使用grunt-sencha-resolver - 后一个我没有使用过。