el.js

el.js

إطار عمل معقول للتطبيقات الصغيرة مع إمكانية إعادة الاستخدام العملي.

---

مقدمة

el.js هو إطار عمل مبني على قوالب Riot.js لإنشاء تطبيقات صغيرة.

ما هو التطبيق الصغير ؟

تتطلب أطر الويب من المطورين إنشاء معظم صفحات الويب الخاصة بهم إن لم تكن كلها لتكون تطبيقات ويب ديناميكية. يتيح ذلك للمطورين التأكد من أن كل شيء على صفحة الويب الخاصة بهم يخضع لتدفق عرض واحد ثابت ويمكن التنبؤ به ويمكنهم التفكير فيه. ومع ذلك، هناك أيضًا العديد من العيوب مقارنة بالمواقع الثابتة التقليدية، بما في ذلك أنظمة التخزين المؤقت الأكثر تعقيدًا، وأوقات التحميل الأطول، ومشكلات تحسين محركات البحث. تقدم Microapps حلاً قويًا لهذه العيوب. بدلاً من إنشاء تطبيقات ويب متجانسة عملاقة، قم ببناء تطبيقات صغيرة وقم بتضمينها في صفحاتك الثابتة.

ينفذ التطبيق الصغير جزءًا صغيرًا ومحكمًا للغاية من الوظائف التي يمكن إعادة استخدامها مرارًا وتكرارًا. لا تختلف التطبيقات الصغيرة كثيرًا عن فكرة عناصر واجهة المستخدم القابلة للتضمين قبل أن تصبح أطر العمل هي المعيار، ولكنها تختلف في التنفيذ من خلال التأكيد على الاعتماد على أطر عمل معقولة وإمكانية إعادة الاستخدام العملية.

مثال نموذج بسيط

HTML:index.html

el.js Library --> <script src="https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js"></script> <script src="my-script.js"></script> </body> </html>">

 < html >
	< head >
	<!-- Head Content -->
	< link rel =" stylesheet " src =" https://cdn.jsdelivr.net/gh/hanzo-io/el-controls/theme.css " />
	</ head >
	< body >
		< my-form >
			< div >
				< label > Type Your Name </ label >
				<!-- bind my-input to parent(my-form).data.name, parent.data is implicit for what is supplied to bind attribute -->
				< my-input bind =' name ' />
			</ div >
			< div >
				< span > Your Name Is </ span >
				< span > { data.name } </ span >
			</ div
		</ my-form >
		<!-- el.js Library -->
		< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >
		< script src =" my-script.js " > </ script >
	</ body >
</ html >

شبيبة: my-script.js

 // window.El is the global value

// El.Form extends El.View and validates bound El.Inputs
class Form extends El . Form {
	constuctor ( ) {
		// data contains your state
		this . data = { 
			name : '?' , 
		}
		// your custom tag name
		this . tag = 'my-form'

		super ( )
	}
}

Form . register ( )

// El.Input extends El.View and binds to updating El.Form values
class Input extends El . Input {
	constructor ( ) {
		// your custom tag name
		this . tag = 'my-input'
		// the default this.change function works with all basic html inputs(<input>, <textarea>, ...).
		this . html = '<input onkeydown="{ change }" />'

		super ( )
	}
}

Input . register ( )

El . mount ( '*' ) 

تثبيت

HTML

أضف هذه العلامة إلى الجزء السفلي قبل البرامج النصية والتخفيضات المخصصة والنافذة المرجعية.

 < script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >

العقدة:

التثبيت عبر NPM

el.js --save">

 npm install el . js -- save

يدعم CommonJS

el.js'">

 var El = require ' el.js '

أو واردات ES6

el.js'">

 import El from ' el.js '

واجهة برمجة التطبيقات

أنواع

نوع الإدخال

يتم الرجوع إلى هذا النوع بواسطة El.Form لتخزين المعلومات المستخدمة للتحقق من صحة الحقل المرتبط بالاسم .

ملكيات

اسم	يكتب	تقصير	وصف
التكوين	وظيفة الوسيطة أو [ وظيفة الوسيطة ]	غير محدد	يقوم هذا النوع بتخزين MiddlewareFunction أو MiddlewareFunctions الأصلي المستخدم لإنشاء التحقق من الصحة ()
اسم	خيط	''	هذا هو اسم الحقل الموجود في خاصية بيانات El.Form والذي يشير إليه باقي هذا النوع.
المرجع	شجرة مرجعية	غير محدد	هذا رابط لشجرة البيانات القابلة للتغيير والتي يمكنها استرداد قيمة الاسم عن طريق استدعاء this.ref.get( name )

طُرق

اسم	يكتب	وصف
التحقق من صحة	(الشجرة المرجعية، السلسلة) => الوعد	تستدعي هذه الطريقة جميع وظائف MiddlwareFunctions التسلسلية باستخدام الوعود.

وظيفة الوسيطة

• اكتب: (القيمة: أي) => وعد أو أي

يُستخدم هذا النوع لتعريف البرامج الوسيطة لـ El.Form . قم بالتحقق من الصحة وتعقيم المدخلات باستخدام هذه الوظائف مثل:

 function isRequired ( value ) {
  value = value . trim ( )
  if ( value && value != '' ) {
    return value
  }
  
  throw new Error ( 'Required' )
} 

مرجع الوعد

• النوع: {ص: وعد}

يُستخدم هذا النوع داخليًا في أماكن لتسهيل إرجاع الوعود بالرجوع إليها.

فصول

إل.فيو

هذه هي الفئة الأساسية لجميع فئات El. يتوافق كل El.View مع علامة مخصصة. قم بتوسيع هذه الفئة لإنشاء العلامات المخصصة الخاصة بك.

ملكيات

اسم	يكتب	تقصير	وصف
المغلق	خيط	''	هذه سلسلة تمثل CSS للعلامة. يتم حقنه مرة واحدة لكل فئة في الجزء السفلي من العلامة عند تركيبها.
بيانات	شجرة مرجعية	غير محدد	تقوم هذه الخاصية بتخزين حالة العلامة.
أتش تي أم أل	خيط	''	هذه سلسلة تمثل HTML الداخلي للعلامة.
جذر	HTMLElement	غير محدد	تقوم هذه الخاصية بتخزين مرجع للعلامة في صفحة الويب الخاصة بك التي يرتبط بها العرض المثبت.
علامة	خيط	''	هذا هو اسم العلامة المخصصة.

طُرق

اسم	يكتب	وصف
beforeInit	() =>	يتم تنفيذ الكود هنا قبل تهيئة العلامة.
الحرف الأول	() =>	يتم تنفيذ الكود هنا عند تهيئة العلامة ولكن قبل تثبيتها. موصى به - إذا كنت بحاجة إلى الالتزام بدورة حياة العلامة، فقم بذلك هنا.
تحديث الجدول الزمني	() => الوعد	تقوم هذه الطريقة بجدولة مكالمة تحديث غير متزامنة. يقوم بتجميع مكالمات التحديث في العرض العلوي إذا كانت هناك طرق عرض متداخلة. تقوم بإرجاع وعد عند تنفيذ التحديث
تحديث	() =>	تقوم هذه الطريقة بتحديث العلامة. يُسمى هذا ضمنيًا بعد الأحداث التي يتم تشغيلها من صفحة الويب. راجع onkeydown في "مثال نموذج بسيط" لمثل هذه الحالة. قم باستدعاء هذه الطريقة يدويًا لتحديث العلامة. موصى به - يوصى باستدعاء جدولة التحديث () يدويًا بدلاً من ذلك لمنع تتالي التحديثات المتزامنة.

الأساليب الموروثة من Riot Observable (تشغيل، واحد، إيقاف، تشغيل)

كل El.View هو باعث الحدث. راجع Riot.observable لمزيد من الوثائق، http://riotjs.com/api/observable/

الأساليب الثابتة

اسم	يكتب	وصف
El.View.register	() =>	يؤدي هذا إلى تسجيل العلامة المخصصة الحالية مع محرك العرض. نسميها بعد أن قمت بتحديد علامة

El.Form يمتد El.View

تُستخدم هذه الفئة لتمثيل النماذج بالإضافة إلى التطبيقات الصغيرة الأكثر تعقيدًا التي تعتمد على عمليات الإدخال والإخراج. توفر هذه الفئة التحقق من صحة النموذج الشائع ومنطق إرسال النموذج.

ملكيات

اسم	يكتب	تقصير	وصف
التكوينات	هدف	غير محدد	قم بتوفير خريطة للأسماء لـ MiddlewareFunction أو مجموعة من MiddlewareFunctions . راجع وظيفة الوسيطة لمزيد من المعلومات.
المدخلات	هدف	باطل	يتم تحويل كل عنصر في التكوينات إلى عنصر في المدخلات . تعديل هذا مباشرة غير مستحسن.

طُرق

اسم	يكتب	وصف
الحرف الأول	() =>	يتم تنفيذ التعليمات البرمجية هنا عند تهيئة العلامة ولكن قبل تثبيتها. يستدعي initInputs() لذا اتصل بذلك يدويًا - أو اتصل بـ super() في ES6. موصى به - إذا كنت بحاجة إلى الالتزام بدورة حياة العلامة، فقم بذلك هنا.
initInputs	() =>	تجميع التكوينات وتعيين البنية المنبعثة إلى المدخلات . تحتوي المدخلات مثل التكوينات على مراجع للحقل المسمى في البيانات .
يُقدِّم	(الحدث) => الوعد	تؤدي هذه الطريقة إلى التحقق من صحة كل حقل في البيانات كما هو محدد في التكوينات . يجب استدعاء هذه الطريقة كمعالج/مستمع للحدث. يستدعي إرسال () في حالة نجاح التحقق من الصحة، ويعيد وعدًا عند نجاح/فشل التحقق من الصحة
_يُقدِّم	() =>	يتم تنفيذ التعليمات البرمجية هنا عندما يتم التحقق من صحة النموذج أثناء استدعاء Submit()

El.Input يمتد El.View

هذه هي الفئة الأساسية لبناء مدخلات النموذج وعناصر تحكم الإدخال/الإخراج.

ملكيات

اسم	يكتب	تقصير	وصف
ربط	خيط	''	تحدد هذه الخاصية الحقل الذي يرتبط به هذا الحقل في بيانات النموذج الأصلي.
ابحث عن	خيط	''	نفس الربط ، المهمل .
errorMessage	خيط	''	تم تعيين هذه الخاصية على أول رسالة خطأ يلتقطها الوعد الذي تم إرجاعه لـ this.input.validate.
مدخل	نوع الإدخال	باطل	هذه الخاصية مأخوذة من خاصية مدخلات النموذج الأصلي بناءً على ما يحدده ربط حقل البيانات الأصلية.
صالح	منطقي	خطأ شنيع	يتم استخدام هذه الخاصية لتحديد حالة التحقق من صحة الإدخال. يتم تعيينها عند استدعاء this.input.validate، ولا يتم تعيينها على "صحيح" إلا إذا تم تنفيذ الوعد الذي تم إرجاعه من this.input.validate بالكامل.

طُرق

اسم	يكتب	وصف
يتغير	(الحدث) =>	تقوم هذه الطريقة بتحديث الإدخال ثم التحقق من صحته. يجب استدعاء هذه الطريقة بواسطة معالج/مستمع الحدث.
تغير	() =>	يتم استدعاء هذا التابع عند تنفيذ الوعد الذي تم إرجاعه لـ this.input.validate بالكامل.
خطأ واضح	() =>	تقوم هذه الطريقة بتعيين errorMessage على '' ويتم استدعاؤها قبل التحقق من الصحة.
خطأ	(خطأ) =>	تقوم هذه الطريقة بتعيين errorMessage ويتم استدعاؤها عند فشل التحقق من الصحة.
getValue	(الحدث) => أي	تحصل هذه الطريقة على القيمة من الإدخال. بشكل افتراضي، تقوم هذه الطريقة بإرجاع القيمة target.value للحدث .
التحقق من صحة	(PromiseReference؟) => Promise	تتحقق هذه الطريقة من صحة الإدخال، وترجع وعدًا يمثل نجاح التحقق من الصحة وفشله حسب المرجع (مطلوب داخليًا) والقيمة.

وظائف

اسم	يكتب	وصف
El.scheduleUpdate	() =>	جدولة التحديث لجميع التطبيقات الصغيرة على الصفحة.

موروثة من شركة Riot (El.mount، El.update، إلخ)

وظائف دورة حياة el.js موروثة من Riot.js.

شجرة قابلة للتغيير افتراضية

يستخدم el.js الأشجار المرجعية لتخزين بيانات النموذج الخاصة به.

(BYODS) قم بإحضار بنية البيانات الخاصة بك

قم بتنفيذ أساليب get وset وon وnce وoff من المرجعية حول بنية البيانات الخاصة بك وقم بإفلاتها كخاصية بيانات.

أفضل الممارسات

استخدام الحاويات والضوابط

الحاوية عبارة عن علامة مخصصة توفر طرقًا لاستخدامها في قالبها الداخلي ويمكن استبدال محتواها بالكامل (تحتوي فقط على محتوى في علامة واحدة أو أكثر). عنصر التحكم هو مكون يتفاعل مع المستخدم لأغراض عرض المعلومات بطريقة مثيرة للاهتمام أو الحصول على مدخلات مثل إدخال أو تحديد أو تضمين GoogleMaps.

بدلاً من إنشاء عناصر واجهة المستخدم بطريقة مقترنة بإحكام، قم بتحليل عنصر واجهة المستخدم إلى حاويات وعناصر تحكم لتحقيق أقصى قدر من إمكانية إعادة الاستخدام. قم ببناء HTML الداخلي بأي طريقة منطقية. بعد ذلك، قم بتحرير عنصر واجهة المستخدم والحاوية وعناصر التحكم المكتملة للمستخدمين حتى يتمكنوا من تخصيص عنصر واجهة المستخدم لمتطلباتهم المتنوعة.

من خلال تجريد عناصر واجهة المستخدم الخاصة بك مثل هذا، سيكون من الأسهل على شخص آخر إعادة استخدام التعليمات البرمجية الخاصة بك وتخصيصها. راجع shop.js للتنفيذ.

استخدم متجر دولة واحدة

من الأفضل استخدام متجر حالة واحد عالي المستوى لتبسيط عملية حفظ الحالة واستعادتها لصفحة الويب الخاصة بك أو موقع الويب بأكمله.

يمكن تحقيق ذلك من خلال تزويد جميع حاويات المستوى الأعلى في الصفحة بنفس حقل البيانات . عبر مكالمة التحميل الأولية

 var data = {
	state0 : 0 ,
	state1 : 1 ,
}

El . mount ( '*' , { data : data } )

الاستخدام المتقدم

الميراث النموذجي المتداخل

على عكس عرض Riot العادي، يسمح el.js بالوصول الضمني للقيم على this.parent وthis.parent...parent عبر الميراث النموذجي لسياق العرض. يتم ذلك لتجنب تمرير نفس البيانات بشكل متكرر عبر الحاويات المتداخلة لأنها عرضة للخطأ ومطولة بشكل مفرط. وهذا أيضًا يسهل إنشاء الحاويات وعناصر التحكم.

تمرير متغير البيانات بشكل صريح:

 < my-container-1 >
	< my-container-2 data =' { data } ' >
		< my-container-3 data =' { data } ' >
			value: { data.value1 }
		</ my-container-3 >
		< my-container-3 data =' { data } ' >
			value: { data.value2 }
		</ my-container-3 >
	</ my-container-2 >
	< my-container-2 data =' { data } ' >
		< my-container-3 data =' { data } ' >
			value: { data.value3 }
		</ my-container-3 >
		< my-container-3 data =' { data } ' >
			value: { data.value4 }
		</ my-container-3 >
	</ my-container-2 >
</ my-container-1 > 

 // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } )

يعادل الإشارة ضمنيًا إلى متغير البيانات.

 < my-container-1 >
	< my-container-2 >
		< my-container-3 >
			value: { data.value1 }
		</ my-container-3 >
		< my-container-3 >
			value: { data.value2 }
		</ my-container-3 >
	</ my-container-2 >
	< my-container-2 >
		< my-container-3 >
			value: { data.value3 }
		</ my-container-3 >
		< my-container-3 >
			value: { data.value4 }
		</ my-container-3 >
	</ my-container-2 >
</ my-container-1 > 

 // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } ) 

رخصة

بي إس دي