HTMLとJavascriptを分離することは良い考えですが、Javascriptファイルを生成することは、これを達成するのにやり過ぎであり、また、本来あるべきよりも維持するのが非常に難しいかもしれません。
私が見つけた最善の方法は、Smartyに単純なプラグイン関数を追加して、サイト全体に何度も表示される「ウィジェット」に関連付けられたすべてのHTMLおよびJavascriptを生成できるようにすることです。
これらのプラグイン関数は次のようにする必要があります。
- ウィジェットのすべてのHTMLを生成して、異なるSmartyテンプレート間でHTMLを繰り返す必要がないようにします。
- ウィジェットに必要なすべてのJavascriptを生成して、SmartyテンプレートでJavascriptを記述する必要がないようにします（これはほとんどの場合悪い考えです。関数を呼び出すだけです）。
- Javascriptの生成をページでの実際の出力から分離し、Javascriptが実際に配置される場所を制御できるようにします。
Smartyに関数を追加するためのPHPコード
$GLOBALS['pageJavascript'] = array();
$smarty->registerPlugin("function", "addButton", "addButtonSmarty");
$smarty->registerPlugin("function", "displayPageJavascript", "displayPageJavascript");
//Outputs the HTML for a button, generates the associated Javascript and either
//outputs that Javascript or saves it for later.
function addButtonSmarty($params, &$smarty){
if(isset($params['operation']) == FALSE){
return "operation not set.";
}
if(isset($params['tabID']) == FALSE){
return "tabID not set.";
}
$tabID = $params['tabID']
$operation = $params['operation'];
$uniqueID = "buttonEditOperation_".$operation;
addButtonJavascript($tabID, $operation);
echo "<button id='buttonEditOperation_".$operation."' />";
}
function addButtonJavascript($tabID, $operation){
$javascript = "
$('#tabContent_".$tabID." [id^=\"buttonEditOperation_".$operation."\"]')
.click( function() { alert('CLICK !'); })
.button(blabla);";
if(FALSE){
//You can just add the Javascript directly to the web page, however in this case
//it may throw an error if the user clicks on something before jQuery is
//fully loaded.
echo "<script type="text/javascript">";
echo $javascript;
echo "</script>";
}
else{
//Much better is to save the Javascript to be included later.
$GLOBALS['pageJavascript'][] = $javascript;
}
}
function displayPageJavascript(){
echo "<script type="text/javascript">";
foreach($GLOBALS['pageJavascript'] as $pageJavascript){
echo $pageJavascript;
echo "\n";
}
echo "</script>";
}
ボタンを直接追加するのではなく、追加する場合は常に、次のようにします。{addButton tabID = $ uniqueId operation = $ op}
したがって、Smartyテンプレートは次のようになります。
Smartyテンプレート
<script type="text/javascript" src="./js/buttonInit.js"></script>
<div id="tabContent_{$uniqueId}">
<table>
{foreach $operations as $op}
<tr><td>{addButton tabID=$uniqueId operation=$op}</td></tr>
{/foreach}
</table>
</div>
...
...
...
<!-- bottom of smarty template -->
{displayPageJavascript}
誰かが飛び込んで、PHPでHTMLとJavascriptを書くのは醜いので、やるべきではないと言う前に、私は完全に同意します！
ただし、この場合、Smartyでプラグインとしてウィジェットを作成することの利点は、醜さを上回ります。
- これにより、ウィジェットを操作するためのJavascriptがウィジェットのHTMLの数行以内に収まるようになります。これにより、ウィジェットを個別のファイルに配置する場合に比べて、ウィジェットの作成とデバッグがはるかに簡単になります。
- ウィジェットの実装をSmartテンプレートから非表示にすることは、その実装を1か所で一度変更できることを意味し、そのウィジェットのすべての使用が更新されることを確認します。
- テンプレート編集者が追加するウィジェットにJavascriptを個別に追加することを覚えておく必要がないため、コードの信頼性が大幅に向上します。そのため、テンプレートの編集でのミスが大幅に少なくなります。