آویزه : 20script

سری آموزش های طراحی وب با فریم ورک tedjs (شروع کار)

سری آموزش های طراحی وب با فریم ورک tedjs (شروع کار)

از این قسمت به شروع به توضیح فریم ورک در قالب مثال هایی می نماییم.

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

برای این کار ، می توانید فریم ورک را دانلود نمایید یا به صورت برخط استفاده کنید.

برای دریافت یا استفاده از آخرین نسخه ، ابتدا به وبسایت tedjs مراجعه نمایید. به صفحه اصلی بروید . از منوی کشویی minified را انتخاب نمایید و بر روی دانلود کلیک نمایید و برای نمایش لینک برخط فریم ورک ، گزینه Online link  را انتخاب کنید و بر روی دانلود کلیک نمایید.

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

تنظیمات مورد نیاز در متغییر Ted_setting می بایست ذخیره شود.

در حال حاضر تنها دو مقدار را می توان تغییر داد. آدرس سرور کتابخانه ها و نحوه نمایش خطا ها در حین اجرا.

آدرس سرور در توابع include و ainclude برای دریافت کتابخانه ها استفاده می شود. در صورتی که کتابخانه شخصی دارید می توانید آدرس آن را در URL وارد نمایید. توجه نمایید که در انتهای Query علامت مساوی قرار دهید، زیرا نام کتابخانه به انتهای آدرس اضافه می شود.

مقدار libError  نیز برای شخصی سازی نمایش خطا به صورت alert می باشد. درصورتی که مقدار دهی نشود ، خطایی نمایش داده نخواهد شد.

دو مقدار {{name}}  و {{error}} نیز یک template  برای نمایش نام کتابخانه و مشخصات خطا می باشد.

اعمال تنظیمات اختیاری می باشد.

نکته مهمی که در این کتابخانه وجود دارد این است که ، این کتابخانه دارای دو گروه توابع می باشد.

توابع شی tedApi و توابع شی ted.

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

شی ted که دارای توابع طراحی DOM ها می باشد ، تنها در کتابخانه هایی که از طریق توابع include و ainclude اجرا می شوند قابل دسترس می باشند. اما شی tedApi که دارای توابع عمومی و اساسی فریم ورک می باشد چه در داخل و چه در خارج از کتابخانه ها قابل دسترس می باشد.

وارد کردن کتابخانه های به دو صورت می باشد.

اولین حالت استفاده مستقیم از کتابخانه ها از طریق Tedjs CDN ، که به صورت آنلاین کتابخانه از مخزن گرفته می شود.

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

Username.LibraryName.NameSpace

مانند system.aml.std

برای فراخوانی می توان از دو تابع include و  ainclude به صورت زیر استفاده کرد.

در حالت دوم که حالت پیش نهاد شده می باشد ، فایل کتابخانه از مخزن دانلود شده و بر روی هاست بارگزاری می شود. حال می توانید آدرس فایل را مشخص نمایید. در این حالت برای مشخص کردن اینکه قصد بارگزاری یک فایل داخلی را دارید می بایست از کلمه کلیدی file: استفاده نمایید.

حال می توانید کتابخانه خود را ایجاد و بارگزاری نمایید.

 

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

تد جی اس (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 ایجاد شده اند.

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

بیست اسکریپت



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