Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Proxy mode is to point to: because an object can not directly refer to another object, so you need to by adding a proxy object, to play a mediation role in the two objects, its core is to create a proxy object target object as the prototype, through a proxy object access to the target object, rather than direct access to the target object

Why not just access the target object?

In the process of the proxy object accessing the target object, some additional logical processing, operations and other things can be added, expanding its ability without changing the target object, greatly increasing the space for manipulation

In daily life, the agency mode is very common, such as many artists’ agents, various intermediaries and so on

Event delegate agent

What is event bubbling? Capture?

When an event is triggered, there are three phases: capture phase, target phase, and bubble phase

Capture phase: When an event occurs, the event flows from the root node of the document to the target object node. It passes through the DOM nodes at each level and fires the capture event at each node until it reaches the target node of the event, which fires the event from top to bottom

Target stage: The event passes through the capture stage and continues to pass down until it reaches the target node. Then the event enters the target stage. The event is fired on the target node

Bubbling phase: After the event is fired in the target phase, it backflows, bubbling up the DOM tree layer by layer, back to the root node, which fires the event bottom-up

How do you use the proxy pattern to delegate events

Create the DOM structure first:

<ul id="ul">
  <li>11</li>
  <li>22</li>
  <li>33</li>
</ul>
Copy the code

As expected when click each li, access to the corresponding content, if give each li binding events, so how many times how many elements which need to binding, there are 10000, if you need binding 10000 times, for performance is very affected, so by the proxy pattern events to be acting on the ul, according to event trigger phase, When a certain LI is clicked, the event will bubble up after the target stage is triggered. At this time, the event can be used to know where the event comes from and what the content is. It only needs to be bound once, which can greatly improve performance

window.onload = () = > {
    ul.addEventListener("click".(e) = > {
        console.log(e.target.innerHTML); // Print the corresponding content when clicking li
    });
};
Copy the code

Proxy

Proxy can be understood as a layer of “interception” before the target object. All external access to the object must pass this layer of interception. Therefore, Proxy provides a mechanism for filtering and rewriting external access

Proxy is the implementation of the JS Proxy mode

const obj = {
    name: "nordon".age: 12.getName() {
        console.log('calls the getName function:The ${this.name}`); }};const proxyObj = new Proxy(obj, {
    get: function (target, propKey, receiver) {
        console.log(` access:${propKey}! `);
        return Reflect.get(target, propKey, receiver);
    },
    set: function (target, propKey, value, receiver) {
        console.log(` Settings:${propKey}! `);
        if(propKey === 'age' && value < 0) {
            throw new Error('Inappropriate age setting')}return Reflect.set(target, propKey, value, receiver); }}); proxyObj.getName(); proxyObj.name ='wy';
Copy the code

When properties and functions are accessed and modified via proxyObj, the proxy is triggered and additional logic can be added to the proxy

Age = -12 proxyobj. age = -12 Uncaught Error: Age is not set properly