نظرًا لأن برامج JavaScript أصبحت أكثر تعقيدًا ، فغالبًا ما تتطلب فريقًا للتطوير بالتعاون ، وتصبح Modularization للرمز والمواصفات التنظيمية في غاية الأهمية. نمط MVC هو نموذج كلاسيكي لتنظيم الكود.
(... مقدمة إلى MVC.)
(1) نموذج
يمثل النموذج طبقة البيانات ، أي مصدر البيانات الذي يتطلبه البرنامج ، وعادة ما يتم تمثيله بتنسيق JSON.
(2) عرض
تمثل العرض طبقة العرض التقديمي ، وهي واجهة المستخدم. بالنسبة لصفحات الويب ، فإن رمز HTML لصفحة الويب التي يراها المستخدمون.
(3) وحدة التحكم
تمثل وحدة التحكم طبقة التحكم ، وتستخدم لمعالجة البيانات الأصلية (النموذج) ونقلها إلى العرض.
نظرًا لأن برمجة الويب تختلف عن برمجة العميل ، استنادًا إلى MVC ، أنتج مجتمع JavaScript العديد من الأطر المتغيرة MVP (عرض الموديل) ، MVVM (عرض موديل-فيل) ، إلخ.
تتمثل ميزة الإطار في أنه ينظم التعليمات البرمجية بشكل معقول ، ويسهل العمل الجماعي والصيانة المستقبلية ، والحرمان هو أن لديها تكلفة تعليمية معينة ويقصرك على كتابتها.
التحميل العمود الفقري
نسخة الكود كما يلي:
<script src = "/javascripts/lib/jquery.js"> </script>
<script src = "/javaScripts/lib/underscore.js"> </script>
<script src = "/javaScripts/lib/backbone.js"> </script>
<script src = "/javaScripts/jst.js"> </script>
<script src = "/javaScripts/router.js"> </script>
<script src = "/javaScripts/init.js"> </script>
Backbone.view
الاستخدام الأساسي
يتم استخدام طريقة Backbone.view لتحديد فئة العرض.
نسخة الكود كما يلي:
var appview = backbone.view.extend ({
Render: function () {
$ ('main'). إلحاق ('<h1> عنوان المستوى الأول </h1>') ؛
}
}) ؛
يحدد الرمز أعلاه عرض تطبيق AppView من خلال طريقة تمديد العمود الفقري. هناك طريقة عرض داخل هذه الفئة لوضع العرض على صفحة الويب.
عند استخدامه ، تحتاج إلى إنشاء مثيل جديد لفئة العرض ، ثم استدعاء طريقة العرض من خلال المثيل ، بحيث يمكن عرض العرض على صفحة الويب.
نسخة الكود كما يلي:
var appView = new AppView () ؛
AppView.render () ؛
يقوم الرمز أعلاه بإنشاء تطبيق مثيل جديد لمجلة AppView ، ثم اتصل على AppView.render ، وسيتم عرض المحتوى المحدد على صفحة الويب.
عند إنشاء مثيل عرض جديد ، عادة ما تحتاج إلى تحديد نموذج.
نسخة الكود كما يلي:
var document = مستند جديد ({
النموذج: Doc
}) ؛
تهيئة الطريقة
يمكن أن تحدد العرض أيضًا طريقة التهيئة. عند إنشاء مثيل ، سيتم استدعاء الطريقة تلقائيًا لتهيئة المثيل.
نسخة الكود كما يلي:
var appview = backbone.view.extend ({
تهيئة: function () {
this.render () ؛
} ،
Render: function () {
$ ('main'). إلحاق ('<h1> عنوان المستوى الأول </h1>') ؛
}
}) ؛
var appView = new AppView () ؛
بعد أن يحدد الكود أعلاه طريقة التهيئة ، فإنه يلغي خطوة الاتصال يدويًا AppView.render () بعد إنشاء المثيل.
سمة el ، سمة el el
بالإضافة إلى تحديد عنصر صفحة الويب المرتبط بـ "عرض" مباشرة في طريقة العرض ، يمكنك أيضًا تحديد عنصر صفحة الويب باستخدام سمة EL للعرض.
نسخة الكود كما يلي:
var appview = backbone.view.extend ({
EL: $ ('main') ،
Render: function () {
هذا. $ el.append ('<h1> عنوان المستوى الأول </h1>') ؛
}
}) ؛
يربط الرمز أعلاه عناصر صفحة الويب مباشرة باستخدام طريقة العرض ، والتأثير هو نفسه تمامًا. في الكود أعلاه ، بالإضافة إلى سمة EL ، فهو أيضًا سمة $ EL. يمثل الأول عنصر DOM المحدد ، ويمثل الأخير كائن jQuery المقابل لعنصر DOM.
سمة tagname ، سمة اسم className
إذا لم يتم تحديد سمة EL ، فيمكن أيضًا تحديدها من خلال سمة TAGNAME وسمة ClassName.
نسخة الكود كما يلي:
var document = backbone.view.extend ({
tagname: "li" ،
ClassName: "وثيقة" ،
Render: function () {
// ...
}
}) ؛
طريقة القالب
يتم استخدام خاصية قالب العرض لتحديد قالب صفحة الويب.
نسخة الكود كما يلي:
var appview = backbone.view.extend ({
قالب: _.template ("<h3> hello <٪ = who ٪> <h3>") ،
}) ؛
في الكود أعلاه ، تقبل وظيفة القالب في مكتبة دالة السفلية سلسلة القالب كمعلمة وإرجاع وظيفة القالب المقابلة. مع وظيفة القالب هذه ، طالما تم توفير القيمة المحددة ، يمكن إنشاء رمز صفحة الويب.
نسخة الكود كما يلي:
var appview = backbone.view.extend ({
EL: $ ('#Container') ،
قالب: _.template ("<h3> hello <٪ = who ٪> <h3>") ،
تهيئة: function () {
this.render () ؛
} ،
Render: function () {
هذا. $ el.html (this.template ({who: 'world!'})) ؛
}
}) ؛
يقوم عرض الكود أعلاه باستدعاء طريقة القالب لإنشاء رمز صفحة ويب محدد.
في التطبيقات العملية ، يتم وضع القوالب عمومًا في علامات البرنامج النصي. من أجل منع المتصفحات من التحليل وفقًا لرمز JavaScript ، يتم تعيين سمة النوع على النص/القالب.
نسخة الكود كما يلي:
<script type = "text/template" data-name = "templatename">
<!-محتويات القالب تذهب هنا->
</script>
يمكنك استخدام الكود التالي لتجميع القالب.
نسخة الكود كما يلي:
window.templates = {} ؛
var $ sources = $ ('script [type = "text/template"]') ؛
$ sources.each (وظيفة (الفهرس ، el) {
var $ el = $ (el) ؛
قوالب [$ el.data ('name')] = _.template ($ el.html ()) ؛
}) ؛
سمة الأحداث
يتم استخدام سمة الأحداث لتحديد حدث العرض ووظائف المعالجة المقابلة لها.
نسخة الكود كما يلي:
var document = backbone.view.extend ({
الأحداث: {
"انقر .icon": "فتح" ،
"انقر. ولكن
"انقر. ولكن elete": "تدمير"
}
}) ؛
يحدد أحد الكود أعلاه حدث النقر لثلاثة محددات CSS ووظائف المناولة الثلاث المقابلة لها.
طريقة SISTENTO
يتم استخدام طريقة SISTENTO لتحديد وظيفة رد الاتصال لحدث معين.
نسخة الكود كما يلي:
var document = backbone.view.extend ({
تهيئة: function () {
this.listento (this.model ، "change" ، this.render) ؛
}
}) ؛
الرمز أعلاه هو حدث تغيير النموذج ، ويتم تحديد وظيفة رد الاتصال على أنها عرض.
إزالة الطريقة
يتم استخدام طريقة إزالة لإزالة العرض.
نسخة الكود كما يلي:
UpdateView: Function () {
view.remove () ؛
view.render () ؛
} ؛
عرض فرعي
يمكن استدعاء عرض الطفل في عرض الوالدين. فيما يلي طريقة للكتابة.
نسخة الكود كما يلي:
Render: function () {
هذا. $ el.html (this.template ()) ؛
this.child = New Child () ؛
this.child.appendto ($. ('. Container-placeholder'). render () ؛
}
العمود الفقري
جهاز التوجيه هو كائن توجيه يوفره العمود الفقري ، والذي يستخدم لتتوافق مع عنوان URL الذي طلبه المستخدم مع وظيفة معالجة الواجهة الخلفية واحدة تلو الأخرى.
أولاً ، يتم تعريف فئة جهاز توجيه جديد.
نسخة الكود كما يلي:
جهاز التوجيه = backbone.router.extend ({
الطرق: {
}
}) ؛
سمة الطرق
أهم شيء في العمود الفقري. كائن router هو خاصية الطرق. يتم استخدامه لتعيين طريقة معالجة المسار.
سمة الطرق هي كائن ، ويمثل كل عضو منه قاعدة معالجة المسار. الاسم الرئيسي هو قاعدة المسار والقيمة الرئيسية هي طريقة المعالجة.
إذا كان اسم المفتاح عبارة عن سلسلة فارغة ، فإنه يمثل مسار الجذر.
نسخة الكود كما يلي:
الطرق: {
'': 'phonesindex' ،
} ،
phonesindex: function () {
New PhonesIndexView ({el: 'section#main'}) ؛
}
يمثل النجمة أي مسار ، ويمكنك تعيين معلمات المسار لالتقاط قيم المسار المحددة.
نسخة الكود كما يلي:
var approuter = backbone.router.extend ({
الطرق: {
"*الإجراءات": "Defaultroute"
}
}) ؛
var app_router = approuter جديد ؛
app_router.on ('الطريق: defaultroute' ، الدالة (الإجراءات) {
console.log (الإجراءات) ؛
})
في الكود أعلاه ، سيتم التقاط المعلمات وراء مسار الجذر وسيتم تمرير وظيفة رد الاتصال.
كيفية كتابة قواعد المسار.
نسخة الكود كما يلي:
var myrouter = backbone.router.extend ({
الطرق: {
"مساعدة": "مساعدة" ،
"Search/: Query": "Search"
} ،
مساعدة: وظيفة () {
...
} ،
البحث: وظيفة (استعلام) {
...
}
}) ؛
الطرق: {
"مساعدة/: صفحة": "مساعدة" ،
"تنزيل/*مسار": "تنزيل" ،
"المجلد/: الاسم": "OpenFolder" ،
"المجلد/: الاسم-: الوضع": "OpenFolder"
}
Router.on ("المسار: مساعدة" ، وظيفة (صفحة) {
...
}) ؛
العمود الفقري
بعد إعداد جهاز التوجيه ، يمكنك بدء التطبيق. يتم استخدام كائن Backbone.history لمراقبة التغييرات في عناوين URL.
نسخة الكود كما يلي:
التطبيق = جهاز التوجيه الجديد () ؛
$ (وثيقة). ready (function () {
backbone.history.start ({pushState: true}) ؛
}) ؛
افتح طريقة PushState. إذا لم يكن التطبيق في دليل الجذر ، فأنت بحاجة إلى تحديد دليل الجذر.
نسخة الكود كما يلي:
backbone.history.start ({pushstate: true ، الجذر: "/public/search/"})
العمود الفقري
يمثل النموذج كيان كائن واحد.
نسخة الكود كما يلي:
var user = backbone.model.extend ({
الإعدادات الافتراضية: {
اسم: ''،
بريد إلكتروني: ''
}
}) ؛
var user = new user () ؛
يستخدم الكود أعلاه طريقة تمديد لإنشاء فئة مستخدم ، والتي تمثل قالب النموذج. ثم ، استخدم الأمر الجديد لإنشاء مثيل للنموذج. يتم استخدام سمة الافتراضات لتعيين السمة الافتراضية. يشير الرمز أعلاه إلى أن كائن المستخدم له اسم سمة والبريد الإلكتروني بشكل افتراضي ، وقيمها تساوي سلسلة فارغة.
عند إنشاء مثيل ، يمكنك توفير قيم محددة لكل سمة.
نسخة الكود كما يلي:
var user = مستخدم جديد ({
معرف: 1 ،
الاسم: "الاسم" ،
البريد الإلكتروني: '[email protected]'
}) ؛
يوفر الرمز أعلاه القيم المحددة لكل سمة عند إنشاء مثيل.
سمة idattribute
يجب أن تحتوي الحالات النموذجية على خاصية تعمل كمفتاح أساسي لتمييز الحالات الأخرى. يتم تعيين اسم هذه السمة بواسطة سمة IdAttribute ، ويتم تعيينها عمومًا على المعرف.
نسخة الكود كما يلي:
var music = backbone.model.extend ({
idattribute: 'id'
}) ؛
احصل على الطريقة
يتم استخدام طريقة GET لإرجاع قيمة خاصية معينة من مثيل النموذج.
نسخة الكود كما يلي:
var user = new user ({name: "name" ، العمر: 24}) ؛
var age = user.get ("Age") ؛ // 24
var name = user.get ("name") ؛ // "اسم"
تعيين الطريقة
يتم استخدام طريقة SET لتعيين قيمة خاصية معينة لمثيل النموذج.
نسخة الكود كما يلي:
var user = backbone.model.extend ({
شراء: وظيفة (newCarsName) {
this.set ({car: newCarsName}) ؛
}
}) ؛
var user = new user ({name: 'bmw' ، model: 'i8' ، type: 'car'}) ؛
user.buy ('Porsche') ؛
var car = user.get ("Car") ؛ // 'بورش'
على الطريقة
يتم استخدام الطريقة على الاستماع للتغييرات في الكائنات.
نسخة الكود كما يلي:
var user = new user ({name: 'bmw' ، model: 'i8'}) ؛
user.on ("Change: Name" ، function (model) {
var name = model.get ("name") ؛ // "بورش"
console.log ("غيرت اسم سيارتي إلى" + اسم) ؛
}) ؛
user.set ({name: 'porsche'}) ؛
// غيرت اسم سيارتي إلى بورشه
يتم استخدام الطريقة في الكود أعلاه للاستماع للأحداث ، و "التغيير: الاسم" يعني أن سمة الاسم قد تغيرت.
سمات urlroot
يتم استخدام هذه الخاصية لتحديد المسار للعمل على النموذج على جانب الخادم.
نسخة الكود كما يلي:
var user = backbone.model.extend ({
urlroot: '/user'
}) ؛
يحدد الرمز أعلاه أن المسار إلى الخادم المقابل للنموذج هو /المستخدم.
حدث جلب
يتم استخدام حدث الجلب لجلب النموذج من الخادم.
نسخة الكود كما يلي:
var user = مستخدم جديد ({id: 1}) ؛
user.fetch ({
النجاح: وظيفة (المستخدم) {
console.log (user.tojson ()) ؛
}
})
في الكود أعلاه ، يحتوي مثيل المستخدم على سمة المعرف (القيمة 1). تستخدم طريقة FETCH VERB HTTP الحصول على طلب إلى عنوان URL "/user/1" ويرجع المثيل من الخادم.
حفظ الطريقة
يتم استخدام طريقة الحفظ لإخطار الخادم لإنشاء أو تحديث النموذج.
إذا لم يحتوي مثيل النموذج على سمة معرف ، فستقوم طريقة SAVE بإنشاء المثيل باستخدام طريقة POST.
نسخة الكود كما يلي:
var user = backbone.model.extend ({
urlroot: '/user'
}) ؛
var user = new user () ؛
var userDetails = {
الاسم: "الاسم" ،
البريد الإلكتروني: '[email protected]'
} ؛
user.save (userDetails ، {
النجاح: وظيفة (المستخدم) {
console.log (user.tojson ()) ؛
}
})
يحدد الرمز أعلاه أولاً أن عنوان URL المقابل للنموذج هو /المستخدم في الفصل ، ثم قم بإنشاء مثيل جديد ، وأخيراً استدعاء طريقة حفظ. لديها معلمتان. الأول هو السمة المحددة لكائن المثيل ، والثاني هو كائن دالة رد الاتصال ، والذي يعين وظيفة رد الاتصال لحدث النجاح (حفظ بنجاح). على وجه التحديد ، ستصدر طريقة الحفظ طلبًا منشورًا لـ /user وتوفير {name: "name" ، البريد الإلكتروني: '[email protected]'} كبيانات.
إذا كان مثيل النموذج يحتوي على سمة معرف ، فسيقوم طريقة حفظ بتحديث المثيل باستخدام طريقة PUT.
نسخة الكود كما يلي:
var user = مستخدم جديد ({
معرف: 1 ،
الاسم: 'Zhang San' ،
البريد الإلكتروني: '[email protected]'
}) ؛
user.save ({name: 'li si'} ، {
النجاح: وظيفة (نموذج) {
console.log (user.tojson ()) ؛
}
}) ؛
في الرمز أعلاه ، يحتوي مثيل الكائن على سمة معرف (القيمة هي 1) ، وسيستخدم Save طريقة PUT لتقديم طلب إلى عنوان URL "/user/1" لتحديث المثيل.
تدمير الطريقة
يتم استخدام طريقة التدمير لحذف المثيل على الخادم.
نسخة الكود كما يلي:
var user = مستخدم جديد ({
معرف: 1 ،
الاسم: "الاسم" ،
البريد الإلكتروني: '[email protected]'
}) ؛
user.destroy ({
النجاح: وظيفة () {
console.log ('Dreated') ؛
}
}) ؛
ستستخدم طريقة التدمير في الكود أعلاه حذف VERB HTTP لإصدار طلب إلى عنوان URL "/user/1" وحذف مثيل النموذج المقابل.
العمود الفقري
المجموعة هي مجموعة من نفس النوع من النماذج. على سبيل المثال ، النموذج هو حيوان ، مجموعة حديقة حيوان ؛ النموذج هو شخص واحد ، والمجموعة هي شركة.
نسخة الكود كما يلي:
var song = backbone.model.extend ({}) ؛
VAR الألبوم = backbone.collection.extend ({
النموذج: أغنية
}) ؛
في الكود أعلاه ، Song Is Model ، الألبوم هو Collection ، والألبوم لديه سمة نموذج تساوي الأغنية ، لذلك يعني أن الألبوم عبارة عن مجموعة من الأغاني.
إضافة طريقة ، إزالة الطريقة
يمكن وضع مثيل النموذج مباشرة في مثيل المجموعة ، أو إضافته باستخدام طريقة إضافة.
نسخة الكود كما يلي:
var song1 = new song ({id: 1 ، name: "Song Title 1" ، Artist: "Zhang San"}) ؛
var song2 = new music ({id: 2 ، name: "Song Title 2" ، Artist: "Li Si"}) ؛
var myalbum = ألبوم جديد ([song1 ، song2]) ؛
var song3 = new music ({id: 3 ، name: "Song Title 3" ، Artist: "Zhao Wu"}) ؛
myalbum.add (song3) ؛
يتم استخدام طريقة إزالة لإزالة مثيل النموذج من مثيل المجموعة.
نسخة الكود كما يلي:
myalbum.remove (1) ؛
يوضح الرمز أعلاه أن معلمة طريقة إزالة هي سمة المعرف لمثيل النموذج.
احصل على طريقة تعيين الطريقة
يتم استخدام طريقة GET للحصول على مثيل النموذج للمعرف المحدد من المجموعة.
نسخة الكود كما يلي:
myalbum.get (2))
طريقة الجلب
يتم استخدام طريقة الجلب لجلب بيانات التجميع من الخادم.
نسخة الكود كما يلي:
أغاني var = backbone.collection ؛
songs.url = '/songs' ؛
songs.fetch () ؛
العمود الفقري
نسخة الكود كما يلي:
var obj = {} ؛
_.Extend (OBJ ، backbone.events) ؛
obj.on ("show-message" ، وظيفة (msg) {
$ ('#display'). text (msg) ؛
}) ؛
obj.trigger ("عرض العرض" ، "Hello World") ؛