JavaScript笔记之如何写好JavaScript 前端javascript

写好JavaScript的三个原则：各司其责组件封装过程抽象各司其责

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

组件封装组件是指Web页面上抽出来的一个个包含模块（HTML）、样式（CSS）和功能（JS）的单元。好的组件具备封装性、正确性、扩展性、复用性。实现组件的步骤：结构设计、展现效果、行为设计，三次重构：插件化重构、模板化重构、抽象化重构。

结构设计：HTML
展现效果：CSS
行为设计：JS
- API（功能），API 设计应保证原子操作，职责单一，满足灵活性。
- Event（控制流），使用自定义事件来解耦。
插件化重构，即解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
模板化重构
- 将HTML模板化，更易于扩展
抽象化重构（组件框架）
- 将通用的组件模型抽象出来

过程抽象过程抽象是指用来处理局部细节控制的一些方法，是函数式编程思想的基础应用。

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

//零阶高阶函数，等价于直接调用函数 function HOF_0 (fn){ return function(...args){ return fn.apply(this.args); } }

构造 once 高阶函数，为了能够让“只执行一次”的需求（例如一些异步操作、一次性的HTTP请求）覆盖不同的事件处理，我们可以将这个需求利用闭包剥离出来。这个过程称为过程抽象。

function once ( fn ) { return function (...args){ const res = fn.allpy (this.args); fn = null; return res; } }

防抖函数，在第一次触发事件时，不立即执行函数，而是给出一个期限值，如果在期限值内没有再次触发滚动事件，那么就执行函数，如果在期限值内再次触发滚动事件，那么当前的计时取消，重新开始计时

const debounce = (fn, delay) => { let timer = null; //借助闭包 return function () { clearTimeout(timer); timer = setTimeout(fn, delay); } }
节流函数，类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活。效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

const myThrottle = (fn, delay) => { let flag = true; return function () { if (!flag) { return false; } else { flag = false; setTimeout(() => { fn(); flag = true; }, delay); } } }
为什么要使用高阶函数？
- 减少系统内非纯函数的数量，提高系统的可测试性和稳定性。

写好 JavaScript 写代码应该关注

效率
风格
使用场景
约定
设计
具体的代码实现要因场景而定，不同的场景注重点不一样，例如在某些比较底层的场景，可能更注重效率，而在多人协作的时候可能更关注约定。

判断是否是4的幂

常规操作

const isPowerOfFour = (num) => { num = parseInt(num); while(num > 1){ if(num % 4) return false; num /= 4; } return true； }
优化版本1，利用 4 的幂的二进制数最高位为1，低位为偶数个0

const isPowerOfFour = (num) => { num = parseInt(num); return num > 0 && (num & (num-1)) === 0 && (num & 0XAAAAAAAA) === 0; }
优化版本2，利用正则表达式

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

实现交通灯切换效果

版本一，利用setTimeout，可能出现回调地狱

const traffic = document.getElementById('traffic'); (function reset(){ traffic.className = 's1'; setTimeout(function(){ traffic.className = 's2'; setTimeout(function(){ traffic.className = 's3'; setTimeout(function(){ traffic.className = 's4'; setTimeout(function (){ traffic.className = 's5'; setTimeout(reset,1000) },1000) },1000) },1000) },1000) })();
优化版本，利用async/await

const traffic = document.getElementById('traffic'); function wait(time){ return new Promise(resolve => setTimeout(resolve,time)) } function setState(state){ traffic.className = state; } async function start(){ while(1){ setState('wait'); await wait(1000); setState('stop'); await wait(3000); setState('pass'); await wait(3000); } } start();

洗牌算法

错误示例
看似可以正确洗牌，但实际上较小的牌放到前面的概率更大，较大的的牌放到后面的概率更大

const cards = [0,1,2,3,4,5,6,7,8,9]; const shuffle = (cards) => { return [...cards].sort(() => { Math.random() > 0.5 ? -1 : 1 }); }
正确示例

const cards = [0,1,2,3,4,5,6,7,8,9]; function *draw(cards){ const c = [...cards]; for(let i = c.length ; i > 0 ; i--){ const pIdx = Math.floor(Math.random() * i); [c[pIdx],c[i - 1]] = [c[i - 1],c[pIdx]]; yield c[i - 1]; } return c; }

分红包问题

【JavaScript笔记之如何写好JavaScript】版本一，类似于切蛋糕，取最大的继续切分，得出的结果会比较平均

function generate(amount,count){ let ret = [amount]; while(count > 1){ // 挑出最大的进行切分 let cake = Math.max(...ret), idx = ret.indexOf(cake), part = 1 + Math.floor((cake / 2) * Math.random()), rest = cake - part; ret.splice(idx,1,part,rest); count --; } return ret; }
版本二，随机性较大，可能会有较大的红包出现

function *draw(cards){ const c = [...cards]; for(let i = c.length ; i > 0 ; i --){ const pIdx = Math.floor(Math.random()*i); [c[pIdx],c[i-1]] = [c[i - 1],c[pIdx]]; yield c[i-1] } return c; } function generate(amount,count){ if(count <= 1) return [amount]; const cards = Array(amount - 1).fill(null).map((_,i) => i+1); const pick = draw(cards); const result = []; for(let i = 0 ; i < count; i++){ result.push(pick.next().value); } result.sort((a,b)=>a-b); for(let i = count - 1 ; i > 0 ; i--){ result[i] = result[i] - result[i - 1]; } return result; }