优化代码

[Tomortec]

让我们一起构建更好的 Artitalk 社区

当前项目的结构层次不够分明，耦合性太高，不仅维护更新工作量会上升，还难以阅读，不利于项目的长久发展

列举一些当前存在的问题

1. JS 代码没有分模块，导致难以快速定位，并且导致像评论注入等需要重复书写，不仅增加了工作量，还会带来潜在的问题
2. 把一些配置内容，比如表情和文本等直接写入 main.js，同时也带来了更新问题，例如

// 直接写入中文文本，更换语言时将不生效
document.getElementById('neirong').value = "昵称，邮箱均为必填项\n" + document.getElementById('neirong').value

3. css/main.css 文件与 main.js 无关，当前的CSS为手动 minify 并注入，不仅增加工作量，还难以调试，同时，main.css 中出现语法错误无法被及时检查
4. 一些 HTML 代码使用 innerHTML 注入，导致难以维护和阅读，例如

let contengMid = "<li><span class=\"shuoshuo_author_img\" onclick='atEvery.prototype.atEdit(\"" + id + "\")'><img  id='atAvatar" + id + "'  src=\"" + shuoAvatar + "\"class=\"artitalk_avatar gallery-group-img\" width=\"48\" height=\"48\"></span><span class=\"cbp_tmlabel\" id='atId" + id + "' ><div " + hideIcon + "id='operate" + id + "'  class=\"delete_right\"><svg t=\"1591347978744\"  viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"14459\" width=\"20\" height=\"20\" style=\"display: inline\"  onclick=\"atEvery.prototype.delete('" + id + "')\"  ><path d=\"M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z\" p-id=\"14460\" fill=\"" + color3 + "\"></path><path d=\"M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z\" p-id=\"14461\" fill=\"" + color3 + "\"></path></svg></div><div id='forEdit" + id + "'>" + shuoshuoPerContent + "</div><p class=\"shuoshuo_time\">" + "<span style=\"\"> " + " " + osSvg + atOs + "</span><span class='label_time'>&nbsp&nbsp" + timeSvg + resDate + " " + resTime + "" + "</span><span class='label_attachment'><span style='" + atCommentTrue + ";vertical-align:top;' onclick='atEvery.prototype.commentInit(\"" + id + "\")'  id='atCoInit" + id + "'>" + commentSvg + "<span style='padding: 0 0 0 8px;color:" + color3 + "'; id= 'coValue" + id + "'>loading</span></span>&nbsp<span style='vertical-align:top;' id='" + id + "'></span></p></span></li>";

5. SVG 使用了innerHTML 方式注入，使得代码冗长，难以维护（例子同上）
6. 风格规范出现差错，某些变量和 ID 不知其义，例如

document.getElementById("maina"); // what is maina? ??:D

解决方法

1. 精细化、原子化功能和方法
2. 将表情、文本的配置内容放于 JSON 文件中，并使用 全局或单例控制器 配置
3. 关联 CSS 文件，为更多元素设置 id 或 class，而非大量使用标签选择器
4. 新建元素可以使用 DOM 接口，例如 document.createElement(), document.appendChild(), 建议如果对项目大小限制不大的话，可以使用 jQuery
5. SVG 放于单独的 SVG 文件中
6. 参考 https://google.github.io/styleguide/jsguide.html

为什么不是改进后发起PR，而是提交 issue
因为完成以上的内容相当于对 Artitalk 进行重构，如此大规模的改动我认为应该由社区决定并共同完成，同时，我本人能力和精力有限，我可以承担部分工作，但是难以独自将其做得很好，所以我发起了本篇 issue

最后
也许我有些地方说的不对或过于绝对，或者您不十分赞同，没关系，请您保有您的观点，不过，我相信，我们的初衷都是构建一个更好的 Artitalk 社区，让我们一起加油吧