JavaScript պրոքսիների արագ ներածություն

Ի՞նչ է JavaScript պրոքսին: դուք կարող եք հարցնել. Այն ES6-ով առաքվող հատկանիշներից մեկն է: Ցավոք, այն կարծես թե լայնորեն չի օգտագործվում:

Ըստ MDN Web Docs-ի՝

Proxy օբյեկտը օգտագործվում է հիմնական գործողությունների համար հատուկ վարքագիծ սահմանելու համար (օրինակ՝ գույքի որոնում, հանձնարարություն, թվարկում, ֆունկցիայի կանչ և այլն):

Պարզ բառերով ասած, վստահված անձինք ստացողներ և սահմանողներ են, որոնք ունեն մեծ թվաքանակ: Վստահված օբյեկտը գտնվում է օբյեկտի և արտաքին աշխարհի միջև: Նրանք ընդհատում են զանգերը օբյեկտի ատրիբուտներին և մեթոդներին, նույնիսկ եթե այդ ատրիբուտներն ու մեթոդները գոյություն չունեն:

Որպեսզի հասկանանք, թե ինչպես են աշխատում վստահված անձինք, մենք պետք է սահմանենք վստահված անձանց կողմից օգտագործվող երեք տերմիններ.

1. մշակող. տեղապահի օբյեկտ, որը պարունակում է թակարդներ (դրանք ընդհատողներն են):
2. թակարդներ. մեթոդներ, որոնք ապահովում են գույքի հասանելիություն (դրանք ապրում են մշակողի ներսում):
3. նպատակ. օբյեկտ, որը վստահված անձը վիրտուալացնում է:

Շարահյուսություն

let myProxy = new Proxy(target, handler);

Ինչու՞ վստահված անձինք:

Քանի որ պրոքսիները նման են ստացողներին և setters-ին, ինչու՞ պետք է օգտագործենք դրանք: Տեսնենք, թե ինչու.

const staff = {
  _name: "Jane Doe",
  _age: 25,
  get name() {
    console.log(this._name);
  },
  get age() {
    console.log(this._age);
  },
  set age(newAge) {
    this._age = newAge;
    console.log(this._age)
  }
};
staff.name // => "Jane Doe"
staff.age // => 25
staff.age = 30
staff.age // => 30
staff.position // => undefined

Եկեք նույն կոդը գրենք վստահված անձանց հետ.

const staff = {
  name: "Jane Doe",
  age: 25
}
const handler = {
  get: (target, name) => {
    name in target ? console.log(target[name]) : console.log('404 not found');
  },
  set: (target, name, value) => {
    target[name] = value;
  }
}
const staffProxy = new Proxy(staff, handler);
staffProxy.name // => "Jane Doe"
staffProxy.age // => 25
staffProxy.age = 30
staffProxy.age // => 30
staffProxy.position // => '404 not found'

Վերոնշյալ օրինակում՝ օգտագործելով getters և setters, մենք պետք է սահմանենք getter և setter յուրաքանչյուր հատկանիշի համար։ staff օբյեկտ. Երբ մենք փորձում ենք մուտք գործել գոյություն չունեցող սեփականություն, մենք ստանում ենք undefined:

Պրոքսիների դեպքում մեզ անհրաժեշտ է միայն մեկ get և set թակարդ՝ staff օբյեկտի յուրաքանչյուր հատկության հետ փոխազդեցությունները կառավարելու համար: Ամեն անգամ, երբ մենք փորձում ենք մուտք գործել գոյություն չունեցող սեփականություն, մենք ստանում ենք հատուկ սխալի հաղորդագրություն:

Կան բազմաթիվ այլ օգտագործման դեպքեր վստահված անձանց համար: Եկեք ուսումնասիրենք մի քանիսը.

Վավերացում վստահված անձանց հետ

Վստահված սերվերների միջոցով մենք կարող ենք կիրառել արժեքների վավերացում JavaScript-ի օբյեկտներում: Ենթադրենք, մենք ունենք staff սխեմա և ցանկանում ենք կատարել որոշ վավերացումներ, նախքան աշխատակազմը կարող է պահպանվել.

const validator = {
  set: (target, key, value) => {
    const allowedProperties = ['name', 'age', 'position'];
    if (!allowedProperties.includes(key)) {
      throw new Error(`${key} is not a valid property`)
    }
    
    if (key === 'age') {
      if (typeof value !== 'number' || Number.isNaN(value) || value <= 0) {
        throw new TypeError('Age must be a positive number')
      }
    }
    if (key === 'name' || key === 'position') {
      if (typeof value !== 'string' || value.length <= 0) {
        throw new TypeError(`${key} must be a valid string`)
      }
    }
   target[key] = value; // save the value
   return true; // indicate success
  }
}
const staff = new Proxy({}, validator);
staff.stats = "malicious code" //=> Uncaught Error: stats is not a valid property
staff.age = 0 //=> Uncaught TypeError: Age must be a positive number
staff.age = 10
staff.age //=> 10
staff.name = '' //=> Uncaught TypeError: name must be a valid string

Վերևի կոդի հատվածում մենք հայտարարում ենք validator մշակող, որտեղ ունենք allowedProperties զանգված: set թակարդում մենք ստուգում ենք, թե արդյոք տեղադրվող բանալին մեր allowedProperties-ի մասն է: Եթե ​​դա այդպես չէ, մենք սխալ ենք թույլ տալիս: Մենք նաև ստուգում ենք՝ արդյոք սահմանվող արժեքները որոշակի տվյալների տեսակների են, նախքան արժեքը պահպանելը:

Փակվող վստահված անձինք

Իսկ եթե մենք ցանկանայինք չեղյալ համարել օբյեկտի մուտքը: Դե, JavaScript պրոքսիներն ունեն Proxy.revocable() մեթոդ, որը ստեղծում է չեղյալ համարվող պրոքսի: Սա մեզ հնարավորություն է տալիս չեղարկել վստահված անձի մուտքը: Տեսնենք, թե ինչպես է այն աշխատում.

const handler = {
  get: (target, name) => {
    name in target ? console.log(target[name]) : console.log('404 not found');
    console.log(target)
  },
  
  set: (target, name, value) => {
    target[name] = value;
  }
}
const staff = {
  name: "Jane Doe",
  age: 25
}
let { proxy, revoke } = Proxy.revocable(staff, handler);
proxy.age // => 25
proxy.name // => "Jane Doe"
proxy.age = 30
proxy.age // => 30
revoke() // revoke access to the proxy
proxy.age // => Uncaught TypeError: Cannot perform 'get' on a proxy that has been revoked
proxy.age = 30 // => Uncaught TypeError: Cannot perform 'set' on a proxy that has been revoked

Վերևի օրինակում մենք օգտագործում ենք ապակառուցում Proxy.revocable()-ով վերադարձված օբյեկտիproxy և revoke հատկություններին մուտք գործելու համար:

revoke ֆունկցիան կանչելուց հետո, proxy-ի վրա կիրառվող ցանկացած գործողություն առաջացնում է TypeError: Մեր կոդի սրա միջոցով մենք կարող ենք կանխել օգտվողներին որոշակի գործողություններ կատարել որոշակի օբյեկտների վրա:

JavaScript պրոքսիները հզոր միջոց են օբյեկտների միջև փոխազդեցություններ ստեղծելու և կառավարելու համար: Այլ իրական աշխարհի հավելվածները վստահված անձանց համար ներառում են.

• Ընդլայնվող կոնստրուկտորներ
• DOM հանգույցների մանիպուլյացիա
• Արժեքի ուղղում և լրացուցիչ հատկություն
• Գույքի մուտքերի հետագծում
• Ծուղակային գործառույթի զանգեր

Եվ ցուցակը շարունակվում է:

Վստահված անձանց ավելի շատ բան կա, քան մենք անդրադարձել ենք այստեղ: Դուք կարող եք ստուգել Proxy MDN Docs-ը՝ պարզելու բոլոր առկա թակարդները և ինչպես օգտագործել դրանք:

Հուսով եմ, որ այս ձեռնարկը ձեզ համար օգտակար էր: Խնդրում ենք անել 👏 👏 և տարածել, որպեսզի մյուսները կարողանան գտնել այս հոդվածը: Հարցերով կամ զրուցելու համար գրեք ինձ Twitter-ում @developia_: