跟着月影学 JavaScript ｜ 青训营笔记

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

一、本堂课重点内容：

  1. JavaScript好代码的准则、编程范式
  2. HTML/CSS/JS各司其责
  3. 组件的定义解析及特征、组件封装的基本方法
  4. 用原生JS实现轮播图
  5. 过程抽象函数、高阶函数使用模式
  6. 写代码关注事项

二、详细知识点介绍：

1. 写好JS的一些原则

  • 各司其责：让HTMLCSS和JavaScript职能分离

  • 组件封装：好的UI组件具备正确性、扩展性、复用性

  • 过程抽象：应用函数式编程思想

    总结：

    • HTML/CSS/S各司其责
    • 应当避免不必要的由JS直接操作样式
    • 可以用class来表示状态
    • 纯展示类交互寻求零]S方案

2. 组件封装

组件是指Wb页面上抽出来一个个包含模版(HTML)、功能(JS)和样式(CSS)的单元。

原则：

封装性、正确性、扩展性、复用性

结构设计：HTML

轮播图是一个典型的列表结构我们可以使用无序列表

    元素来实现

    效果展现：CSS

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

    行为设计：API、控制流

    API：设计应保证原子操作，职责单一，满足灵活性

    控制流：使用自定义事件来解耦

    三次重构：插件化、模板化、抽象化

    • 将控制元素抽取成插件
    • 插件与组件之间通过依赖注入
    • 方式建立联系
    • 将HTML模板化，更易于扩展

    抽象：将通用的组件模型抽象出来

    总结：

    基本方法：结构设计、展现效果、行为设计(API(功能)、Event(控制流))

    3. 过程抽象

    为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求离出来。这个过程我们称为过程抽象。

    • 用来处理局部细节控制的一些方法
    • 函数式编程思想的基础应用

    4. 高阶函数

    • 以函数作为参数
    • 以函数作为返回值
    • 常用于作为函数装饰器
    • 常用高阶函数：Once、Throttle、Debounce、Consumer等

    5. 编程范式

    命令式与声明式

    三、实践练习例子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const btn = document.getElementById('modeBtn');
    btn.addEventListener('click',(e)=> {
    	const body document.body;
    	if(e.target.innerHTML ==='') {
    		body.style.backgroundColor 'black'
    		body.style.color 'white';
    		e.target.innerHTML ='';
        }else {
    		body.style.backgroundColor 'white';
    		body.style.color 'black';
    		e.target.innerHTML='◆'；
    });
    1
    2
    3
    4
    5
    6
    7
    8
    const btn document.getElementById('modeBtn')
    btn.addEventListener('click',(e)=> {
    	const body document.body;
    	if(body.className !='night') {
    		body.className 'night';
        } else {
    		body.className ''
    });
    1
    2
    3
    4
    5
    6
    7
    8
    let 1ist=[1,2,3,4];
    let map1 []
    for(let i 0;i list.length;i++) {
    	mapl.push(list[i]2);
    }
    1et 1ist=[1,2,3,4];
    const double x =>x 2;
    list.map(double);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    get layerTransformInvert() {
    	if(this[_layerTransformInvert])return this[_layerTransformInvert];
    	const m this.transformMatrix;
    	if(m[0]==1&m[1]==0&m[2]==0&&m[3]==1&&m[4]==0&&m[5]===0){
    		return null;
        }   
    	this[_layerTransformInvert]mat2d.invert(m);
    	return this[_layerTransformInvert];
    }

    6. left-pad事件

    事件本身的槽点：

    • NPM模块粒度
    • 代码风格
    • 代码质量/效率

    7. 经典案例

    • 交通灯：状态切换

    • 判断是否是4的幂

    • 洗牌

    • 分红包

    四、课后个人总结：

    • 组件封装是相对来说比较陌生的部分
    • 经典案例涉及到了多种版本及多种情形，要能够理解，并知道好的好在哪，不好在弊端在哪
    • JavaScript比较“宽泛”，实现同一种功能可以有很多种方法，但是要思考侧重点在哪，怎样是最好的方法

    五、引用参考：

    JavaScript：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

    JavaScript中的组件：https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets