【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
            }

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

html5 javascript

阅读 2.7k

3 个回答

测试狗

Dont

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

解析部分:
    节点列表，知识点列表,的实现，可以封装成两个函数比如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);
}