每次在写脚本的时候拼装字符串是个头痛的事情,主要是双引号,单引号,还有一堆变量,一不小心就搞错了,而且可读性非常差。这里推荐一个小工具:http://www.html-js.com/my-js/version0.0.1/tool/html2string.html?这个工具可以将复杂的字符串转换成js的字符串。至少解决的了手动拼装的的问题,但是变量的话还是非常难受。比如一个列表:
- 《》 – 熊天平
- 《富士山下》 -?陈奕迅
- 《假如》 – 信乐团
- …
[code=”javascript”]
[
{“song”:””,”songurl”:”https://www.html.cn/mp3/1.html”,”songer”:”熊天平”,”songerurl”:”https://www.html.cn/songer/1.html”},
{“song”:”富士山下”,”songurl”:”https://www.html.cn/mp3/2.html”,”songer”:”陈奕迅”,”songerurl”:”https://www.html.cn/songer/2.html”},
{“song”:”假如”,”songurl”:”https://www.html.cn/mp3/3.html”,”songer”:”信乐团”,”songerurl”:”https://www.html.cn/songer/3.html”}
]
[/code]
通常情况下会这样拼装:
[code=”javascript”]
var listData=[
{“song”:””,”songurl”:”https://www.html.cn/mp3/1.html”,”songer”:”熊天平”,”songerurl”:”https://www.html.cn/songer/1.html”},
{“song”:”富士山下”,”songurl”:”https://www.html.cn/mp3/2.html”,”songer”:”陈奕迅”,”songerurl”:”https://www.html.cn/songer/2.html”},
{“song”:”假如”,”songurl”:”https://www.html.cn/mp3/3.html”,”songer”:”信乐团”,”songerurl”:”https://www.html.cn/songer/3.html”}
];
var listHtml=”
- ”
- 《’+listData[i].song+’》 – ‘+listData[i].songer+’‘
}
listHtml+=”
for(var i=0,lengths = listData.length;i < lengths;i++){ listHtml+='
”
console.log(listHtml);
[/code]
如果给歌曲歌手加链接更加复杂。群里有人可以引入模板概念,这样至少结构上可以清晰,可读性会增强.
写了一段脚本:
[code=”javascript”]
String.prototype.formatTemp = function(temp){
var str=this;
for(var k in temp){
var regObj = new RegExp(“{“+k+”}”,”g”);
str = str.replace(regObj,temp[k]);
}
return str;
};
[/code]
这样可以将上面的脚本改写成:
[code=”javascript”]
var listData=[
{“song”:””,”songurl”:”https://www.html.cn/mp3/1.html”,”songer”:”熊天平”,”songerurl”:”https://www.html.cn/songer/1.html”},
{“song”:”富士山下”,”songurl”:”https://www.html.cn/mp3/2.html”,”songer”:”陈奕迅”,”songerurl”:”https://www.html.cn/songer/2.html”},
{“song”:”假如”,”songurl”:”https://www.html.cn/mp3/3.html”,”songer”:”信乐团”,”songerurl”:”https://www.html.cn/songer/3.html”}
];
var listHtml=”
- “,
- 《{song}》 – {songer}
temp=’
‘
for(var i=0,lengths = listData.length;i < lengths;i++){
listHtml+=temp.formatTemp(listData[i]);
}
listHtml+="
”
console.log(listHtml);
[/code]
当然可以用数组拼装:
[code=”javascript”]
var listData=[
{“song”:””,”songurl”:”https://www.html.cn/mp3/1.html”,”songer”:”熊天平”,”songerurl”:”https://www.html.cn/songer/1.html”},
{“song”:”富士山下”,”songurl”:”https://www.html.cn/mp3/2.html”,”songer”:”陈奕迅”,”songerurl”:”https://www.html.cn/songer/2.html”},
{“song”:”假如”,”songurl”:”https://www.html.cn/mp3/3.html”,”songer”:”信乐团”,”songerurl”:”https://www.html.cn/songer/3.html”}
];
var listHtml=”
- “,
- 《{song}》 – {songer}
temp=’
‘,
listArr=[];
for(var i=0,lengths = listData.length;i < lengths;i++){
listArr.push(temp.formatTemp(listData[i]));
}
listHtml+=listArr.join("");
console.log(listHtml);
[/code]
群里的朋友很活跃,分享了怿飞的一篇文章《Simple JavaScript Template : substitute》,看了之后感觉比我这个完善的多了,推荐一下!
真神奇,我也写过这样一段一模一样的代码。
JS模板的概念越来越重要
这种模板方式效率很低, 如果json对象属性很多, 替换一次就非得所有属性遍历一次, 而且for in的效率也是低, 所以最好思路应该是遍历模板字符串, 找到需要替换的标记, 再逐个替换
在原型链里加formatTemp, 这样每个字符串都会有formatTemp这个方法。建议最好分开
String. formatTemp = function(str,model){
for(var k in model){
var re = new RegExp(“{“+k+”}”,”g”);
str = str.replace(re,model[k]);
}
return str;
}
这样去用:
String.formatTemp(temp, listData[i]);
思想非常值得借鉴
我一直用的jquery.tmpl插件实现这类插入的,感觉挺不错。
数据模版的方式的确更便于开发,性能上倒是没研究过
用数组方式拼装的效率最高,网路上有相关的文章
songer …