-
字符串处理常常用在处理服务器回传的数据、动态拼接生成html等，是前端面试的必考题。
-
我觉得字符串处理这种常用到的，一定要了然于心，不然用到时急急忙忙去翻手册费半天。
入正题，首先提出平常遇到的几个需求，后面我们来一步一步解决它：
需求1：根据服务器返回的json数据，动态添加元素到列表<ul> 【难度：1】
使用场景：瀑布流下拉刷新、延迟加载、ajax点击加载列表
html模板是这样：
<ul class="icon_list">
<li><a href="#"><img src="images/floor1-1.png" ></a>
<p>360杀毒</p>
<p>10.00M</p>
<a href="">下载</a></li>
<li><a href="#"><img src="images/floor1-2.png" ></a>
<p>软件管家</p>
<p>10.00M</p>
<a href="">下载</a></li>
</ul>
json是这样：
{softList:[
{"name":"360杀毒","size":"10.00M","png_src":"/floor1-1.png","href":"www.baidu.com"},
{"name":"软件管家","size":"12.00M","png_src":"/floor1-2.png","href":"www.baidu.com"},
{"name":"360浏览器","size":"14.00M","png_src":"/floor1-3.png","href":"www.baidu.com"},
{"name":"360商场","size":"10.20M","png_src":"/floor1-4.png","href":"www.baidu.com"},
{"name":"影视大全","size":"11.00M","png_src":"/floor1-5.png","href":"www.baidu.com"},
{"name":"万能省电","size":"13.00M","png_src":"/floor1-6.png","href":"www.baidu.com"},
{"name":"360wifi","size":"25.10M","png_src":"/floor1-7.png","href":"www.baidu.com"},
{"name":"360ROOT","size":"10.90M","png_src":"/floor1-8.png","href":"www.baidu.com"},
]}
结果是这样：
解决思路：将动态生成各个<li>拼接成字符串，追加到父节点的innerHTML里面
下面给出直接可运行的页面代码（本文太长的代码都会默认折叠了一下）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>page name</title>
<style>
/*超链接去下划线*/
a {
display: block;
overflow: hidden;
outline: none;
text-decoration: none;
color: black;
font-family: "Microsoft YaHei UI";
color: #333;
}
/*li去掉点号*/
li {
list-style-type: none;
text-align: center;
}
.floor h2 {
font-size: 1.6em;
margin-top: 10px;
margin-left: 4%;
color: #333333;
}
/*响应式布局核心css*/
.floor .icon_list{
min-width: 320px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.floor .icon_list li {
width: 25%;
margin-bottom: 15px;
}
.floor .icon_list li img {
width: 60%;
}
.floor .icon_list li p {
margin: 4px;
font-size: 15px;
color: #33333f;
}
.floor .icon_list li p:nth-child(3) {
color: #ccc;
font-size: 14px;
}
.floor .icon_list li a:last-child {
margin: 5px auto 0;
width: 66%;
height: 25px;
border: none;
line-height: 27px;
border-radius: 18px;
background: #def3e1;
font-size: 14px;
color: #23ac38;
}
</style>
</head>
<body>
<!--手机软件-->
<div class="content">
<div class="floor">
<h2>手机软件</h2>
<ul class="icon_list" id="softList">
</ul>
</div>
</div>
</div>
</body>
<script>
//json可以通过ajax加载进来
var json = {
softList: [
{"name": "360杀毒", "size": "10.00M", "png_src": "/floor1-1.png", "href": "www.baidu.com"},
{"name": "软件管家", "size": "12.00M", "png_src": "/floor1-2.png", "href": "www.baidu.com"},
{"name": "360浏览器", "size": "14.00M", "png_src": "/floor1-3.png", "href": "www.baidu.com"},
{"name": "360商场", "size": "10.20M", "png_src": "/floor1-4.png", "href": "www.baidu.com"},
{"name": "影视大全", "size": "11.00M", "png_src": "/floor1-5.png", "href": "www.baidu.com"},
{"name": "万能省电", "size": "13.00M", "png_src": "/floor1-6.png", "href": "www.baidu.com"},
{"name": "360wifi", "size": "25.10M", "png_src": "/floor1-7.png", "href": "www.baidu.com"},
{"name": "360ROOT", "size": "10.90M", "png_src": "/floor1-8.png", "href": "www.baidu.com"},
]
}
//动态添加’手机软件 处的列表元素
function addSoftList(softList) {
//a要使用getElementById，如果使用getElementsByClassName注意要加[0]
var a = document.getElementById(‘softList‘);
//var a = document.getElementsByClassName(‘icon_list‘)[0];
var str = ‘‘;
//一条li的格式
/*<li><a href="#"><img src="images/floor1-1.png" ></a>
<p>360杀毒</p>
<p>10.00M</p>
<a href="">下载</a></li>*/
for (var i in softList) {
str += ‘<li><a href="#"><img src="images‘ + softList[i].png_src + ‘" ></a>‘ +
‘<p>‘ + softList[i].name + ‘</p>‘ +
‘<p>‘ + softList[i].size + ‘</p>‘ +
‘<a href="‘ + softList[i].href + ‘">下载</a></li>‘;
}
//追加元素
a.innerHTML += str;
};
//这样调用
addSoftList(json.softList);
</script>
</html>
展开代码
顺便也做成了Flex响应式布局，无论页面是什么尺寸都会自动适应页面大小。
不明白什么是Flex响应式布局的可参见 http://www.cnblogs.com/chris-oil/p/5831028.html
11.5 未完待续。。
时间： 2024-10-05 23:11:41