各司其职

HMTL/CSS/JavaScript各司其职

避免用JavaScript直接操作样式

可以用class表示状态

纯展示类交互使用零JS方案

组件封装

组件：指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式 （CSS）的单元。

好的组件具有封装性、正确性、扩展性和复用性。

轮播图

结构HTML

轮播图是典型的列表结构，可以使用无序列表元素（<ul>）实现。

表现CSS

• 使用绝对定位将图片重叠在同一位置
• 轮播图切换状态使用修饰符
• 切换动画使用transition

行为JS

API

需要设计API

• getSelectedItem()：得到当前选中的图片元素
• getSelectedItemIndex()：得到当前选中的图片元素在这个列表中的下标
• slideTo()：播放特定index的图片
• slideNext()：播放下一张图片
• slidePrevious()：播放上一张图片

控制流

使用自定义事件实现状态绑定

重构：插件化

如果删除修改某一部分可能需要修改HTML、CSS以及JS代码，可以将组件插件化解决该问题，使得代码更灵活。

• 将控制元素抽取成插件
• 插件与组件之间通过依赖注入方式建立联系

缺点：某个插件不使用了，还需要将相应HTML代码删除

重构：模板化

将HTML模板化，更易拓展

重构：组件框架

在模板化的基础上可以进一步抽象

过程抽象

用来处理局部细节控制的一些方法

高阶函数

• 以函数为参数
• 以函数作为返回值
• 常用于作为函数装饰器

常用高阶函数有：Once、Throttle、Debounce、Consumer、Iterative等

• Throttle：鼠标移动时注册一个事件、页面有滚动时注册一个事件，避免高频率触发使用节流函数
• Debounce：防抖功能
• Consumer：延时调用的效果。可以把同步的输出变成异步的
• Iterative：可以实现批量操作

纯函数：无论何时输入是a输出都是b，输入输出是确定的

使用高阶函数减少使用非纯函数的使用可能性

编程范式

命令式与声明式

声明式的代码更简洁，更有扩展性

命令式更倾向于怎么做，声明式更倾向于做什么

个人总结

在学习过程中，通过各种案例学习了JavaScript的三种编码原则：各司其职、组件封装以及过程抽象，并且还学习了一些高阶函数以及两种编程范式：声明式、命令式。在编程过程中需要让HTML、CSS以及JS各司其职：HTML搭建结构，CSS实现展示效果，JS控制行为，组件设计需要遵守的原则：封装性/正确性/扩展性/复用性，使用JS实现插件化，在此基础上实现模板化，甚至还可以解耦CSS，遵循这套规范实际上就是实现完整的ui组件框架。此次学习收获颇多，后续还需进行实践进行巩固。JS是一种非常重要的编程语言，它可以使网页变得更加丰富多彩，JS可以实现动态页面，我们可以使用JS来实现弹出窗口等功能，JS还可以实现与服务器之间的交互，如可以使用ajax从后台获取数据，JS采用了面向对象编程的思想，我们还可以使用JS来实现各种组件和图表的绘制，比如echarts。JS是前端中最核心的部分，对Web开发很重要。