结合使用 jQuery 与 Business Catalyst
要求
必需产品
jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互，可以实现快速 Web 开发。
Business Catalyst 是一种托管解决方案，也被称为软件即服务 (SAAS) 系统，这意味着您不能利用服务器端代码进行开发。 但是，您可以实现 JavaScript，利用 Business Catalyst API，并将 JavaScript 与 Business Catalyst 结合起来使用。
在本文中，您将学习如何使用 jQuery JavaScript Library 来增强 Business Catalyst 站点的功能。 您还将发现可以加快工作效率并缩短开发时间的战略。 此外，您将获得一些技巧和最佳实践，在构建 Business Catalyst 项目中的功能时可以高效地实现 jQuery。
在开始之前，您需要获得 jQuery。 您可以从jQuery 官方站点jQuery 官方站点下载最新的版本。
有一些方法可以在网站上调用 jQuery。以下是两个选项：
- 下载 JavaScript 文件，然后添加以下代码行来启动它：
<script type="text/javascript" src="/js/jQuery.min.js"></script>
- 通过 Google Hosted Libraries 链接到最新版本的 jQuery。
注意： 使用 Google Hosted Libraries 内容交付网络，直接从 Google 的数据中心网络为您的 jQuery 提供服务，与在您的网站上托管 jQuery 相比，这样做有许多好处。 其优点包括降低延迟，提高并行性和更好的缓存。
如果选择 Google Hosted Libraries 选项，有两种方法可以将 jQuery 和其他 Google Hosted Libraries 加载到您的网站。
- 直接链接到托管的 JavaScript 文件：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>
- 创建一个加载请求：
<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<script type="text/javascript>
google.load("jquery","1.8");
</script>
Google 加载请求方法很有用，因为您可以同时加载许多其他 Google Libraries，比如 jQuery UI 或 Google Map API 功能。 如需了解有关 Google 加载请求方法的更多信息，请阅读Google Loader Developers Guide。
使用 jQuery 兼容模式避免代码冲突
在 Business Catalyst 网站上实现 jQuery 时，重要的是要使用 jQuery 兼容模式，以避免潜在的代码问题。 Business Catalyst 使用名为Prototype的 JavaScript 库来运行站点功能，比如 Photo Galleries 模块中的 lightbox（灯箱）。 Prototype 有一个类似于 jQuery 的代码结构。 为了避免 Prototype 和 jQuery 之间的冲突，您应该考虑在所有项目中将兼容模式实现为标准模式。
您可以使用 jQuery n0Conflict 方法来确保 jQuery 正确运行。 您可以声明 noConflict 方法，如下所示：
$j = jQuery.noConflict();
将该行代码添加到脚本文件的开头，在内联脚本或在主 DOM Loading 脚本文件中均可。 您还必须将代码中的任何$实例更新为$j 。
使用外部脚本文件而不是内联脚本
有许多方法可以实现 jQuery。 在线教程往往会提供如何将内联代码复制并粘贴到模板和布局的说明。 内联编码很容易实现，但它会产生几个问题。 添加内联代码并非 jQuery 的最佳实现，并且它难以管理。 外部脚本有许多优点，比如：
- 创建一个 JavaScript 代码文件来影响多个页面，而不是必须重复将代码粘贴到每个单独的文件。
- 内联 jQuery 调用往往多次启动 DOM，并且将降低性能。
- 现代的编程技术需要一种代码实现方法，从表示和功能中分离出结构和内容。 HTML 文件应该包含结构和独特的页面内容，CSS 文件包含样式信息，JavaScript 文件包含客户端功能的代码，而系统代码包含服务器端的功能。 以这种方式构造的项目更易于更新和维护，并有更好的性能。
在开发代码时创建函数，可支持“使用一次”或“使用多次”的方法，这有助于增强性能和提高可管理性。 此外，使用函数的项目更易于升级。 函数是您可以调用的代码块，它们共同实现更复杂的任务，并且只有在被调用时才会被执行。 与常规的代码行不同，会延迟执行函数，直到您想使用它们。 以下是一个函数的示例：
function copyAddress(){
if ($j(“#shippingAddress”).val() == ""){
$j(“#shippingAddress”).val($j(“#billingAddress”).val());
}
}
此函数只是一个片段，您可以将其发展为一个更大的函数，以便将访问者的送货地址设置为与其帐单地址相同的值。 例如，您可以在任何 jQuery 事件（比如单击事件）上或其他函数中调用这个 copyAddress 函数。 这将在另一个函数中执行本示例的代码，以触发上面演示的功能。 在单一“函数”JavaScript 文件中创建这些函数，可以实现良好的可维护性和更快的开发速度。 在更高级的实现中，您可以探索作为对象和类的 JavaScript，或构建您自己的 jQuery 插件。
只调用 DOM 一次
Document Object Model (DOM) 是放置 JavaScript 的理想位置，可以扩展网站的功能。 虽然有很多 Business Catalyst 网站使用 jQuery，但这些网站通常使用内联代码调用 jQuery 脚本，并且会多次调用 DOM。我们不推荐这种做法。 内联代码会产生许多问题。 更明显的问题之一是性能下降。 不使用内联代码，而是创建单一调用脚本（例如 dom.js），再加上您的函数文件，将 jQuery 实现到您的网站，并避免潜在的性能问题。
使用这种方法，您的所有代码执行都可以由单一文件中的一个 DOM 完成。 以下代码是一个 DOM 文件结构示例：
$j = jQuery.noConflict();
// DOM LOAD
$j(function(){
// Code Execution
copyAddress();
});
代码的第一行声明 noConflict 方法。 然后，只启动一次 DOM，然后运行其中一个站点函数。 现在该将始终运行函数，而这并不是最佳方式。 在本例中，在从 Business Catalyst eCommerce 系统接收付款时，很可能只需要 copyAddress 函数。
但是，智能解决方案会在需要时才运行代码。 该策略包括使用名为 .length的 JavaScript。 您可以围绕函数编写一个if语句，并使用 .length检测某个元素是否存在。 这使您可以只在需要时调用该函数。 在进行了这些修改后，DOM 文件如下所示：
$j = jQuery.noConflict();
// DOM LOAD
$j(function()
{
if ( $j(“#myform”).length ) {
copyAddress();
}
});
if语句确保该函数将仅当该元素存在时才运行。 这种方法有助于避免可能发生的 JavaScript 错误，比如返回一个 Null 值。 Null 值意味着 JavaScript在函数中找不到元素，无法执行操作，或者没有找到值，因此被认为是 Null（空）。 这有助于避免某些错误的发生，也可以避免在不需要时运行脚本，从而提高性能。
要调用这些 JavaScript 文件，将下面的脚本标记放在模板代码底部，直接放在 body 的闭合标记之前。
注意： 以本地方法或 Google 实现来实现 jQuery 本身，已在开头介绍过。
<script type="text/javascript" charset="utf-8" src="/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/functions.js"> </script>
<script type="text/javascript" charset="utf-8" src="/js/dom.js"></script>
将脚本标记添加到 HTML body 元素而不是头部，这是可以使用的另一种策略，以提高网站的性能。
您也可以在函数内部添加 jQuery 插件调用，如下面的示例所示：
function profilePage() { $j("#profileFeed").fadeIn("slow");
$j("#playVideo").prettyPhoto({ show_title: false, deeplinking: false }); }
如您所见，您可以在调用插件前执行一个操作（比如 jQuery fadeIn），也可以在它之后运行代码，这都在一个函数内完成。 在本例中，prettyPhoto jQuery plugin是之后被调用的。 请注意，代码在运行之前提到的兼容模式。 如需了解有关使用 jQuery 插件的更多信息，请访问 jQuery 插件文件归档。
本文仅涉及了在 Business Catalyst 项目中实现 JavaScript 时的一些基础知识。 为了扩展这些概念，考虑在编写代码和函数时使用基于对象的方法，也可以探索如何编写 JavaScript 类，实现更好的面向对象的开发。
目标是争取一个简洁的实现。 将函数设置为只在需要时执行。 此策略可让您重新调用函数，并创建具有特定用途的代码，稍后在其他站点功能中也可以改变其用途。 如需了解有关使用 jQuery 的更多信息，请访问 jQuery 网站。
如需进一步学习，请查看下面的在线资源：
- 通过 Business Catalyst 与 jQuery 将您的站点带入一个新水平： Adobe TV
- jQuery 入门： Six Revisions 站点
- 初学者的三十个 jQuery 教程： Webitect 站点
- JavaScript 代码示例： Business Catalyst 知识库