Skip to content

Commit

Permalink
Merge pull request #96 from dvmhmdsd/master
Browse files Browse the repository at this point in the history
Proxy and Reflect
  • Loading branch information
OmarioHassan authored Jul 3, 2020
2 parents b3e5689 + 521c66b commit 9fad259
Show file tree
Hide file tree
Showing 7 changed files with 345 additions and 343 deletions.
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

0 comments on commit 9fad259

Please sign in to comment.