کاوش پروکسی در جاوا اسکریپت: عملکرد پیشرفته با مثال های عملی

Summarize this content to 400 words in Persian Lang جاوا اسکریپت بسیاری از ویژگی های جالب را ارائه می دهد، و یکی از قدرتمندترین و کمتر رایج ترین آنها است Proxy شی این ابزار به شما این امکان را می دهد که یک شی ایجاد کنید که می تواند عملیات روی اشیاء دیگر، مانند دسترسی یا اصلاح ویژگی ها را متوقف کند. در این پست، نحوه عملکرد پروکسی، کاربردهای آن و تفاوت آن با سایر عملکردهای مشابه مانند گیرنده ها و ستترها را بررسی خواهیم کرد.

الف چیست Proxy?

الف Proxy به عنوان یک واسطه برای یک شی دیگر (به نام “هدف”) عمل می کند. می‌توانید نحوه رفتار پراکسی را برای عملیات‌های مختلف از طریق یک «هندلر» تعریف کنید. این به شما امکان می دهد نحوه تعامل با شی زیرین را سفارشی کنید.

نحو پایه

const target = {}; // The original object
const handler = { /* definitions of operations */ };
const proxy = new Proxy(target, handler);

استفاده 1: رهگیری دسترسی به اموال

فرض کنید یک شی داریم که نماینده یک کاربر است و می‌خواهیم رفتار سفارشی را هنگام دسترسی به ویژگی‌های آن ارائه دهیم:

const user = {
name: ‘Gabriel’,
age: 30
};

const handler = {
get: function(target, prop) {
if (prop in target) {
return target[prop];
} else {
return ‘Property not found’;
}
}
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // Gabriel
console.log(userProxy.age); // 30
console.log(userProxy.email); // Property not found

ممکن است برای دستیابی به رفتار مشابه از یک گیرنده استفاده کنید:

const userWithGetters = {
name: ‘Gabriel’,
age: 30,
getProperty(prop) {
return this[prop] || ‘Property not found’;
}
};

console.log(userWithGetters.getProperty(‘name’)); // Gabriel
console.log(userWithGetters.getProperty(’email’)); // Property not found

تفاوت این است که با Proxy، می توانید هر عملیاتی را بر روی شی رهگیری کنید، نه فقط دسترسی به ویژگی، که انعطاف پذیری بیشتری را فراهم می کند.

استفاده 2: اعتبار سنجی دارایی

تصور کنید ما می خواهیم اطمینان حاصل کنیم که هنگام تنظیم سن کاربر، فقط مقادیر معتبر مجاز هستند. اینجاست که Proxy می درخشد:

const person = {
name: ‘Ana’
};

const handler = {
set: function(target, prop, value) {
if (prop === ‘age’ && (value < 0 || value > 120)) {
throw new Error(‘Age must be between 0 and 120’);
}
target[prop] = value;
return true;
}
};

const personProxy = new Proxy(person, handler);

personProxy.name = ‘María’; // Works fine
console.log(personProxy.name); // María

try {
personProxy.age = -5; // Will throw an error
} catch (e) {
console.log(e.message); // Age must be between 0 and 120
}

می توانید از یک تنظیم کننده برای اعتبارسنجی مقدار استفاده کنید:

const personWithSetters = {
_age: 0,
name: ‘Ana’,
set age(value) {
if (value < 0 || value > 120) {
throw new Error(‘Age must be between 0 and 120’);
}
this._age = value;
},
get age() {
return this._age;
}
};

try {
personWithSetters.age = -5; // Will throw an error
} catch (e) {
console.log(e.message); // Age must be between 0 and 120
}

تفاوت با Proxy این است که شما می توانید اعتبار سنجی را به طور کلی برای هر ویژگی اعمال کنید، بدون نیاز به تعریف گیرنده و تنظیم کننده برای هر یک.

استفاده 3: نظارت بر تغییرات

تصور کنید می خواهید تغییرات ایجاد شده در یک شی را پیگیری کنید. با پروکسی، این کار به راحتی انجام می شود:

const data = {};

const handler = {
set: function(target, prop, value) {
console.log(`Changing ${prop} from ${target[prop]} to ${value}`);
target[prop] = value;
return true;
}
};

const dataProxy = new Proxy(data, handler);

dataProxy.name = ‘Pedro’; // Changing name from undefined to Pedro
dataProxy.age = 25; // Changing age from undefined to 25

در یک سیستم قابل مشاهده، شما باید یک الگوی خاص را برای اطلاع از تغییرات تعریف کنید. با پروکسی، شما به سادگی عملیات را متوقف می کنید:

// Simulating a basic observable
class Observable {
constructor(data) {
this.data = data;
this.listeners = [];
}

addListener(listener) {
this.listeners.push(listener);
}

notify() {
this.listeners.forEach(listener => listener(this.data));
}
}

تفاوت در این است که استفاده از Proxy امکان رویکرد مستقیم‌تر و کم‌تر برای رهگیری و پاسخ به تغییرات را فراهم می‌کند. با قابل مشاهده، باید اعلان‌ها را به صورت دستی مدیریت کنید.

نتیجه گیری

را Proxy شی در جاوا اسکریپت ابزار بسیار قدرتمندی است که به شما امکان می دهد عملیات روی اشیاء را رهگیری و دوباره تعریف کنید. برخلاف دریافت کننده ها و تنظیم کننده ها که محدودتر هستند و نیاز به کد بیشتری دارند. Proxy انعطاف‌پذیری و رویکرد پاک‌تری را برای اعتبارسنجی، نظارت و دستکاری اشیا ارائه می‌دهد.

اگر به دنبال افزایش توانایی خود در کار با اشیاء در جاوا اسکریپت هستید، کاوش در Proxy قطعاً ارزشمند است!

جاوا اسکریپت بسیاری از ویژگی های جالب را ارائه می دهد، و یکی از قدرتمندترین و کمتر رایج ترین آنها است Proxy شی این ابزار به شما این امکان را می دهد که یک شی ایجاد کنید که می تواند عملیات روی اشیاء دیگر، مانند دسترسی یا اصلاح ویژگی ها را متوقف کند. در این پست، نحوه عملکرد پروکسی، کاربردهای آن و تفاوت آن با سایر عملکردهای مشابه مانند گیرنده ها و ستترها را بررسی خواهیم کرد.

الف چیست Proxy?

الف Proxy به عنوان یک واسطه برای یک شی دیگر (به نام “هدف”) عمل می کند. می‌توانید نحوه رفتار پراکسی را برای عملیات‌های مختلف از طریق یک «هندلر» تعریف کنید. این به شما امکان می دهد نحوه تعامل با شی زیرین را سفارشی کنید.

نحو پایه

const target = {}; // The original object
const handler = { /* definitions of operations */ };
const proxy = new Proxy(target, handler);

استفاده 1: رهگیری دسترسی به اموال

فرض کنید یک شی داریم که نماینده یک کاربر است و می‌خواهیم رفتار سفارشی را هنگام دسترسی به ویژگی‌های آن ارائه دهیم:

const user = {
    name: 'Gabriel',
    age: 30
};

const handler = {
    get: function(target, prop) {
        if (prop in target) {
            return target[prop];
        } else {
            return 'Property not found';
        }
    }
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // Gabriel
console.log(userProxy.age); // 30
console.log(userProxy.email); // Property not found

ممکن است برای دستیابی به رفتار مشابه از یک گیرنده استفاده کنید:

const userWithGetters = {
    name: 'Gabriel',
    age: 30,
    getProperty(prop) {
        return this[prop] || 'Property not found';
    }
};

console.log(userWithGetters.getProperty('name')); // Gabriel
console.log(userWithGetters.getProperty('email')); // Property not found

تفاوت این است که با Proxy، می توانید هر عملیاتی را بر روی شی رهگیری کنید، نه فقط دسترسی به ویژگی، که انعطاف پذیری بیشتری را فراهم می کند.

استفاده 2: اعتبار سنجی دارایی

تصور کنید ما می خواهیم اطمینان حاصل کنیم که هنگام تنظیم سن کاربر، فقط مقادیر معتبر مجاز هستند. اینجاست که Proxy می درخشد:

const person = {
    name: 'Ana'
};

const handler = {
    set: function(target, prop, value) {
        if (prop === 'age' && (value < 0 || value > 120)) {
            throw new Error('Age must be between 0 and 120');
        }
        target[prop] = value;
        return true;
    }
};

const personProxy = new Proxy(person, handler);

personProxy.name = 'María'; // Works fine
console.log(personProxy.name); // María

try {
    personProxy.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

می توانید از یک تنظیم کننده برای اعتبارسنجی مقدار استفاده کنید:

const personWithSetters = {
    _age: 0,
    name: 'Ana',
    set age(value) {
        if (value < 0 || value > 120) {
            throw new Error('Age must be between 0 and 120');
        }
        this._age = value;
    },
    get age() {
        return this._age;
    }
};

try {
    personWithSetters.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

تفاوت با Proxy این است که شما می توانید اعتبار سنجی را به طور کلی برای هر ویژگی اعمال کنید، بدون نیاز به تعریف گیرنده و تنظیم کننده برای هر یک.

استفاده 3: نظارت بر تغییرات

تصور کنید می خواهید تغییرات ایجاد شده در یک شی را پیگیری کنید. با پروکسی، این کار به راحتی انجام می شود:

const data = {};

const handler = {
    set: function(target, prop, value) {
        console.log(`Changing ${prop} from ${target[prop]} to ${value}`);
        target[prop] = value;
        return true;
    }
};

const dataProxy = new Proxy(data, handler);

dataProxy.name = 'Pedro'; // Changing name from undefined to Pedro
dataProxy.age = 25; // Changing age from undefined to 25

در یک سیستم قابل مشاهده، شما باید یک الگوی خاص را برای اطلاع از تغییرات تعریف کنید. با پروکسی، شما به سادگی عملیات را متوقف می کنید:

// Simulating a basic observable
class Observable {
    constructor(data) {
        this.data = data;
        this.listeners = [];
    }

    addListener(listener) {
        this.listeners.push(listener);
    }

    notify() {
        this.listeners.forEach(listener => listener(this.data));
    }
}

تفاوت در این است که استفاده از Proxy امکان رویکرد مستقیم‌تر و کم‌تر برای رهگیری و پاسخ به تغییرات را فراهم می‌کند. با قابل مشاهده، باید اعلان‌ها را به صورت دستی مدیریت کنید.

نتیجه گیری

را Proxy شی در جاوا اسکریپت ابزار بسیار قدرتمندی است که به شما امکان می دهد عملیات روی اشیاء را رهگیری و دوباره تعریف کنید. برخلاف دریافت کننده ها و تنظیم کننده ها که محدودتر هستند و نیاز به کد بیشتری دارند. Proxy انعطاف‌پذیری و رویکرد پاک‌تری را برای اعتبارسنجی، نظارت و دستکاری اشیا ارائه می‌دهد.

اگر به دنبال افزایش توانایی خود در کار با اشیاء در جاوا اسکریپت هستید، کاوش در Proxy قطعاً ارزشمند است!