前端开发与设计模式 ｜ 青训营笔记

得得DD
87 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天

Web开发概述

起源、 架构、变迁

Tim Berners-Lee 《Information Management: A Proposal》1989

  • 1989Web的三种技术：HTML，HTTP，URL

image.png

  • web的三个时代

image.png

Web应用领域

  • to Business, to Customer, to Developer
  • 浏览器
    • Desktop: Chrome (Edge, Opera)，Safari, Firefox
    • Mobile: IOS, Android
  • 服务器：Node.js (deno), Express.js, koa
  • 终端和跨端
    • 命令行/终端（CLI）：Webpack, Babel, React, Vue
    • 桌面跨端：Electron, NW.js
    • 移动跨端：React Native, Flutter
  • 语言、框架、工具
    • HTML, CSS, JavaScript, WebAssembly (WASM)
    • 框架：关注作者（开发目的、初衷…）

Web开发标准

标准组织

  • W3C: World Wide Web Consortium 万维网联盟
    • 全球457家会员，其中北航总部（中国区）会员47家
  • Ecma: Ecma International
    • 5种会员 (OM, AM, SME, SPC, NFP)
  • WHATWG: Web Hypertext Application Technology Working Group
  • IETF: Internet Engineering Task Force

制定流程

  • W3C

image.png

  • Ecma TC39

image.png

W3C会议

  • 年度大会
    • AC (Advisory Committee)
    • TPAC (Technical Plenary and Advisory Committee) 一年一度的全球技术大会
  • 工作组会议：每月例会，研讨会

Ecma会议

  • 年度大会：GA (General Assembly)
  • TC39会议

设计模式

什么是设计模式？

  • 软件设计中常见问题的解决方案模型
  • 是历史经验的总结
  • 与特定语言无关

设计模式的类别

  • 创建型：如何创建一个对象
  • 结构型：如何灵活地将对象组装成较大的结构
  • 行为型：负责对象间的高效通信和职责划分

浏览器中的设计模式

  • 单例模式
    • 定义：全局唯一访问对象（如window）
    • 应用场景：缓存、全局状态
  • 发布订阅模式/观察者模式
    • 定义：一种订阅机制，在订阅对象发生变化时通知订阅者
    • 应用场景：业务中、系统架构解耦等（如邮件订阅、上线订阅等）

JS中的设计模式

原型模式

  • 定义：复制已有对象来创建新的对象
  • 应用场景：对象创建的基本对象

代理模式

  • 定义：可自定义控制原对象的访问模式，允许在更新前后做额外处理
  • 应用场景：监控、代理工具、前端框架实现等

迭代器模式

  • 定义：在不暴露数据类型的情况下访问集合中的数据
  • 应用场景：提供通用操作接口

组合模式

  • 定义：多个对象组合使用，也可以作为单个对象独立使用
  • 应用场景：DOM、前端组件、文件目录

设计模式并不能解决所有问题

  • 总结出抽象的模式相对简单，但是将其套用到应用场景中非常困难
  • 现代编程语言的多编程范式为设计模式带来更多的可能性
avatar
文章
阅读
粉丝