扩展开发者为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。有许多方法可以添加这种兼容性，我在这里简要介绍了这项技术的一个例子。

[在components/com_{component name}/view/{view name}/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;
}
...

【RTL样式文件位于 components/com_{组件名称}/assets/css/mystyle.css】

.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种其他解决方案。 ;)