حدد المكتبة الصحيحة
من الصعب جدًا إنشاء تطبيق JS بدون أدوات جيدة. JQuery هي مجرد مكتبة لتشغيل DOM ولا توفر أي أساس لإنشاء تطبيق. هذا هو السبب في أننا نريد مكتبة خاصة مشابهة لـ CANJs.
CANJS هي مكتبة MVC خفيفة الوزن توفر الأدوات التي تحتاجها لإنشاء تطبيق JS.
CANJS هي مكتبة MVC خفيفة الوزن توفر الأدوات التي تحتاجها لإنشاء تطبيق JS. يوفر إطارًا أساسيًا مع وضع MVC (عرض النموذج-View-Control) ، وربط القالب الديناميكي ، ودعم المسار وأمن الذاكرة. كما يدعم jQuery و Zepto و Mootools و Yui و Dojo ولديه امتدادات غنية ومكونات إضافية.
الجزء الأول سوف تتعلم:
قم بإنشاء طبقات التحكم والعرض (قوالب واجهة المستخدم) لعرض جهات الاتصال
استخدم طبقة النموذج لتمثيل البيانات
استخدم مكونات التركيبات لمحاكاة Ajax لإرجاع البيانات
يجب أن تكون متحمسًا! لنبدأ الترميز.
قم بإنشاء المجلدات الخاصة بك و HTML
يمكنك أولاً إنشاء مجلد لتطبيقك ، ثم إنشاء 4 مجلدات فرعية في الدليل: CSS ، JS ، Views و IMG. على النحو التالي:
contacts_manager
CSS
JS
وجهات النظر
IMG
احفظ الكود التالي كـ index.html:
نسخة الكود كما يلي:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> مدير جهات الاتصال CANJS </title>
<link Rel = "STYLESHEET" href = "css/bootstrap.min.css">
<link rel = "STYLESHEET" href = "css/contacts.css">
</head>
<body>
<viv>
<viv>
<viv>
<h1> مدير جهات الاتصال </h1>
</div>
</div>
<viv>
<viv>
<viv>
<nav id = "filter"> </nav>
</div>
</div>
<viv>
<div id = "create"> </viv>
<div id = "جهات الاتصال"> </div>
</div>
</div>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script>
<script src = "js/can.jquery.min.js"> </script>
<script src = "js/can.fixture.js"> </script>
<script src = "js/contacts.js"> </script>
</body>
</html>
في الجزء السفلي من الصفحة ، تقوم بتحميل JS المطلوبة (بما في ذلك التطبيق الخاص بك: contacts.js).
يمكن تنزيل CSS وملفات الصور المستخدمة في البرنامج التعليمي.
استخدم العرض لإنشاء واجهة المستخدم الخاصة بك
يتم استخدام العرض لتقديم قالب واجهة المستخدم في تطبيقك. CANJS يدعم مجموعة متنوعة من محركات القالب. تستخدم هذه المقالة EJS ، والتي تتضمن ودعم الربط الديناميكي.
تتشابه علامات قوالب EJS إلى حد كبير مع HTML والدعم الذي يحتوي على رمز JS. العلامات الثلاث شائعة الاستخدام هي كما يلي:
<٪ رمز ٪> تنفيذ JS
<٪ = code ٪> تنفيذ JS وكتابة نتائج غير مسبوقة إلى HTML في الموقع الحالي
<٪ == CODE ٪> قم بتنفيذ JS واكتب النتيجة التي هربت إلى HTML في الموقع الحالي (للتصورات الفرعية).
يمكن تحميل القالب من ملف أو علامة نصية ، ويتم تحميل هذا البرنامج التعليمي من ملف EJS.
إظهار جهات الاتصال
لإنشاء جهة اتصال ، يجب عليك إنشاء قالب EJS أولاً وحفظ الكود التالي كاتصالات.
نسخة الكود كما يلي:
<ul>
<٪ قائمة (جهات الاتصال ، الوظيفة (الاتصال) {٪>
<li <٪ = (el)-> el.data ('contact' ، contact) ٪ >>
<٪ == can.view.render ('Views/ContactView.ejs' ، {
الاتصال: الاتصال ، الفئات: الفئات
}) ٪>
</li>
<٪}) ٪>
</ul>
ستقوم Contactlists.ejs بتقديم قائمة جهات اتصال. دعونا نحلل هذا القالب:
نسخة الكود كما يلي:
<٪ قائمة (جهات الاتصال ، الوظيفة (الاتصال) {٪>
إذا تم استخدام طريقة رد الاتصال في طريقة القائمة () بالاقتران مع القائمة مع المراقب ، فسيتم تسميتها بشكل متكرر باستخدام الربط الديناميكي بمجرد تغيير بيانات القائمة.
نسخة الكود كما يلي:
<li <٪ = (el)-> el.data ('contact' ، contact) ٪ >>
يقوم الرمز أعلاه بإنشاء <li> مع بيانات الاتصال من خلال طريقة رد الاتصال بالعنصر. بعد تنفيذ الطريقة بعد تنفيذ السهم ، يتم ضبط بيانات الكائن EL على العنصر المقابل.
نسخة الكود كما يلي:
<٪ == can.view.render ('Views/ContactView.ejs' ، {
الاتصال: الاتصال ، الفئات: الفئات
}) ٪>
يقوم الرمز أعلاه بإعداد contactView.ejs sub-template إلى شخص اتصال. Can.view.render () إرجاع HTML مع القالب والبيانات كمعلمات.
تقديم جهة اتصال واحدة
تعتبر التزحلق الفرعيون وسيلة جيدة لتنظيم وجهات النظر في كتل يمكن التحكم فيها. كما أنه يجعل القوالب الخاصة بك بسيطة وسهلة إعادة استخدامها. سيتم استخدام هذا القالب لاحقًا في البرنامج التعليمي لإنشاء جهة اتصال ، وحفظ الكود التالي مثل ContactView.ejs وأدخل مجلد المشاهدات:
نسخة الكود كما يلي:
<a href = "javaScript: //"> <i> </i> </a>
<Porm>
<viv>
<viv>
<img src = "img/contact.png">
</div>
<viv>
<type type = "text" name = "name" placeholder = "add name"
<٪ = contact.attr ('name')؟ "value = '" + contact.name + "'":
<تحديد الاسم = "الفئة">
<٪ $. EACH (الفئات ، الوظيفة (i ، الفئة) {٪>
<Option Value = "<٪ = category.data ٪>" <٪ = contact.category === category.data؟ "محدد": "" ٪ >>
<٪ = category.name ٪>
</point>
<٪}) ٪>
</select>
</div>
<viv>
<sable> العنوان </label>
<type type = "text" name = "address"
<٪ = contact.attr ('العنوان')؟ "value =" " + contact.address +" "":
<label> الهاتف </label>
<type type = "text" name = "phone"
<٪ = contact.attr ('الهاتف')؟ "value =" " + contact.phone +" ":" class = 'fmare' "٪ >>
<label> البريد الإلكتروني </label>
<type type = "text" name = "البريد الإلكتروني"
<٪ = contact.attr ('البريد الإلكتروني')؟ "value =" " + contact.email +" "": "class = 'فارغة'" ٪ >>
</div>
</div>
</form>
يتم وضع سمات الاتصال في علامة <Purns> ، والتي تتيح لك تحرير معلومات المستخدم وتحديثه.
تنشيط وجهة نظرك (أدب جيد ..)
إذا تم استخدام ATTR () أثناء قالب معالجة EJS ، فسيتم تسليم الكود المحيط به إلى معالج الأحداث لمراقبة التغييرات في السمات المقابلة. عندما تتغير السمات ، سيتم تحديث واجهة المستخدم المرتبطة في التطبيق. تستفيد هذه الوظيفة من آلية الربط الديناميكي القالب. يكون الربط الديناميكي EJS انتقائيًا وسيتم تمكينه فقط للسمات المقابلة عند استخدام attr ().
نحن نستخدم علامة <pection> في contactView.ejs لفهم استخدامها:
نسخة الكود كما يلي:
<type type = "text" name = "name" placeholder = "add name"
<٪ = contact.attr ('name')؟ "value = '" + contact.name + "'":
سيتم تحويل الرمز في العلامة الخاصة إلى حدث ومرتبط بسمة اسم جهة الاتصال هذه. عندما يتغير سمة الاسم ، سيتم تشغيل الحدث وسيتم تحديث بنية HTML.
استخدم can.control للتعامل مع منطق العمل
CAN.CONTROL ينشئ تحكمًا كاملًا منظمًا وخاليًا من التسرب ، ويمكن استخدامه لإنشاء عنصر واجهة مستخدم أو معالجة منطق العمل. يمكنك إنشاء مثيل تحكم لعنصر DOM من خلال البيانات المطلوبة ، ويمكنك تحديد أحداث ربط الطريقة في جهاز التحكم الخاص بك.
عندما يتم حذف العنصر المرتبط بالتحكم من DOM ، فإن التحكم سوف يدمر نفسه ويزيل الطريقة المرتبطة.
لإنشاء عنصر تحكم ، وراثي عن طريق تمرير الكائن الذي حددته يحتوي على الوظيفة إلى can.control (). كما تم الإبلاغ عن الحادث التالي.
يحتوي كل مثيل تحكم على العديد من القيم والمواصفات المهمة:
إشارات إلى مثيل التحكم هذا
عنصر DOM الذي أنشأته في مثيل هذا.
كائنات المعلمة this.options المطلوبة لإنشاء مثيل
يتم استدعاء init () عند إنشاء المثيل بنجاح
إدارة جهات الاتصال
أضف مقتطف الرمز التالي إلى ملف contacts.js لإنشاء عنصر تحكم لإدارة جهات الاتصال:
نسخة الكود كما يلي:
جهات الاتصال = can.control ({
init: function () {
this.element.html (can.view ('views/contactslist.ejs' ، {
جهات الاتصال: this.options.contacts ،
الفئات: this.options.categories
})) ؛
}
})
عند إنشاء مثيل لجهات الاتصال ، يقوم init () بأمرين:
استخدم can.view () لتقديم جهات الاتصال. CAN.View () يتلقى معلمتين: ملف يحتوي على قوالب وبيانات أو علامة الشريط ؛ إنه يعيد مستند فرقة (حاوية خفيفة الوزن تدير عناصر DOM).
استخدم jQuery.html () لإدراج مستند فراج Can.view () في عنصر التحكم
استخدم النموذج لتمثيل البيانات
النموذج هو الطبقة المجردة لبيانات التطبيق. يستخدم هذا التطبيق نموذجين: أحدهما يتوافق مع شخص الاتصال والآخر المقابل للفئة. أضف الكود التالي إلى Commonss.js:
نسخة الكود كما يلي:
contact = can.model ({
Findall: 'Get /Ansists' ،
إنشاء: "بعد /جهات الاتصال" ،
تحديث: "وضع /جهات الاتصال /{id}" ،
تدمير: "حذف /جهات الاتصال /{id}"
} ، {}) ؛
الفئة = can.model ({
Findall: "الحصول على /فئات"
} ، {}) ؛
يحتوي النموذج على 5 طرق قد تحدد بيانات CRUD ، وهي Findall ، Findone ، إنشاء ، تحديث وتدمير. يمكنك إعادة كتابة هذه الطرق ، ولكن أفضل طريقة هي استخدام خدمة REST (نقل الحالة التمثيلية). تمامًا مثل الرمز أعلاه ، يمكنك القلق بشأن تجاهل الأساليب الثابتة التي لن يتم استخدامها في التطبيق.
من المهم أن نشير هنا إلى أن مثيل النموذج هو في الواقع "ملاحظات" من CANJs. Can.Observe يوفر نمط مراقب للكائن Can.Observe.list يوفر نمط مراقبة الصفيف. هذا يعني أنه يمكنك الحصول على البيانات وتعيينها من خلال ATTR () أثناء الاستماع إلى التغييرات في البيانات.
تقوم طريقة FindAll () بإرجاع Model.list ، وهو الحدث الناتج عن Can.Observe.list عند إضافة العنصر أو إزالته.
استخدم التثبيت لتقليد الراحة
يعرض التثبيت طلبات Ajax ومحاكاة الاستجابة من خلال الملفات أو الأساليب. هذا مفيد جدًا للاختبار ، أو عندما تكون الواجهة الخلفية غير جاهزة. التثبيت هو ما يحاكي نموذج التطبيق الراحة.
أولاً ، تحتاج إلى إعداد بعض البيانات لتثبيتها وإضافة الكود التالي إلى:
نسخة الكود كما يلي:
جهات الاتصال var = [
{
معرف: 1 ،
الاسم: "وليام" ،
العنوان: '1 canjs way' ،
البريد الإلكتروني: '[email protected]' ،
الهاتف: '0123456789' ،
الفئة: "زملاء العمل"
} ،
{
معرف: 2 ،
الاسم: 'لورا' ،
العنوان: '1 canjs way' ،
البريد الإلكتروني: '[email protected]' ،
الهاتف: '0123456789' ،
الفئة: "الأصدقاء"
} ،
{
معرف: 3 ،
الاسم: "لي" ،
العنوان: '1 canjs way' ،
البريد الإلكتروني: '[email protected]' ،
الهاتف: '0123456789' ،
الفئة: "العائلة"
}
] ؛
فئات var = [
{
معرف: 1 ،
الاسم: "العائلة" ،
البيانات: "الأسرة"
} ،
{
معرف: 2 ،
الاسم: "الأصدقاء" ،
البيانات: "الأصدقاء"
} ،
{
معرف: 3 ،
الاسم: "زملاء العمل" ،
البيانات: "زملاء العمل"
}
] ؛
مع البيانات ، قم بتوصيلها بمحاكاة REST. Can.fixture () يتلقى معلمتين. عنوان URL الذي نريد اعتراضه والملفات والأساليب التي نرد عليها. عادةً ما تكون عناوين URL التي تريد اعتراضها ديناميكية وتتبع نمطًا. فقط أضف أحرف البرية المرفقة بـ {} في عنوان URL.
أضف الكود التالي إلى Commonss.js:
نسخة الكود كما يلي:
can.fixture ('get /contacts' ، function () {
إرجاع [جهات الاتصال] ؛
}) ؛
معرف var = 4 ؛
can.fixture ("post /جهات الاتصال" ، الدالة () {
إرجاع {id: (id ++)}
}) ؛
can.fixture ("put /contacts /{id}" ، function () {
يعود {}؛
}) ؛
can.fixture ("delete /contacts /{id}" ، function () {
يعود {}؛
}) ؛
can.fixture ('get /catevories' ، function () {
إرجاع [الفئات] ؛
}) ؛
تقوم المباريات الأربعة الأولى بمحاكاة استجابات GET ، Post ، وضع وحذفها لنموذج الاتصال ، ويحاكي الخامس استجابة GET لنموذج الفئة.
ابدأ التطبيق
يحتوي التطبيق الخاص بك على نموذج يدير البيانات ، ويجعل وجهات نظر جهات الاتصال ، وينظم كل هذا في السيطرة. كل ما عليك فعله الآن هو بدء التطبيق. الآن تحتاج إلى بدء التطبيق!
أضف الكود التالي إلى Commonss.js:
نسخة الكود كما يلي:
$ (وثيقة). ready (function () {
دولار.
دالة (فئة Response ، ContactResponse) {
فئات VAR = الفئة [0] ،
جهات الاتصال = contactResponse [0] ؛
جهات اتصال جديدة ('#جهات الاتصال' ، {
جهات الاتصال: جهات الاتصال ،
الفئات: الفئات:
}) ؛
}) ؛
}) ؛
دعونا نحلل هذا الرمز:
نسخة الكود كما يلي:
$ (وثيقة). ready (function () {
استخدم طريقة jQuery.ready للاستماع إلى جاهز DOM.
نسخة الكود كما يلي:
دولار.
دالة (فئة Response ، ContactResponse) {
استدعاء طريقة findall () لنموذجين للحصول على أنواع جميع جهات الاتصال. نظرًا لأن Findall () لديه تأخير ، يضمن $.
نسخة الكود كما يلي:
فئات VAR = الفئة [0] ،
جهات الاتصال = contactResponse [0] ؛
احصل على مجموعة بيانات مثيل النموذج المقابل من طريقتي Findall (). هو العنصر الأول من الصفيف الذي تم إرجاعه بالاستجابة.
نسخة الكود كما يلي:
جهات اتصال جديدة ('#جهات الاتصال' ، {
جهات الاتصال: جهات الاتصال ،
الفئات: الفئات:
}) ؛
يخلق عنصر تحكم في جهة الاتصال لعنصر #Contacts. يتم إرسال مجموعات بيانات الاتصال ونوعها للتحكم.
افتح تطبيقك مع متصفح وسترى قائمة جهات الاتصال التالية:
لخص
هذا هو الفصل الأول في سلسلة البرنامج التعليمي ، وقد تعلمت بالفعل عن جوهر CANJs:
طبقة تجريد النماذج من بيانات التطبيق الخاصة بك
قوالب طرق العرض التي تقوم بتحويل البيانات إلى HTML
تتعلق المنظمات بالسيطرة على كل شيء