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

本文的内容是从Joomla!开发者遇到的大量实验中提取出来的，但也可能是更好的解决方案，有许多达到目标的方法。如果您有其他解决方案，请在评论中写下来。

样式和脚本设计是用户界面设计的主要部分，但它们并不相同。在接下来的文章中，我将解释一些关于Joomla!扩展更好的UI设计的解决方案。

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

1) 根选择器

这非常简单。只需在您的扩展HTML输出的第一层中使用选择器（类或id）。例如

<div class="{root-selector}">
...
[output of extension]
...
</div>

如果您添加此选择器并在您的样式和脚本设计中使用它，它将帮助您的扩展避免许多冲突！让我们看看一个完整的例子

<div class="myext">
<h1 class="title" >
extension's title
</h1>
<div class="content" >
extension's content
</div>
</div>

在这个例子中，根选择器是名为"myext"的类。因此，在样式和脚本设计中，只需在第一层选择器中使用.myext即可

在样式设计中的使用

.myext .title {
font-size: 12px;
}
.myext .content {
padding-top: 5px;
}

在脚本设计中的使用（jQuery）

$('.myext .content').fadeIn('slow');

请注意，您必须为根选择器使用唯一名称。

2) 用于样式和脚本控制的Joomla!参数

您的扩展用户将通过Joomla!参数来控制样式和脚本属性。在Joomla!中，有四种类型的参数可以在您的扩展中使用：组件参数、模块参数、菜单参数和插件参数（模板参数在扩展中很少使用）。请参考下面的示例了解如何使用它们。

[使用菜单参数]

if($itemid = JRequest::getInt('Itemid'))
{
$menu= JFactory::getApplication()->getMenu();
$active= $menu->getItem($itemid);
$params= $menu->getParams( $active->id );
$param= $params->get('param-name' , 'default-value');
}

[使用组件参数]

$app = JFactory::getApplication('site');
$params = $app->getParams('com_{component name}');
$param = $componentParams->get('param-name', 'default-value'); 

[在模块内使用模块参数]

$param = $params->get('param-name', 'default-value');

[在模块外使用模块参数]

$module = JModuleHelper::getModule('{module name}');
$params = new JRegistry();
$params->loadString($module->params);
$param = $params->get('param-name', 'default-value');

3) 类后缀

可能您的扩展用户在某些非通用情况下需要特殊选择器。通过Joomla!内置的类后缀，用户可以轻松地做到这一点，而无需修改扩展。如果您想了解更多关于这方面的信息，请阅读这篇文档。在Joomla!中，我们有两种类型的类后缀：页面类后缀和模块类后缀（如果需要，您可以通过参数添加插件类后缀，Joomla!非常灵活！）。我们强烈建议您将此参数添加到扩展的根选择器[#]。假设我的根选择器是"myext"，以下是如何使用此技术的示例。

在页面类后缀中的使用（Joomla! 2.5组件）

[获取属性：PHP]

$app= JFactory::getApplication();
$params = $app->getParams();
$menus= $app->getMenu();
$menu= $menus->getActive();
$pageclass_sfx = htmlspecialchars($params->get('pageclass_sfx'));

[使用它：HTML]

<div class="myext<?php echo $pageclass_sfx; ?>">

在模块类后缀中的使用（Joomla! 2.5模块）

[获取属性：PHP]

$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx'));

[使用它：HTML]

<div class="myext<?php echo $moduleclass_sfx; ?>">

4) 项目列表中的附加唯一选择器

在某些情况下，我们在Joomla!扩展中输出项目列表。我们可以为每个项目添加额外的唯一选择器，这样用户在微调时就不需要修改扩展。例如，假设我们有一个名为"$items"的项目列表，以下是如何使用此技术的示例。

$i = 1;
foreach($items as $item)
{
echo '<div id="item_'. $i .'" >';
echo $item;
echo '</div>';
$i++;
}

在这种情况下，使用id选择器而不是类选择器更好，因为将来可能会使用JavaScript。在没有安全问题的场合，使用数据库行的id作为选择器是一个更好的解决方案。

5) 百分比尺寸

如您所知，我们不知道扩展将显示的宽度和高度的绝对尺寸。因此，如果您在扩展的样式和脚本设计中使用百分比尺寸，这将更加兼容。此外，您还可以使用min-width、min-height、max-width和max-height CSS属性来更好地控制这项技术。例如

不使用百分比尺寸

.myext {
width: 600px;
}
.myext .header {
width: 200px;
}

使用百分比尺寸

.myext {
width: 90%;
max-width: 1000px;
}
.myext .header {
width: 30%;
min-width: 40px;
}

在某些情况下，最好不使用width和height CSS属性，而是使用padding和margin。此外，在某些情况下，使用百分比高度可能不是必需的。所有这些情况都取决于您的设计！

6) 图片尺寸

您不应在扩展中使用大尺寸图片。可以使用图标和CSS2及CSS3属性组合的小图片代替。

7) 外部文件

在Joomla!中，您可以将样式和脚本数据放在外部文件中，或者以内联格式或在<style>和<script> HTML标签中使用。通常，更好的选择是外部文件，因为它们将在第一次加载时加载，并且在未来的浏览中，外部文件将从浏览器中缓存的文件中加载。另一个原因是，如果需要，您可以在以后压缩外部文件。

此外，您还可以在外部文件中使用Joomla!参数。以下是一个示例，说明如何做到这一点

在这个示例中，我想在我的组件的CSS文件中使用Joomla!参数

[在components/com_{component name}/view/{view name}/view.html.php中加载CSS]

$doc =& JFactory::getDocument();
$style = 'components/com_{component name}/assets/css/mystyle.php?Itemid='.JRequest::getInt('Itemid');
$doc->addStyleSheet(JURI::base() . $style);

[CSS文件内容在components/com_{component name}/assets/css/mystyle.php]

<?php
/**
*CSS file with Joomla! controls
*Author: Soheil Novinfard
*/
// load CSS header
header("Content-type: text/css; charset: UTF-8");
// Set flag that this is a parent file
define('_JEXEC', 1);
// No direct access.
defined('_JEXEC') or die;
// Set the directory separator
define( 'DS', DIRECTORY_SEPARATOR );
// Define the root path of Joomla! (Don't forgot to change it!)
define('JPATH_BASE', dirname(__FILE__).DS.'..'.DS.'..'.DS.'..'.DS.'..' );
require_once ( JPATH_BASE .DS.'includes'.DS.'defines.php' );
require_once ( JPATH_BASE .DS.'includes'.DS.'framework.php' );
jimport('joomla.database.database');
jimport('joomla.database.table');
$app = JFactory::getApplication('site');
$app->initialise();
// Load component parameters
$params=  &$app->getParams('com_{component name}');
// Load menu parameters (priority by menu parameters)
if($itemid = JRequest::getInt('Itemid'))
{
$menu = JFactory::getApplication()->getMenu();
$active = $menu->getItem($itemid);
$params = $menu->getParams( $active->id );
}
// Use a parameter
$backColor= $params->get('ext_backcolor');
?>
.myext {
background-color: <?php echo $backColor ;?>;
}

当您想在其他地方使用此代码时，必须更改JPATH_BASE并定义Joomla!的根路径。

此外，您还可以将此代码用于JavaScript外部文件，只需更改CSS文件中的标题

header("content-type: application/x-javascript");

8) 与从右到左（RTL）语言的兼容性

您的扩展将在所有由Joomla!驱动的网站上使用，甚至那些使用从右到左语言方向的网站。因此，您应该使您的样式与RTL语言兼容。Joomla!有检测RTL语言的有用方法，即isRTL。有多种方法添加这种兼容性，我在这里简要介绍此技术的一个示例。

在组件/com_{组件名称}/view/{视图名称}/view.html.php中[加载样式文件]

$doc=& JFactory::getDocument();
$lang=& JFactory::getLanguage();
// Load general style file
$style= 'components/com_{component name}/assets/css/mystyle.css';
$doc->addStyleSheet(JURI::base() . $style);
// Load RTL CSS file if language direction is RTL
if($lang->isRTL()) {
$style_rtl= 'components/com_{component name}/assets/css/mystyle_rtl.css';
$doc->addStyleSheet(JURI::base() . $style_rtl);
}

在components/com_{组件名称}/assets/css/mystyle.css中[通用样式文件]

.myext {
background-color: #ffffff;
border: 1px solid #eeeeee;
margin: 5px;
padding: 2px 10px 5px 7px;
text-align: left;
}
...

在components/com_{组件名称}/assets/css/mystyle.css中[RTL样式文件]

.myext {
direction: rtl;
padding: 2px 7px 5px 10px;
text-align: right;
}
...

如您所见，您不需要一个包含所有详细信息的完整CSS文件；只需覆盖或添加RTL样式文件中需要的不同CSS属性。在此技术中将要更改的大部分CSS属性是text-align、direction、float、margin和padding；但根据您的设计，可能还需要更改其他CSS属性。

9) 压缩静态文件

可能您的扩展中有些样式和脚本文件不会被用户更改，它们是静态文件。压缩这些文件以加快网站加载速度和减小页面大小是一个很好的解决方案。有许多用于压缩文件的工具，以下是一些：

CSS压缩工具

最小化CSS

JS压缩器

JavaScript压缩器

如果您有一些静态文件，应将所有文件压缩成一个文件；这将减少HTTP请求并加快网站加载。

此外，最好使用.min后缀指定您的压缩文件（例如mystyle.min.css），并将原始样式和脚本文件保留在您的扩展中。未压缩的文件将由Joomla!开发者使用。

10) 外部库

外部库用于方便、简化和可靠的设计。JQuery、Bootstrap和网格系统是这些库的例子。您可以在您的扩展中使用一些这些外部库。但问题是其他扩展也可能使用相同的库。因此，您应该在扩展中提供选项以包含或排除这些库。

可能出现的另一个问题是这些库的冲突。您也将解决这个问题，但这取决于您的设计和使用的库。一个流行的此类问题的例子是MooTools和jQuery JavaScript库的冲突。

这是本文的第一部分，您可以在下个月阅读关于在Joomla!扩展中更好地设计和脚本设计的10个其他解决方案；（)