使用<script>和HTML5<template>作为模板元素的差别:能否使用jQuery选中

最新推荐文章于 2025-10-02 18:14:31 发布

原创

最新推荐文章于 2025-10-02 18:14:31 发布 · 6.8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5新template #js模板引擎 #为什么不使用script作模板

本文探讨了HTML5的<template>元素与<script>元素在用作模板时的差异，以及为何在某些情况下不建议使用<script>来选择和操作模板。内容涉及JS模板引擎的选择与最佳实践。

前端模板技术不是什么新技术了，有很多知名的js模板引擎，如：HandlebarsJS、Mustache 、artTemplate、还有我最近在学习的ionic框架等。这些模板引擎一般都是使用<script>来承载模板内容。

下面是HandlebarsJS的模板：

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

下面是ionic框架popover的模板：

<script id="my-popover.html" type="text/ng-template">
	<ion-popover-view>
		<ion-header-bar>
		  <h1 class="title">My Popover Title</h1>
		</ion-header-bar>
		<ion-content>
		  Hello!
		</ion-content>
	</ion-popover-vi