这是我参与「第五届青训营 」笔记创作活动的第5天，今天的内容和JavaScript相关，下面就是我在上青训营教学课时记录的课堂笔记：

如何写好JavaScript

如何写好JS呢？有下面的一些原则：各司其职，组件封装，过程抽象。下面来分开讲解：

各司其职

各司其职就是指让HTML，CSS,JS职能分离。这么做的好处是：不仅便于后续代码的维护扩展，而且可以做到代码简洁，可读性高。各司其职应当避免不必要的由JS直接操作样式-可以用class来表示状态，纯展示类交互寻求零JS方案。各司其职的讲解在网上和课堂上都是用的转换：页面白天或黑夜的例子来帮助理解各司其职。 这三张图片都是控制页面黑夜白天模式的代码，版本一可以看出是用JS控制了CSS让JS做了CSS的事，违背了各司其职的原则同时版本一的这一些代码无法让人一眼看出其功能看不出这是改变页面模式的。版本二可以让人一眼看出它的功能就是控制页面黑夜白天的同时代码也比版本一简洁许多。版本三可以看出没有JS，控制页面黑夜白天CSS也可完成较前两个版本也更加灵活。

组件封装

组件是指web页面上抽出来一个个包含模板（HTML），功能（JS），和样式（CSS）的单元。好的组件具备封装性，正确性，扩展性，复用性。课堂上帮助理解组件封装的例子是：轮播图。

过程抽象

过程抽象（应用函数式编程思想）用来处理局部细节控制，过程抽象是函数思想的基础，其中涉及到操作次数限制和一些高阶函数。

小结

听这节课的时候感觉很难理解。青训营的前端之路充满危机与挑战，少年应有鸿鹄之志，当骑骏马踏平川。不懈之志。（由于时间问题，剩余内容后期补整）谢谢大家。