آموزش فریمورک Dojo

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

Dojo Framework

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

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

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

شما می توانید از لینک زیر کتابخانه dojo  را دانلود کنید:

http://download.dojotoolkit.org

بعد از دانلود تمام کتابخانه باید فایلی به نام dojo.js در پوشه dojo در برنامه بار گزاری شود تا شما بتوانید در فایل های جاوا اسکریپت از این کتابخانه استفاده کنید و متد های مورد نظر خودتان را به کار ببرید.

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

ما در ابتدای کتابخانه ها و متد های موجود در آنها را شرح می دهیم:

Dojo/dom این کتابخانه برای دسترسی به ابچکت های موجود در صفحه مورد استفاده قرار می گیرد و سه متد دارد که در زیر به آنها اشاره شده است.

Dom.byId():

require(["dojo/dom"], function(dom){

    var node = dom.byId("someNode");

    var other = dom.byId(node);

    console.log(node == other);

});

// output

>>> true

 

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

در تکه کد زیر از متد set در کتابخانه dom-style برای اعمال ویژگی های عناصر استفاده کرده ایم، پارامتر اول این متد که باید عنصر مورد نظر را انتخاب کنیم به دو روش میباشد یکی با استفاده از متد byid و روش دوم فقط id عنصر را وارد کرده ایم.

 

require(["dojo/dom", "dojo/dom-style"], function(dom, domStyle){

  domStyle.set(dom.byId("foo"), "opacity", 0.5);

  // is identical to:

  domStyle.set("foo", "opacity", 0.5);

});

 

 

خوب دوستان  در زیر با استفاده از متد set و متد های کتابخانه _base/fx  مثال آورده ایم:

Script:

require(["dojo/dom", "dojo/on", "dojo/_base/fx", "dojo/domReady!"],

function(dom, on, baseFx){

  var node = dom.byId("findMe");

  on(dom.byId("buttonOne"), "click", function(){

    baseFx.fadeOut({ node: node, duration: 300 }).play();

  });

  on(dom.byId("buttonTwo"), "click", function(){

    baseFx.fadeIn({ node: node, duration: 300 }).play();

  })

});

HTML:

<button id="buttonOne">Hide Me!</button> <button id="buttonTwo">Show Me!</button>

<div id="findMe">Hiya!</div>

CSS:

#findMe {

  width: 200px;

  height: 100px;

  background: #f3f3f3;

  border: 1px dotted #ccc;

  color: #444;

  padding: 10px;

  margin: 10px;

}