设计模式并非是难以理解, 或是难以应用到实践中的, 相反的, 设计模式恰恰代表了某些场景下的最佳实践! 这些设计模式通常被有经验的开发者们所采用。
设计模式是开发者们在开发过程中面临的一般问题的解决方案。 这些解决方案是众多开发者们经过长时间的实验和错误所总结出来的
本文将讲解前端 (javascript) 的设计模式概念!
构造函数用于特定类型的对象, 不仅声明了使用的对象, 构造函数还可以接收参数以便第一次创建对象的时候设置对象的成员值, 要注意的是构造函数模式所生成实例的属性和方法都是独立存在的
一个简单的构造函数示例:
function Blog(name) {
this.name = name;
this.toName = function() {
return this.name;
}
}
或是将方法提出:
function Blog(name) {
this.name = name;
this.toName = toName;
}
function toName() {
return this.name;
}
构造函数的函数名首字母大写, 并且构造函数内部要是完整的, 不要依赖外部属性
以下是一个错误的示例
var name = 'hello world!';
function Blog() {
this.name = name;
this.toName = toName;
}
function toName() {
return this.name;
}
多数构造函数都需要使用new来创建实例, 但有一种方式可以避免使用new来创建, 但是并不建议如此使用, 这样写代码中可能引起歧义
function Blog(name) {
if (!(this instanceof Blog)) {
return new Blog(name);
}
this.name = name;
this.toName = toName;
}
function toName() {
return this.name;
}
加入代码instanceof
判断之后, 当直接使用Blog('hello world');
时, 也始终返回一个实例
原理是通过判断this
的instanceof
是不是Blog
来决定返回new Blog
还是继续执行代码,如果使用的是new
关键字,则(this instanceof Blog)
为true
,会继续执行下面的参数赋值,如果没有用new
,(this instanceof Blog)
就为false
,就会重新new
一个实例返回。
使用场景
构造函数模式的应用比较广泛, 但不经常单独使用, 一般是与原型模式结合使用, 如包装一个常用的按钮, 这种会重复使用的模块, 只要是需要复用的模块, 就可以应用到构造函数模式
其他设计模式
单例模式: https://www.jianshu.com/p/4c0604f116ba
建造者模式: https://www.jianshu.com/p/70cf4bb80549
简单工厂模式: https://www.jianshu.com/p/4293450926c2
抽象工厂模式: https://www.jianshu.com/p/d6138f36e6e2
装饰者模式: https://www.jianshu.com/p/16cf284ab810
外观模式: https://www.jianshu.com/p/179ae2a13c59