Merge pull request #61 from NgArab/master

Mixins

Author: OmarioHassan

1-js/09-classes/07-mixins/article.md

@@ -1,20 +1,20 @@
 # Mixins
 
-In JavaScript we can only inherit from a single object. There can be only one `[[Prototype]]` for an object. And a class may extend only one other class.
+فى جافاسكريبت يمكننا الوراثة من كائن واحد فقط. يمكن ان يوجد `[[Prototype]]` واحد فقط للكائن. و يمكن للـ `class` ان يقوم بـ `extend` فقط من `class` واحد آخر.
 
-But sometimes that feels limiting. For instance, we have a class `StreetSweeper` and a class `Bicycle`, and want to make their mix: a `StreetSweepingBicycle`.
+و لكن في بعض الأحيان ذلك يوحي بالتقييد. مثال علي ذلك, لدينا `class` هو `StreetSweeper` و `class` آخر هو `Bicycle`, و نريد تكوين ذلك المزيج بينهم: و هو `StreetSweepingBicycle`.
 
-Or we have a class `User` and a class `EventEmitter` that implements event generation, and we'd like to add the functionality of `EventEmitter` to `User`, so that our users can emit events.
+أو لدينا `class` هو `User` و `class` آخر هو `EventEmitter` الذي يقوم بتنفيذ إستخراج الأحداث, و نريد الآن إضافة دوال `EventEmitter` إلى `User`, لكي يمكن مستخدمينا من إرسال الأحداث.
 
-There's a concept that can help here, called "mixins".
+يوجد مفهوم يمكن أن يساعدنا هنا, يُسيمى `mixins`.
 
-As defined in Wikipedia, a [mixin](https://en.wikipedia.org/wiki/Mixin) is a class containing methods that can be used by other classes without a need to inherit from it.
+كما يتم تعريفه في ويكيبيديا, [mixin](https://en.wikipedia.org/wiki/Mixin) هو `class` يحتوي علي دوال يمكن إستخدامها بواسطة `classes` أخرى بدون الحاجه الى الوراثة منها.
 
-In other words, a *mixin* provides methods that implement a certain behavior, but we do not use it alone, we use it to add the behavior to other classes.
+بطريقة أخرى, _mixin_ يمكنها توفير دوال تقوم بتنفيذ سلوك محدد, و لكن نحن لا نستخدمها وحدها, نحن نستخدمها لنضيف سلوك الى `classes` أخرى.
 
-## A mixin example
+## مثال علي mixin
 
-The simplest way to implement a mixin in JavaScript is to make an object with useful methods, so that we can easily merge them into a prototype of any class.
+أسهل طريقة لتنفيذ `mixin` فى جافاسكريبت هو ان تقوم بعمل كائن له دوال مفيدة, لذا يمكننا بسهولة دمجهم مع `prototype` خاص بأيّ `class`.
 
 For instance here the mixin `sayHiMixin` is used to add some "speech" for `User`:
 
@@ -24,10 +24,10 @@ For instance here the mixin `sayHiMixin` is used to add some "speech" for `User`
 */!*
 let sayHiMixin = {
   sayHi() {
-    alert(`Hello ${this.name}`);
+    alert(`مرحباً ${this.name}`);
   },
   sayBye() {
-    alert(`Bye ${this.name}`);
+    alert(`الوداع ${this.name}`);
   }
 };
 
@@ -40,14 +40,14 @@ class User {
   }
 }
 
-// copy the methods
+// نسخ الدوال
 Object.assign(User.prototype, sayHiMixin);
 
-// now User can say hi
-new User("Dude").sayHi(); // Hello Dude!
+// الآن User يمكن ان يقول مرحباً
+new User("Dude").sayHi(); // مرحباً Dude!
 ```
 
-There's no inheritance, but a simple method copying. So `User` may inherit from another class and also include the mixin to "mix-in" the additional methods, like this:
+لا يوجد وراثة, و لكن نسخ دوال ببساطة. لذا `User` ربما يرث من `class` آخر و يقوم بتضمين `mixin` لكي "يمزج" الدوال الإضافية, مثل ذلك:
 
 ```js
 class User extends Person {
@@ -57,9 +57,9 @@ class User extends Person {
 Object.assign(User.prototype, sayHiMixin);
 ```
 
-Mixins can make use of inheritance inside themselves.
+`Mixins` يمكنها الإستفادة من الوراثة داخل نفسها.
 
-For instance, here `sayHiMixin` inherits from `sayMixin`:
+مثال علي ذلك, هنا `sayHiMixin` ترث من `sayMixin`:
 
 ```js run
 let sayMixin = {
@@ -69,11 +69,11 @@ let sayMixin = {
 };
 
 let sayHiMixin = {
-  __proto__: sayMixin, // (or we could use Object.create to set the prototype here)
+  __proto__: sayMixin, // (او يمكننا إستخدام Object.create لكى نضع prototype هنا)
 
   sayHi() {
     *!*
-    // call parent method
+    // طلب تنفيذ الدالة الأب
     */!*
     super.say(`Hello ${this.name}`); // (*)
   },
@@ -88,45 +88,45 @@ class User {
   }
 }
 
-// copy the methods
+// نسخ الدوال
 Object.assign(User.prototype, sayHiMixin);
 
-// now User can say hi
-new User("Dude").sayHi(); // Hello Dude!
+// الآن User يمكن أن يقول مرحباً
+new User("Dude").sayHi(); // مرحباً Dude!
 ```
 
-Please note that the call to the parent method `super.say()` from `sayHiMixin` (at lines labelled with `(*)`) looks for the method in the prototype of that mixin, not the class.
+برجاء ملاحظة ان طلب الدالة الأب `super.say()` من `sayHiMixin` (فى السطور المعنونه بـ `(*)`) تبحث عن الداله في `prototype` الخاص بـ `mixin`, ليس الخاص ب `class`.
 
-Here's the diagram (see the right part):
+هذا هو الرسم البياني (أنظر الى الجزء الأيمن):
 
 ![](mixin-inheritance.svg)
 
-That's because methods `sayHi` and `sayBye` were initially created in `sayHiMixin`. So even though they got copied, their `[[HomeObject]]` internal property references `sayHiMixin`, as shown in the picture above.
+هذا بسبب الدالة `sayHi` و `sayBye` الذي تم إنشاؤهما فى `sayHiMixin`. لذا علي الرغم من انه تم نسخهم, `[[HomeObject]]` الخاص بهم هو مرجع الخاصية الداخلية `sayHiMixin`, كما هو موضح فى الصورة اعلاه.
 
-As `super` looks for parent methods in `[[HomeObject]].[[Prototype]]`, that means it searches `sayHiMixin.[[Prototype]]`, not `User.[[Prototype]]`.
+كما أن `super` يبحث عن الدالة الأب في `[[HomeObject]].[[Prototype]]`, هذا يعني انه يبحث في `sayHiMixin.[[Prototype]]`, و ليس `User.[[Prototype]]`.
 
 ## EventMixin
 
-Now let's make a mixin for real life.
+الآن دعنا نقوم بعمل مثال حقيقي للـ `mixin` .
 
-An important feature of many browser objects (for instance) is that they can generate events. Events are a great way to "broadcast information" to anyone who wants it. So let's make a mixin that allows us to easily add event-related functions to any class/object.
+ميزة مهمة للعديد من كائنات المتصفح (مثال) أنهم يمكنهم استخراج احداث. الأحداث هي طريقة جيدة لـ "نشر المعلومات" لأي شخص يريدها. لذا دعنا نقوم بعمل `mixin` الذي يسمح لنا ان نقوم بسهولة بإضافة دوال متعلقه بالأحداث لأي `class/object`.
 
-- The mixin will provide a method `.trigger(name, [...data])` to "generate an event" when something important happens to it. The `name` argument is a name of the event, optionally followed by additional arguments with event data.
-- Also the method `.on(name, handler)` that adds `handler` function as the listener to events with the given name. It will be called when an event with the given `name` triggers, and get the arguments from the `.trigger` call.
-- ...And the method `.off(name, handler)` that removes the `handler` listener.
+- الـ `mixin` سوف يوفر دالة `.trigger(name, [...data])` لكى "نستخرج الحدث" عندما يحدث شيئ مهم لها. متغير الـ `name` هو إسم الحدث, متبوعاً بشكل إختياري بـ متغيرات إضافية ببيانات الحدث.
+- أيضاً الدالة `.on(name, handler)` التى تضيف دالة `handler` التي تقوم بالإستماع للأحداث المُعطي إسمها. سوف يتم طلبها عندما يتم تشغيل حدث ما بالـ `إسم` المُعطي, و الحصول علي المتغيرات عند طلب `.trigger`.
+- ...و الدالة `.off(name, handler)` التي تقوم بمسح المستمع `handler`.
 
-After adding the mixin, an object `user` will be able to generate an event `"login"` when the visitor logs in. And another object, say, `calendar` may want to listen for such events to load the calendar for the logged-in person.
+بعد إضافة `mixin`, الكائن `user` يمكنه إستخراج حدث `"login"` عندما يقوم الزائر بتسجيل الدخول. و كائن آخر, يقول, `calendar` ربما يريد الإستماع لبعض الأحداث لتحميل النتيجة للشخص الذى قام بتسجيل الدخول.
 
-Or, a `menu` can generate the event `"select"` when a menu item is selected, and other objects may assign handlers to react on that event. And so on.
+أو, `menu` يمكنه إستخراج الحدث `"select"` عندما يتم أختيار عنصر من القائمة, و كائنات اخري يمكن ان ترفق `handlers` لكى تتفاعل مع هذا الحدث. و كذلك.
 
-Here's the code:
+هذا هو الكود:
 
 ```js run
 let eventMixin = {
   /**
-   * Subscribe to event, usage:
+   * الإستماع الى الحدث, الإستخدام:
    *  menu.on('select', function(item) { ... }
-  */
+   */
   on(eventName, handler) {
     if (!this._eventHandlers) this._eventHandlers = {};
     if (!this._eventHandlers[eventName]) {
@@ -136,7 +136,7 @@ let eventMixin = {
   },
 
   /**
-   * Cancel the subscription, usage:
+   * إلغاء المتابعه, الإستخدام:
    *  menu.off('select', handler)
    */
   off(eventName, handler) {
@@ -150,59 +150,58 @@ let eventMixin = {
   },
 
   /**
-   * Generate an event with the given name and data
+   * إستخراج حدث بالإسم و البيانات المُعطاه
    *  this.trigger('select', data1, data2);
    */
   trigger(eventName, ...args) {
     if (!this._eventHandlers || !this._eventHandlers[eventName]) {
-      return; // no handlers for that event name
+      return; // لا يوجد handlers لإسم الحدث هذا
     }
 
-    // call the handlers
-    this._eventHandlers[eventName].forEach(handler => handler.apply(this, args));
-  }
+    // طلب الـ handlers
+    this._eventHandlers[eventName].forEach((handler) => handler.apply(this, args));
+  },
 };
 ```
 
+- `.on(eventName, handler)` -- تقوم بتعيين دالة `handler` لتقوم بالعمل عندما يحدث هذا الحدث بذلك الإسم. تقنياً, يوجد خاصية `_eventHandlers` التى تقوم بتخزين مصفوفة من `handlers` لكل إسم حدث, و هى مجرد تقوم بإضافته للقائمة.
+- `.off(eventName, handler)` -- تقوم بحذف الدالة من قائمة الـ `handlers`.
+- `.trigger(eventName, ...args)` -- تستخرج الحدث: يتم طلب كل الـ `handlers` من `_eventHandlers[eventName]` , بقائمة من المتغيرات `...args`.
 
-- `.on(eventName, handler)` -- assigns function `handler` to run when the event with that name occurs. Technically, there's an `_eventHandlers` property that stores an array of handlers for each event name, and it just adds it to the list.
-- `.off(eventName, handler)` -- removes the function from the handlers list.
-- `.trigger(eventName, ...args)` -- generates the event: all handlers from `_eventHandlers[eventName]` are called, with a list of arguments `...args`.
-
-Usage:
+الإستخدام:
 
 ```js run
-// Make a class
+// إنشئ class
 class Menu {
   choose(value) {
     this.trigger("select", value);
   }
 }
-// Add the mixin with event-related methods
+// أضف mixin بـ دوال خاصة بالحدث
 Object.assign(Menu.prototype, eventMixin);
 
 let menu = new Menu();
 
-// add a handler, to be called on selection:
+// أضف handler, لكى يتم طلبها عند الإختيار:
 *!*
-menu.on("select", value => alert(`Value selected: ${value}`));
+menu.on("select", value => alert(`القيمة المُختارة: ${value}`));
 */!*
 
-// triggers the event => the handler above runs and shows:
-// Value selected: 123
+// تنفيذ الحدث => الـ handler بالأعلي يعمل و يُظهر:
+// القيمة المُختارة: 123
 menu.choose("123");
 ```
 
-Now, if we'd like any code to react to a menu selection, we can listen for it with `menu.on(...)`.
+الآن, إذا كنا نريد اى كود يتفاعل عند الإختيار من القائمة, يمكننا الإستماع اليه عن طريق `menu.on(...)`.
 
-And `eventMixin` mixin makes it easy to add such behavior to as many classes as we'd like, without interfering with the inheritance chain.
+و `eventMixin` `mixin` جعلته من السهل إضافة هذا السلوك لـ `classes` كثيرة كما نريد, دون التدخل فى سلسلة الميراث.
 
-## Summary
+## الملخص
 
-*Mixin* -- is a generic object-oriented programming term: a class that contains methods for other classes.
+_Mixin_ -- هو مصطلح عام خاص بالبرمجة الشيئية `object-oriented programming`: الـ `class` الذي يحتوي علي دوال لـ `classes` اخرى.
 
-Some other languages allow multiple inheritance. JavaScript does not support multiple inheritance, but mixins can be implemented by copying methods into prototype.
+بعض اللغات الاخرى تسمح بالوراثة المتعددة. جافاسكريبت لا تسمح بالوراثة المتعددة, و لكن `mixins` يمكن تنفيذها عن طريق نسخ الدوال الى `prototype`.
 
-We can use mixins as a way to augment a class by adding multiple behaviors, like event-handling as we have seen above.
+يمكننا إستخدام `mixins` كطريقة لزيادة الـ `class` عن طريق إضافة سلوكيات متعددة, مثل تنسيق الحدث الذي رأيناه بالأعلي.
 
-Mixins may become a point of conflict if they accidentally overwrite existing class methods. So generally one should think well about the naming methods of a mixin, to minimize the probability of that happening.
+`Mixins` يمكن ان تكون نقطة تضارب اذا قاموا عن طريق الخطأ بالكتابه فوق دوال خاصة بـ `class`. إذا بشكل عام يجب علي المرء أن يفكر جيداً فى طريقة تسمية الدوال الخاصه بـ `mixin`,لتقلل إحتمالية حدوث الأخطاء.