defi.js هي مكتبة تفاعلية تعتمد على Object.defineProperty

defi.js هي مكتبة تحتوي على أكثر من عشرة وظائف تضيف ميزات شيقة لأي كائنات JavaScript باستخدام getters و setters.

انتباه GIF (3.5 ميغابايت)
مستودع

كعالم مرحبا ، قم بإنشاء عنصر واجهة مستخدم صغير يتكون من الاسم الأول واسم العائلة وحقل الترحيب ( تجريبي ).

<input class="first"> <input class="last"> <output class="greeting"></output> 

 //    const obj = { first: 'John', last: 'Doe' }; //     first  last //   ,      defi.on(obj, 'change:first', () => console.log('First name is changed')); defi.on(obj, 'change:last', () => console.log('Last name is changed')); //    ( greeting)  , //  first  last  defi.calc(obj, 'greeting', ['first', 'last'], (first, last) => `Hello, ${first} ${last}`); //      //      defi.bindNode(obj, { first: '.first', last: '.last', greeting: '.greeting' }); 

نتيجة لذلك ، إذا last تغيير first أو last ، يقوم معالجو الأحداث بالإبلاغ عن ذلك إلى وحدة التحكم ، ويتم تحديث خاصية greeting تلقائيًا ، ويتلقى عنصرها قيمة جديدة (افتراضيًا ، "Hello، John Doe"). يحدث هذا في كل مرة تتغير الخصائص ، ولا يهم كيف. يمكنك تعيين القيمة باستخدام الكود obj.first = 'Jane' ، أو عن طريق تغيير قيمة الحقل ، obj.first = 'Jane' جميع التغييرات الأخرى تلقائيًا.

في حالة وجود حاجة لمزامنة خاصية الكائن و innerHTML لعنصر HTML التعسفي (في المثال استخدمنا علامة output ) ، نحتاج إلى تمرير ما يسمى "الموثق" إلى دالة bindNode ، المسؤولة عن كيفية مزامنة حالة العنصر وممتلكات الكائن. بشكل افتراضي ، bindNode لا يعرف كيفية العمل مع العقد التي ليست عناصر النموذج.

 const htmlBinder = { setValue: (value, binding) => binding.node.innerHTML = value, }; //   obj.greeting  innerHTML   defi.bindNode(obj, 'greeting', '.greeting', htmlBinder) 

بالإضافة إلى ذلك ، يمكنك استخدام html من مكتبة المجلدات العامة (هذه مجموعة من المجلدات العامة).

 const { html } = require('common-binders'); //   obj.greeting  innerHTML   defi.bindNode(obj, 'greeting', '.greeting', html()) 

طرق API

يمكن الاطلاع على الوثائق التفصيلية لجميع الطرق ، وأشكال المكالمات المتاحة ، والأعلام ، وما إلى ذلك على الموقع defi.js.org . تجدر الإشارة إلى أنه بالإضافة إلى الأساليب أدناه ، تحتوي defi.js على مكتبة للتوجيه: defi-router .

• bindNode - ربط خاصية كائن وعقدة DOM للربط ثنائي الاتجاه.

 //   // (  HTML5  , . defaultBunders) defi.bindNode(obj, 'myKey', '.my-element'); //   defi.bindNode(obj, 'myKey', '.my-element', { // ,      // (    -DOM ) on: 'click', //     ? getValue: ({ node }) => someLibraryGetValue(node), //       ? setValue: (v, { node }) => someLibrarySetValue(node, v), //    (  )? //      //  'initialize'     initialize: ({ node }) => someLibraryInit(node), }); obj.myKey = 'some value'; //   

• calc - ينشئ اعتمادًا لخاصية واحدة لكائن على خصائص أخرى (بما في ذلك من كائنات أخرى).

 defi.calc(obj, 'a', ['b', 'c'], (b, c) => b + c); obj.b = 1; obj.c = 2; console.log(obj.a); // 3 

• mediate - يعدل قيمة الخاصية عندما يتغير.

 defi.mediate(obj, 'x', value => String(value)); obj.x = 1; console.log(obj.x); // "1" console.log(typeof obj.x); // "string" 

• على - يضيف معالج الأحداث. هناك مقال صغير على موقع الوثائق يصف جميع الأحداث المحتملة.

 defi.on(obj, 'change:x', () => { alert(`obj.x now equals ${obj.x}`); }); obj.x = 1; 

• إيقاف - حذف معالج حدث.

 defi.off(obj, 'change:x bind'); 

• الزناد - تحريك حدث.

 defi.on(obj, 'foo bar', (a, b, c) => { alert(a + b + c); }); defi.trigger(obj, 'foo', 1, 2, 3); //  alert(6) 

• unbindNode - تعطيل ربط العنصر و DOM للعقدة.

 defi.bindNode(obj, 'myKey', '.my-element'); defi.unbindNode(obj, 'myKey', '.my-element'); 

• منضم - إرجاع عنصر DOM المرتبط بالخاصية المحددة.

 defi.bindNode(obj, 'myKey', '.my-element'); const node = defi.bound(obj, 'myKey'); //  document.querySelector('.my-element') 

• سلسلة - تستخدم لسلسلة وظائف defi.js.

 defi.chain(obj) .calc('a', 'b', b => b * 2) .set('b', 3) .bindNode('c', '.node'); 

• defaultBinders - مجموعة من الوظائف التي تُرجع الموثق المقابل أو غير المعرَّفة. للسماح bindNode بربط العناصر والخصائص المخصصة دون تحديد رابط بشكل صريح.

 defi.defaultBinders.unshift(element => { //      "foo" if(element.classList.contains('foo')) { // ,     return { on: ..., getValue: ..., setValue: ... }; } }); // ... defi.bindNode(obj, 'myKey', '.foo.bar'); 

• lookForBinder - إرجاع الموثق المقابل للعنصر إذا أرجعت إحدى وظائف defaultBinders واحدة.

 const element = document.createElement('input'); element.type = 'text'; console.log(defi.lookForBinder(element)); 

• remove - يزيل خاصية كائن ومعالجات الأحداث المرتبطة.

 defi.remove(obj, 'myKey'); 

• set - لضبط خاصية الكائن ، مثل setter ، لكن يجعل من الممكن تمرير بعض البيانات إلى change:KEY event handler. يمكنك أيضًا جعل إعداد قيمة الخاصية "صامتًا" ، أي عدم استدعاء change:KEY على الإطلاق.

 defi.set(obj, 'myKey', 3, { silent: true }); 

defi.js عبارة عن شوكة صلبة منقحة ومبسطة لإطار Matreshka.js ، والتي تضمنت صفائف التقديم ، وفئات متعددة ، وطرق أكثر. تم استبدال بعض الطرق التي من المحتمل أن تدخل في defi.js بخيارات للطرق الأخرى ، على سبيل المثال ، بدلاً من once وعلى onDebounce يمكنك استخدام الطريقة on بتمرير خيارات onDebounce once: true أو debounce: number .

شكرا لك على القراءة حتى النهاية. أتمنى لك يومًا سعيدًا.