Kidney is the Proxy

Proxy is an event proxy, which acts as a middleman and can perform some event operations on our behalf. Just like we want to buy and sell second-hand goods, but we are afraid of being cheated in the process of buying and selling, at this time we will find a middleman to operate. And proxy is the middleman!

If you ask me to use proxy for operation, then you don’t know how fragrant proxy is!!

Proxy is faster than you think

As we all know, time complexity is an extremely important factor in determining whether a program is good or not. In this era of free hardware memory, as long as your code is fast enough, your program is strong enough!

You want to ask me how fast is Proxy? Let me give you a real number factorial see see!

// The factorial function
function demo(n) {
    return n == 1?1:n*demo(n-1)}// Do not use proxy mode
console.time('demo');
demo(10000);
console.timeEnd('demo');

let proxy = new Proxy(demo, {
    // Pass the function, environment, and parameters
    apply(func, obj, argus) {
        console.time('demo2');
        // console.log(argus);
        func(10000)
        console.timeEnd('demo2'); }});// Use proxy mode
proxy({},[5]);
Copy the code

Demo is not using proxy mode timer, demo2 is using proxy mode timer, you can see the speed is greatly improved!

How do I use the proxy pattern

There are a lot of accessors used in the proxy mode, so I’ll write down the most basic accessors here.

Const user = {data: {name: 'river ', age:18}, set age(value) {console.log(' accessor valid '); if (typeof value ! Value < 10 = 'number' | | | | value > 100) {throw new Error (' format errors')} / / format no problem setting. This data. The age = value; }, get age() {return this.data.age +' age '}} user.age = 19; console.log(user.age); / / 19Copy the code

The accessor is defined by the get/set+ property name. When we get the age in the last row, we should get 18, but we get 18. This is because we use the accessor. Get age() redefines the age attribute and automatically adds an age to it. That’s what accessors are for. Moreover, the accessor has a higher priority than the default operation, so the accessor is called by default after the property operation is defined.

Ok, let’s get back to Proxy!

"use strict" let user = { name: Const proxy = new proxy (user, {get(obj, obj)}) key) { // console.log(obj[key]) return obj[key] }, set(obj, key, value) { obj[key] = value; // If strict mode is required, return true; }}); Log (proxy.age) // 18 proxy.name = 'jianghe'; console.log(proxy.name); // jiangheCopy the code

Above we create a proxy object, inject user into it, and then use accessor mode to get the key we want to read and write, and then use accessor methods to read and write. One small detail here is that in strict mode set has to return true, otherwise the system will send you a red flower, oh no, a bug.

Here we can see that the use of proxy for data changes has been implemented. Next we talk about Proxy operation to improve 100 million points!

Proxy simulates the two-way data binding of vue.js

You see a simple example and you’re gonna do it? Yes, because it’s not. (” River, I need to get off this bus, this is not kindergarten! “) “, I “the door is welded to death, trying to run away”).

In this case, we use two simple input boxes to implement bidirectional data binding, changing the value of one input box and changing the other input box to follow.

The idea is also extremely simple, as long as we set an object container, and the container of a property as the background data, two input boxes bound to a property. A listener event is then added to the input box, and as soon as one of the input boxes finishes typing a character, the value in the container is updated, and then output to both containers. Yes, it’s that simple!

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial scale=1.0"> < img style =" text-align: center; text-align: center; text-align: center; text-align: center; < img style =" box-sizing: border-box; color: RGB (50, 50, 50); line-height: 20px; font-size: 13px! Important; white-space: inherit! Important; Proxy({},{// set object, Get parameters (obj, item) {}, the set (obj, Item, value) {/ / console log (value) / / find the use of all the model / / document traversal and update the values querySelectorAll (` [v - model = "${item}"] `). The forEach (e = > { E.value = value})}}) this.init = function(){// set the binding event // Find all the trigger event textbox const Model = document.querySelectorAll("[v-model]"); Model.foreach (item=>{// listen for keystroke events, Item.addeventlistener ('keyup',function(){// console.log(1) // set the container value to the latest value proxy[this.getAttribute('v-model')] = this.value; })})}} // new run the new View().init(); </script> </body> </html>Copy the code

The results are as follows:

I am a river, front intern, is preparing for spring, welcome to each big guy didi, if the article is not correct, please be corrected!