这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
写好JS的一些原则有三个，分别是各司其职、组件封装、过程抽象，其中各司其职就是让HTML、CSS和JavaScript的职能分离各管各的，HTML管结构，CSS管样式，JavaScript的管行为。组件封装就是好的UI组件具备正确性、扩展性、复用性。过程抽象就是多用函数式编程思想。
各司其职
版本一
版本二
版本三
版本一是大部分前端程序员都能很快想出来的解决方案，但是他存在了一些问题，比如代码的可维护性变差。版本二相比版本一的可维护性就会变得很好，CSS负责CSS的样式，只是用JS来控制了样式的切换。版本三则是直接用纯CSS来解决问题，不用再去写JS代码。这其实就是各司其职，能用CSS解决的就用CSS来解决，当然CSS配合JS也是可以的他也能解决很多的前端问题。
组件封装
之前开发的轮播图的组件不够灵活，我们要对其进行
重构：插件化 解耦 将控制元素抽取成插件、插件与组件之间通过依赖注入的方式建立联系
重构：模板化 将HTML模板化更易于扩展
在模板化的基础上进行抽象 将组件通用模型抽象出来
过程抽象
高阶函数（HOF） 以函数作为参数，以函数作为返回值，常用于作为函数装饰器 写代码最关注什么？风格？效率？约定？使用场景？设计？ 当年的Leftpad事件 事件本身的槽点：NPM模块粒度、代码风格、代码质量/效率
总结与思考
今天跟着月影大佬学习JS，真的有种学的不是一个JS的错觉，从老师的思考方式与做题思路对我有很大的启发，包括举的例子也是通俗易懂，比如组件封装的那一节课让我知道了组件还能这样去优化，一步一步从易到难从性能一般扩展性一般维护性一般，到性能变好，可维护性与可扩展性变好。最后一节的算法也学到了很多的优化思路与算法解题思路。
标题：JavaScript 编码原则之各司其责 - 掘金
