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

前言

前端开发中 让 HTML、CSS和 JavaScript 职能分离，HTML是页面的骨架，CSS是页面的皮肤，JavaScript是页面的动作了。我们在写代码的时候应该他们各自负责自己该负责的部分，尽可能的少用 JS 干扰 CSS 和 HTML ，这样的代码才是高质量的。

组成部分

1.核心（ECMAScript）：描述了该语言的语法和基本对象。

2.DOM：Document Object Model（文档对象模型）：描述处理网页内容的方法和接口。 html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。

3.BOM：Brower Object Model（浏览器对象模型与浏览器进行交互的方法和接口。

组件封装基本方法

1.结构设计

2.展现效果

3.行为设计：API(功能）；Event（控制流）

解耦

1.控制元素抽取成插件

2.插件与组件之间通过依赖注入方式建立联系

高阶函数

高阶函数（HOF） 以函数作为参数，以函数作为返回值，常用于作为函数装饰器 写代码最关注什么？风格？效率？约定？使用场景？设计？ 当年的Leftpad事件 事件本身的槽点：NPM模块粒度、代码风格、代码质量/效率

总结

• 1.组件设计的原则：封装性、正确性、扩展性、复用性
• 2.实现组件的步骤：结构设计、展现效果、行为设计
• 3.三次重构：插件化；模板化；抽象化（组件框架）
• 4. HTML/CSS/JS 各司其责，HTML结构、CSS表现、JS行为
• 5.应当避免不必要的由 JS 直接操作样式
• 6.可以用 class 来表示状态
• 7.纯展示类交互寻求零 JS 方案

跟着月影大佬学习JS，从老师的思考方式与做题思路对我有很大的启发，包括举的例子也是通俗易懂，比如组件封装的那一节课让我知道了组件还能这样去优化，一步一步从易到难从性能一般扩展性一般维护性一般，到性能变好，可维护性与可扩展性变好。