JavaScript design pattern (3)-proxy model

  The proxy mode is to provide a substitute or placeholder for an object in order to control access to it. 

  What people say is: if you want to eat takeaway, you entrust the rider to the store to get the takeaway to you.

  The core of the agency model is: enrich the process, the result remains unchanged .

  Take the example of eating takeaway. I want to eat takeaway. The initiator of this incident is me. The result of this incident is to eat takeaway.

  Enrich the process:

  I want to eat takeaway. I place an order on the APP. The rider goes to the store to get the takeaway. The rider delivers the takeaway to me. I eat takeaway.

  Enrich the process:

  I want to eat takeaway. I place an order on the APP. The rider goes to the store to get the takeaway. The store said that there is no stock today and it will not open for business. The rider came to my house and told me that the food is so embarrassing!

 

  Write the above example into code first, let's write the core part first, that is, I eat takeaway.

let I = {
	getWaimai:function(name){
		return store.cookingWaimai(name)
	}
}

let store = {
	cookingWaimai:function(name){
		return cooking[name]()
	}
}

let cooking = {
	'花雕怪味鱼':function(){
		//劈里啪啦一顿操作
		return '花雕怪味鱼成品'
	},
	'无蛋黄':function(){
		//劈里啪啦一顿操作
		return '无蛋黄成品'
	}
}

I.getWaimai('花雕怪味鱼') //花雕怪味鱼成品

  In the above code, there are two subject objects, one is me and the other is the merchant. I can directly send the get takeaway request to the store. It can be understood that I go to the store and order a takeaway. The merchant directly Bring me the takeaway.

  Between me and the merchant, now add a rider, what does the code look like?

let I = {
	getWaimai:function(name){
		return qishou.cookingWaimai(name)
	}
}

let qishou = {
	cookingWaimai:function(name){
		// 先去店里拿外卖
		// 此处省略一万行代码
		// 再送到顾客手里
		return store.cookingWaimai(name)
	}
}

let store = {
	cookingWaimai:function(name){
		return cooking[name]()
	}
}

let cooking = {
	'花雕怪味鱼':function(){
		//劈里啪啦一顿操作
		return '花雕怪味鱼成品'
	},
	'无蛋黄':function(){
		//劈里啪啦一顿操作
		return '无蛋黄成品'
	}
}

I.getWaimai('花雕怪味鱼') //花雕怪味鱼成品

  Here I entrusted the delivery staff to get the result of store.cookingWaimai(), and the process of how the rider takes the food and how to deliver the food is omitted. What are the benefits of writing this way?

  1. I can entrust anyone to help me get the takeaway. Are you hungry rider today? I will be a Meituan rider tomorrow. I only need to change a small detail in the getWaimai function to achieve it, and even I can go directly to the store to eat .

  2. The rider, as the principal, can convey some store information to me without needing to go to the store in person. For example, on weekends today, the rider can directly tell me that the business is closed on weekends, so as to filter out my takeaway requests .

 

  In fact, the biggest advantage of the agency model is that you can modify a certain piece of business logic at any time and ensure that the result is correct. Let's look at a common piece of code.

function init(){
	// 调用一大堆接口...
	// 整合业务逻辑...
	// 渲染页面...
}

function change(){
	// 修改了页面里某个东西
	init()
}

  In fact, 99% of the interface calls and business logic processing in your init function are repeated. You just change a certain value and want to update some page information related to this value. At this time, you can use the proxy mode to control init Which interfaces in the function need to be updated, and which business codes need to be executed. As follows

// 用锁的概念来判断哪些业务代码需要执行
function init(lock1,lock2,lock3)
	// 调用一大堆接口...
	// 整合业务逻辑...
	// 渲染页面...
}

function change(){
	// 修改了页面里某个东西
	daili()
}

function daili(){
	// 写一大堆条件判断
	init(lock1,lock2,lock3)
}

  After rewriting the code, if one of the locks fails one day (or the person who helps you maintain the code cannot understand the code you wrote), you only need to write the lock directly (true or false). You can even call init(true,true,true) directly in the change function to ensure the correct result.