JvaScript的type属性等于text/html 例子

简介:

在使用javascript标签<script>的时候,其中type最常用的就是text/javascript

其实这个type还有其他用法,下面直接给出例子:



type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示

<script id="commentTemplate" type="text/html"> 
	<li>
		<div class="photo">
			<a href="#"> <img src="[UserImg]" /></a>
		</div>
		<p>
			<a href="#">[UserName]:</a><span class="time">[CreateDate]</span>
		</p>
		<div class="clear"></div>
	</li>
</script>

再看上面的代码片段,我们在下面的代码中怎么使用,如下:

<html>
<head>
<title>标题</title>
</head>
<body>
	<div id="comment_ul_2"></div>
	<input type="button" id="addFun" value="click me" />
	<script type="text/javascript">
		var reg = new RegExp("\[([^\[\]]*?)\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
		$("#addFun").click(function() {
			var html = document.getElementById("commentTemplate").innerHTML;
			var source = html.replace(reg, function(node, key) {
				return {
					'UserImg' : '1',
					'UserName' : '张',
					'CreateDate' : '2011-1-1'
				}[key];
			});
			$("#comment_ul_2").append(source);
		});
		var zzl = "name:[name]";
		zzl = zzl.replace(reg, function(node, key) {
			return {
				'name' : '小明'
			}[key];
		});
		alert(zzl);
	</script>
</body>
</html>

这里解释一下:其中有一个replace,在替换时,可以接受一个json字符串,然后根据json的key来对比js模块里的key,进行赋值!



另外,网上有一些比较好的关于 text/template 模版用法的插件js,也是个很好用的模版技术。






目录
相关文章
|
16天前
|
安全 Go
Golang深入浅出之-Go语言模板(text/template):动态生成HTML
【4月更文挑战第24天】Go语言标准库中的`text/template`包用于动态生成HTML和文本,但不熟悉其用法可能导致错误。本文探讨了三个常见问题:1) 忽视模板执行错误,应确保正确处理错误;2) 忽视模板安全,应使用`html/template`包防止XSS攻击;3) 模板结构不合理,应合理组织模板以提高可维护性。理解并运用这些最佳实践,能提升Go语言模板编程的效率和安全性,助力构建稳健的Web应用。
22 0
|
2天前
|
移动开发 前端开发 搜索推荐
【CSDN创作优化1】个人简介优化 html font属性
【CSDN创作优化1】个人简介优化 html font属性
5 0
|
13天前
|
安全 Go 开发者
Golang深入浅出之-Go语言模板(text/template):动态生成HTML
【4月更文挑战第25天】Go语言的`text/template`和`html/template`库提供动态HTML生成。本文介绍了模板基础,如基本语法和数据绑定,以及常见问题和易错点,如忘记转义、未初始化变量、复杂逻辑处理和错误处理。建议使用`html/template`防止XSS攻击,初始化数据结构,分离业务逻辑,并严谨处理错误。示例展示了条件判断和循环结构。通过遵循最佳实践,开发者能更安全、高效地生成HTML。
22 0
|
17天前
|
Java 数据库
【java】RTF转HTML或者TEXT
【java】RTF转HTML或者TEXT
8 1
|
2月前
|
存储 开发者 SEO
|
2月前
|
移动开发 JavaScript 前端开发
编程笔记 html5&css&js 028 HTML输入属性(2/2)
编程笔记 html5&css&js 028 HTML输入属性(2/2)
|
2月前
|
JavaScript 前端开发
编程笔记 html5&css&js 027 HTML输入属性(1/2)
编程笔记 html5&css&js 027 HTML输入属性(1/2)
|
2月前
编程笔记 html5&css&js 023 HTML表单属性
编程笔记 html5&css&js 023 HTML表单属性
|
2月前
|
存储 移动开发 前端开发
编程笔记 html5&css&js 010 HTML全局属性
编程笔记 html5&css&js 010 HTML全局属性
|
存储 前端开发 JavaScript
SAP UI5 应用 index.html 里各个属性赋值逻辑的讲解
SAP UI5 应用 index.html 里各个属性赋值逻辑的讲解
SAP UI5 应用 index.html 里各个属性赋值逻辑的讲解