آویزه : %d9%81%d8%b1%db%8c%d9%85-%d9%88%d8%b1%da%a9

سری آموزش های طراحی وب با فریم ورک tedjs (ساخت todo list)

یکی از مثال هایی که اغلب اوقات زده می شود ، طراحی todo list می باشد.

برای شروع کار ، ما نیز می خواهیم لیست انجام کار ها را طراحی کنیم. این عنصر ، نمایش دهنده یک لیست از فعالیت ها خواهد بود که امکان آن را دارد که داده به آن اضافه شود ، حذف شود و همچنین داده های پیشفرض را بخواند.

فایلی ایجاد نمایید. در اینجا فایل lib.js را ایجاد می نماییم.

حال عنصر خود را ابتدا تعریف می کنیم. برای تعریف عنصر می بایست به صورت زیر عمل کرد:

نام تگ عنصر را todo می گذاریم

همانطور که مشاهده می کنید از تابع define ، زیر مجموعه شی ted استفاده کرده ایم. با این کار یک عنصر با نام todo ساخته ایم که هیچ گونه مشخصه (Attribute) مخصوصی ندارد.

با این کار عنصر به صورت پیش فرض با display:none در نظر گرفته می شود.

در قدم بعد باید تابع سازنده عنصر را طراحی کنیم.

برای ایجاد تابع سازنده ، از تابع ted.create استفاده می کنیم. ورودی اول این تابع تابع تعریف شده می باشد و ورودی دوم آن تابع سازنده می باشد.

حال شروع به نوشتن محتویات تابع می نمایید.

ابتدا متغیر های مورد نیاز را تعریف می کنیم.

عنصر todo دارای عناصر فرزند می باشد. عنصر list ، insert و remove ..

عنصر list برای وارد کردن مقدار های ابتدایی به کار گرفته می شود.

عنصر insert درصورت استفاده می توانید نامی برای دکمه وارد سازی اطلاعات به لیست تعیین نمایید.

و عنصر remove نیز برای تعیین نام دکمه حذف از لیست به کار می رود.

درصورتی که از مقادیر بالا استفاده نشود ، مقادیر پیش فرض استفاده خواهند شد.

در قدم بعدی می بایست درون html را خالی کرد تا محتوای جدید وارد شود.

در این مرحله لیست های ابتدایی درصورت وجود را وارد HTML می کنیم. لیست های ابدایی درون متغیر list ذخیره شده اند.

در اینجا اپلیکیشن ایجاد شده و اطلاعات نمایش داده شده اند. اما در صورتی که بخواهیم اطلاعاتی را اضافه یا حذف کنیم ، نمی توانیم. پس می بایست برای دکمه های insert و remove ، رویدادی ایجاد کنیم تا به عمل کاربر واکنش دهند.

کار کتابخانه به آخر رسیده. تنها یک مرحله مانده. اما برای پیشرفته تر کردن عنصر می توانیم تدبیری بیندیشیم که درصورتی که از طریق جاوا اسکریپت عنصر list به اپلیکیشن اضافه شد ، بتواند مقدار را ارزیابی کرده و وارد نماید. پس از رویداد inchange که مختص tedjs می باشد استفاده می کنیم تا ورودی های جدید را بررسی کرده و وارد نماییم.

در آخر نیز برای اینکه عنصر نمایش داده شود از تابع show  استفاده می نماییم.

در اینجا کار تمام است. کتابخانه ما ایجاد شد و ما می توانیم از آن استفاده نماییم. در زیر می توانید نمونه اجرا شده را ببینید ، کد ها را تغییر دهید و نتیجه را ببینید.









دسته بندی: آموزش, فریم ورک تد جی اس, مقاله

تد جی اس (tedjs.org) – فریم ورک متن باز کتابخانه گرای جاوا اسکریپت

بالاخره بعد از مدت چندماه فریم ورک تد جی اس تکمیل و عرضه شد. این فریم ورک به صورت متن باز و تحت لیسانس MIT عرضه شد.

tedjs یا easy element definer فریم ورکیست که از طریق آن می توان HTML را آنگونه که خود می خواهید ساخته و استفاده نمایید. شما در tedjs این قدرت را دارید که عناصر ، ویژگی ها (Attributes) ، نود های متنی (Text Nodes) و نود های توضیحی(Comment Nodes) خود را ایجاد کنید.

در کنار این امکانات ، توابعی نیز برای رفع نیاز درباره سرعت و سادگی در نوشتن کد های نیز ، گنجانده شده تا قدرت tedjs را افزون نماید.

یکی دیگر از قابلیت های مهم این فریم ورک این است که می توانید کتابخانه های متعددی را از طریق tedjs اجرا نمایید. شما می توانید در وبسایت :

https://tedjs.org

ثبت نام کرده و کتابخانه خود را ثبت نمایید تا دیگران نیز بتوانند یا به صورت آنلاین یا فایل دانلود شده آن استفاده نمایند.

اما چرا از Tedjs استفاده کنیم:

در HTML ممکن است بخواهید چندین عنصر را چند بار در جاهای مختلف کد تکرار کنید. که مثلا هرکدام یک تغییر کوچکی در اجرای توابع سمت جاوا اسکریپت را دارا می باشند. حال اگر بخواهیم یک عنصر را که خود شامل ۱۰ خط کد می باشد را ۵ بار تکرار کنیم. تصور کنید که چه میزان فضا را چه در HTML چه در Javascript  اشغال خواهد کرد. علاوه بر آن بسیار کد ناخوانا و پیچیده خواهد شد و این باعث کند تر شدن روند دیباگ کد ها خواهد شد.

با tedjs می توانید عناصر و … را به صورت پویا و داینامیک طراحی کنید که به توان تمامی مقادیر آن اعم از صفات ، محتوای درونی و… آن را پس از تکمیل شدن فرایند لود وبسایت نیز تغییر دهید.

کتابخانه گرا بودن این فرم ورک به امکان را به برنامه نویس می دهد که بتواند کد های خود را دسته بندی شده نوشته و هر کدام از آن ها را با دیگران نیز تقسیم کند . به عنوان مثال در پروژه های بزرگ برنامه نویسی تحت وب به جای صرف وقت برای نوشتن کد های متعدد و تکراری برای یک DOM می توان آن را یک بار به صورت پویا طراحی کرد و سپس در هرکجا از وبسایت استفاده نمود.

برای اطلاعات بیشتر به وبسایت tedjs مراجعه فرمایید و مثال های آن را که در صفحه اول وبسایت مجود است مشاهده نمایید.

درضمن درصورتی که سورس وبسایت را مشاهده نمایید به عناصری برواهید خورد که با tedjs ایجاد شده اند.

در وبسایت های دیگر:

بیست اسکریپت



دسته بندی: فعالیت ها