7.插件开发-重构代码

拆分

View 里应该只有：

onOpen() 
onClose() 
render() 
bindEvents()

整体流程 看结构,建立心理地图

关键词: if/switch, render/refresh/update, onclick/addEventListener

标, 在脑子里贴标签

区分:状态,纯逻辑(计算/判断),副作用(DOM/事件),性能/防抖/滚动

提函数,给函数取名后调用

什么情况提函数

• 超过8行
• 能用一句话说清在干嘛
• 看着碍眼

拆文件

有些函数功能类似,经常一起被用,名字也像时

• 新建文件,如save.ts
• 原封不动剪过去
• expport/import

分层

view-render-logic-store-flux-MVC-MVVM

够用就停

能一眼说出每行在干嘛就行

css拆分

新建对应的css.ts 注意:更改类名和id

/**
 * 样式加载器 - 负责注入和管理 CSS
 */
export class reviewStyle {
    private static styleId = 'learning-overview-styles';
    private static isInjected = false;
  
    /**
     * 注入样式到页面
     */
    static inject(): void {
      if (this.isInjected || document.getElementById(this.styleId)) {
        return;
      }
  
      const styleEl = document.createElement('style');
      styleEl.id = this.styleId;
      styleEl.textContent = this.getStyles();
      document.head.appendChild(styleEl);
      
      this.isInjected = true;
    }
  
    /**
     * 移除样式
     */
    static remove(): void {
      const styleEl = document.getElementById(this.styleId);
      if (styleEl) {
        styleEl.remove();
        this.isInjected = false;
      }
    }
  
    /**
     * 获取所有样式（从这里统一管理）
     */
    private static getStyles(): string {
      return `
      // 插入对应的样式 
      
      `
      ;
    }
  }

在开头引用文件

import { reviewStyle } from '../style/reviewStyle';

在async onOpen()注入

reviewStyle.inject();

service组件拆分 新建相应组件文件

export class sideOverviewService {
    constructor(
      private plugin: LearningSystemPlugin,
      private state: ViewState
    ) {}
  
    // 把 jumpToSource、saveAnnotation、quickGenerateFlashcard 等
    // 业务逻辑方法移到这里
    async jumpToSource(unit: ContentUnit, app: App): Promise<void> { }
    async saveAnnotation(unitId: string, content: string): Promise<void> { }
    async quickGenerateFlashcard(unit: ContentUnit): Promise<void> { }
    // ...
  }

引用

import { sideOverviewService } from '../service/sideOverviewService';

使用

export class SidebarOverviewView extends ItemView {
  plugin: LearningSystemPlugin;
  
  // 使用状态管理器
  private state: ViewState;
  
  // 使用service组件
  private overviewService: sideOverviewService; 
 
  private _forceMainMode: boolean;
  constructor(leaf: WorkspaceLeaf, plugin: LearningSystemPlugin, forceMainMode = false) {
    super(leaf);
    this.plugin = plugin;
    
    this._forceMainMode = forceMainMode;
    // 初始化状态
    this.state = new ViewState(forceMainMode);
    
    // 初始化组件
    this.initializeComponents();

private initializeComponents(): void {
  // 初始化 service
  this.overviewService = new OverviewService(this.plugin, this.state);
  
  // 工具栏回调
  this.toolbar = new Toolbar(this.state, {
    // ...
  });
  // ...
}