Javascript 用一种干净的方法来模板化一个HTML代码块，该代码块只接受标题/内容参数，其中的内容可能很大，并且布满了新行

我正在学校的网络服务器上使用Accordion（jQuery）。目前，我的编码方案使用PHP/HTML/CSS/Javascript。在为手风琴模块编写条目时，我开始注意到一个自动化/模板化的机会。我编写以下代码：

<h3>Title</h3>
<div class="nobg">
  <p class="nobg">
    <!-- Entry text -->
  </p>
</div>

标题

因此，我正在寻找基于以下需求的最佳代码模板方法的指针：

• 可调参数：标题、内容
• 当制作具有大内容“参数”的新模块时，该参数的创建应保持可读性

因为我已经在使用PHP，所以我在想可能是某种模板函数：

<? php accordion_entry("Title", "Entry Text" ?>

---

我找到了临时解决方案，直到有人提出更好的方案！请复习！我不是PHP专家！！：D

PHP函数：

<?php

function accordionEntry($title, $entry)
{
    echo '<h3>' . $title . '</h3>';
    echo '<div class="nobg">';
    echo '  <p class="nobg">';
    echo $entry;                //  <!-- Entry text -->
    echo '  </p>';
    echo '</div>';
}

?>



PHP函数调用：

<?php accordionEntry(
    "GSM0107IG001 - Integration Manual",

    '<a href="EnablerIIG/GSM0107_full.pdf">PDF</a>
    <p>
        The release date is 2007 but the pinout seems to check out (I did some small verifications with my PCB). Also, the reference documents are all valid!
    </p>');
?>


创建一个分部，并将您的内容与设置一起加载到其中
phtml（如果您愿意，只需使用.html，这并不重要）

使用变量存储字符串并将其传递到函数中。我编辑了我的帖子，以反映我对模板格式的另一个要求。请看一看（请看XML标签）您有没有看过AngularJS、Knockout、Handlebar或Mustache？所有这些都允许您进行内置操作，有些操作比其他操作更容易/更轻。我也会提供一个纯PHP的答案，但是我会考虑做一些关于“数据绑定”JS库的研究。布瑞恩，我刚刚在我的文章上做了一个最后的编辑。一定要读它，它可能会改变你的答案！好啊现在它更像是安格拉斯和车把。（都是js LIB）。您还应该看看smarty，它是一种php模板语言。基本上，您谈论的是模板和部分，这是MV*类型应用程序（模型、视图等）的一个组件，这些解决方案通常是js和php模板库的重要组成部分。不过，在我的回答中，我仍将向您展示如何以本机方式实现这一点。这当然是可行的，但您的生产率提高在哪里？你正在进入面向对象的领域，这要么是一个装饰者的解决方案，要么是一个模板对象。我觉得如果我把我的网站作为一个整体展示的话。你会说“滚开！”然后重新设计这个很棒的生产环境哈哈。哈哈。。。也许吧，但是学习有时需要你先做很长的路，这样你才能理解更好的方法的好处。
<?php

function accordionEntry($title, $entry)
{
    echo '<h3>' . $title . '</h3>';
    echo '<div class="nobg">';
    echo '  <p class="nobg">';
    echo $entry;                //  <!-- Entry text -->
    echo '  </p>';
    echo '</div>';
}

?>

<?php accordionEntry(
    "GSM0107IG001 - Integration Manual",

    '<a href="EnablerIIG/GSM0107_full.pdf">PDF</a>
    <p>
        The release date is 2007 but the pinout seems to check out (I did some small verifications with my PCB). Also, the reference documents are all valid!
    </p>');
?>

<accordion-entry title="<?php $title ?>">
   <?php $content ?>
</accordion-entry>

<div><?= renderPartial('accordian.phtml',array(
                                   'title'=>'GSM0107IG001 - Integration Manual',
                                   'content' => '<p>your html</p>'
                                    )); ?>

function partial($partial, $settings){
     //will load html from indicated file, and merge passed settings and content into place before returning all $html
     // this allows the reuse of the 'partial()' function for other snippets

     $template = file_get_contents($partial);

     //$settings should be an array, and then your keys can be extracted as variables that match the $settings variables (such as $title) that exist in the .html partial file

     extract($settings);  //will assign any keys in your array, such as 'title' to php variables of the same name... so in this case $title, and $content

     echo $template;

}