آویزه : %d9%be%d8%b1%d8%af%d8%a7%d8%b2%d8%b4-%d9%85%d9%88%d8%a7%d8%b2%db%8c

سری آموزش های طراحی وب با فریم ورک 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 (معرفی)

تد جی اس (Tedjs) یا Easy Element Definer ، یک فریم ورک کتابخانه گراست که به صورت متن باز و رایگان عرضه شده است.

Tedjs به شما کمک می کند تا بتوانید عناصر خود را طراحی کنید و یا از کتابخانه های دیگر توسعه دهندگان tedjs استفاده کنید. درون فریم ورک بیشتر توابع مورد نیاز برای طراحی گنجانده شده است که نیاز طراح را به کتابخانه های دیگر کمتر می کند.

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

تد جی اس علاوه بر توابع پایه ، دارای دو بخش اساسی می باشد.

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

با استفاده از توابع طراحی DOM ، طراح قادر خواهد بود تا عناصر ، کامنت نود ها و تکست نود های خود را طراحی کند.

طراحی DOM ها باعث می شود تا از تکرار و شلوغی و نامفهومی کدهای HTML کاسته شود.

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

چرا باید از تدجی اس استفاده کنیم؟

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

اما دلایلی برای پیشنهاد این فریم ورک وجود دارد:

  • تد جی اس یک فریم ورک کتابخانه گراست. یعنی هسته اصلی ، دارای امکانات معقول و حداقلیست و برای استفاده از امکانات دیگر می بایست از کتابخانه های موجود در Tedjs بر اساس نیاز خود استفاده نمایید. این عمل باعث می شود هزینه اضافی بر روی بارگزاری و اجرای سایت ایجاد نشود و به مراتب باعث افزایش سرعت بارگیری سایت می شود. از طرفی به دلیل وجود سامانه برخط ارائه محتوا محلی تد جی اس[۱] نیازی به بارگزاری کتابخانه ها در وبسایت خود ندارید. اگرچه که پیشنهاد می شود ، کتابخانه ها در وبسایت بارگزاری شود.
  • وجود توابع ابتدایی مورد نیاز علاوه بر توابع ایجاد DOM ها. این توابع نیاز برنامه نویس را از نیاز های ابتدایی به سایر کتابخانه ها مانند Jquery برطرف می نماید.
  • وجود توابع برای دسترسی کامل کوکی ها ، اطلاعات URL مانند Hash ها و رشته های پرس و جو(GET) ، سر بارگزاری توابع سیستمی جاوا اسکریپت برای بازدهی بهتر ، تابع رندوم اختصاصی و…
  • وجود توابع کنترلی برای کنترل هر نوع داده در جاوا اسکریپت و اعتبار سنجی URL و ایمیل.
  • وجود تابع پیشرفته انیمیشن برای ایجاد انیمیشن ها با استفاده از مجموع منحنی های درجه دو (بدون استفاده از CSS)
  • وجود کتابخانه AML برای افزایش سطح دسترسی برنامه نویس.( این کتابخانه همانند Angularjs و apml عمل می کند)
  • وجود زبان اختصاصی برای افزایش هرچه بیشتر و بهتر قدرت و سرعت برنامه نویس و همچنین کاهش حجم کد های برنامه.( این زبان به زودی عرضه خواهد شد )

این امکانات تنها امکانات هسته این فریم ورک می باشد(با استثنا موارد ۶ و ۷). شما می توانید کتابخانه خود را ایجاد نمایید و با دیگران به اشتراک بگزارید.

شبکه محلی ارائه محتوا تد جی اس[۱] این امکان را به برنامه نویسان می دهد که کتابخانه خود را از این طریق در دسترس تمامی برنامه نویسان و گسترش دهندگان قرار دهد.

مستندات و پشتیبانی

فریم ورک تد جی اس از مستندات کاملی از تمامی توابع موجود در دسترس، بهره می برد که کاربران می توانند از آن استفاده نمایند. این مستندات به زبان انگلیسی نوشته شده اند اما دارای فهم ساده و مثال هایی برای درک بهتر می باشند. به زودی نسخه فارسی نیز ایجاد خواهد شد. برای دسترسی می توانید به سایت تد جی اس مراجعه نمایید.[۲]

در بحث پشتیبانی نیز ، برنامه نویسان و گسترش دهندگان می توانند از طریق ایمیل و کانال تلگرام مشکلات خود را مطرح نمایند.[۳]

تفاوت تد جی اس با دیگر فریم ورک ها چیست؟

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

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


[۱] Tedjs CDN

[۲] https://tedjs.org

[۳] ایمیل : porya.grand@outlook.com

تلگرام : http://t.me/poryagrand



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

پردازش موازی یا خطی در جاوا اسکریپت ، مسئله این است!(قسمت سوم)

همانطور که از قسمت های اول و دوم متوجه شدیم:

زبان جاوا اسکریپت همانطور که گفته شد یک زبان Signle Thread می باشد. بدین معنی که تمامی عملیات ها در یک نخ توسط خود زبان کنترل می شوند.

اما دلیل اینکه این زبان به صورت تک نخ طراحی شده چیست؟

این امر برپایه نظریه ای است که می گوید این چنین فرایندی کیفیت و سرعت پردازش را نسبت به چند نخی افزایش می دهد.  زیرا به عنوان مثال در نخ ها می بایست کنترل محیط را نیز انجام داد ، مانند اینکه دو نخ به یک متغیر در یک زمان دسترسی نداشته باشند و ….

اما ایده ناهمزمانی در این زبان باعث می شود این مشکلات کاملا برطرف شود و تماما ، کنترل بر عهده زبان باشد.

با این حال به مرور زمان با پیشرفت زبان و قدرت طراحی اپلیکیشن ها ، نیاز به پردازش موازی در جاوا اسکریپت احساس شد و برای جلوگیری از تغییر در اساس زبان ، دست به طراحی API برای این زبان زدند.

نام این اینترفیس Web Worker می باشد.

ایده پس این رابط ، اجرای چندین اپلیکیشن به صورت موازی می باشد. با این رابط ، زبان جاوا اسکریپت به یک زبان Multi Thread تبدیل شد.

اما این رابط دارای ضعف هایی نیز می باشد. اولین ضعف این است که کدهای اجرایی از طریق این رابط دسترسی به document و window ندارند.

دومین ضعف این است که نمی توان کد را به صورت مستقیم ، به عنوان مثال یک تابع را ، با این رابط در نخ دیگر اجرا کرد. البته تکنیک ها و کتابخانه های Third-party وجود دارد که این فرایند را ممکن می سازند.

اما چگونه ممکن است که در زبانی که همچنان در یک نخ اجرا می شود ، یک رابط برای پردازش Multi thread وجود داشته باشد؟

برای درک بهتر به عکس زیر توجه نمایید:

درصورتی که به عکس توجه نمایید متوجه دو قسمت می شوید. موتور جاوا اسکریپت و مرورگر.

همانطور که پیداست ، ورکر ها در سمت مرورگر ایجاد شده اند.

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

این عمل ، دسترسی نداشتن به document را توجیه می کند. به دلیل آن که این متغیر محلی در HTML می باشد اما نخ ها تنها به توابع هسته جاوا اسکریپت که تهی از هرگونه متغیر که در ارتباط با صفحه وب می باشد ، دسترسی دارند.

ورکر ها ، فقط می توانند یک فایل را اجرا کنند و پاسخ آن را به عنوان یک پیام به جاوا اسکریپت ارسال کنند.ارسال و دریافت پیام دو طرفه می باشد. یعنی فقط تنها راه ارسال مقدار به فایل از طریق استفاده از  تابع postmessage می باشد که در فایل می بایست از طریق رویداد onmessage آن را شنود کرد. این فرایند برای دریافت در سمت جاوا اسکریپت نیز اتفاق می افتد.

این رابط تنها راهی می باشد که می توان یک اپلیکیشن را با زبان جاوا اسکریپت به صورت Multi thread اجرا کرد.

 اجرای همزمان ورکر هیچ تداخلی با اجرای عادی روند جاوا اسکریپت ندارد و همانطور که در عکس مشاهده می شود پس از اتمام فرایند ورکر ، پاسخ به صف Event Loop ارسال می شود و برای پردازش به صورت مستقل عمل می نماید.

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

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

منابع برای مطالعه بیشتر درباره ورکر ها:

۱ – Using Web Workers

۲ – Worker API



دسته بندی: مقاله

پردازش موازی یا خطی در جاوا اسکریپت ، مسئله این است!(قسمت دوم)

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

در این قسمت درباره جاوا اسکریپت مطالبی را بیان خواهم کرد.

جاوا اسکریپت یک زبان مفسری می باشد. به این معنی که کد ها در زمان اجرا به کد اجرایی سطح ماشین تبدیل و اجرا می شود.

این زبان توسط موتور های مختلفی تفسیر می شود که قدرتمند ترین آن ها موتور V8 کرومیوم گوگل می باشد. موتوری که در مرورگر های کروم به کار رفته است و همچنین پلتفرم نود جی اس نیز از این موتور استفاده کرده است.

موتور V8 گوگل  برای اجرای دستورات از روش non-blocking I/O استفاده می کند ، تمامی فعالیت ها در یک نخ کنترل می شوند .

در جاوا اسکریپت هیچ نخی وجود ندارد. امکان برنامه نویسی موازی در خود زبان تعبیه نشده است.

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

این امکان به دلیل آن است که موتور V8 خود در سطح زبان ، فرایند نخ را شبیه سازی کرده است. با این تفاوت که نام آن Event Loop  می باشد.

در این زبان صفی به نام Event Loop تعبیه شده است که دستوراتی که به I/O نیاز دارند و یا Event ها را در آن زمان بندی می نماید.

Event  ها یا رویداد ها به فرایند هایی مانند کلیک کردن ، حرک موس ، تایپ کردن و هر عملیاتی که توسط کاربر انجام شود اطلاق می شود. رویداد ها توسط پردازشگر I/O مدیریت می شوند.

دستور Ajax نیز مانند Event یک دستور I/O می باشد که در این صف قرار می گیرد. دستورات I/O همانطور که گفته شد برای اجرا به نخ دیگری ارسال می شوند که همراه خود دستور فراخوانی را حمل می کنند. هنگامی که فرایند I/O به اتمام برسد فراخوان اجرا می شود و پاسخ دستور I/O درون صف Event Loop وارد می شود تا در زمان مناسب اجرا شود.

event loop

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

به عنوان مثال در قطعه کد زیر:

در کد بالا با اینکه در تابع setTimeout گفته شده از میلی ثانیه اول در کنسول ، ۱ بنویس اما به دلیل اینکه حلقه ، زمانی را به خود اختصاص می دهد تا تمام شود ، خروجی کنسول نیز تا اتمام حلقه منتظر می ماند و بلا فاصله به خروجی نمی رود.

تابع setTimeout یک time event ایجاد می کند که به صورت مجزا درون صف Event loop وارد می شود. پس می بایست منتظر بماند تا Main Code اجرایش تمام شود که در این مورد حلقه زمانی طولانی سپری خواهد کرد.

با اینکه جاوا اسکریپت از یک نخ استفاده می کند با این حال سرعت بالای پردازش صف Event Loop باعث شده تا همان حس چند نخی را ایجاد نماید.

نوع دیگر Event  ها Timer ها هستند. توابعی مانند setTimeout  و setInterval .

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

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

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

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

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



دسته بندی: مقاله

پردازش موازی یا خطی در جاوا اسکریپت ، مسئله این است! (قسمت اول)

پردازش کامپیوتری به عملیاتی گفته می شود که توسط کامپیوتر از طریق دستوراتی که اعلان شده است ( خواه زبان های برنامه نویسی سطح بالا یا سطح ماشین ) بر روی داده های ورودی مختلف اعمال می شود تا خروجی دلخواه دریافت شود.

این گونه مجموعه عملیات ها را یک برنامه یا Program می نامیم.

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

در طی سال ها ، کامپیوتر ها دچار دگرگونی های متفاوتی شده اند. یکی از این دگرگونی ها امکان اجرای همزمان چندین برنامه بوده است. چیزی که امروزه یک امر عادی در سیستم عامل های می باشد.

البته باید گفت که اجرای همزمان چندین برنامه در یک لحظه در مدل واقعی همزمان نیست ، بلکه با سوئیچ های متوالی این توهم را برای کاربر ایجاد می کند که برنامه های در حال اجرا همزمان می باشند.

سوئیچ یا جابجا کردن (Context Switch) در سطح سیستم عامل به فرایندی گفته می شود که در آن از یک صف استفاده می شود و با جابجا کردن برنامه ها یا نخ ها (Threads) به سرعت و به صورت متوالی ، همزمانی پردازش را شبیه سازی می کنند.

این جابجایی در برنامه ها، تنها مشکل اجرای همزمان را برطرف می نماید. اما مشکل دیگر نیز وجود دارد.

درصورتی که یک برنامه نیاز داشته باشد تا چندین قسمت از آن به صورت مجزا پردازش شود تا تداخلی در روند اجرای یک دیگر نداشته باشند چطور؟

در این باره راه کار های متفاوتی وجود دارد.

دو نمونه از آن ها معرفی می کنیم..

اولین مورد نخ ها هستند . نخ ها در سطح سخت افزار یا در سطح نرم افزار قابل پیاده سازی هستند.

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

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

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

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

دومین مورد استفاده از روش non-blocking I/O یا async I/O می باشد.

کامپیوتر ها دارای دو حالت فعالیت می باشند. اول حالت عادی اجرای دستورات برنامه ها می باشد و حالت دوم اجرای دستورات I/O می باشد. درباره حالت دوم می توان گفت که دستوراتی مانند دسترسی به حافظه ، دسترسی به دستگاه های خارجی و … دستورات I/O هستند.

I/O به معنی ورودی/خروجی می باشد.

در حالت Blocking I/O هنگامی که سیستم به یک دستور I/O می رسد ، نخ متوقف می شود تا زمانی که وقفه (دستور اتمام فرایند) صادر شود و سپس نخ به ادامه فرایندش ادامه می دهد.

اما در حالت non-blocking I/O توقفی در نخ رخ نمی دهد. در این مورد پاسخ زیاد اهمیتی ندارد و تنها انجام عملیات مهم است.

در قسمت بعد درباره نحوه کارکرد جاوا اسکریپت توضیح خواهم داد…



دسته بندی: مقاله