Open Tomortec opened 1 year ago
当前项目的结构层次不够分明,耦合性太高,不仅维护更新工作量会上升,还难以阅读,不利于项目的长久发展
列举一些当前存在的问题
JS 代码没有分模块,导致难以快速定位,并且导致像评论注入等需要重复书写,不仅增加了工作量,还会带来潜在的问题
把一些配置内容,比如表情和文本等直接写入 main.js,同时也带来了更新问题,例如
main.js
// 直接写入中文文本,更换语言时将不生效 document.getElementById('neirong').value = "昵称,邮箱均为必填项\n" + document.getElementById('neirong').value
css/main.css 文件与 main.js 无关,当前的CSS为手动 minify 并注入,不仅增加工作量,还难以调试,同时,main.css 中出现语法错误无法被及时检查
css/main.css
main.css
一些 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'>  " + 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> <span style='vertical-align:top;' id='" + id + "'></span></p></span></li>";
SVG 使用了innerHTML 方式注入,使得代码冗长,难以维护(例子同上)
风格规范出现差错,某些变量和 ID 不知其义,例如
document.getElementById("maina"); // what is maina? ??:D
解决方法
document.createElement()
document.appendChild()
为什么不是改进后发起PR,而是提交 issue 因为完成以上的内容相当于对 Artitalk 进行重构,如此大规模的改动我认为应该由社区决定并共同完成,同时,我本人能力和精力有限,我可以承担部分工作,但是难以独自将其做得很好,所以我发起了本篇 issue
最后 也许我有些地方说的不对或过于绝对,或者您不十分赞同,没关系,请您保有您的观点,不过,我相信,我们的初衷都是构建一个更好的 Artitalk 社区,让我们一起加油吧
让我们一起构建更好的 Artitalk 社区
当前项目的结构层次不够分明,耦合性太高,不仅维护更新工作量会上升,还难以阅读,不利于项目的长久发展
列举一些当前存在的问题
JS 代码没有分模块,导致难以快速定位,并且导致像评论注入等需要重复书写,不仅增加了工作量,还会带来潜在的问题
把一些配置内容,比如表情和文本等直接写入
main.js
,同时也带来了更新问题,例如css/main.css
文件与main.js
无关,当前的CSS为手动 minify 并注入,不仅增加工作量,还难以调试,同时,main.css
中出现语法错误无法被及时检查一些 HTML 代码使用 innerHTML 注入,导致难以维护和阅读,例如
SVG 使用了innerHTML 方式注入,使得代码冗长,难以维护(例子同上)
风格规范出现差错,某些变量和 ID 不知其义,例如
解决方法
document.createElement()
,document.appendChild()
, 建议如果对项目大小限制不大的话,可以使用 jQuery为什么不是改进后发起PR,而是提交 issue 因为完成以上的内容相当于对 Artitalk 进行重构,如此大规模的改动我认为应该由社区决定并共同完成,同时,我本人能力和精力有限,我可以承担部分工作,但是难以独自将其做得很好,所以我发起了本篇 issue
最后 也许我有些地方说的不对或过于绝对,或者您不十分赞同,没关系,请您保有您的观点,不过,我相信,我们的初衷都是构建一个更好的 Artitalk 社区,让我们一起加油吧