阅读时间6分钟 (1231个单词)

20条关于在Joomla!扩展中改进样式和脚本设计的建议（第二部分）

二月

2013年2月1日，星期五

28030次点击

0条评论

扩展开发者为Joomla!提供了大量扩展。但是，正如您可能知道的，其中一些与许多模板不兼容。此外，在许多情况下，Joomla扩展没有标准的样式和脚本设计，因此许多用户不得不修改他们的扩展。在本文中，我将提供并解释20条关于改进Joomla扩展样式和脚本设计的建议，也许这些简单的技术和模式会帮助您！现在阅读本文的第二部分。

本文的内容是从Joomla!开发者遇到的大量实验中提取的，但也可能是更好的解决方案，有无数种达到目标的方法。如果您有其他解决方案，请随时在评论中发表。

样式和脚本设计是用户界面设计的主要部分，但它们不是同一件事。我将在未来的文章中解释如何在Joomla!扩展中更好地设计UI。

请注意，本文中脚本的含义是指客户端脚本，如JavaScript。此外，在代码中，{component name}指的是Joomla!组件名称，{module name}指的是Joomla!模块名称。

在本文的第一部分中，我讨论了以下建议

根选择器
Joomla!样式和脚本控制的参数
类后缀
项目列表中的附加唯一选择器
百分比大小
图像大小
外部文件
与从右到左（RTL）语言兼容
压缩静态文件
外部库

现在我将解释接下来的10条建议

注意多用途情况
验证样式和脚本参数
使用更少的列
不要使用公共选择器
不要使用CSS重置代码
尽可能多地使用 Joomla! 框架库和 JUI
尽可能使用相对路径而不是绝对路径
在脚本中使用语言文件
在最后加载 JavaScript 文件
在样式和脚本文件中分离颜色

11) 注意多用途情况

当您开发一个扩展时，注意多用途情况非常重要，因为扩展在每个页面上可能被使用两次或更多。让我举一个例子来更好地解释

假设您正在开发一个内容评分的插件，并且您正在使用 JavaScript 功能进行 Ajax 评分。如果不注意多用途情况，扩展在单个文章视图下可以正常工作，但在分类视图下则不会正确工作！

12) 验证样式和脚本参数

这很简单，只需要几分钟，但可以防止您的扩展出现不必要的用户错误。是的，我正在谈论验证参数。例如，颜色经常在样式参数中使用，让我们谈谈那个。它以 '#' 符号开始，后面跟着 6 位数字，包括从 'a' 到 'f' 的字母和所有数字（0-9）。可以通过这个正则表达式简单地验证

preg_match('/^#[a-f0-9]{6}$/i', $color);

如果短语的结果是 TRUE，这意味着颜色处于有效格式，可以用于您的扩展，也可以存储。

13) 使用更少的列

作为一个扩展开发者，您无法访问或知道将使用哪个模板来显示您的组件。它可能有 2 个或更多列。因此，在您的 UI 设计中，尽可能使用无列或更少的列。这样，您的样式设计对大多数模板都具有通用性。在某些情况下，您可以在主组件旁边构建额外的模块，这可以替代向主设计添加列。

14) 不要使用公共选择器

当您在 Joomla! 扩展中设计和脚本时，重要的一点是不要使用公共选择器，如：li.ul、table 等。如果您不接受这个建议，您的扩展将完全破坏用户的模板！原因是简单的，当您使用公共选择器时，您正在影响页面上的所有元素，而不仅仅是您的扩展。此外，您也不应使用 Joomla! 默认类，这些类已被用于组件和模块的布局。

15) 不要使用 CSS 重置代码

如您所知，重置样式的目的是减少浏览器在默认行高、填充和标题字体大小等方面的一致性问题。因此，CSS 重置代码用于提高跨浏览器兼容性。但许多经验和报告表明，最好将这些样式从您的扩展中排除。在某些情况下，它将破坏主要用户模板。原因是与上一项（14：不要使用公共选择器）相同，因为重置代码会影响公共选择器。而不是 CSS 重置代码，您可以使用与您的扩展根选择器一起的特定部分的代码。例如

.mycomponent table {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
.mycomponent table {
 border-collapse: collapse;
 border-spacing: 0;
}

16) 尽可能多地使用 Joomla! 框架库和 JUI

在您的设计中，您可以使用许多不同的 CSS 和 JavaScript 库。如果您在这种情况下使用 Joomla! 框架库和 JUI，您将获得更多的兼容性，并且实现您的设计将更容易、更快。例如，要将 Bootstrap 库添加到您的扩展中，您可以轻松使用此方法

JHtml::_('bootstrap.framework');

17) 尽可能使用相对路径而不是绝对路径

您可以在扩展的某些区域使用相对路径或绝对路径，例如定义样式表或脚本文件，或者定义图像的路径等。虽然这两种声明类型之间没有太大区别，但实验表明，在某些情况下使用相对路径是一个更好的选择。这个说法有一些原因，但主要原因之一是它提高了您扩展的模块化程度，另一方面它减少了不必要的代码重写。

18) 在脚本中使用语言文件

当我审查和分析Joomla！的一些优秀扩展时，我发现许多扩展提供商没有在他们的脚本文件中使用语言字符串。这非常简单且实用。请看下面我提供的示例。

$document = JFactory::getDocument();
$document->addScriptDeclaration("
 var myextension_text=Array('".
 JTEXT::_('MYEXTENSION_HELLO')."','".
 JTEXT::_('MYEXTENSION_WORLD')."','".
 JTEXT::_('MYEXTENSION_THIS_IS').
 "');
");
$document->addScriptDeclaration("
alert(myextension_text[3]+' '+myextension_text[1]+' '+myextension_text[2]);
");

19) 在HTML文档末尾加载JavaScript文件