1. 前言

1. 前几天面试也问到了这个问题
2. 首先低耦合 其次拖拽来分析
3. 当时主要是 react问的 所以用 react代码来说明

---

2. 是什么 what

1. 低耦合性是指在软件设计中，模块或组件之间的相互依赖程度较低的特性。
2. 当组件之间的耦合性低时，它们可以独立存在、修改和测试，而不会对其他组件产生太大的影响。
3. 低耦合性有助于提高代码的可维护性、可扩展性和可重用性。

---

3. 实现方式 -模块化设计：

1. 将系统拆分成多个独立的模块，每个模块只关注自身的功能，并提供清晰的接口供其他模块使用。模块之间的通信通过接口进行，而不是直接依赖于具体实现。

---

• 大概代码思路

// 模块A
import { doSomething } from './moduleB';

function ModuleA() {
  // 使用模块B提供的功能
  doSomething();
  
  // 组件A的其他逻辑
  // ...
}

// 模块B
export function doSomething() {
  // 执行某些操作
}

4. 解耦合的通信方式：

1. 采用解耦合的通信方式，如事件驱动或发布-订阅模式，以减少模块之间的直接依赖。这样，模块之间的通信可以通过事件或消息进行，而不需要直接引用其他模块。

---

• 大概代码

// 事件驱动方式
// 组件A
function ComponentA() {
  function handleClick() {
    // 触发事件
    EventBus.emit('customEvent', data);
  }
  
  // 组件A的其他逻辑
  // ...
}

// 组件B
function ComponentB() {
  useEffect(() => {
    // 订阅事件
    EventBus.on('customEvent', handleEvent);
    
    return () => {
      // 取消订阅
      EventBus.off('customEvent', handleEvent);
    };
  }, []);
  
  function handleEvent(data) {
    // 处理事件
    // ...
  }
  
  // 组件B的其他逻辑
  // ...
}

5. 依赖注入：

1. 通过依赖注入的方式，将组件所需的依赖作为参数传递给组件，而不是在组件内部直接创建或引用依赖对象。这样可以使组件更加灵活，易于替换和测试。

---

• 代码

// 父组件
function ParentComponent() {
  const dependency = {
    // 依赖对象或函数
  };
  
  return (
    <ChildComponent dependency={dependency} />
  );
}

// 子组件
function ChildComponent({ dependency }) {
  // 使用依赖对象或函数
  dependency.doSomething();
  
  // 子组件的其他逻辑
  // ...
}

6. 接口设计：

1. 良好的接口设计可以将组件之间的耦合降到最低。接口应该简洁明确，只提供必要的功能，并尽量减少对其他模块的依赖。

---

• 代码

// 接口定义
const API = {
  getData: () => {
    // 获取数据的实现
  },
  sendData: (data) => {
    // 发送数据的实现
  },
};

// 组件
function Component() {
  // 使用接口定义的功能
  API.getData();
  
  // 组件的其他逻辑
  // ...
}

---

7. 具体的 低耦合拖拽项目

1. 上面大概了解了 低耦合项目的方式 模块化设计,解耦合的通信方式,依赖注入,接口设计
2. 下面看下具体的 低耦合 拖拽实现 思路

1. 定义可拖拽的元素：创建一个组件或者元素，设置其可拖拽属性，例如 draggable="true"。

2. 监听拖拽事件：在拖拽元素上添加拖拽事件的监听器，包括 dragstart、drag 和 dragend 事件。可以通过使用事件处理函数来处理这些事件。

3. 实现拖拽的逻辑：在 dragstart事件中，可以获取拖拽元素的数据，并将其存储到数据传输对象（DataTransfer）中。可以使用自定义的数据属性或者其他方式存储数据。

4. 接收拖拽的目标区域：在接收拖拽的目标区域上添加相应的事件监听器，包括 dragenter、dragover、dragleave 和 drop 事件。同样可以通过事件处理函数来处理这些事件。

5. 实现拖拽目标的逻辑：在 dragover 事件中，可以阻止默认的拖放行为，并指示浏览器允许放置操作。在 drop 事件中，可以获取拖拽元素的数据，并进行相应的处理。

import React from 'react';

const DraggableItem = ({ data, onDragStart }) => {
  const handleDragStart = (event) => {
    event.dataTransfer.setData('text/plain', JSON.stringify(data));
    onDragStart(data);
  };

  return (
    <div draggable="true" onDragStart={handleDragStart}>
      {/* 拖拽元素的内容 */}
    </div>
  );
};

const DroppableTarget = ({ onDrop }) => {
  const handleDragOver = (event) => {
    event.preventDefault();
  };

  const handleDrop = (event) => {
    event.preventDefault();
    const data = JSON.parse(event.dataTransfer.getData('text/plain'));
    onDrop(data);
  };

  return (
    <div onDragOver={handleDragOver} onDrop={handleDrop}>
      {/* 接收拖拽的目标区域的内容 */}
    </div>
  );
};

const App = () => {
  const handleDragStart = (data) => {
    // 拖拽开始时的处理逻辑
  };

  const handleDrop = (data) => {
    // 拖拽结束时的处理逻辑
  };

  return (
    <div>
      <DraggableItem data={/* 拖拽元素的数据 */} onDragStart={handleDragStart} />
      <DroppableTarget onDrop={handleDrop} />
    </div>
  );
};

export default App;

1. DraggableItem 组件代表可拖拽的元素，DroppableTarget 组件代表接收拖拽的目标区域。
2. 通过传递相应的数据和回调函数，可以在 App 组件中实现特定的拖拽行为

---

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉