JavaScript 编码原则

写好JS的三个原则

各司其职。
组件封装。
过程抽象。

各司其职

HTML/CSS/JS各司其职，应当避免不必要的由JS直接操作样式，可以用class来表示状态，纯展示类交互寻求零JS方案。“各司其职”旨在将代码按照不同的关注点或责任进行组织和分离，以提高代码的可读性、可维护性和可扩展性。这种分离有助于降低代码的耦合度，使得每个部分只专注于特定的任务。

组件封装

组件封装是将一系列相关的功能、样式和行为打包成一个可重用的模块的过程。

var MyComponent = {
  // 组件属性
  color: 'red',
  
  // 组件方法
  init: function() {
    console.log('组件初始化');
  },
  
  changeColor: function(newColor) {
    this.color = newColor;
    console.log('颜色已更改为：' + this.color);
  }
};

// 初始化组件
MyComponent.init();

// 使用组件方法
MyComponent.changeColor('blue');

在上述示例中，MyComponent 是一个对象字面量，它封装了一个简单的组件。该组件具有 color 属性和两个方法：init 和 changeColor。通过调用 MyComponent.init() 可以初始化组件，并通过 MyComponent.changeColor() 方法更改颜色。

组件设计的原则:

封装性：将功能相关的代码组织成独立、可重用的模块。模块化能够提供封装性和隔离性，使得组件之间的依赖关系更清晰，并且易于管理和测试。
正确性：确保组件在使用和交互时能够按照预期的方式工作，并产生正确的结果。
扩展性：组件应该容易扩展，以适应未来的需求变化。通过采用松耦合的设计和可插拔的架构，组件可以方便地进行功能扩展和修改，而不会影响到其他部分的代码。
复用性：1. 设计组件时要尽量提高其复用性。组件应该是独立、可配置和可组合的，以便在不同的上下文中重复使用。通过良好的接口设计和灵活的参数选项，可以增加组件的可复用性。

实现组件的步骤:

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

三次重构：

插件化。
模板化。
抽象化 (组件框架)。

过程抽象

用来处理局部细节控制的一些方法，函数式编程思想的基础应用。通过过程抽象，可以将代码模块化，并提供一种抽象层级，使开发者能够更高效地编写和维护代码。它帮助开发者将复杂的问题分解成更小、更简单的部分，并通过抽象概念来处理这些部分。这种模块化的方式提高了代码的组织性和可扩展性。

graph TD
INPUTx --> Functionf: --> OUTPUTfx

高阶函数

高阶函数提供了一种强大的抽象机制，使得我们能够更灵活地处理函数和数据。通过利用高阶函数，可以减少重复的代码、简化逻辑并提高代码的可读性和可维护性。以下介绍了里昂中法高阶函数：Once和HOF。

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

function once(fn) {
  let hasBeenCalled = false;
  let result;

  return function(...args) {
    if (!hasBeenCalled) {
      hasBeenCalled = true;
      result = fn.apply(this, args);
    }

    return result;
  };
}

使用 once 函数可以确保被包装的函数只会执行一次。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

const greetOnce = once(greet);

greetOnce("John"); // 输出：Hello, John!
greetOnce("Alice"); // 忽略执行

在上述示例中，greet 函数被包装在 greetOnce 中，只有在第一次调用时才会输出问候语。后续对 greetOnce 的调用不会再执行原始的 greet 函数。

这样的高阶函数非常有用，特别是在需要限制某个函数只能执行一次的情况下（例如初始化、事件监听等）。

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

第六届字节跳动青训营第四课 | 青训营

JavaScript 编码原则

写好JS的三个原则

各司其职

组件封装

过程抽象