الحصول على تكسير مع العمود الفقري

لطالما استفاد المطورون من أطر عمل PHP مثل CakePHP و CodeIgniter وحتى إطارات Ruby المبنية على نمط MVC. ولكن إذا فكرت في الأمر ، فلم يكن هناك الكثير من أطر عمل جافا سكريبت لمساعدتنا بنفس الطريقة.

ربما يرجع ذلك إلى أن جافا سكريبت غالبًا ما ينظر إليه من قبل المبرمجين "الحقيقيين" ، ولكن أطر جافا سكريبت كانت متخلفة دائمًا وراء القليل. العمود الفقري غير ذلك ، وكما سترى في هذه المقدمة ، فإنه يستخدم نمط MVC لفصل تعليمات JavaScript البرمجية ويساعدنا في إنشاء تطبيقات منظمة. في الواقع ، فإنه يسلم نمط MVC إلى تطوير الواجهة الأمامية.

ما هو العمود الفقري؟

Backbone هو مكتبة جافا سكريبت خفيفة الوزن من نفس الخالق CoffeeScript. ولكن لا تدع حقيقة أن المكتبة هي التي تجعلك تخلطها مع jQuery ، فالفرق الرئيسي هو عبارة عن بطولات جامعية بعيداً عن jQuery عندما يتعلق الأمر بالوظائف. لا يتعامل العمود الفقري مع عناصر DOM ، ولهذا السبب يستخدمه العديد من المطورين جنبًا إلى جنب مع jQuery؛ هيكل تنظيم العمود الفقري و jQuery التلاعب DOM.

ما هي البنية الأساسية الجيدة لبنية العرض الخاصة بتطبيقات جافا سكريبت ، ولأنها تعمل مع JSON ، فمن السهل إدخالها في أي نظام للتجهيز النهائي للواجهة الأمامية.

نمط MVC في العمود الفقري

MVC لتقف على النماذج ، وجهات النظر والمجموعات ؛ وفي العمود الفقري ، مع وجود أجهزة التوجيه أيضًا.

عارضات ازياء

في Backbone ، يمثل النموذج والكيان ، على سبيل المثال ، إذا كنا نتعامل مع المستخدمين ، فسيكون كل مستخدم نموذجًا ؛ انها مثل صف في قاعدة البيانات.

لإنشاء نموذج بسيط باستخدام Backbone ، سنكتب:

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

هذا الرمز صحيح تقنيًا ، ولكن هذا النموذج لن يحتوي على أي وظائف ، لذا نحتاج إلى إضافة شيء ما إلى هذا النموذج عندما يتم إنشاءه وإجراء ذلك ، فسنستخدم شفرة أكثر تعقيدًا:

User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain}  ')؛}، 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 سنحصل على القيم من barney ، ted و lily.

الآراء

ترتبط المشاهدات بجزء من DOM ، وهي مصممة لتكون مرتبطة بالنماذج التي هي في جوهرها بيانات التطبيق وتساعد على عرض هذه البيانات للمستخدم النهائي.

إنشاء عرض بسيط:

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

هذا هو الهيكل الأساسي لطريقة العرض. يعد tagName هو العنصر الذي سيتم استخدامه لالتفاف العرض ، ويتم تعيين الفئة باستخدام className وأخيرًا نقوم بإضافة وظيفة عرض ، على الرغم من أن الدالة كانت فارغة في هذه الحالة الأخيرة. إنها وظيفة العرض التي نستخدمها للإضافة إلى المرحلة ، مثل:

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

يشير عنصر el في وظيفة render إلى الغلاف الذي قمنا بإنشائه واستخدام وظيفة innerHTML التي وضعناها عمر المستخدم داخل div.

لم يستخدم هذا المثال أي نظام للتخطيط ، ولكن إذا كنت ترغب في ذلك ، يمكنك الاستفادة من Underscore.js التي تأتي مع Backbone.

يمكننا أيضًا الاستماع إلى الأحداث من خلال إرفاق مستمع حدث لعرضنا ، وفي هذا المثال ، سننشئ مستمعًا بسيطًا للنقر على div (يتم إرسال هذا الرمز مباشرة بعد وظيفة العرض):

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

الموجهات

يتم استخدام أجهزة توجيه العمود الفقري لتوجيه عناوين URL في التطبيق عند استخدام علامات التصنيف (#). لتحديد جهاز توجيه ، يجب دائمًا إضافة مسار واحد على الأقل ووظيفة على الأقل ستعمل عند الوصول إلى عنوان 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 لمراقبة علامات التجزئة بحيث تكون حالات مختلفة للموقع إشارة مرجعية ويمكن التنقل مع المستعرض.

استنتاج

تتناول هذه المقالة أساسيات الأساسي فقط ، والتي يمكن استخدامها لإنشاء تطبيقات منظمة في JavaScript. أنصحك بمراجعة نظام وضع القوالب لاستخدامه بالاقتران مع Backbone لمعرفة الإمكانات الكاملة لهذه المكتبة. آمل أن تكون هذه المقدمات القصيرة قد بينت مدى فائدة MVC في الواجهة الأمامية.

هل قمت ببناء تطبيقات مع Backbone؟ ما أنواع التطبيقات التي ترغب في بنائها؟ اسمحوا لنا أن نعرف في التعليقات.

صورة مميزة / صورة مصغرة ، صورة السقالات عبر Shutterstock.