Ext JS开发：主题构建到调试测试全解析
超级会员免费看
Ext JS 开发：从主题构建到调试测试全解析
1. 构建 WordPress 主题
在构建 WordPress 主题时，单页的构建是一个关键步骤。 single.php 文件的内容与 page.php 文件相同，因此只需将 single.php 的内容复制粘贴到 page.php 文件中即可。在 WordPress 中，页面和文章的处理方式是一样的。完成这些操作后，就完成了一个简单的 WordPress 主题构建。
2. 调试 Ext JS 应用程序
调试在开发过程中至关重要，尤其是在使用 Ext JS 开发应用程序时，必须使用调试工具。以下是一些调试时需要注意的要点：
- 大小写敏感 ：在 JavaScript 中，类名的大小写是有区别的，例如 LoginScreen 和 Login screen 是不同的。
- 保留字 ：不能将保留字用作命名空间、类名、包名或变量名，可参考 JavaScript 保留字列表 。
- 拼写检查 ：输入代码时要注意拼写，避免因多输入字符导致错误。
在调试工具方面，有几个常用的工具：
| 工具名称 | 特点 | 链接 |
| ---- | ---- | ---- |
| Google 开发者工具 | 功能强大，可用于调试和学习框架 | Google 开发者工具 |
| Firefox 的 Firebug | 具有多个实用的标签页，如 Console、HTML、CSS 和 Script 等 | Firebug |
| Illuminations for developers | 专门用于 Ext JS 调试的付费工具，是 Firebug/Firefox 的插件 | Illuminations for developers |
以 Firebug 为例，它的 Console 标签页可以查看控制台消息和加载的文件，HTML 标签页可以查看 Ext JS 代码生成的 HTML 详细信息，鼠标悬停时会在屏幕上高亮显示相关部分。CSS 和 Script 标签页还可以实时修改并查看更改效果。
graph LR
A[开始调试] --> B{选择调试工具}
B --> C[Google 开发者工具]
B --> D[Firefox 的 Firebug]
B --> E[Illuminations for developers]
C --> F[进行调试操作]
D --> F
E --> F
F --> G[发现并解决问题]
3. 测试 Ext JS 应用程序
测试是开发和维护应用程序的重要环节。不编写测试用例时，需要手动验证每个用例，代码更改后还需再次手动测试。编写测试用例虽然前期会花费一些时间，但后期可以一键运行所有测试，方便验证代码的正确性。
有一些工具可用于测试 Ext JS 应用程序，如 Jasmine 和 Siesta。这里重点介绍 Siesta 的使用步骤：
1. 生成测试构建 ：使用 Sencha 命令生成项目的测试构建。打开终端，切换到应用程序目录，执行命令 sencha app build testing 。Sencha 命令会在 masteringextjs/build/Packt/testing 文件夹中创建编译好的测试代码，同时要将 php 和 translations 文件夹复制到该测试文件夹中。
2. 测试测试构建 ：在浏览器中访问 http://localhost/masteringextjs/build/Packt/testing ，确保一切正常运行。
3. 安装 Siesta ：从 Siesta 官网 下载 Siesta，这里使用免费的 Lite 版本。下载后将其解压到项目文件夹中。
4. 创建测试文件夹 ：在项目文件夹中创建一个名为 tests 的新文件夹。
5. 创建 Harness 文件 ：在 tests 文件夹中创建 index.js 文件，内容如下：
var Harness = Siesta.Harness.Browser.ExtJS;
Harness.configure({
title : 'Mastering Ext JS Test Suite',
preload : [
'../build/Packt/testing/resources/Packt-all.css',
'../build/Packt/testing/resources/css/app.css',
'../build/Packt/testing/translations/locale.js',
'../build/Packt/testing/all-classes.js'
]
});
Harness.start(
'010_sanity.t.js',
'020_login.t.js'
);
- 创建
index.html文件 ：在tests文件夹中创建index.html文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../bootstrap.css">
<link rel="stylesheet" type="text/css" href="../siesta-1.1.8-lite/resources/css/siesta-all.css">
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../siesta-1.1.8-lite/siesta-all.js"></script>
<script type="text/javascript" src="translations/locale.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>
- 创建测试用例 ：
- 第一个测试用例
010_sanity.t.js：
- 第一个测试用例
StartTest(function(t) {
t.diag("Sanity");
t.ok(Ext, 'ExtJS is here');
t.ok(Ext.Window, 'Ext.Window as well');
t.ok(Packt, 'Packt namespace is here');
t.ok(Packt.view.Login, 'Packt.view.Login as well');
t.done();
});
- **第二个测试用例 `020_login.t.js`**：
StartTest(function(t) {
t.diag("Sanity test, loading classes on demand and verifying they were indeed loaded.");
t.ok(Ext, 'ExtJS is here'); // #1
t.ok(Packt, 'Packt namespace is here'); // #2
t.requireOk('Packt.view.Login'); // #3
t.waitForComponent('Packt.view.Login', true, function(){// #4
var submitButton = Ext.ComponentQuery.query('login button#submit')[0];
t.chain(
{ action : 'click', target : submitButton } // #5
);
t.waitForComponent('Packt.view.MyViewport', true, function() { // #6
t.ok(Packt.view.MyViewport, "Packt.view.MyViewport was rendered."); // #7
t.done();
});
});
});
完成上述步骤后，在本地浏览器中访问 http://localhost/masteringextjs/tests 即可执行测试用例。
3. 有用的工具
在使用 Ext JS 开发时，有一些工具可以提高开发效率：
- JSLint ：帮助查找 JavaScript 错误并清理代码。 JSLint
- YSlow ：分析网页性能，指出网页变慢的原因。 YSlow
在处理 CSS 时，有以下几个实用的建议和工具：
- 使用预处理器 ：如 Sass 或 Less 来创建自定义 CSS，并确保编译输出的 CSS 是压缩版本。
- Sass
- Less
- 压缩 CSS ：即使不使用预处理器，也应部署压缩版本的自定义 CSS。可以使用 YUI Compressor 或 CSS minifier 等工具。
- YUI Compressor
- 合并 CSS 文件 ：将多个自定义 CSS 文件合并为一个，方便用户在浏览器中加载。可以使用 grunt-contrib-concat 工具。
另外，CSS Sprites 也是一个重要的优化技巧。可以将多个图标合并为一个图像，通过设置背景位置来显示不同的图标。有一些工具可以帮助创建 CSS Sprites，如 SpritePad、SpriteMe 和 Compass Sprite Generator。
通过合理使用这些工具和技巧，可以提高 Ext JS 应用程序的开发效率和性能。
Ext JS 开发：从主题构建到调试测试全解析
4. 将 Ext JS 项目转换为移动应用程序
虽然 Ext JS 主要用于构建 Web 桌面应用程序，但也可以让应用程序在移动设备上运行。不过，需要考虑一些适配和优化的问题。
首先，要确保应用程序的界面在移动设备上能够良好显示。这可能需要对布局和样式进行调整，以适应不同的屏幕尺寸。可以使用响应式设计原则，让界面根据设备屏幕的大小自动调整布局。
其次，要考虑性能问题。移动设备的资源相对有限，因此需要优化代码，减少不必要的加载和计算。例如，使用 Sencha 命令进行生产构建，压缩和合并 CSS 和 JavaScript 文件，减少网络请求。
还可以使用一些移动开发框架和工具来辅助开发。例如，Sencha Touch 是一个专门用于移动应用开发的框架，与 Ext JS 有一定的兼容性，可以借鉴其一些功能和设计思路。
5. 寻找额外和开源插件
在开发 Ext JS 应用程序时，可能会遇到一些 Ext JS 本身没有提供的功能需求。这时可以寻找额外的和开源的插件来扩展应用程序的功能。
有很多开源社区和平台可以找到这些插件。例如，GitHub 是一个非常大的开源代码托管平台，上面有很多开发者分享的 Ext JS 相关插件。可以通过搜索关键词，如 “Ext JS plugin” 来查找相关的项目。
另外，一些专业的 Ext JS 论坛和社区也是获取插件和交流经验的好地方。在这些社区中，可以与其他开发者交流，了解他们使用过的优秀插件，以及如何集成到自己的项目中。
6. 总结
通过前面的介绍，我们了解了如何构建 WordPress 主题、调试和测试 Ext JS 应用程序，以及使用一些有用的工具来提高开发效率。下面是一个简单的总结表格：
| 内容 | 要点 |
| ---- | ---- |
| 构建 WordPress 主题 | 复制 single.php 内容到 page.php ，完成简单主题构建 |
| 调试 Ext JS 应用程序 | 注意大小写、保留字和拼写，使用调试工具如 Google 开发者工具、Firebug 等 |
| 测试 Ext JS 应用程序 | 使用 Siesta 工具，按步骤生成测试构建、安装工具、创建测试用例等 |
| 有用的工具 | JSLint 查错清理代码，YSlow 分析网页性能，处理 CSS 可使用预处理器、压缩和合并工具 |
| 转换为移动应用程序 | 考虑界面适配和性能优化，可借鉴移动开发框架 |
| 寻找额外和开源插件 | 在 GitHub 等平台和社区搜索 |
graph LR
A[构建 WordPress 主题] --> B[调试 Ext JS 应用程序]
B --> C[测试 Ext JS 应用程序]
C --> D[使用有用工具]
D --> E[转换为移动应用程序]
E --> F[寻找额外和开源插件]
在实际开发中，要根据具体的需求和场景，灵活运用这些知识和工具。不断学习和实践，才能更好地掌握 Ext JS 开发，开发出高质量的应用程序。同时，要关注行业的发展动态，及时了解新的技术和工具，为自己的项目带来更多的可能性。
总之，Ext JS 开发是一个综合性的过程，涉及到多个方面的知识和技能。通过合理的规划和实践，相信可以开发出满足各种需求的优秀应用程序。
希望这些内容对大家在 Ext JS 开发中有所帮助，大家可以根据自己的项目情况进行尝试和应用。如果在开发过程中遇到问题，也可以参考相关的文档和社区资源，寻求解决方案。
扫一扫
1405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
