月影学JSの学习笔记"/>
【字节青训营】跟着月影学JSの学习笔记
JavaScript
月影老师讲的很棒,由浅入深。小白我还要多多课后消化消化,三个小时听下来感觉知识量挺多的。。。
总的原则
写好JavaScript的原则:各司其职、组件封装、过程抽象。
- HTML/CSS/JavaScript各司其责
- 应当避免不必要的由JS直接操作样式,尽量实现重构
- 可以用class 来表示状态
- 纯展示类交互寻求零JS方案(例如:通过label与CheckBox组合的方式)
轮播图引发的思考
实现的思路:
HTML实现:
轮播图是一个典型的列表结构,我们可以使用无序列表<ul>
元素来实现。
CSS实现:
使用CSS绝对定位将图片重叠在同一个位置; 轮播图切换的状态使用修饰符(modifier);轮播图的切换动画使用CSS transition。
JS实现:
API设计应保证原子操作,职责单一,满足灵活性。
通过自定义时间来解耦,降低代码之间的关联度,提高可扩展性。
(如何解耦?将控制元素抽取成插件;插件与组件之间通过依赖注入方式建立联系;将HTML模板化,使得扩展性更好)
小结
- 抽象:将通用的组件的模型抽象出来
- 组件设计的原则:封装性、正确性、扩展性、复用性
- 实现组件的步骤:结构设计、展现效果、行为设计
组件是指Web页面上抽出来一个个包含模版(HTML)、功能(JS)和样式(CSS)的单元。
好的组件具备封装性、正确性、扩展性、复用性。
三次重构:
插件化;
模板化;
抽象化(组件框架)
过程抽象
为了能够让“只执行一次“的需求覆盖不同的事件处理,我们可以将这个需求剥离出来。这个过程我们称为过程抽象。过程抽象是用来处理局部细节控制的一些方法。属于函数式编程思想的基础应用
操作次数限制:一些异步交互、一次性的HTTP请求
高阶函数
特点:以函数作为参数; 以函数作为返回值;常用于作为函数装饰器。
如
Once, Throttle, Debounce, Consumer/2, lterative
为什么需要有高阶函数(HOF)?
纯函数:与时间无关,而且具有逆等性。
非纯函数:依赖外部环境,如执行的顺序、执行时间等等。
高阶函数能够减少非纯函数的存在,提高编程的准确性,使得程序运行符合期望。
编程范式
JS具有命令式与声明式两种编程范式。命令式更加注重过程,声明式将过程抽象。两种编程范式都可以用JS实现。所有的抽象都是为了更好的可拓展性。
更多推荐
【字节青训营】跟着月影学JSの学习笔记
发布评论