آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Knockout

دوره های پیشنهادی

مقدمه

Knockout یک کتابخانه ی JavaScript است که به شما امکان می دهد صفحات وبی بنویسید که از لحاظ ظاهر و ویرایش اطلاعات واکنشگرا (responsive) و غنی هستند و دارای data model زیرساختی کارامد می باشند. هر زمان که در UIاپلیکیشن های تحت وب خود بخش هایی دارید که به صورت داینامیک بروز آوری می شوند (برای مثال بر اساس عملیات کاربر یا به هنگام تغییر در منبع داده ی خارجی)، می توانید به کمک کتابخانه ی KO آن را به روش آسان تر و با قابلیت نگهداشت بهتر (maintainable) پیاده سازی کنید. در نهایت می توان گفت که knockout.js یک کتابخانه برای زبان اسکریپت نویسی سمت کلاینت JavaScript است که الگوی توسعه ی MVVM و تکنیک data binding را در برنامه های تحت وب پیاده سازی می کند.

مزایای اصلی و برجسته ی این کتابخانه:

1. Dependency tracking (قابلیت بسیار کاربردی ردیابی خودکار تغییرات و بروز رسانی بخش های مختلف UI)- هر گاه که data model تغییر می کند، این کتابخانه متناسب با آن به صورت خودکار بخش های مربوطه ی UI اپلیکیشن را بروز آوری می کند. به عبارت دیگر امکان بروز رسانی اتوماتیک المان ها و قسمت های مختلف رابط کاربری بر اساس تغییرات اعمال شده در data-model.

2. Declarative binding –روش آسانی برای اتصال بخش های مختلف از UI به data model می باشد که شما را قادر می سازد با تعریف binding context های تودرتو، رابط های کاربری پیچیده بسازید.

3. Trivially extensible (قابلیت توسعه) –می توانید رفتارهای دلخواه خود را در قالب declarative binding تعریف کرده و در قسمت های مختلف از آن مجددا استفاده نمایید.

مزایای جانبی:

· یک کتابخانه ی خالص JavaScript است (به صورت کامل با توابع جاوا اسکریپت پیاده سازی شده) –با تمامی تکنولوژی های سمت سرور یا کلاینت سازگار می باشد.

· می تواند به آسانی و بدون نیاز به اعمال تغییرات اساسی در معماری پروژه، بر روی اپلیکیشن جاری (که در حال توسعه هستند یا مراحلی از توسعه را پشت سر گذاشته اند) سوار شده و در آن بکار گرفته شود.

· بسیار فشرده و کم حجم بودن آن –حدود 13 کیلوبایت پس از gzip و فشرده سازی.

· سازگاری با تمامی مرورگر های مطرح (IE 6+, Firefox 2+, Chrome, Safari, Edge, others).

· مجموعه تست هایی که به سبک BDD نوشته شده (Specification هایی توسعه داده شده به روش BDD) –بدین معنی که قابلیت های آن به راحتی بر روی مرورگرها و محیط ها (platform) جدید قابل بررسی و تصحیح می باشد.

توسعه دهندگان آشنا با چارچوب نرم افزاری تحت وب Ruby on Rails، ASP.NET MVC یا دیگر تکنولوژی های MV* ممکن است به الگوی MVVM به چشم یک فرم بلادرنگ (real-time) از MVC با (ساختار نگارشی اعلانی) syntax declarative نگاه کنند (برنامه‌نویسی اعلانی یک پارادایم برنامه‌نویسی است که در آن منطق و هدف محاسبات بدون شرح چگونگی انجام آنها بیان می‌شود. در این پارادایم تلاش می‌شود که با توصیف عملیات مورد نیاز بجای توضیح چگونگی انجام عملیات، اثر جانبی برنامه‌ها را کاهش و یا به کل ازمیان برداشت که از لحاظ اولویت‌های عملیاتی در تناقض کامل با روش برنامه‌نویسی دستوری/ imperative می‌باشد). به عبارت دیگر می توان به کتابخانه ی KO به چشم یک روش آسان جهت ساخت UI هایی برای ویرایش داده های JSON و غیره ... نگاه کرد.

آیا KO برای جایگزینی یا رقابت با jQuery (یا دیگر کتابخانه ها نظیر Prototype) عرضه شده یا آن ها را تکمیل می کند؟

jQuery بی شک پرطرفدارترین کتابخانه ی JavaScript است و جایگزین بی نظیری برای DOM API ناسازگار و سنگین که در گذشته استفاده می شد، می باشد. jQuery در واقع یک روش سطح پایین برای ویرایش یا اداره ی المان ها و event handler ها در صفحه ی وب محسوب می شود. اما بدین معنی نیست که دیگر نیازی به KO احساس نمی شود. در حقیقت KO به رفع مشکل دیگری می پردازد.

برای این این منظور مثال ساده ای را در نظر بگیرید: فرض کنید می خواهید لیستی از آیتم ها را نشان دهید و در این میان تعداد آیتم های موجود در لیست را مشخص کنید و همچنین یک دکمه ی Add را تنها زمانی که تعداد آیتم ها از 5 کمتر بود فعال ساخته و به پروژه اضافه کنید. در jQuery مفهومی به نام underlying data model وجود ندارد. بنابراین برای بدست آوردن تعداد آیتم ها، لازم است آن ها را از تعداد TR در یک جدول حدس بزنید یا تعداد DIV ها با یک کلاس معین CSS بدست بیاورید. شاید تعداد آیتم ها در یک المان SPAN نمایش داده شده و شما بایستی به خاطر داشته باشید متن این المان را هر گاه که کاربر آیتم جدیدی اضافه می کند، بروز آوری کنید. همچنین به یاد داشته باشید هر زمان که تعداد TR ها برابر 5 شد، دکمه ی ADD را غیرفعال نمایید. علاوه بر آن ممکن است لازم باشد بعده ها یک دکمه ی DELETE پیاده سازی کنید و برای این منظور مجبور باشید هرگاه دکمه ی مزبور کلیک شد، بررسی کنید کدام یک از المان های DOM را می بایست تغییر دهید.

Knockout از چه نظر متفاوت است؟

کار با KO آسان تر است. می توانید بدون ترس از ورود ناسازگاری و تناقضات در پروژه، آن را پیچیده تر و بزرگتر نمایید. کافی است آیتم های خود را در قالب یک آرایه ی ساده ی JavaScript ارائه نمایید، و سپس به کمک یک حلقه ی foreach، binding انجام داده و آرایه ی ورودی را به یک TABLE یا مجموعه ای از المان های DIV تبدیل کنید. هر زمان که آرایه تغییر می کند، UI نیز برای منعکس کردن تغییرات جدید خود به خود ویرایش می شود (لازم نیست نگران باشید چگونه و کجا TR های جدید را تزریق نمایید). بقیه ی UI کاملا هماهنگ باقی می ماند. برای مثال، می توانید یک المان SPAN را (به صورت declarative) bind کنید تا تعداد آیتم ها را نمایش دهد (در واقع با استفاده از KO می توانید تعداد آیتم های موجود در یک آرایه را به یک عنصر مشخص bind کنید به گونه ای که با هر تغییر در این مقدار، عنصر نیز تغییر کند):

There are items

لازم نیست کدی بنویسید که آن را بروز رسانی کند؛ همراه با تغییر در آرایه ی myItems، المان نیز خود به خود تغییر می کند. به همین ترتیب، برای اینکه دکمه ی Add باتوجه به تعداد آیتم ها فعال یا غیرفعال شود، کافی است کد زیر را بنویسید:

بعده ها که از شما خواسته می شود قابلیت Delete را پیاده سازی کنید، دیگری لزومی ندارد بفهمید کدام یک از بخش های UI باید با آن تعامل داشته باشند؛ بلکه کافی است data model زیرساختی مربوطه را تغییر دهید.

در خلاصه باید گفت که KO با jQuery رقابت نمی کند و به هیچ وجه جایگزینی برای آن یا هر DOM API ی سطح پایین مشابهی محسوب نمی شود. این کتابخانه صرفا روشی مکمل و سطح بالا برای اتصال data model به UI فراهم می کند. KO به خودی خود وابسته به jQuery نیست ولی می توان از آن همراه با کتابخانه ی مذکور استفاده کرد و این امر به خصوص اگر بخواهید افکت های animated transition پیاده سازی کنید، می تواند کمک شایانی به شما می کند.

  • 826
  •    4
  • تاریخ ارسال :   1395/05/19

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .