自定义框架（自己造轮子，不兼容社区方案）

为什么需要自定义框架

前端开发领域充斥着各种成熟框架，React、Vue、Angular等解决方案已经相当完善。但特定场景下，这些通用框架可能显得笨重或不够灵活。当项目有特殊性能要求、独特交互模式或需要深度优化时，从零开始构建专属框架往往能带来更好的控制力和针对性优化空间。

某电商平台需要实现商品详情页的极致加载性能，现有框架的虚拟DOM diff开销成为瓶颈。团队决定开发轻量级渲染引擎，直接操作DOM并实现精确更新，最终首屏时间降低40%。这种深度定制在通用框架中难以实现。

核心架构设计考量

响应式系统实现

自定义框架通常需要建立数据与UI的绑定关系。相比Vue的getter/setter或React的虚拟DOM，可以采用更直接的数据监听方案：

class Observable {
  constructor(value) {
    this._value = value
    this._subscribers = []
  }

  get value() {
    return this._value
  }

  set value(newValue) {
    if (this._value !== newValue) {
      this._value = newValue
      this._notify()
    }
  }

  subscribe(callback) {
    this._subscribers.push(callback)
  }

  _notify() {
    this._subscribers.forEach(cb => cb(this._value))
  }
}

// 使用示例
const state = new Observable(0)
state.subscribe(value => {
  console.log(`值变为: ${value}`)
})
state.value = 42 // 触发通知

模板引擎设计

避免虚拟DOM的运行时开销，可以采用编译时模板转换。将模板字符串预先转换为高效渲染函数：

function compile(template) {
  const tokens = template.split(/({{.*?}})/)
  let code = 'let fragments = [];\n'
  
  tokens.forEach(token => {
    if (token.startsWith('{{') && token.endsWith('}}')) {
      const expr = token.slice(2, -2).trim()
      code += `fragments.push(${expr});\n`
    } else if (token) {
      code += `fragments.push(\`${token}\`);\n`
    }
  })
  
  code += 'return fragments.join("");'
  return new Function('ctx', code)
}

// 编译结果
const render = compile('Hello, {{user.name}}!')
console.log(render({ user: { name: 'Alice' } })) // Hello, Alice!

性能优化策略

细粒度更新控制

通用框架的更新机制往往保守，自定义框架可以针对业务特点优化。例如列表渲染时，只更新变化的项目而非整个列表：

class ListRenderer {
  constructor(container, keyFn) {
    this._items = new Map()
    this._container = container
    this._keyFn = keyFn
  }

  update(newItems) {
    const newKeys = new Set(newItems.map(this._keyFn))
    
    // 移除不存在的项
    this._items.forEach((el, key) => {
      if (!newKeys.has(key)) {
        el.remove()
        this._items.delete(key)
      }
    })

    // 更新/新增项
    newItems.forEach(item => {
      const key = this._keyFn(item)
      if (this._items.has(key)) {
        this._updateItem(this._items.get(key), item)
      } else {
        const el = this._createItem(item)
        this._container.appendChild(el)
        this._items.set(key, el)
      }
    })
  }
}

WASM集成优化

性能敏感计算可借助WebAssembly实现。例如图像处理框架可将卷积运算移至WASM：

// lib.rs
#[wasm_bindgen]
pub fn apply_convolution(
    input: &[u8], 
    output: &mut [u8],
    width: usize,
    height: usize,
    kernel: &[f32]
) {
    // 卷积运算实现
}

前端通过worker线程调用，避免阻塞UI：

const worker = new Worker('image-processor.js')
worker.postMessage({ 
  type: 'process', 
  imageData,
  kernel: [0, -1, 0, -1, 5, -1, 0, -1, 0] 
})

开发体验构建

热更新系统

为提升开发效率，需要实现模块热替换。通过WebSocket建立开发服务器与浏览器的连接：

const ws = new WebSocket('ws://localhost:8080/hmr')

ws.onmessage = (event) => {
  const { type, moduleId } = JSON.parse(event.data)
  if (type === 'update') {
    import(`/modules/${moduleId}?t=${Date.now()}`)
      .then(newModule => {
        // 替换模块实现
        self.__modules[moduleId] = newModule
        // 触发视图更新
        __renderApp()
      })
  }
}

类型提示增强

即使不使用TypeScript，也可以通过JSDoc提供类型支持：

/**
 * @template T
 * @typedef {{
 *   get: () => T,
 *   set: (value: T) => void,
 *   subscribe: (callback: (value: T) => void) => void
 * }} Observable
 */

/**
 * 创建响应式对象
 * @template T
 * @param {T} initialValue
 * @returns {Observable<T>}
 */
function createObservable(initialValue) {
  // 实现...
}

生态兼容方案

Web Components互操作

确保自定义框架能与原生Web Components协作。包装自定义元素：

class FrameworkComponent extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this._state = createObservable(null)
  }

  connectedCallback() {
    this._render()
    this._state.subscribe(() => this._render())
  }

  _render() {
    // 使用框架渲染逻辑填充shadow DOM
  }
}

customElements.define('fw-component', FrameworkComponent)

旧版浏览器支持

通过分层架构实现渐进增强。核心功能使用现代API，兼容层提供降级方案：

// 现代浏览器使用MutationObserver
const observer = new MutationObserver(records => {
  // 处理DOM变化
})

// 兼容模式使用polling
function startPolling() {
  let lastHTML = document.body.innerHTML
  setInterval(() => {
    const currentHTML = document.body.innerHTML
    if (currentHTML !== lastHTML) {
      // 处理变化
      lastHTML = currentHTML
    }
  }, 1000)
}

测试体系构建

渲染一致性测试

确保不同环境下的渲染结果一致，使用像素级比对：

function testRendering(component, expected) {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  
  // 渲染组件到canvas
  renderToCanvas(component, canvas)
  
  // 获取像素数据
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
  const diff = compareWithExpected(imageData, expected)
  
  assert(diff.percentage < 0.01, '渲染差异超过阈值')
}

内存泄漏检测

构建时集成内存检测工具：

// 测试用例
function runMemoryTest() {
  const instances = []
  let iteration = 0
  
  const timer = setInterval(() => {
    instances.push(new ComplexComponent())
    iteration++
    
    if (iteration > 100) {
      clearInterval(timer)
      // 触发GC并检查内存
      setTimeout(() => {
        const memory = performance.memory
        assert(memory.usedJSHeapSize < 50 * 1024 * 1024, '内存泄漏')
      }, 1000)
    }
  }, 10)
}

构建工具链集成

自定义loader实现

为框架特殊语法开发webpack loader：

module.exports = function(source) {
  // 转换自定义模板语法
  const output = source.replace(/@\{([^}]+)\}/g, (_, expr) => {
    return `\${${expr.trim()}}`
  })
  
  // 添加运行时依赖
  return `
    import { createComponent } from '@framework/runtime'
    ${output}
  `
}

代码分割策略

按业务特性优化分包逻辑：

// framework.config.js
export default {
  splitChunks: {
    components: {
      test: /\/components\//,
      priority: 10,
      chunks: 'async'
    },
    utils: {
      test: /\/utils\//,
      minSize: 1024,
      chunks: 'all'
    }
  }
}

调试工具开发

自定义DevTools面板

通过Chrome扩展API开发专属调试工具：

chrome.devtools.panels.create(
  "Framework",
  "icon.png",
  "panel.html",
  (panel) => {
    panel.onShown.addListener((extPanelWindow) => {
      // 建立与页面的连接
      chrome.devtools.inspectedWindow.eval(
        "window.__FRAMEWORK_DEVTOOLS_HOOK__",
        (hook, err) => {
          if (hook) {
            setupConnection(hook)
          }
        }
      )
    }
  }
)

状态时间旅行

实现状态快照与回放：

class StateHistory {
  constructor(maxSnapshots = 100) {
    this._snapshots = []
    this._cursor = -1
    this._max = maxSnapshots
  }

  record(state) {
    // 截断重做分支
    this._snapshots = this._snapshots.slice(0, this._cursor + 1)
    // 添加新快照
    this._snapshots.push(deepClone(state))
    // 限制历史长度
    if (this._snapshots.length > this._max) {
      this._snapshots.shift()
    }
    this._cursor = this._snapshots.length - 1
  }

  undo() {
    if (this._cursor > 0) {
      this._cursor--
      return this._snapshots[this._cursor]
    }
  }

  redo() {
    if (this._cursor < this._snapshots.length - 1) {
      this._cursor++
      return this._snapshots[this._cursor]
    }
  }
}

文档生成方案

自动化API文档

从源代码提取文档注释生成文档：

function extractDocs(source) {
  const ast = parse(source)
  const docs = []
  
  traverse(ast, {
    FunctionDeclaration(path) {
      const doc = parseJsDoc(path.node.leadingComments)
      docs.push({
        name: path.node.id.name,
        params: doc.params,
        returns: doc.returns,
        description: doc.description
      })
    }
  })
  
  return docs
}

交互式示例系统

文档中嵌入可运行示例：

function createInteractiveExample(code, container) {
  const iframe = document.createElement('iframe')
  iframe.sandbox = 'allow-scripts allow-same-origin'
  
  const html = `
    <!DOCTYPE html>
    <script src="/framework.js"></script>
    <script>${code}</script>
  `
  
  iframe.srcdoc = html
  container.appendChild(iframe)
  
  return {
    reload: (newCode) => {
      iframe.srcdoc = html.replace(code, newCode)
    }
  }
}