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

一、本堂课重点内容：

JavaScript 代码原则之各司其责

JavaScript 好代码的标准
HTML/CSS/JS 各司其责

JavaScript 代码原则之组件封装

组件的定义解析及特征
组件封装基本方法
利用原生 JS 实现电商网站轮播图

JavaScript 代码原则之过程抽象

过程抽象概念
高阶函数使用模式
JavaScript 编程范式

Leftpad 事故背景引入

代码写作关注事项
left-pad 事件背后的代码规范

JavaScript 代码原则之质量优化之路

代码实践1 - 交通灯
代码实践2 - 洗牌
代码实践3 - 分红包

二、详细知识点介绍：

1.写好JS的一些原则

各司其职：让HTML、CSS、JavaScript职能分离
组件封装；好的UI组件具备正确性、扩展性、复用性
过程抽象；应用函数式编程思想

（1）[各司其职]

例如：深色模式和浅色模式

实现的结论：

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

（2）[组件封装]

例如：电商网站的轮播图

组件是指Web页面上抽出来一个个包含模板、功能、样式的单元

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

结构：HTML，轮播图为列表结构，使用无序列表ul元素实现

表现：CSS

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

行为：JS

（1）API

使用Slider，getSelectedltem()、slideTo()、slideNext()等

（2）控制流

使用自定义事件来解耦

[重构]

解耦：

（1）模板化

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

（2）模板化

将HTML模板化，更易于扩展

抽象：

（3）抽象化（组件框架）

将组件通用模型抽象出来

（3）[过程抽象]

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

[高阶函数]

Once：

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

HOF：

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

[编程范式]

命令式与声明式

2.leftpad事件与质量优化

[leftpad事件]

优化前：

槽点：NPM模块粒度、代码风格、代码效率/质量

function leftpad(str,len,ch){
    str = String(str);
    var i = -1;
    if(!ch && ch != 0) ch = ' ';
    len = len - str.length;
    while(++i < len){
        str = ch + str;
    }
    return str;
}

优化：

代码更简洁，效率提升

function leftpad(str,len,ch){
    str = "" + str;
    const padlen = len - str.length;
    if(padlen <= 0){
        return str;
    }
    return (""+ch).repeat(padlen)+str;
}

性能更好

三、实践练习例子：

判断是否是4的幂
HTML

<input id="num" value="65536"></input>
<button id="checkBtn">判断</check>

function ispof(num){
  num = parseInt(num).toString(2);

  return /^1(?:00)+$/.test(num);
}

num.addEventListener('input',function(){
  num.className = '';
});

checkBtn.addEventListener('click',function(){
  let value = num.value;
  num.className = ispof(value) ? 'yes' : 'no';
});

-效果

四、课后个人总结：

在本次课堂学习中，抽象过程不太容易理解，不过收获了许多关于JS的代码原则，使JS代码可以更简洁、效率性能提升，更易于对项目功能的实现以及效率提高。

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