Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proxy and Reflect #96

Merged
merged 3 commits into from
Jul 3, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion 1-js/08-prototypes/03-native-prototypes/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ alert(obj); // "[object Object]" ?

...ولكن الصيغة `obj = {}` هي نفسها هذه الصيغة `obj = new Object()`، حيث أن `Object` هو دالة بانية للكائنات موجودة بالفعل والتى تحتوى على الخاصية `prototype` التى تحتوى على مرجع لكائن ضخم يحتوى على الدالة `toString` ودوال أخري.

هاهنا ما يحدث:
إليك ما يحدث:

![](object-prototype.svg)

Expand Down
12 changes: 6 additions & 6 deletions 1-js/99-js-misc/01-proxy/01-error-nonexisting/task.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# Error on reading non-existant property
# خطأ عند قراءة خاصية غير موجودة

Usually, an attempt to read a non-existant property returns `undefined`.
عادة، عند محاولة قراءة خاصية غير موجودة فإنها تُرجع `undefined`.

Create a proxy that throws an error for an attempt to read of a non-existant property instead.
قم بإنشاء بروكسي يقوم بإظهار خطأ عند محاولة قراءة خاصية غير موجودة بدلًا من ذلك.

That can help to detect programming mistakes early.
هذا يساعد علي استكشاف الأخطاء البرمجية بشكل أسرع.

Write a function `wrap(target)` that takes an object `target` and return a proxy that adds this functionality aspect.
قم بإنشاء دالة `wrap(target)` والتي تستقبل كائن `target` وتقوم بإرجاع بروكسي يضيف هذه الوظيفة.

That's how it should work:
هذا كيفية فعله:

```js
let user = {
Expand Down
2 changes: 1 addition & 1 deletion 1-js/99-js-misc/01-proxy/02-array-negative/solution.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ array = new Proxy(array, {
get(target, prop, receiver) {
if (prop < 0) {
// even if we access it like arr[1]
// prop is a string, so need to convert it to number
// prop هو نص ولذلك نريد أن نحوله
prop = +prop + target.length;
}
return Reflect.get(target, prop, receiver);
Expand Down
14 changes: 7 additions & 7 deletions 1-js/99-js-misc/01-proxy/02-array-negative/task.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@

# Accessing array[-1]
# الوصول إلي array[-1]

In some programming languages, we can access array elements using negative indexes, counted from the end.
في بعض لغات البرمجة، يمكن الوصول إلي عناصر المصفوفات برقم سالب حيث تقوم بالحسبة من النهاية.

Like this:
كهذا:

```js
let array = [1, 2, 3];
Expand All @@ -13,11 +13,11 @@ array[-2]; // 2, one step from the end
array[-3]; // 1, two steps from the end
```

In other words, `array[-N]` is the same as `array[array.length - N]`.
بطريقة أخري، فإن `array[-N]` هو نفسه `array[array.length - N]`.

Create a proxy to implement that behavior.
قم بإنشاء بروكسي لتنفيذ هذا السلوك.

That's how it should work:
هنا كيف يجب أن تعمل:

```js
let array = [1, 2, 3];
Expand All @@ -29,5 +29,5 @@ array = new Proxy(array, {
alert( array[-1] ); // 3
alert( array[-2] ); // 2

// Other array functionality should be kept "as is"
// السلوك الطبيعي للمصفوفات الأخري يجب أن يظل كما هو
```
6 changes: 3 additions & 3 deletions 1-js/99-js-misc/01-proxy/03-observable/solution.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
The solution consists of two parts:
يتكون الحل من جزئين:

1. Whenever `.observe(handler)` is called, we need to remember the handler somewhere, to be able to call it later. We can store handlers right in the object, using our symbol as the property key.
2. We need a proxy with `set` trap to call handlers in case of any change.
1. عند استدعاء `.observe(handler)` في أى وقت، نحتاج إلي أن نتذكر الـ handler فس أي مكان، لنكون قادرين علي استدعاءه لاحقًا. يمكن تخزين الـhandler في الأوبجكت باستخدام الرمز كاسم للخاصية.
2. نحتاج إلي بروكسي يحتوي علي الtrap `set` لاستدعاء الhandlers في حالة التغيير.

```js run
let handlers = Symbol('handlers');
Expand Down
11 changes: 5 additions & 6 deletions 1-js/99-js-misc/01-proxy/03-observable/task.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@

# Observable

Create a function `makeObservable(target)` that "makes the object observable" by returning a proxy.
قم بإنشاء الدالة `makeObservable(target)` والتي تقوم بجعل الأوبجكت observable عن طريق إرجاع بروكسي.

Here's how it should work:
هنا كيف تعمل:

```js run
function makeObservable(target) {
Expand All @@ -20,8 +19,8 @@ user.observe((key, value) => {
user.name = "John"; // alerts: SET name=John
```

In other words, an object returned by `makeObservable` is just like the original one, but also has the method `observe(handler)` that sets `handler` function to be called on any property change.
بعبارات أخري، الأوبجكت الذي يتم استرجاعه بواسطة `makeObservable` هو مثل الأوبجكت الأصلي ولكن يحتوي أيضًا علي الدالة `observe(handler)` والتي تنشئ `handler` يتم استدعاؤه في كل تغير لخاصية.

Whenever a property changes, `handler(key, value)` is called with the name and value of the property.
عند تغير أي خاصية، يتم استدعاء `handler(key, value)` بإسم وقيمة الخاصية.

P.S. In this task, please only take care about writing to a property. Other operations can be implemented in a similar way.
ملاحظه: في هذا التكليف، اهتم فقط بعملية التعديل علي الخاصية. العمليات الأخري يمكن تطبيقها بنفس الطريقة.
Loading