这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天。

一、本堂课重点内容：

javascript有三大代码原则：各司其职、组件封装、过程抽象。 另外js的代码质量优化也是一大领域，它能大大提高页面的性能，提升用户体验。

二、详细知识点介绍：

• 各司其职

让html，css，javascript职能分离，有利于代码维护，后期如果要增添修改删除某些功能模块的时候也比较方便，因为代码各司其职，代码块非常清晰，比如能用css的firstchild和hover组合来做的效果就没必要用javascript来获取dom元素，并添加事件监听来实现这些功能。

• 组件封装

现在的开发很多都是单页面文件，这有利于页面的渲染，能大大提高页面的渲染速度，做到有需要才渲染，同时，index.html的代码结构也更加的清晰，只需一行代码即可替代成百上千行代码。同时也有利于代码的复用，一个组件的具体代码只需要写一次，可以根据传进来的参数不同而展现不同的内容，具有很高的灵活性，毕竟一个组件可能在多个文件中被引入和使用。

• 过程抽象

在UI交互的过程中将这个过程进行抽象，有利于代码的复用，也使得逻辑更加的清晰，如，将一个交互过程封装成一个函数，这样在需要交互的地方只需要调用此函数即可，非常方便，也节省了我每次都去写类似的交互过程处理的时间。这也涉及到一个名称“函数式编程”，这是开发中非常重要的一个概念。

• 案例 比如实现一个换深夜和白天背景色的功能： 代码一： 代码二： 很明显，代码一通过操作body的style属性来修改页面样式，而代码二是直接改变页面元素的class属性，直接设置为夜间css样式，这种代码非常直观，浅显易懂，比代码一更加简洁。

三、课后个人总结：

本章知识非常多而繁杂，虽然我之前有学过js，但是还是有一种大开眼界的感觉，因为这是没有实际开发经验所接触不到、所不了解的东西，这些都是日积月累的，需要一点点去吸取，无法一蹴而就，毕竟只有开发的项目多了才有经验，才会知道哪里是坑，哪里需要优化，哪里不应该使用简单做法，哪里会影响用户体验。所以知识要学，但也要运用起来，放到实践中去！