سال‌هاست که توسعه‌دهندگان از فریمورک‌های PHP مانند CakePHP، CodeIgniter و حتی استفاده می‌کنند Ruby بر اساس چارچوب ها روی الگوی MVC اما اگر در مورد آن فکر کنید، چارچوب های جاوا اسکریپت زیادی وجود نداشته است که به ما کمک کند.

شاید به این دلیل است که جاوا اسکریپت اغلب به پایین نگاه می شود روی توسط برنامه نویسان واقعی، اما چارچوب های جاوا اسکریپت همیشه کمی عقب مانده است. ستون فقرات آن را تغییر داد، و همانطور که در این مقدمه خواهید دید، از الگوی MVC برای جداسازی کد جاوا اسکریپت استفاده می کند و به ما در ایجاد برنامه های ساخت یافته کمک می کند. در واقع، الگوی MVC را به توسعه front-end ارائه می دهد.

ستون فقرات چیست؟

Backbone یک کتابخانه سبک وزن جاوا اسکریپت از همان سازنده CoffeeScript است. اما اجازه ندهید این واقعیت که یک کتابخانه است باعث شود آن را با jQuery اشتباه بگیرید. Backbone عناصر DOM را کنترل نمی کند، به همین دلیل است که بسیاری از توسعه دهندگان از آن دست در دست جی کوئری استفاده می کنند. ساختار سازماندهی ستون فقرات و jQuery دستکاری DOM.

کاری که Backbone واقعاً به خوبی انجام می دهد، ساختار تأمین برنامه های جاوا اسکریپت شما است، و از آنجایی که با JSON کار می کند، وارد کردن آن در تقریباً هر سیستم قالب جلویی ساده است.

الگوی MVC در Backbone

MVC مخفف Models, Views و Collections است. و در Backbone، با روترها نیز داشته باشید.

مدل ها

در Backbone یک مدل نشان دهنده و موجودیت است، به عنوان مثال، اگر با کاربران سروکار داشته باشیم، هر کاربر یک مدل خواهد بود. مانند یک ردیف در یک پایگاه داده است.

برای ایجاد یک مدل ساده با استفاده از Backbone باید تایپ کنیم:

var user = Backbone.Model.extend({});

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

User = Backbone.Model.extend({
 initialize: function(){
 alert('Welcome to WebdesignerDepot');
 },
 defaults: {
 name: 'John Doe',
 age:30,
 }
});
var user = new User;

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

var dave = new User({name:'Dave Smith', age:25});

برای بازیابی یک ویژگی از یک نمونه خاص، از این موارد استفاده می کنیم:

var name = dave.get('name');

و برای تغییر یک ویژگی از این موارد استفاده می کنیم:

dave.set({age:31});

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

مجموعه ها

یادته گفتم یه مدل مثل کاربره؟ خوب، به دنبال آن قیاس، یک مجموعه تمام کاربرانی است که ما داریم. مجموعه‌ها در اصل مجموعه‌ای از مدل‌ها هستند و از آنجایی که ما قبلاً مدل کاربر خود را داریم، مجموعه‌ای را از آنجا می‌سازیم:

var Users = Backbone.Collection.extend({
 model: User
});

در حال حاضر این مجموعه خالی است، اما ایجاد چند کاربر و افزودن آنها به مجموعه ساده است:

var barney = new User({ name: 'Barney Stinson', age: 30});
var ted = new User({ name: 'Ted Mosby', age:32});
var lily = new User({ name: 'Lily Aldrin', age: 29});

var himym = new Users((barney, ted, lily));

حالا اگر ما console.log himym.models ما مقادیر را از بارنی، تد و لیلی دریافت خواهیم کرد.

بازدیدها

نماها با بخشی از DOM مرتبط هستند، آنها به گونه ای طراحی شده اند که به مدل هایی متصل شوند که اساساً داده های برنامه هستند و در خدمت ارائه این داده ها به کاربر نهایی هستند.

ایجاد یک نمای ساده است:

UserView = Backbone.View.extend({
 tagName: 'div',
 className: 'user',
 render: function(){}
});

این ساختار اساسی یک نما است. TagName عنصری است که برای بسته بندی view استفاده می شود، کلاس با استفاده از className تنظیم می شود و در آخر ما یک تابع render اضافه می کنیم، اگرچه در این مورد آخر تابع خالی بود. این تابع رندر است که برای اضافه کردن به مرحله استفاده می کنیم، مانند:

UserView = Backbone.View.extend({
 tagName: 'div',
 className: 'user',
 render: function(){
 this.el.innerHTML = this.model.get('age');
 }
});

عنصر el در تابع رندر به wrapperی اشاره دارد که ما ایجاد کردیم و با استفاده از تابع innerHTML سن کاربر را در داخل div قرار دادیم.

این مثال از هیچ سیستم قالبی استفاده نکرده است، اما اگر بخواهید می توانید از Underscore.js که با Backbone ارائه می شود استفاده کنید.

همچنین می‌توانیم با پیوست کردن یک رویداد شنونده به نمای خود به رویدادها گوش دهیم و در این مثال یک شنونده کلیکی ساده برای div خود ایجاد می‌کنیم (این کد بلافاصله بعد از تابع render ما می‌رود):

events:{
 'click.user': 'divClicked'
},
divClicked: function(event){
 alert('You clicked the div');
}

روترها

مسیریاب‌های ستون فقرات برای مسیریابی آدرس‌های اینترنتی در برنامه هنگام استفاده از هشتگ (#) استفاده می‌شوند. برای تعریف یک روتر، همیشه باید حداقل یک مسیر و حداقل یک تابع اضافه کنید که با رسیدن به URL مورد نظر اجرا شود، مانند:

var appRouter = Backbone.Router.extend({
 routes:{
 'user': 'userRoute'
 },
 userRoute: function() {
 // the code to run when http://example.com/#user
 }
});
Backbone.history.start();

این یک روتر بسیار ساده است که با رسیدن به /#user hash یک عمل را انجام می دهد. فراخوانی متد Backbone.history.start() از Backbone می‌خواهد تا هشتگ‌ها را کنترل کند تا حالت‌های مختلف سایت قابل نشانک‌گذاری باشد و بتوان با مرورگر پیمایش کرد.

نتیجه

این مقاله فقط اصول اولیه Backbone را پوشش می‌دهد که می‌توان از آن برای ساخت برنامه‌های ساخت یافته در جاوا اسکریپت استفاده کرد. من به شما توصیه می کنم برای استفاده در ارتباط با Backbone سیستم قالب بندی را بررسی کنید تا پتانسیل کامل این کتابخانه را ببینید. امیدوارم که این معرفی کوتاه به شما نشان داده باشد که MVC چقدر می تواند مفید باشد روی قسمت جلویی

آیا با Backbone اپلیکیشن ساخته اید؟ چه نوع برنامه ای را می خواهید بسازید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر داربست از طریق Shutterstock.