84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
比如类似于这样的代码(或更复杂的拼接结构):
var html = ''; for (var i = 0; i < data.len; i++) { html += ' <p>' + data[i] + '</p> '; } $('#content').html(html);
该如何优化,或者避免这样的拼接循环?感觉这样的循环效率很低。
人生最曼妙的风景,竟是内心的淡定与从容!
最简的模板引擎大致是这样的:
function strrep(str,obj){ return str.replace(/\$\w+\$/gi, function(matchs) { var returns = obj[matchs.replace(/\$/g, "")]; return typeof returns === "undefined" ? "" : returns; }); } strrep( '<img src="$thesrc$" class="$theclass$">', { "thesrc":"http://s.segmentfault.com/img/logo.png?coiweJ" , "theclass":"fl tc" } )
单纯的模板引擎如:Mustache、Jade、artTemplate、tmpl、kissyTemplate、ejs等等; 前端的有 Model -> View 对应的框架也包含模板引擎,如backbone、avalon、angular等,司徒正美在这个回答里列举了一些MVVM框架,可以了解一下。
一般而言我们放在HTML中,这带来了一些问题,比如应该放在哪个标签里,如何避免解析和图片自动下载。 目前最好的方案是放在<script type="text/html">或者<script type="text/template">中; 在N年后,也可以把相应的结构放在HTML5定义的新标签<template>中(当它被广泛支持时)。
<script type="text/html">
<script type="text/template">
<template>
比如我们用到了jade作为引擎,那么代码大致是这样的:
<script type="text/template" id="theTemplate"> p.hello p#world= introductions </script> <script> var jade = require('jade') ; var template = document.getElementById("theTemplate").innerHTML ; var compile = jade.compile(template , options); var html = compile({ introductions: '你好世界' }); </script>
一般的模板引擎都会默认转义敏感字符,使用之前好好读一下相关的介绍,什么时候不会做转义处理。 如果是自己实现的模板引擎,就需要手动做转义了,一般而言都需要顾及html special chars如<>\/"',以及你自己定义的开始、结束符等。
<>\/"'
记住一句话:Play safe.
题主在题目中描述的主要担忧是效率, 然后一堆同学上来给出了效率更低的方案 (各种 template engine), 一个指出效率不是问题的同学的答案居然还被点了反对,,, 这也是醉了.
首先题主完全不用担心效率, 因为大头在浏览器解析和渲染上 (这两者中的大头又是渲染), 字符串拼接的消耗可以忽略不计. 其次再说各种模板引擎的问题, 题主可以根据自己的需要选择或种或轻的模板引擎, 如果有必要还可以直接上 MVC/MVVM 框架.
如果想生成html code的话,用模版引擎更好一些吧,例如:underscore里的_.template之类的,就能完成你想要的事情,你还不用考虑html拼接
underscore
_.template
可以试试 Handlebars.js
在现代的浏览器里,用+拼接字符串效率已经不低了,题主可以做做实验
大家都在推崇前端js模板,我个人更倾向于后端模板。这里比较一下这两者的优劣: 优势:
1. 前端人员完成全部相关工作,与后端只交互数据即可,工作范围划分明确。 2. 前端模板可以把html代码块拆分,重新进行排列组合,更加灵活。
劣势:
1. 前端模板需要浏览器渲染,会出现短暂的空白再跳出来数据,体验不好。而且发送异步请求,肯定会有加载时差,用bigpipe这样的技术去优化也会增加使用的复杂度。 2. 前端模板写出来的代码块与实际调用的地方是分开的,IDE对JS模板插件支持一般不好,阅读代码会有些麻烦。 3. 前端模板html是需要拼接,会与最终生产的代码不一样,而后端模板看到的基本上就是接近于最终html。
后端模板可以选择的有很多,比如Freemarker、JSTL、velocity。
Freemarker
JSTL
velocity
第一次给自己答案写这么多评论,再重申一下,当然有些场景是非常适合甚至只能用前端模板的,对于SEO等要求肯定只能用后端模板,而且具体的技术选型也要根据团队的技术储备等众多因素去考虑。
for (var i = 0; i < data.len; i++) { var p = $("
"); p.html(data[i]); html.append(p); } $('#content').html(html);
我也想知道有没有更好的方法
jsvar arr = ['con1', 'con2', 'con3'] var p = '<p>' + arr.join('</p><p >') + '</p>' console.log(p)
js
var arr = ['con1', 'con2', 'con3'] var p = '<p>' + arr.join('</p><p >') + '</p>' console.log(p)
一直在用handlebars
有次面试被问到用没用到js 模板,当时好像是没有回答出来啊
1# 模板引擎是一个很好的方案,解决了数据和文档结构的耦合
最简的模板引擎大致是这样的:
单纯的模板引擎如:Mustache、Jade、artTemplate、tmpl、kissyTemplate、ejs等等;
前端的有 Model -> View 对应的框架也包含模板引擎,如backbone、avalon、angular等,司徒正美在这个回答里列举了一些MVVM框架,可以了解一下。
2# 文档结构文本不应当在js中以字符串字面量的形式表示
一般而言我们放在HTML中,这带来了一些问题,比如应该放在哪个标签里,如何避免解析和图片自动下载。
目前最好的方案是放在
<script type="text/html">
或者<script type="text/template">
中;在N年后,也可以把相应的结构放在HTML5定义的新标签
<template>
中(当它被广泛支持时)。比如我们用到了jade作为引擎,那么代码大致是这样的:
3# 注意提防XSS
一般的模板引擎都会默认转义敏感字符,使用之前好好读一下相关的介绍,什么时候不会做转义处理。
如果是自己实现的模板引擎,就需要手动做转义了,一般而言都需要顾及html special chars如
<>\/"'
,以及你自己定义的开始、结束符等。记住一句话:Play safe.
题主在题目中描述的主要担忧是效率, 然后一堆同学上来给出了效率更低的方案 (各种 template engine), 一个指出效率不是问题的同学的答案居然还被点了反对,,, 这也是醉了.
首先题主完全不用担心效率, 因为大头在浏览器解析和渲染上 (这两者中的大头又是渲染), 字符串拼接的消耗可以忽略不计. 其次再说各种模板引擎的问题, 题主可以根据自己的需要选择或种或轻的模板引擎, 如果有必要还可以直接上 MVC/MVVM 框架.
如果想生成html code的话,用模版引擎更好一些吧,例如:
underscore
里的_.template
之类的,就能完成你想要的事情,你还不用考虑html拼接可以试试 Handlebars.js
在现代的浏览器里,用+拼接字符串效率已经不低了,题主可以做做实验
大家都在推崇前端js模板,我个人更倾向于后端模板。这里比较一下这两者的优劣:
优势:
劣势:
后端模板可以选择的有很多,比如
Freemarker
、JSTL
、velocity
。第一次给自己答案写这么多评论,再重申一下,当然有些场景是非常适合甚至只能用前端模板的,对于SEO等要求肯定只能用后端模板,而且具体的技术选型也要根据团队的技术储备等众多因素去考虑。
for (var i = 0; i < data.len; i++) {
var p = $("
");
p.html(data[i]);
html.append(p);
}
$('#content').html(html);
我也想知道有没有更好的方法
一直在用handlebars
有次面试被问到用没用到js 模板,当时好像是没有回答出来啊