JavaScript编码原则

各司其责

让HTML、CSS和JS职能分离

应当避免不必要的由JS直接操作样式、
可以用class来表示状态
纯展示类交互寻求零JS方案

组件封装

例子：轮播图组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、拓展性、复用性。

分析

结构设计：HTML--轮播图是一个典型的列表结构，我们可以使用无序列表

表现：CSS--使用CSS绝对定位将图片重叠在同一个位置，轮播图切换的状态使用修饰符（modifier），轮播图的切换动画使用CSS transition
行为：JS--API设计应保证原子，职责单一，满足灵活性
行为：控制流--使用自定义事件来解耦

总结：基本方法

结构设计
展现效果
行为设计：
- API（功能)
- Event（控制流）
组件设计的原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现效果、行为设计
三次重构：插件化、模板化、抽象化（组件框架）

过程抽象

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

操作次数限制常用场景有

一些异步交互
一次性的HTTP请求

例子：

function once(fn){ 
return function(...args){
    if(fn){ //判断函数是否存在，如果存在则用实际参数调用它，然后把它置为空
        const ret = fn.apply(this, args);// 用实际参数执行函数
        fn = null;// 置空，下次就不会执行判断语句里面的内容就不会调用函数
        return ret;// 把fn的结果返回出去
    }
  }
}
function show(a, b) {
let ans = a + b
console.log("打一下~");
return ans
}
let foo = once(show);
console.log(foo(10, 20));//"打一下~ 30
console.log(foo(30, 40));//undeifined
console.log(foo(50, 60));//undeifined

Once

为了能够让“只执行一次”的需求覆盖不同的事件处理，我们将这个需求剥离处理。这个过程我们成为过程抽离

高阶函数

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

总结

过程抽象/HOF/装饰器
命令式/声明式

JS代码质量优化之路

写代码最应关注什么？风格/效率/约定/使用场景/设计

例子

left-pad事件
交通灯
分红包

附上分红包部分代码摘抄：

const Math_e = Math.E;
const Math_Pi = Math.PI;
const minMoney = 0.01; //最小红包金额

Number.prototype.fixed = function (n) {
  if(n>0) return parseFloat(this.toFixed(n));
  else return parseInt(this);
}

    function main(Money, num) {
  const realMoney = (Money - num * minMoney).fixed(2); //可分配的红包金额
  if (realMoney < 0) return null;
  let currentNum = num;
  let currentMoney = realMoney;
  console.log(`红包总金额${Money}`)
  console.log(`红包瓜分人数${num}`)

  while (currentNum != 0) {
    let nowMoney;
    let {
      h,
      r
    } = compute(currentNum, currentMoney);
    if (currentNum === 1) {
      nowMoney = currentMoney + 0.01;
    } else {
      nowMoney = getNum(0, currentMoney, h, r).fixed(2) + minMoney;
    }
    nowMoney = nowMoney.fixed(2);
    console.log(`第${num-currentNum+1}个人红包为${nowMoney}`);

    currentNum--;
    currentMoney -= (nowMoney - minMoney).fixed(2);

    console.log(`剩余红包为${(currentMoney+minMoney*currentNum).fixed(2)}`);
  }
}

感觉这次课程对JS代码掌握以及函数的要求比较高，让我看见还有蛮多不足的，笔记如有不足之处欢迎批评指正。

JS编码原则及质量优化 | 青训营