这里积累下js的设计模式,暂时主要考虑用在React native与uniapp的开发上
js中常用设计模式
文章目录
一、工厂模式
不暴露创建对象的具体逻辑,而是将逻辑封装在一个函数中,这个函数被视为一个工厂
function createPerson(name, age){
var o = new Object(); // 创建一个对象
o.name = name;
o.age = age;
o.sayName = function(){
console.log(this.name)
}
return o; // 返回这个对象
}
var person1 = createPerson('ccc', 18)
var person2 = createPerson('www', 18)
二、单例模式
保证一个类仅有一个实例,并且提供一个可以访问它的访问点
2.1、写法一(构建instance)
class Singleton {
//构造函数
constructor(name) {
this.name = name;
}
//实例方法
getName() {
console.log(this.name);
}
//静态方法获取实例对象
static getInstance(name) {
if (!this.instance) {
this.instance = new Singleton(name);
}
return this.instance;
}
}
//创建静态属性作为唯一标识
Singleton.instance = null;
//验证
var a = Singleton.getInstance('a');
2.2、写法二(export单例)
class UserModel {
}
const userModel = new UserModel();
export default userModel;
三、观察者模式
当一个对象的状态发生变化时,所有依赖于他的对象都将得到通知。
常用于事件订阅,以及Vue框架的双向数据绑定。
//发布者(售楼处)
class SalesOffices{
constructor(){
//缓存列表(售楼花名册)
this.clientList = [];
}
//订阅函数(订阅售楼消息)
listen(fn){
this.clientList.push(fn);
}
//发布函数(发布售楼消息)
trigger(){
//遍历花名册,给他们发消息
for(var i=0;i<this.clientList.length;i++){
var fn = this.clientList[i];
fn.apply(this,arguments);
}
}
}
//实例化
var salesOffices = new SalesOffices();
//小明订阅售楼消息
salesOffices.listen(function(price){
console.log("小明" + price);
});
//小红订阅售楼消息
salesOffices.listen(function(price){
console.log("小红" + price);
});
//售楼处发布售楼消息
salesOffices.trigger("你好,今天的房价为2万一平!");
//打印结果:
小明你好,今天的房价为2万一平!
小红你好,今天的房价为2万一平!
//订阅消息
myDiv.addEventListener('click', function(){
console.log("myDiv被点击了")
});
//发布消息
myDiv.click();
四、构造函数模式
使用new操作符,调用构造函数创建新实例。
一般会有以下几步:
- 创建一个新对象
- 将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
- 执行构造函数中的代码(为这个新对象添加属性)
- 返回新对象
构造函数模式与工厂模式的区别:
- 没有显式的创建对象
- 直接将属性和方法赋给了this对象
- 没有return 语句
function Person(name , age){
this.name = name;
this.age = age;
this.sayName = function(){
console.log(this.name)
}
}
var person1 = new Person('ccc', 18)
var person2 = new Person('www', 18)
person1.sayName() // --> 'ccc'
console.log(person1 instanceof Person) // --> true
五、代理模式
为一个对象提供一个代用品或占位符,以便控制对它的访问。
优点
- 可以保护对象
- 优化性能,减少开销很大的对象
- 缓存结果
5.1、保护代理
比如说对传入的数据做一下初步的处理,整理格式,处理类型,过滤字段等等
// 保护代理
function do1(value){
console.log(value)
}
function xdo1(value){
if(value==undefined||value==null){
console.log("输入不合规")
return
}
value = ('' + value).replace(/沙\s*雕/g, '**');
if(typeof(value)!='String'){
do1(value.toString())
return
}
do1(value)
}
xdo1()
xdo1(123123)
xdo1({})
xdo1("eqweqwrqw")
xdo1("你是个沙雕吧")
5.2、虚拟代理
就是在访问主函数之前,做一些控制,如果时合规的数据,再发送至主函数,否则自动返回
防抖、节流以及图片占位图就是一个典型的例子
// 防抖 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
// 应用场景: 用户输入间隔多久后没有输入时进行检查
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行,false 表非立即执行
*/
let timeout={
// 'default':null
};
let debounce = (func, wait=500, immediate = true,key='default') => {
if (timeout[key]) clearTimeout(timeout[key]);
if (immediate) {
let callNow = !timeout[key];
timeout[key] = setTimeout(() => {
timeout[key] = null;
}, wait)
if (callNow) func()
} else {
timeout[key] = setTimeout(function() {
func()
}, wait);
}
}
// 节流 所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
// 应用场景: 需要稀释执行效率的地方使用,例如懒加载的时候监听滚动条。
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表示立即执行,false 表示非立即执行
*/
let previous = 0;
let throttle = (func, wait, immediate = false,key='default') => {
if (immediate) {
let now = Date.now();
if (now - previous > wait) {
func();
previous = now;
}
} else {
if (!timeout[key]) {
timeout[key] = setTimeout(() => {
timeout[key] = null;
func();
}, wait)
}
}
}
export default {
debounce,
throttle,
}
5.2、缓存代理
缓存代理就是在需要比较大的计算的时候,可以把结果做一个缓存,在遇到相同入参时直接返回结果,可以提高性能
listadd=(list)=>{
return list.reduce(function(start,value,index,list){
return start+value
},0)
}
//这里使用闭包,节省了一个全局变量
var proxy=(function(){
var chace={}
return function(...arguments){
let item=arguments.join(',')
if(chace[item]>=0){
return chace[item]+'缓'
}else{
let value=listadd(arguments)
chace[item]=value
return value
}
}
})()
console.log(proxy(1,2,3,4))
console.log(proxy(1,2,3,4))
console.log(proxy(1,5,3,4))
console.log(proxy(1,2,3,4))
console.log(proxy(1,23,4,5))
console.log(proxy(1,23,4,5))
六、原型模式
通过原型链prototype初始化参数,它省略了为构造函数传递参数初始化参数的环节。
缺点:所有的实例在默认情况下都将取得相同的属性值
function Person(){
}
Person.prototype = {
constructor: Person,
name: 'ccc',
age: 18,
friends:['www', 'aaa'],
sayName: function () {
console.log(this.name)
}
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push('bbb')
console.log(person1.friends) // --> ["www", "aaa", "bbb"]
console.log(person2.friends) // --> ["www", "aaa", "bbb"]
console.log(person1.friends === person2.friends) // --> true
这里补充一点js知识
1,在javascript中,是并不存在真正意义上的类,这里方法被当作一个类来处理
2,同时function Person(){}定义的函数式是全局性的,可以与下面的调换顺序
3,但是const Person=function是匿名函数的定义方法,需要在使用前优先初始化
七、组合使用构造函数模式和原型模式
创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。这种方式还支持向构造函数传递参数。
function Person(name, age){
this.name = name;
this.age = age;
this.friends = ['aaa', 'bbb']
}
Person.prototype = {
constructor: Person,
sayName: function(){
console.log(this.name)
}
}
var person1 = new Person('ccc', 18)
var person2 = new Person('www', 18)
person1.friends.push('ddd')
console.log(person1.friends) // --> ["aaa", "bbb", "ddd"]
console.log(person2.friends) // --> ["aaa", "bbb"]
console.log(person1.friends === person2.friends) // --> false
console.log(person1.sayName === person2.sayName) // --> true
八、动态原型模式
通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型以及初始化的方向。
function Person(name, age){
// 属性
this.name = name
this.age = age
// 方法
if(typeof this.sayName !== 'function'){
Person.prototype.sayName = function(){
console.log(this.name)
}
}
}
var person1 = new Person('ccc', 18)
person1.sayName() // --> ccc