H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】【JavaScript技艺】 如何改善一段代码?

如题: 渴望“手指”们改善代码的思路

例:

  • 便于维护,便于阅读

  • 美观

还有????

附一段DEMO:

            function parser_chapter(option) {
                var chapter = option.chapter; // 章
                var section = option.section; // 节
                var j_sectionHtml = ""; // 节html
                var z_knowPointHtml = ""; // 知识点html

                for(var ii = 0; ii < z_chapter[chapter].list.length; ii++) {
                    var j_sectionList = z_chapter[chapter].list[ii];
                    j_sectionHtml +=
                        '<a href="' + j_sectionList.url + '" tetle="' + j_sectionList.name + '" data-id="' + ii + '">' + j_sectionList.name + '</a>';
                }
                col2.innerHTML = j_sectionHtml; // 节列表

                for(var iii = 0; iii < z_chapter[chapter].list[section].list.length; iii++) {
                    var z_knowPointList = z_chapter[chapter].list[section].list[iii];
                    z_knowPointHtml +=
                        '<a href="' + z_knowPointList.url + '" title="' + z_knowPointList.name + '" data-h="' + z_knowPointList.url[0] + '" data-s="' + z_knowPointList.url[1] + '">' + z_knowPointList.name + '</a>';
                }
                col1.innerHTML = z_knowPointHtml; // 知识点列表

                document.querySelectorAll(".col3 a")[chapter].className = "font_yellow mui-active"; // '章'添加新的 class.
                document.querySelectorAll(".col2 a")[section].className = "font_yellow mui-active"; // '节'添加新的 class, 因为每次点击会重新渲染'节', 所以无需对兄弟'节' removeClass
            }

如何 ‘改善’ 上面↑ 的代码 ?

回答:

看了一下内容,整个函数是为了解析章节,根据你的注释和代码,以下是个人的愚见:
把功能点细分:

解析部分:
    节点列表,知识点列表,的实现,可以封装成两个函数比如parseSection,parseKonwPoint
业务部分:
    单独封装成一个函数,好像就颜色
代码风格(也算不上):
    推荐es6语法

下面是我大致帮你整合的代码,不过好像知识点列表有bug,你自己检查一下url

let z_chapter,mui,col1,col2;

let parseSection = ({chapter}) => {
    let j_sectionHtml = '';
    for(let i = 0; i < z_chapter[chapter].list.length; i++) {
        let {url,name} = z_chapter[chapter].list[i];
        j_sectionHtml += `<a href="${url}" title="${name}" data-id="${i}">${name}</a>`;
    }
    col2.innerHTML = j_sectionHtml; // 节列表
};

let parseKnowPoint = ({chapter,section}) => {
    let z_knowPointHtml = '';
    for(let i = 0; i < z_chapter[chapter].list[section].list.length; i++) {
        let {url,name} = z_chapter[chapter].list[section].list[i];
        z_knowPointHtml += `<a href="${url}" title="${name}" data-h="${url[0]}" data-s="${url[1]}">${name}</a>`;
    }
    col1.innerHTML = z_knowPointHtml; // 知识点列表
}

let changeColors = ({chapter,section}) => {
    // 业务 : 点击改变字体颜色
    mui.each(mui(".col3 a"), (index, item)  => {
        item.className = "";
    });
    document.querySelectorAll(".col3 a")[chapter].className = "font_yellow mui-active"; // '章'添加新的 class.
    document.querySelectorAll(".col2 a")[section].className = "font_yellow mui-active"; // '节'添加新的 class, 因为每次点击会重新渲染'节', 所以无需对兄弟'节' removeClass
}

let parserChapter = (mui,option) => {
    parserChapter(option);
    parseKnowPoint(option);
    changeColors(option);
}

回答:

命名不是太准确,循环变量别用ii这种,用index加前缀,比如bookIdx这种。美观不好弄,生成html这种,本身就不美观了。

回答:

  1. 本身两个for loop是独立的,用个i就可以了,一般需要的话,也不会用ii或iii这样定义。

  2. 一楼哥们给了ES6的写法,感觉当前阶段还不适合你,可能浏览器的不兼容会让你很困惑。

  3. 试试先用用jQuery, 入手会比较快点,而且代码也会比较简单,你这样直接在dom上获取element,进行修改太麻烦了

本文地址:H5W3 » 【Web前端问题】【JavaScript技艺】 如何改善一段代码?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址