JS跟学笔记

JS

正经人谁学

一、本堂课重点内容：

（如何写好JS↓）

JS编码原则

• 各司其责
• 组件封装（课程内容属实强，要花很长时间消化）
• 过程抽象

Left-pad事故背景引入

JS代码质量优化

二、详细知识点介绍：

JS编码原则-各司其职

让HTML、CSS、JS职能分离

举例-深夜食堂的明暗模式mode

HTML代码

CSS代码

码上掘金链接

总结

• 三者各司其责
• 避免不必要的由JS直接操作样式
• 可以用class来表示状态
• 纯展示交互寻求零JS方案

JS编码原则-组件封装

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

举例-原生JS电商网站轮播图

原型

轮播图-原型

HTML-结构

CSS-表现

JS-行为（功能API、控制流Event）

重构-插件化

轮播图-插件化

解耦

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

重构-模块化

轮播图-模块化

解耦

• 将HTML模板化，更易于扩展

抽象

• 将组件通用模型抽象出来，组件框架

总结

组件设计原则

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

实现组件的步骤

• 结构设计
• 展现效果
• 行为设计

三次重构

• 模块化
• 模板化
• 抽象化（组件框架-组件是指Web页面上抽出来的一个包含模板、功能、样式的单元。）

JS编码原则-过程抽象

应用函数式编程思想

过程抽象

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

高阶函数-HOF

function HOF(fn) {
    return function(...args) {
        return fn.apply(this,args);
    }
}

是什么

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

特点

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

常用高阶函数

• Once
• Throttle 节流，限制函数执行间隔 栗子
• Debounce 防抖，防止给服务器过多负担 栗子
• Consumer /2 异步消耗 栗子
• Iterative 迭代函数 栗子

编程范式

命令式

let list = [1,2,3,4];
let mapl = [];
for(let i = 0; i < list.length; i++) {
    mapl.push(list[i] * 2);
}

声明式

let list = [1,2,3,4];
const double = x => x * 2;
list.map(double);

举例

Toggle-命令式

Toggle-声明式

Toggle-三态由此可见声明式更能减轻内容修改添加的代码量负担

Left-pad事故背景引入

栗子1-判断是否为单位矩阵

function isUnitMatrix2d(m){
    return m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0;
}

写代码最应该关注什么？

• 风格——很重要，代码维护成本小关键
• 效率——很重要，结合场景选择合适代码，抉择是效率还是可读性
• 约定
• 使用场景
• 设计

栗子2-Left-pad事件

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

事件本身槽点：

• NPM模块粒度——模块化、打包工具不成熟
• 代码风格——可读性不算好
• 代码效率质量——效率不算高

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

大佬优化：

• 更简洁
• 更高效

巨佬优化

• 性能更好

但是就它的使用场景上，优化的意义不大。

（以下的部分本人效率就不高了，脑子转不动了，打算明天完善）

JS代码质量优化

栗子1-交通灯状态切换

1.过于繁琐，回调会出问题

查看源码

2.函数封装

查看源码

3.轮巡HOF

查看源码

4.异步命令式

查看源码

可延伸异步声明式……

栗子2-判断4的幂

1.暴力循环

function isPowerOfFour(num){
    num = parseInt(num);
    while(num>1){
        if(num%4)return false;
        num /= 4;
    }
    return true;
}

2.

function isPowerOfFour(num){
    num = parseInt(num);
    while(num>1){
       if(num& 0b11) return false;
       num >>>=2;
    }
    return true;
}

3.

function isPowerOfFour(num){
    num = parseInt(num);
    return num > 0 &&
        (num&(num - 1)) === 0 &&
        (num& 0xAAAAAAAA) === 0;
}

正则表达式-最喜欢的

function isPowerOfFour(num){
    num = parseInt(num).toString(2);
    return /^1(?:00)*$/.test(num);
}

栗子3-洗牌

5555我又懒得敲了，明天继续！

1.简单实现

https://code.h5jun.com/cuvig/edit?js,console

2.正确性

https://code.h5jun.com/venol/edit?js,console

3.公平性

https://code.h5jun.com/huqi/edit?js,console

4.

https://code.h5jun.com/zamuv/edit?js,console

栗子4-分红包

1.

https://code.h5jun.com/wuv/1/edit?js,output

2.

https://code.h5jun.com/luba/edit?js,output

三、课后个人总结：

优雅，实在是太优雅了！

JS竟然有这么多层优化，我好像只在第一层！！！！

四、引用参考：

见上文一些链接