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

computed observables در Knockou

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

آموزش Knockoutjs- computed observables (observable های محاسباتی)

اگر یک observable برای خاصیت firstName و یکی برای lastName داشته باشید و بخواهید fullName (جمع مقدار دو property) را نمایش دهید، چه کار باید انجام دهید؟ برای این منظور کافی است از computed observable ها استفاده نمایید –computed observable ها یکسری توابع وابسته به یک یا چند observable دیگر هستند و هر زمان که یکی از این وابستگی ها (observable ها) تغییر کند، متناسب با آن تغییر به صورت خودکار بروز رسانی می شوند. برای مثال، با در نظر گرفتن کلاس view model زیر:

       function AppViewModel() {
           this.firstName = ko.observable('Bob');
           this.lastName = ko.observable('Smith');
       }

می توانید با افزودن یک computed observable، نام کامل فرد را به اصطلاح محاسبه کرده و نتیجه ی آن را در خروجی بر گردانید:

       function AppViewModel() {
           // ... leave firstName and lastName unchanged ...
           this.fullName = ko.computed(function () {
               return this.firstName() + " " + this.lastName();
          }, this);
       }

حال می توان المان های UI را به آن bind (متصل) کرد:

The name is 

از همه جالب توجه تر اینکه هرگاه firstName یا lastName تغییر کند، به صورت خودکار المان های UI هم بروز رسانی می شوند (تابع محاسبه کننده به ازای هر باری که یکی از وابستگی های آن تغییر کنند، فراخوانی می شود و هر مقداری را که در خروجی برگردانده می شود به المان های observer همچون عناصر UI یا دیگر computed observable ها پاس می دهد).

ایجاد computed observable های زنجیره ای

البته در صورت تمایل می توانید زنجیره ای کامل از computed observable ها ایجاد کنید. برای مثال می توانید:

· یک observable به نام items داشته باشید که نمایانگر (و دربردارنده ی) تعدادی آیتم باشد

· Observable دیگری به نام selectedIndexes داشته باشید که مقدار اندیس آیتم هایی که توسط کاربر انتخاب شده را در خود نگه می دارد

· یک computed observable به نام selectedItems داشته باشید که آرایه ای از item object های متناظر با اندیس آیتم های انتخابی را در خروجی برگرداند

· و یک computed observable دیگر داشته باشید که بسته به اینکه selectedItems (خروجی observable محاسباتی) دارای property یا خاصیت معینی (همچون جدید یا ذخیره نشده) باشد، مقدار بولی true یا false را برگرداند. بر اساس مقدار خروجی این observable محاسباتی، یک المان UI همچون دکمه فعال یا غیر فعال می شود.

· هرگونه تغییر در items یا selectedIndexes به صورت خودکار در سلسله یا زنجیره ی observable ها منعکس شده و به تبع سبب بروز رسانی و ویرایش المان های UI متصل به آن ها می شود.

مدیریت this

دومین پارامتر ارسالی به ko.computed (منظور مثال ذکر شده در بخش computed observable می باشد)، مقدار this را به هنگام محاسبه ی computed observable، تعریف می کند. بدون ارسال این پارامتر به تابع مزبور، امکان اشاره به this.firstName() یا this.lastName() وجود نداشت. برنامه نویسان خبره با زبان JavaScript با این حقیقت آشنا هستند، اما برای یک تازه وارد در زمینه ی برنامه نویسی سمت کلاینت ممکن است این امر کمی عجیب به نظر برسد. (زبان هایی نظیر C# و Java از برنامه نویس انتظار ندارند برای this مقداری تعیین کند، اما JavaScript درست عکس این را از شما می خواهد. چرا که توابع آن به صورت پیش فرض بخشی از شی خاص نیستند.)

یک روش پرطرفردار که همه چیز را آسان می سازد!

یک روش (convention) پرطرفدار وجود دارد که نیاز به دنبال کردن و رصد this را کلا از میان برمی دارد: در صورتی که تابع سازنده ی (constructor) viewmodel ارجاعی (reference) به this را در متغیر دیگری به نام self کپی کند، آنگاه شما می توانید متغیر self را (بجای this) در سراسر viewmodel بکار ببرید. همچنین برای ارجاع به سایر property ها لزومی ندارد آن (متغیر self) را مجددا و جور دیگری تعریف نمایید:

       function AppViewModel() {
           var self = this;
           self.firstName = ko.observable('Bob');
           self.lastName = ko.observable('Smith');
           self.fullName = ko.computed(function () {
               return self.firstName() + " " + self.lastName();
           });
       }

از آنجایی که متغیر self در closure ( تابع بستار) متد مورد نظر ضبط (capture) شده، این متغیر به صورت یک شکل در تمامی توابع تودرتو (همچون توابع محاسبه کننده ی computed observable ها) در دسترس می باشد. این روش در بخش های مختلف به خصوص در کار با event handler ها کارایی هر چه بیشتر خود را به نمایش می گذارد.

تعریف computed observable به صورت pure (با کلیدواژه ی pureComputed)

اگر computed observable ای که تعریف کرده اید صرفا مقداری را بر اساس observable dependency هایی محاسبه کرده و در خروجی برمی گرداند، در آن صورت بهتر است computed observable را بجای ko.computed، به صورت ko.pureComputed تعریف کنید. مثال:

       this.fullName = ko.pureComputed(function () {
           return this.firstName() + " " + this.lastName();
       }, this);

از آنجایی که این computed observable به عنوان pure تعریف شده (بدین معنی که evaluator یا تابع محسابه گر آن به صورت مسقیم در سایر اشیا یا state آن ها تغییر وارد نمی کند)، KO می تواند محاسبه ی مجدد و استفاده ی آن (computed observable) از حافظه را بهینه تر مدیریت کند.

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

Pure computed observable مفهوم و قابلیتی است که در ویرایش 3.2.0 کتابخانه ی KO معرفی شد.

چگونه می توان Computed observable ها را مجبور کرد همیشه subscriber های خود را از تغییرات با خبر سازند؟

هنگامی که یک computed observable مقداری از نوع اولیه (همچون number، string، Boolean یا null) را به عنوان خروجی برمی گرداند، وابستگی های (dependency) آن observable اغلب تنها زمانی از تغییرات با خبر می شوند که مقدار به مقدار جدیدی تغییر کند. می توان با استفاده از extender درون ساخته ی notify، اطمینان حاصل کرد که subscriber های آن computed observable به مجرد بروز رسانی، از تغییر با خبر می شوند (حتی اگر مقدار همان مقدار قبلی باشد). برای نیل به این هدف کافی است extender نام برده را مانند زیر به کد اضافه نمایید:

       myViewModel.fullName = ko.pureComputed(function () {
           return myViewModel.firstName() + " " + myViewModel.lastName();
       }).extend({ notify: 'always' });

به تاخیرانداختن و / یا محدود کردن اطلاع رسانی از تغییرات (change notification)

به طور معمول computed observable ها به مجرد تغییر در dependency های خود، subscriber ها (المان هایی که به تغییرات گوش می دهند) را از آن تغییرات مطلع می سازند. اما در صورتی یک computed observable وابستگی های متعددی داشته یا مجبور به بروز رسانی های سنگین باشد، می توانید با محدود کردن یا به تاخیر انداختن بروز رسانی و اطلاع رسانی از تغییرات computed observable ها (notification)، کارایی و سرعت اپلیکیشن را افزایش دهید. برای این منظور کافی است rateLimit را به عنوان یک extender مانند زیر به کد اضافه نمایید:

   // Ensure updates no more than once per 50-millisecond period
       myViewModel.fullName.extend({ rateLimit: 50 });  

چگونه می توان پی برد که property از نوع computed observable هست؟

در برخی موارد بد نیست با کدنویسی بررسی کنید آیا property ای که با آن کار می کنید، یک computed observable هست یا خیر. KO با ارائه ی یک تابع سودمند به نام ko.isComputed، این امکان را به راحتی برای شما فراهم می آورد. برای مثال شاید لازم باشد computed observable ها را در برنامه ی خود یافته و از ارسال آن ها همراه با دیگر اطلاعات به سرور جلوگیری کنید:

       for (var prop in myObject) {
           if (myObject.hasOwnProperty(prop) &&!ko.isComputed(myObject[prop])) {
               result[prop] = myObject[prop];
           }
       }

علاوه بر متد ko.isComputed، کتابخانه ی KO توابعی دیگری را با کاربرد مشابه در اختیار برنامه نویس قرار می دهد که با observable ها و computed observable ها کار می کنند:

· ko.isObservable –در صورتی که property مورد نظر observable، observableArray یا computed observable باشد، مقدار بولی true را برمی گرداند.

· ko.isWritableObservable - در صورتی که property از نوع observable ، observableArray یا writable computed observable (که تحت عنوان ko.isWriteableObservable نیز شناخته می شود) باشد، مقدار بولی true را برمی گرداند.

زمانی که computed observable تنها در UI بکار می رود

چنانچه لازم است name full ترکیبی (مقدار ترکیبی firstName و lastName) را فقط در UI خود لحاظ کنید، آنگاه می توانید آن را به صورت زیر تعریف نمایید:

   function AppViewModel() {
           // ... leave firstName and lastName unchanged ...
           this.fullName = function () {
               return this.firstName() + " " + this.lastName();
           };
       }

حال binding (متصل نمودن مقدار دو خاصیت firstName و lastName در قالب observable محاسباتی fullName به المان UI) به المان های UI به شکل فراخوانی یک متد در می آید:

   The name is 

KO به صورت خودکار یک computed observable (در داخل) ایجاد کرده و به وسیله ی آن observable هایی که عبارت جاری به آن ها وابستگی دارد را (شناسایی و) رصد می کند. سپس بعده ها که المان مرتبط حذف شد، به صورت خودکار آن (computed observable) را دور می اندازد (یا به اصطلاح منابع مورد استفاده ی آن را آزاد می سازد).

  • 621
  •    4
  • تاریخ ارسال :   1395/05/20

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

ارسال

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

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