[WebDev] 排版html的一些方式总结

在学习网页编程的时候逐渐学习到一些html+js/php的写法，可以把在js/php中得到变量的值渲染到html中。这篇文章目的是总结一下不同的方法

不能成功的写法

// vulnerable to Cross-site Scripting (XSS) attacks
    members.forEach((member) => {
      html += `
        <img
          src="${member.avatar_url}"
          alt="image of ${member.login}"
          width="150">
      `;
    });

可能会被XSS恶意插入奇怪的东西
可以利用purify提高安全性：

const sanitizedHTML = DOMPurify.sanitize(html);
$("#results").html(sanitizedHTML);

fragment

	let fragment = document.createDocumentFragment();

    members.forEach((member) => {
      let img = document.createElement("img");
      img.src = member.avatar_url;
      img.width = 150;
      img.alt = `image of ${member.login}`;
      fragment.append(img);
    });

    $("#results").html(fragment);

handlebar

handlebar doc

Expressions

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

用{{}}表示变量

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

用<script>tag创建template

Pre-compilation

var source   = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);

更好的方法是用precompile，runtime library会更小。对于移动端应用比较重要

Execution

var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

一些注意事项

children of helpers such as each would require the use of …/ while children of helpers such as if do not

如果有loop，需要…/返回main context

注释：{{!-- --}} or {{! }}

Helper

<div class="post">
  <h1>By {{fullName author}}</h1>
  <div class="body">{{body}}</div>

  <h1>Comments</h1>

  {{#each comments}}
  <h2>By {{fullName author}}</h2>
  <div class="body">{{body}}</div>
  {{/each}}
</div>

var context = {
  author: {firstName: "Alan", lastName: "Johnson"},
  body: "I Love Handlebars",
  comments: [{
    author: {firstName: "Yehuda", lastName: "Katz"},
    body: "Me too!"
  }]
};

Handlebars.registerHelper('fullName', function(person) {
  return person.firstName + " " + person.lastName;
});

<div class="post">
  <h1>By Alan Johnson</h1>
  <div class="body">I Love Handlebars</div>

  <h1>Comments</h1>

  <h2>By Yehuda Katz</h2>
  <div class="body">Me Too!</div>
</div>

php+html

html中写php

通过php从数据库得到变量的值，然后直接通过php echo 写入html

<tbody>
	<?php while ( $row = $results->fetch_assoc() ) : ?>
	<tr>
		<td>
			<a href="details.php?track_id=<?php echo $row['track_id']; ?>">					
				<?php echo $row['track']; ?>
			</a>								
		</td>
		<td><?php echo $row['genre']; ?></td>
		<td><?php echo $row['media_type']; ?></td>
	</tr>
	<?php endwhile; ?>
</tbody>

php中写html

用php echo就可以写html。
还可以用php写js：
echo "<script language='javascript' type='text/javascript'>";
可以用来处理php与js之间变量引用问题