0 前言
在 关于Vue学习笔记6中纯JavaScript实现的改进优化1_PurpleEndurer@5lcto的技术博客_51CTO博客 中，我们提到了一个进一步优化的方向，把表示水果的选项信息存在一个数组里，通过JavaScript输出<li>元素描述代码给用户进行选择。
现在我们就来实现这种改进。
1 提取信息来定义数组
我们显示用户选择水果的信息中，主要包括三项内容，第一个是水果的名字，第二个是ID，第三个是水果的颜色，这样看来，我们可以定义一个二维数组来存储：
- 数组的每一行包括三个元素，
- 第一个元素是字符串类型，用来保存水果的名称，
- 第二个元素也是字符串类型，保存水果的ID。
- 第三个元素也是字符串类型，保存水果的颜色。
如：
var aFruits = new Array(['苹果', 'Apple', 'red'],
['桔子', 'Orange', 'orange'],
['葡萄', 'Grape', 'purple'],
['其它', 'Other', 'blue']);2 编写生成页面元素的代码
在页面上的元素主要分为两类，一类是提供给用户选择的水果元素，另一类是展示用户选定的水果元素。
下面我们分别来编写它们的生成代码。
2.1 编写提供给用户选择的水果元素代码
原始的静态页面中的元素代码是这样的：
<p>
<label>
<input type="radio" value="苹果" name="fruit" onchange="showFruit(this.value)" />
苹果
</label>
</p>
<p>
<label>
<input type="radio" value="桔子" name="fruit" onchange="showFruit(this.value)" />
桔子
</label>
</p>
<p>
<label>
<input type="radio" value="葡萄" name="fruit" onchange="showFruit(this.value)" />
葡萄
</label>
</p>
<p>
<label>
<input type="radio" value="其它" name="fruit" onchange="showFruit(this.value)" />
其它
</label>
</p>利用上面定义的aFruits数组，我们可以很容易地写出下面的代码：
function genFruitOption()
{
for (var i=0; i<aFruits.length; i++)
{
document.write('<p>\n\t<label>\n\t\t<input type="radio" value="',
aFruits[i][0],
'" name="fruit" onchange="showFruit(this.value)" />\n\t\t\t',
aFruits[i][0],
'\n\t</label>\n</p>');
} // for
} //genFruitOption()由于是由JavaScript来生成代码，因此我们可以不用考虑静态页面元素描述代码中的换行(\n）、缩进(\t）等为了层次好看而使用的转义代码，精简如下：
function genFruitOption()
{
for (var i=0; i<aFruits.length; i++)
{
document.write('<p><label><input type="radio"value="',
aFruits[i][0],
'" name="fruit" onchange="showFruit(this.value)" />',
aFruits[i][0],
'</label></p>');
} //for
} //genFruitOption()2.2 编写展示用户选定的水果元素代码
原始的静态页面中的元素代码是这样的：
<li id="liApple" style="color:red">苹果</li>
<li id="liOrange" style="color:orange">桔子</li>
<li id="liGrape" style="color:purple;">葡萄</li>
<li id="liOther" style="color:blue;">其它</li>利用上面定义的aFruits数组，我们可以很容易地写出下面的代码：
function genFruitLi()
{
for (var i=0; i<aFruits.length; i++)
{
document.write('<li id="li',
aFruits[i][1],
'" style="color:',
aFruits[i][2],
'">',
aFruits[i][0],
'</li>');
} //for
} //genFruitLi()2.3 完整的代码
综合以上修改，最终的代码如下：
<script>
function showFruit(v)
{
//var oUL = document.getElementById('ulFruit');
//alert(oUL.childElementCount);
var coLi = document.getElementById('ulFruit').children;
//alert(coLi.length);
for (var i = 0; i < coLi.length; i++)
{
//alert(coLi[i].title);
coLi[i].style.display = (v==coLi[i].innerText ? "list-item" : "none");
} // for
} // showFruit(v)
var aFruits = new Array(['苹果', 'Apple', 'red'],
['桔子', 'Orange', 'orange'],
['葡萄', 'Grape', 'purple'],
['其它', 'Other', 'blue']);
function genFruitOption()
{
for (var i=0; i<aFruits.length; i++)
{
document.write('<p><label><input type="radio"value="',
aFruits[i][0],
'" name="fruit" onchange="showFruit(this.value)" />',
aFruits[i][0],
'</label></p>');
} //for
} //genFruitOption()
function genFruitLi()
{
for (var i=0; i<aFruits.length; i++)
{
document.write('<li id="li',
aFruits[i][1],
'" style="color:',
aFruits[i][2],
'">',
aFruits[i][0],
'</li>');
} //for
} //genFruitLi()
</script>
<p>用JavaScript响应click事件有条件地渲染网页元素</p>
<p>（使用数组存储水果信息）</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
by PurpleEndurer
</p>
<p>你喜欢哪种水果？</p>
<script>
genFruitOption();
</script>
<p>你喜欢的是：</p>
<ul id="ulFruit">
<script>
genFruitLi();
</script>
</ul> 2.4 代码运行的效果
3 来个号外
如果我们在输出用户选定的水果时仍然调用 genFruitOption()，即：
<script>
function showFruit(v)
{
//var oUL = document.getElementById('ulFruit');
//alert(oUL.childElementCount);
var coLi = document.getElementById('ulFruit').children;
//alert(coLi.length);
for (var i = 0; i < coLi.length; i++)
{
//alert(coLi[i].title);
coLi[i].style.display = (v==coLi[i].innerText ? "list-item" : "none");
} // for
} // showFruit(v)
var aFruits = new Array(['苹果', 'Apple', 'red'],
['桔子', 'Orange', 'orange'],
['葡萄', 'Grape', 'purple'],
['其它', 'Other', 'blue']);
function genFruitOption()
{
for (var i=0; i<aFruits.length; i++)
{
document.write('<p><label><input type="radio"value="',
aFruits[i][0],
'" name="fruit" onchange="showFruit(this.value)" />',
aFruits[i][0],
'</label></p>');
} //for
} //genFruitOption()
function genFruitLi()
{
for (var i=0; i<aFruits.length; i++)
{
document.write('<li id="li',
aFruits[i][1],
'" style="color:',
aFruits[i][2],
'">',
aFruits[i][0],
'</li>');
} //for
} //genFruitLi()
</script>
<p>用JavaScript响应click事件有条件地渲染网页元素</p>
<p>（使用数组存储水果信息）</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
by PurpleEndurer
</p>
<p>你喜欢哪种水果？</p>
<script>
genFruitOption();
</script>
<p>你喜欢的是：</p>
<ul id="ulFruit">
<script>
genFruitOption(); //这里不调用 genFruitLi()
</script>
</ul> 代码运行的效果如下：
代码仍能运行，功能也正常，就是没有把颜色用上。
4 增加水果更容易了
使用数组存储水果信息后，我们增加水果更加容易了，比如我们想增加芒果，只需要在aFruits数组最末行的'其它'前面插入芒果的信息，如下：
var aFruits = new Array(['苹果', 'Apple', 'red'],
['桔子', 'Orange', 'orange'],
['葡萄', 'Grape', 'purple'],
['芒果','Mango','yellow'],//增加芒果信息
['其它', 'Other', 'blue']);其它代码不需要改动。完整的代码如下：
<script>
function showFruit(v)
{
//var oUL = document.getElementById('ulFruit');
//alert(oUL.childElementCount);
var coLi = document.getElementById('ulFruit').children;
//alert(coLi.length);
for (var i = 0; i < coLi.length; i++)
{
//alert(coLi[i].title);
coLi[i].style.display = (v==coLi[i].innerText ? "list-item" : "none");
} // for
} // showFruit(v)
var aFruits = new Array(['苹果', 'Apple', 'red'],
['桔子', 'Orange', 'orange'],
['葡萄', 'Grape', 'purple'],
['芒果','Mango','yellow'],//增加芒果信息
['其它', 'Other', 'blue']);
function genFruitOption()
{
for (var i=0; i<aFruits.length; i++)
{
document.write('<p><label><input type="radio"value="',
aFruits[i][0],
'" name="fruit" onchange="showFruit(this.value)" />',
aFruits[i][0],
'</label></p>');
} //for
} //genFruitOption()
function genFruitLi()
{
for (var i=0; i<aFruits.length; i++)
{
document.write('<li id="li',
aFruits[i][1],
'" style="color:',
aFruits[i][2],
'">',
aFruits[i][0],
'</li>');
} //for
} //genFruitLi()
</script>
<p>用JavaScript响应click事件有条件地渲染网页元素</p>
<p>（使用数组存储水果信息）</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
by PurpleEndurer
</p>
<p>你喜欢哪种水果？</p>
<script>
genFruitOption();
</script>
<p>你喜欢的是：</p>
<ul id="ulFruit">
<script>
genFruitLi();
</script>
</ul> 代码运行效果如下：
5 小结
使用数组来存储水果信息后，我们的代码灵活性更高，更新和维护也更加便捷了。
标签：function,水果,Vue,中纯,JavaScript,genFruitOption,coLi,var,aFruits From： https://blog.51cto.com/endurer/12081885