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

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天，学习了掘金视频课《前端入门——基础语言篇》第五节课程 “JavaScript 编码原则之各司其责” ，第六节课程 “JavaScript 编码原则之组件封装” ，第七节课程 “JavaScript 编码原则之过程抽象” ，第八节课程 “Leftpad 事故背景引入” ，第九节课程 “JavaScript 代码质量优化之路” ，以下为本次的学习笔记：

JavaScript 编码原则之各司其责

让HTML、CSS、JavaScript职能分离

• 将控制样式部分的代码放入CSS中，使JS代码块更简洁
• 避免不必要的由JS直接操作样式
• 可以用class改变状态
• 纯展示类交互应该寻求零JS方案

JavaScript 编码原则之组件封装

函数的封装指的是将一个或多个功能通过函数的方式封装起来，对外只提供一个接口

//声明一个函数：计算0~100的累计和
function getSum(x,y){
    var sum=0;
    for(var i=0;i<=100;i++){
    sum+=1
    }
    console.log(getSum)
}
//调用函数
sums(1,100)

好的UI组件具备正确性、扩展性、复用性

轮播图（图片重叠切换）

• HTML部分用无序列表ul元素实现

• CSS

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

• JS

  • 行为：功能(API)

    Slider：

    • +getSelectedltem
    • +getSelectedltemIndex
    • +slide To
    • +slide Next
    • +slidePrevious

  • 行为：控制流(Event)

    使用自定义事件来解耦

  • 重构：插件化（解耦）

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

JavaScript 编码原则之过程抽象

应用函数式编程思想

过程抽象

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

高阶函数

HOF

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

Once

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

function {
    return function(...args) {
        if(fn) {
            const ret = fn.apply(this.args);
            fn = null;
            return ret;
        }
    }
}

Throttlr(节流函数)

编程范式

命令式编程语言：面向过程、面向对象

声明式编程语言：逻辑式、函数式

JS代码两种不同风格

/*要求给数组每个数值*2*/
/*命令式*/
for(int i = 0; i < list.length; ++ i)
{
    mapl.push(list[i]) *2;
}
/*声明式*/
const double = x => x*2;
list.map(double);

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;
    }
}

优化

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

JavaScript 代码质量优化之路

js性能相关的常见问题:

事件处理质量差: 正确使用事件处理程序可以通过减少调用堆栈的深度来提高JavaScript的性能。

无组织的代码 JavaScript是松散的，这有利有弊。 代码中缺乏组织可能导致资源分配不足。 这在很大程度上阻碍了JavaScript的性能。

低效的迭代 迭代过程需要很长时间。例如，带宽受限的移动用户将需要等待更长的时间来渲染对象。

js性能优化建议

修剪HTML 通过丢弃像