将HTML从JavaScript中抽离(源自:编写可维护的JavaScript)
2016-04-01 11:24
501 查看
1.方法一:从服务器加载(ajax)
结论:需特别注意XSS漏洞
2.方法二:简单客户端模版
(1)在HTML注释中包含模版,注释是和元素及文本一样的DOM节点
结论:非常不推荐,因为注释必须挨着<ul id="mylist">,如果有空格或者回车,firstChild就不是该li注释了。
(2)使用一个带有自定义type属性的<script>元素
结论:针对比较简单的模版
3.方法三:复杂客户端模版
使用Hanlebars等模版引擎,支持一些简单的逻辑和循环,有的模版引擎同时支持原生语法和简洁语法,简洁语法往往用{{key}}来进行数据替换,原生语法可以在模版中使用js代码,一般通过这样的方式输出数据<%=key%>
结论:需特别注意XSS漏洞
2.方法二:简单客户端模版
(1)在HTML注释中包含模版,注释是和元素及文本一样的DOM节点
<ul id="mylist"><!--<li><a href="%s">%s</a></li>--> <li><a href="/item/1">First item</a></li> <li><a href="/item/2">Second item</a></li> <li><a href="/item/3">Third item</a></li> </ul>
function sprintf(text){ var i = 1, args = arguments; return text.replace(/%s/g,function(){ return (i < args.length) ? args[i++] : ""; }); } function addItem(url, text){ var myList = document.getElementById("mylist"), templateText = myList.firstChild.nodeValue, result = sprintf(templateText, url, text); mylist.insertAdjacentHTML("beforeEnd", result); } addItem("/item/4", "Fourth item");
结论:非常不推荐,因为注释必须挨着<ul id="mylist">,如果有空格或者回车,firstChild就不是该li注释了。
(2)使用一个带有自定义type属性的<script>元素
<ul id="mylist"> <li><a href="/item/1">First item</a></li> <li><a href="/item/2">Second item</a></li> <li><a href="/item/3">Third item</a></li> </ul> <script type="text/x-my-template" id="list-item"> <li><a href="%s">%s</a></li> </script>
function sprintf(text){ var i = 1, args = arguments; return text.replace(/%s/g,function(){ return (i < args.length) ? args[i++] : ""; }); } function addItem(url, text){ var myList = document.getElementById("mylist"), script = document.getElementById("list-item"), templateText = script.text, result = sprintf(templateText, url, text), div = document.createElement("div"); div.innerHTML = result.replace(/^\s*/, ""); mylist.appendChild(div.firstChild); } addItem("/item/4", "Fourth item");
结论:针对比较简单的模版
3.方法三:复杂客户端模版
使用Hanlebars等模版引擎,支持一些简单的逻辑和循环,有的模版引擎同时支持原生语法和简洁语法,简洁语法往往用{{key}}来进行数据替换,原生语法可以在模版中使用js代码,一般通过这样的方式输出数据<%=key%>
相关文章推荐
- js获取html下拉框中选中值的自定义属性值
- JavaScript 的内置对象(1)
- 【笔记】 《js权威指南》- 第3章 类型、值和变量 - 3.2 文本
- JavaScript系列:函数 自执行 表达式 声明 定义
- 礼拜五log~js函数收集袋
- jsp servlet 中文乱码问题
- fastjson 解析json
- javascript继承
- js 取值
- JSP 基础知识点总结 01
- 数据解析-----Json-----XML
- JsDoc脚本注释文档生成
- js只弹窗一次
- 正确加载 Javascript 和 CSS 到 WordPress
- JavaScript中getBoundingClientRect()方法详解
- JS判断对象是不是数组“Array”
- JSON.parse()和JSON.stringify()
- Web相关:Sublime如何安装ESLint插件?
- iOS js oc相互调用(JavaScriptCore)(二)
- iOS js oc相互调用(JavaScriptCore)