5、核心小工具开发全解析

核心小工具开发全解析

1. 小工具架构搭建

当完成小工具的视觉设计后，就可以开始编写其功能代码了。这和编写其他网页应用大体相似，大部分小工具特有的问题在概念构思和设计阶段就已解决。

1.1 外部资源引用

在引用外部资源时，建议使用相对 URL，这样能兼容更多平台。少数需要绝对 URL 的情况会有特殊说明。

1.2 代码结构组织

代码结构组织方式一直存在争议，是将所有内容放在一个 HTML 文件里，嵌入 CSS 和 JavaScript，还是通过链接外部 .css 和 .js 文件来分离内容、展示和功能呢？小工具开发为这个老问题带来了新变化。
- 单文件代码（“整体式”代码）
- 优点 ：性能好。因为浏览器下载每个文件都需要单独的 HTTP 请求，请求多个文件会有额外开销，且外部 .css 和 .js 文件要在浏览器下载并解析基础 HTML 文件后才被知晓，会有额外延迟，而单文件代码没有这些问题。
- 缺点 ：在单页面运行多个小工具时，性能问题会更严重。例如在 iGoogle 这样的门户页面上，如果有 10 个小工具，每个需要 10 个单独文件，那 100 个 HTTP 请求会让用户明显感觉到延迟。而且小工具的大量分发会增加网站主机的负载。
- 分离文件代码
- 优点 ：可维护性强。多个页面通用的 CSS 和 JavaScript 可以放在一个地方，修改或修复 bug 时只需操作一次，就能在所有地方