每次在写脚本的时候拼装字符串是个头痛的事情，主要是双引号，单引号，还有一堆变量，一不小心就搞错了，而且可读性非常差。这里推荐一个小工具：http://www.html-js.com/my-js/version0.0.1/tool/html2string.html 这个工具可以将复杂的字符串转换成js的字符串。至少解决的了手动拼装的的问题，但是变量的话还是非常难受。比如一个列表：
- 《愚人码头》 – 熊天平
- 《富士山下》 - 陈奕迅
- 《假如》 – 信乐团
- …
通常如果是异步的请求，后端一般返回回来的是一个json：
1 | [ |
2 | {"song":"愚人码头","songurl":"http://www.css88.com/mp3/1.html","songer":"熊天平","songerurl":"http://www.css88.com/songer/1.html"}, |
3 | {"song":"富士山下","songurl":"http://www.css88.com/mp3/2.html","songer":"陈奕迅","songerurl":"http://www.css88.com/songer/2.html"}, |
4 | {"song":"假如","songurl":"http://www.css88.com/mp3/3.html","songer":"信乐团","songerurl":"http://www.css88.com/songer/3.html"} |
5 | ] |
通常情况下会这样拼装：
01 | var listData=[ |
02 | {"song":"愚人码头","songurl":"http://www.css88.com/mp3/1.html","songer":"熊天平","songerurl":"http://www.css88.com/songer/1.html"}, |
03 | {"song":"富士山下","songurl":"http://www.css88.com/mp3/2.html","songer":"陈奕迅","songerurl":"http://www.css88.com/songer/2.html"}, |
04 | {"song":"假如","songurl":"http://www.css88.com/mp3/3.html","songer":"信乐团","songerurl":"http://www.css88.com/songer/3.html"} |
05 | ]; |
06 | var listHtml="<ul>" |
07 | for(var i=0,lengths = listData.length;i < lengths;i++){ |
08 | listHtml+='<li class="item">《'+listData[i].song+'》 - <span>'+listData[i].songer+'</span>' |
09 | } |
10 | listHtml+="</ul>" |
11 | console.log(listHtml); |
如果给歌曲歌手加链接更加复杂。群里有人可以引入模板概念，这样至少结构上可以清晰，可读性会增强.
写了一段脚本：
1 | String.prototype.formatTemp = function(temp){ |
2 | var str=this; |
3 | for(var k in temp){ |
4 | var regObj = new RegExp("{"+k+"}","g"); |
5 | str = str.replace(regObj,temp[k]); |
6 | } |
7 | return str; |
8 | }; |
这样可以将上面的脚本改写成：
01 | var listData=[ |
02 | {"song":"愚人码头","songurl":"http://www.css88.com/mp3/1.html","songer":"熊天平","songerurl":"http://www.css88.com/songer/1.html"}, |
03 | {"song":"富士山下","songurl":"http://www.css88.com/mp3/2.html","songer":"陈奕迅","songerurl":"http://www.css88.com/songer/2.html"}, |
04 | {"song":"假如","songurl":"http://www.css88.com/mp3/3.html","songer":"信乐团","songerurl":"http://www.css88.com/songer/3.html"} |
05 | ]; |
06 | var listHtml="<ul>", |
07 | temp='<li class="item">《{song}》 - <span>{songer}</span></li>' |
08 | for(var i=0,lengths = listData.length;i < lengths;i++){ |
09 | listHtml+=temp.formatTemp(listData[i]); |
10 | } |
11 | listHtml+="</ul>" |
12 | console.log(listHtml); |
当然可以用数组拼装：
01 | var listData=[ |
02 | {"song":"愚人码头","songurl":"http://www.css88.com/mp3/1.html","songer":"熊天平","songerurl":"http://www.css88.com/songer/1.html"}, |
03 | {"song":"富士山下","songurl":"http://www.css88.com/mp3/2.html","songer":"陈奕迅","songerurl":"http://www.css88.com/songer/2.html"}, |
04 | {"song":"假如","songurl":"http://www.css88.com/mp3/3.html","songer":"信乐团","songerurl":"http://www.css88.com/songer/3.html"} |
05 | ]; |
06 | var listHtml="</ul><ul>", |
07 | temp='<li class="item">《{song}》 - <span>{songer}</span></li>', |
08 | listArr=[]; |
09 | for(var i=0,lengths = listData.length;i < lengths;i++){ |
10 | listArr.push(temp.formatTemp(listData[i])); |
11 | } |
12 | listHtml+=listArr.join(""); |
13 | console.log(listHtml); |