文章目录
工厂模式定义工厂模式的UML类图代码工厂模式的应用Jquery-$('div')手写jquery的$()
react.createElementVue异步组件
设计原则的验证
工厂模式定义
工厂模式是我们最常用的实例化对象模式了，是用工厂方法代替new操作的一种模式，工厂模式就相当于创建实例对象的new
工厂模式的UML类图
上面的Creatot类就相当于工厂，Product相当于工厂中的产品
上图中Profuct类是产品，有name属性，还有三个方法，Creator是工厂类，里面有一个create方法，注意它的返回类型是Product类型
代码
class Creator{
create(name
){
return new Productor(name
)
}
}
class Productor{
constructor(name
){
this.name
= name
}
init(){
console
.log(`this product was produced,its name is ${this.name}`);
}
usefor(application
){
console
.log(`${this.name} is used for ${application}`);
}
quality(){
console
.log('it is good');
}
}
let creator
= new Creator()
let ball
= creator
.create('basketball')
ball
.init()
ball
.usefor('sports')
ball
.quality()
工厂模式的应用
Jquery-$(‘div’)
$(‘div’)和new
(
′
d
i
v
′
)
的
区
别
,
其
实
j
q
u
e
r
y
的
('div')的区别,其实jquery的
(′div′)的区别,其实jquery的()就是一个工厂模式，而第二种形式会报错，而且书写起来会特别麻烦
手写jquery的$()
class Jquery{
constructor(selector
){
let dom
= Array
.prototype
.slice
.call(document
.querySelectorAll(selector
))
console
.log(dom
);
let len
= dom
? dom
.length
:0
for(let i
=0;i
<len
;i
++){
this[i
] = dom
[i
]
}
this.length
= len
this.selector
= selector
|| ''
}
addClass(name
){
}
html(str
){
}
}
window
.$ = function(selector
){
return new Jquery(selector
)
}
react.createElement
ReactElement
createElement(
string
/ReactClass type
,
[object props
],
[children
...]
)
React.createElement方法创建并返回一个给定类型的ReactElement元素。type参数可以是一个html标签名称字符串，也可以是一个ReactClasss。这个type参数对于createElement来说是必须的。第二个参数是该标签的属性，这个参数是可选的。第三个参数是该元素的子节点，同样也是可选的。
源码大致是下面； React.createElement方法创建的大概是一个Vnode的实例，虚拟DOM的实例，如果不封装new Vnode(tag,…)的操作，把操作抛给程序员使用那将会造成巨大麻烦
Vue异步组件
Vue
.component('async-example', function (resolve
, reject
) {
setTimeout(function () {
resolve({
template
: '<div>I am async!</div>'
})
}, 1000)
})
截取官方的一段话：，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染
设计原则的验证
工厂模式的构造函数和创建者分离符合开放封闭的原则
