IFE斌斌学院-JS总结（1）

时间：2022-12-26 14:09:51

零基础部分任务 github代码地址

题目地址

任务一:用户可以在输入框中输入任何内容，点击“确认填写”按钮后，用户输入的内容会显示在“您输入的值是”文字的右边

  • 网页上提供的代码，用的是(function(){})()这样的形式，好处是这样相当于是函数声明式声明函数，不会有函数提升。

任务二：页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于60）进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示在网页上

  • 筛选：可以用filter函数，也可以for循环遍历取值。
  • 生成新的list：注意字符串拼接，实现还是用for循环遍历，最后插入节点。
  • 难点：在生成第几名城市时（暂时不要求按顺序排列），如果是用一个固定的数组var rankList = ['一','二','三','四','五'];然后，再拼接字符串的时候在for循环中取值，这样的扩展性并不好。所以，如何把一个阿拉伯数字转换为汉字字符呢？
//把数字转换为汉字数字
//(1234567890).toLocaleString('zh-Hans-CN-u-nu-hanidec',{useGrouping:false})
//=>"一二三四五六七八九〇"
// [1,2,3,4].map(i=>i.toLocaleString('zh-Hans-CN-u-nu-hanidec',{useGrouping:false}))
//["一", "二", "三", "四"]

任务三读取页面上已有的source列表，从中提取出城市以及对应的空气质量,将数据按照某种顺序排序后，在resort列表中按照顺序显示出来

<ul id="source">
    <li>北京空气质量：<b>90</b></li>
    <li>上海空气质量：<b>70</b></li>
    <li>天津空气质量：<b>80</b></li>
    <li>广州空气质量：<b>50</b></li>
    <li>深圳空气质量：<b>40</b></li>
    <li>福州空气质量：<b>32</b></li>
    <li>成都空气质量：<b>90</b></li>
</ul>

<ul id="resort">
</ul>

<button id="sort-btn">排序</button>

/**
 * getData方法
 * 读取id为source的列表，获取其中城市名字及城市对应的空气质量
 * 返回一个数组，格式见函数中示例
 */
function getData() {
/*
 coding here
 */
var data = new Array();

var source = document.getElementById('source');
var sourceLi = source.getElementsByTagName('li');
// 为了获得li中的纯文本内容，百度了很多，没有得到合适的结果，结果通过chrome查看属性，找到了很多可以取得纯文本内容的属性，赞
for(var i= 0;i < sourceLi.length;i ++){
// console.log(sourceLi[i].textContent);
// 通过：分割字符串
        data.push(sourceLi[i].textContent.split('：'));
    }
/*
 data = [
 ["北京", 90],
 ["北京", 90]
 ……
 ]
 */

return data;

}

/**
 * sortAqiData
 * 按空气质量对data进行从小到大的排序
 * 返回一个排序后的数组
 */
function sortAqiData(data) {
    data.sort(function(a,b){
return a[1]- b[1];
    });
return data;
}

/**
 * render
 * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
 * 格式见ul中的注释的部分
 */
function render(data) {
// console.log(data);
var newList= "";
var resort = document.getElementById('resort');
    data.forEach(function(value,index){
        newList += '<li>第' + (index + 1).toLocaleString('zh-Hans-CN-u-nu-hanidec',{useGrouping:false}) + '名：' + value[0] + '空气质量：' + '<b>' + value[1] + '</b></li>';
    })
    resort.innerHTML = newList;
}

function btnHandle() {
var aqiData = getData();
    aqiData = sortAqiData(aqiData);
    render(aqiData);
}

function init() {
// 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
var sort = document.getElementById('sort-btn');
    sort.addEventListener('click',function(){
        btnHandle();
    });
}

init();
  • 首先网页提供的结构，js通过一个init()函数驱动，在init()函数里面绑定点击事件
  • 点击事件驱动的是 btnHandle()函数，这个函数里面调用了其他方法，实现了排序与生成列表。
  • 把整个流程分为三步
    • getData()：得到原列表中的数据，并组成数组，return。
    • sortAqiData(data)：对数据进行排序，return
    • render(data)：渲染新的有序列表
  • getData():实现难点在于得到<li>城市<b>空气指数</b></li>中的纯文本内容，有很多种方法，innertext(),outext()，但是貌似兼容都不是很好，或者说正在被淘汰中，所以，我在注释中也说了，我在打印li的时候，观察他的属性，看到了许多属性的属性值都为纯文本，我从中选择了textContent这个属性。然后，用了冒号分割split()的方式，转换为了子数组，并push进新的数组中，return。
  • sortAqiData(data)：data.sort(function(a,b){ return a[1]- b[1]; });这个就是，第一个参数-第二个参数，然后从小到大排列，return。
  • render(data):这里就用到了阿拉伯数字转换为汉字的方式，并且用了forEach简化一下代码（forEach一定是大写）。data.forEach(function(value,index){newList += '<li>第' + (index + 1).toLocaleString('zh-Hans-CN-u-nu-hanidec',{useGrouping:false}) + '名：' + value[0] + '空气质量：' + '<b>' + value[1] + '</b></li>';});

总结

总的来说，我觉得自己做的不好，因为其实这个标题是零基础，但是后来才发现，没有百度我就是个白痴咯，不过，大体流程思路上咩有问题，主要就是提高代码的质量。最开始我就没有想到用forEach，就想用for，然后拜读了一下别人的代码以后，才这样实现。
还有就是，我觉得其实重要的是要观察，他给的原代码，是一个思路的学习。模块分析的也很好。

加油加油！

标签：

相关文章