JavaScript 设计模式:工厂模式详解与实战
作者:木棉时间:2026-10-24 21:51:32浏览:418
本文深入解析 JavaScript 中的工厂模式,通过封装 new 操作简化对象创建流程。结合 UML 类图与经典代码示例,阐述其核心原理。重点分析 jQuery 选择器与 React.createElement 如何应用该模式,帮助开发者理解复杂场景下的对象实例化策略。
概述
- 把new操作符进行独立封装处理
- 当代码中出现new时,需评估是否适用工厂模式
- 以购买汉堡为例:顾客直接点餐取餐,无需亲手制作,商家负责封装制作流程并交付成品
UML类图展示

直接展示工厂模式的实现代码
class Product {
constructor(name} {
this.name = name
}
init() {console.log('init')}
fun1() {console.log('fun1')}
fun2() {console.log('fun2')}
}
// 此处的Creator就是工厂
class Creator {
create(name) {
// 此处返回的是实例,工厂模式的特点
return new Procuct(name)
}
}
// 运行代码
let creator = new Creator()
let p = creator.create('p1')
p.init()
p.fun1()
p.fun2()
工厂模式的典型应用场景
Jquery - $(‘div’)
// jquery 代码为工厂模式
class jQuery {
constructor(selector) {
let slice = Array.prototype.slice
let dom = slice.call(document.querySelectorAll(selector))
let len = dom ? dom.length : 0
for (let i = 0; i < len; i++) {
this[i] = dom[i]
}
this.length = len
this.selector = selector || ''
}
append(node) {}
addClass(name) {}
html(data) {}
// 此处省略若干 API
}
window.$ = function (selector) {
return new jQuery(selector)
}
React.createElement (用于创建虚拟DOM实例)

内容小结
本文到此结束,希望能为您提供帮助,欢迎持续关注本站获取更多信息!
作者最新文章
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
