前端笔记写好JS的原则要点｜青训营

写好JS的一些原则

1.各司其责

2.组件封装组件

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

3、过程抽象

用来处理局部细节控制的一些方法 函数式编程思想的基础应用 为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程我们称为过程抽象

4、高阶函数

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

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

高阶函数是指能够接收一个或多个函数作为参数，并/或返回一个新函数的函数。以下是关于JS中高阶函数的要点：

1.函数作为参数：高阶函数可以接收其他函数作为参数，这样可以实现函数的抽象和通用化。通过将函数作为参数传递，可以实现回调、事件处理、数组遍历等功能。 2.函数作为返回值：高阶函数可以返回一个新的函数，使得函数的行为更加灵活和可组合。通过返回函数，我们可以实现函数的柯里化、闭包和延迟执行等特性。 3.增强函数功能：高阶函数可以对传入的函数进行包装，给函数增加额外的功能，例如日志记录、性能监测、错误处理等。这样可以提供更强大、可复用的函数功能。 4.函数合成和组合：通过组合不同的高阶函数，可以构建更复杂的函数操作。函数合成的概念是将多个函数组合成一个新函数，而函数组合是将多个函数按照特定的顺序组合起来。 5.实现函数式编程思想：高阶函数是函数式编程的重要概念之一。函数式编程鼓励将函数视为一等公民，通过高阶函数可以实现函数的复用、组合和抽象，进而编写更简洁、可维护的代码。

通过使用高阶函数，我们可以在JavaScript中更好地利用函数的特性，实现更灵活、可复用的代码，并借助函数式编程思想来提供更高层次的抽象和表达能力。

5、编程范式

命令式：强调怎么做

 btn.onclick = function(el) {
  if(el.target.className === 'on') {
el.target.className = 'off';
  } else {
el.target.className = 'on';
  }
 }

声明式：强调做什么

 function toggle(...actions) {
  return function(...args) {
let action = actions.shift();
actions.push(aciton);
return action.apply(this, args);
  }
 }
 btn.onclick = toggle(
   el => el.target.className = 'off',
  el => el.target.className = 'on'
· )

总结：保持代码简洁和可读性，遵循一致的编码风格和命名规范；合理使用注释来解释代码意图；避免重复代码，提高复用性；采用模块化的设计思路，将代码分解为独立的功能模块；严格处理错误和异常，使用适当的异常处理机制；进行必要的性能优化，避免性能瓶颈。此外，应善用调试工具和单元测试，确保代码的正确性和质量。同时，时刻关注最新的JavaScript技术和最佳实践，不断学习和改进自己的编码技巧。