如题： 渴望“手指”们改善代码的思路
例：
便于维护，便于阅读
美观
还有？？？？
附一段DEMO：
function parser_chapter(option) {var chapter = option.chapter; // 章var section = option.section; // 节var j_sectionHtml = ""; // 节htmlvar z_knowPointHtml = ""; // 知识点htmlfor(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="https://segmentfault.com/q/1010000010088212/${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="https://segmentfault.com/q/1010000010088212/${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这种，本身就不美观了。
本身两个for loop是独立的，用个i就可以了，一般需要的话，QQ靓号转让地图也不会用ii或iii这样定义。
一楼哥们给了ES6的写法，感觉当前阶段还不适合你，可能浏览器的不兼容会让你很困惑。
试试先用用jQuery, 入手会比较快点，而且代码也会比较简单，你这样直接在dom上获取element，进行修改太麻烦了
