1. مقدمة
في الآونة الأخيرة ، أقوم بالتحسين الأمامي لمشروع مصرفي كبير عبر الإنترنت. أحتاج إلى استخدام تحسين عميل الدهون. الفكرة العامة هي أن الواجهة الأمامية تستخدم طلب Ajax للحصول على بيانات من الواجهة الخلفية ، وإعادتها بتنسيق Jason ، ثم عرضها على الصفحة. نظرًا لأن هذا النظام كبير جدًا ، فإن حل عميل FAT يتطلب حتماً كتابة الكثير من رمز JS على العميل. أعتقد أنه من غير المريح للغاية لأي فريق الحفاظ على كمية كبيرة من التعليمات البرمجية غير المهيكلة. لذلك جاء العمود الفقري في عيني.
يوفر وسيلة لتنظيم رمز JS الخاص بك ، مما يسمح لك بتنظيم رمز JS الأمامي بطريقة موجهة نحو الكائن. هذا مثل أن نطبق التصميم الذي يحركه المجال على الواجهة الأمامية. يمكننا تقسيم مشروع كبير جدا بواسطة الوحدة النمطية. يمكن تقسيم كل وحدة إلى عرض ، نموذج ، وموجه وفقًا لمتطلبات العمود الفقري.
مع العمود الفقري ، يمكنك علاج بياناتك كنماذج. مع النماذج ، يمكنك إنشاء البيانات أو التحقق من البيانات أو تدميرها أو حفظها على الخادم. عندما تتسبب العمليات في الواجهة في تغييرات في الخصائص في النموذج ، فإن النموذج سيؤدي إلى حدوث تغيير ؛ ستتلقى تلك المشاهدات المستخدمة لعرض حالة النموذج الرسالة التي تفيد بأن النموذج يؤدي إلى التغيير ، ثم إصدار الاستجابة المقابلة ، وإعادة تقديم بيانات جديدة إلى الواجهة. في تطبيق العمود الفقري الكامل ، لا تحتاج إلى كتابة رمز الغراء للحصول على العقد من خلال معرفات خاصة من DOM ، أو تحديث صفحات HTML يدويًا ، لأنه عندما يتغير النموذج ، سيتم تحديث المشاهدات بسهولة.
2. الميزات
العمود الفقري هو إطار عمل أمامي خفيف الوزن يستخدم لتنظيم إدارة عدد كبير من JS في الصفحات ، وإنشاء اتصال سلس مع الخوادم والآراء ، ويوفر إطارًا أساسيًا لبناء تطبيقات معقدة.
اسمحوا لي أن أشرح باختصار الميزات والخصائص الرئيسية للعمود الفقري:
2.1 خفيفة الوزن
لا يبلغ رمز مصدر العمود الفقري حوالي 1000 سطر فقط (بعد فك تشفير الخطوط الفارغة) ، يبلغ حجم الملف 16 كيلو بايت فقط ، ومكتبة التبعية هي 29 كيلو بايت فقط.
ما عليك سوى قضاء بعض الوقت لفهم التنفيذ الداخلي للعمود الفقري بسهولة ؛ أو اكتب كمية صغيرة من التعليمات البرمجية لتفوق بعض آليات العمود الفقري ؛ إذا كنت ترغب في القيام بتطوير ثانوي بناءً على العمود الفقري ، فهذا ليس شيئًا معقدًا.
2.2 منظم
يمكن للعمود الفقري فصل البيانات والمنطق والمسافات في الصفحة بسهولة ، وتنظيم بنية التعليمات البرمجية وفقًا للعمود الفقري. يمكنك تعيين تفاعل البيانات ومنطق الأعمال وواجهة المستخدم وغيرها من الأعمال في المشروع إلى زملاء متعددين لتطويرها في وقت واحد وتنظيمها معًا بطريقة منظمة. في الوقت نفسه ، يعد هذا مفيدًا للغاية لصيانة وتطوير المشاريع الكبيرة والمعقدة.
2.3 آلية الميراث
في العمود الفقري ، يمكن أن تكون وحدات موروثة. يمكنك تنظيم نماذج البيانات ، ومجموعات ، ووجهات النظر في التطبيق الخاص بك بطريقة موجهة نحو الكائن لجعل البنية بأكملها أكثر وضوحًا ؛ يمكنك أيضًا التحميل المخصص بسهولة وتوسيع نطاقه.
2.4 إنشاء اتصال سلس مع الخادم
يحتوي العمود الفقري على مجموعة مدمجة من قواعد التفاعل مع بيانات الخادم (إذا فهمت بنية REST ، فيمكنك فهمها بسهولة) ، وسيتم تنفيذ مزامنة البيانات تلقائيًا في النموذج. يحتاج المطورون الأماميون فقط إلى العمل على بيانات العميل ، وسيقوم العمود الفقري تلقائيًا بمزامنة بيانات التشغيل إلى الخادم.
هذا شيء مثير للاهتمام للغاية لأن واجهة بيانات الخادم شفافة للمطورين الأماميين ولم تعد بحاجة إلى الاهتمام بكيفية التفاعل مع الخادم.
ومع ذلك ، يجب أن تكون واجهة البيانات التي يوفرها الخادم متوافقة مع قواعد العمود الفقري. بالنسبة لمشروع جديد ، يمكننا محاولة استخدام هذه المجموعة من القواعد لإنشاء الواجهة. ولكن إذا كان لديك بالفعل مجموعة مستقرة من الواجهات في مشروعك ، فقد تكون قلقًا بشأن خطر تعديل الواجهة.
لا يهم ، يمكننا التكيف مع واجهة البيانات الحالية عن طريق زيادة التحميل الخلفي للعمود الفقري. بالنسبة لبيئات العميل المختلفة ، يمكننا أيضًا تنفيذ طرق تفاعل البيانات المختلفة. على سبيل المثال: عندما يستخدم المستخدم خدمة من خلال متصفح كمبيوتر ، سيتم مزامنة البيانات مع الخادم في الوقت الفعلي ؛ عندما يستخدم المستخدم خدمة من خلال محطة متنقلة ، مع الأخذ في الاعتبار مشكلات بيئة الشبكة ، يمكننا أولاً مزامنة البيانات مع قاعدة البيانات المحلية ثم مزامنتها مع الخادم عند الاقتضاء. ويمكن تحقيق هذه من خلال التحميل الزائد طريقة واحدة.
2.5 إدارة الأحداث الواجهة
في MVC ، نأمل أن نفصل تمامًا عرض الواجهة ومنطق الأعمال ، ولكن بالنسبة للأحداث التفاعلية التي تم إنشاؤها بواسطة المستخدمين (مثل أحداث النقر) ، غالبًا ما نحصل عليها ونربطها من خلال طرق ربط مشابهة لتلك الموجودة في jQuery.
يساعدنا العرض في العمود الفقري على تنظيم أحداث المستخدم وطرق التنفيذ بطريقة منظمة ، الأمر الذي يتطلب منا فقط إعلان تعبير بسيط ، مثل:
الأحداث: {// عند النقر فوق عنصر باستخدام معرف "حفظ" ، قم بتنفيذ طريقة إضافة طريقة العرض "انقر فوق #SAVE": "إضافة" ، "Mousedown .button": "Show" ، "Mouseover .button": "Hide '}في التعبير ، يمكن أن يكون اسم الحدث أي حدث DOM (مثل النقر ، Mouseover ، Keypress ، إلخ) ، ويمكن أن يكون العنصر أي محدد مدعوم بواسطة jQuery (مثل محدد العلامات ، محدد المعرف ، محدد الفئة ، إلخ).
سوف يربط العرض تلقائيًا الأحداث في التعبير بعنصر المحدد. عندما يتم تشغيل حدث العنصر ، سوف يستدعي العرض تلقائيًا الأساليب المرتبطة في التعبير.
2.6 تحليل قالب خفيف الوزن
تحليل القالب هو طريقة مقدمة في السطحية. لماذا أقدم الطريقة في السفلية عند تقديم ميزات العمود الفقري؟ نظرًا لأن هذه الطريقة يمكن أن تساعدنا في فصل بنية العرض والمنطق بشكل أفضل ، وتؤكد ذلك المكتبة التي يجب على العمود الفقري الاعتماد عليها.
تتيح لنا أساليب تحليل القالب خلط وتضمين رمز JS في هياكل HTML ، تمامًا مثل رمز JAVA في صفحات JSP:
<ul> <٪ لـ (var i = 0 ؛ i <len ؛ i ++) {٪> <li> <٪ = data [i] .title ٪> </li> <٪} ٪> </li>من خلال تحليل القالب ، لا نحتاج إلى لصق السلاسل عند توليد هياكل HTML ديناميكيًا. والأهم من ذلك ، يمكننا إدارة بنية HTML في العرض بشكل مستقل (على سبيل المثال: قد تعرض حالات مختلفة هياكل HTML مختلفة ، يمكننا تحديد ملفات قالب منفصلة متعددة ، والتحميل والعرض حسب الحاجة).
2.7 إدارة الأحداث المخصصة
في العمود الفقري ، يمكنك استخدام الطريقة ON أو OFF لربط وإزالة الأحداث المخصصة. في أي مكان ، يمكنك استخدام طريقة الزناد لتشغيل هذه الأحداث المرتبطة ، وسيتم تنفيذ جميع الطرق التي ربطت الحدث ، مثل:
var model = new backbone.model () ؛ // ربط وظيفتين لتخصيص الحدث المخصص في نموذج كائن النموذج. model.on ('custom' ، function (p1 ، p2) {// toDo}) ؛ // توجيه الحدث المخصص ، وسيتم تسمى الوظيفين المربوتين أعلاه. // قم بإزالة جميع الطرق المرتبطة بنموذج الأحداث المخصصة. // توجيه الحدث المخصص ، ولكن لن يتم تنفيذ أي وظائف. تمت إزالة الوظائف في الحدث في نموذج الخطوة السابقة. trigger ('custom') ؛إذا كنت على دراية بـ jQuery ، فستجد أنها تشبه إلى حد كبير أساليب الربط ، غير المرتبط والتشغيل في jQuery.
بالإضافة إلى ذلك ، يدعم العمود الفقري حدثًا خاصًا "الكل". عندما يرتبط حدث يسمى "All" بكائن ، سيتم أيضًا تشغيل الطريقة المرتبطة بالحدث "All" عند تشغيل أي حدث. في بعض الأحيان ، قد تكون هذه الطريقة مفيدة للغاية ، على سبيل المثال ، يمكننا الاستماع إلى التغييرات في حالة الكائن من خلال حدث "All".
3. جهاز التوجيه
في تطبيق صفحة واحدة ، نتحكم في تبديل الواجهة وعرضها من خلال JavaScript ، والحصول على بيانات من الخادم من خلال AJAX.
المشكلة التي قد تنشأ هي أنه عندما يريد المستخدم العودة إلى العملية السابقة ، يجوز له عادةً استخدام أزرار "Back" و "Forward" للمستعرض ، ولكن النتيجة هي أن الصفحة بأكملها يتم تبديلها لأن المستخدم لا يعرف أنه في نفس الصفحة.
بالنسبة لهذه المشكلة ، غالبًا ما نستخدم علامة تجزئة (مرساة) لتسجيل الموقع الحالي للمستخدم والاستماع إلى إجراءات المستخدم "للأمام" و "الإرجاع" من خلال حدث onhashchange ، لكننا وجدنا أن بعض الإصدارات الأدنى من المتصفحات (مثل IE6) لا تدعم حدث onhashchange.
يوفر العمود الفقري وظيفة التحكم في التوجيه. من خلال جهاز التوجيه الذي يوفره العمود الفقري ، يمكننا ربط عنوان التوجيه ووظيفة الحدث معًا من خلال تعبير بسيط ، على سبيل المثال:
var customRouter = backbone.router.extend ({Routes: {'': 'index' ، // تنفيذ طريقة الفهرس عندما يكون عنوان url في دليل الجذر: url# 'list': 'getList' ، // تنفيذ طريقة getList عندما يكون url hash في القائمة: url# list. البيانات التفصيلية كمعلمات إلى طريقة الاستعلام: url#list/1001 'error' دالة (خطأ) {ALERT ('خطأ التجزئة:' + خطأ) ؛ var custom = new CustomRouter () ؛ backbone.history.start () ؛يرجى محاولة نسخ هذا الرمز إلى صفحتك والوصول إلى العنوان التالي بدوره (حيث يشير عنوان URL إلى عنوان صفحتك):
urlurl#listurl#التفاصيل/1001url#hash1url#hash2
يرجى محاولة استخدام الأزرار "Back" و "Forward" للمتصفح للتبديل ذهابًا وإيابًا إلى العنوان الذي أدخلته للتو.
يمكنك أن ترى أنه عندما يتغير تجزئة عنوان URL ، سيتم تنفيذ طريقة ملزمة. عند مواجهة تجزئة غير محددة ، سيتم تنفيذ طريقة دش الدش ويتم نقل التجزئة غير المحددة إلى الطريقة.
سيقوم العمود الفقري بتسجيل تغييرات العنوان من خلال التجزئة افتراضيًا. بالنسبة لمتصفحات الإصدار المنخفضة التي لا تدعم onhashchange ، ستتم مراقبة تغييرات التجزئة من خلال نبضات Setinterval ، لذلك لا داعي للقلق بشأن مشكلات توافق المتصفح.
بالنسبة للمتصفحات التي تدعم ميزة HTML5 PushState ، يتيح لك العمود الفقري أيضًا إنشاء عناوين URL مخصصة من خلال PushState ، ولكن هذا يتطلب بعض التكيف مع خادم الويب الخاص بك.
3. قابلية تطبيق العمود الفقري
لا ينطبق العمود الفقري مثل jQuery ، وإذا كنت تخطط لإنشاء تطبيق ويب كبير أو معقد ، يكون العمود الفقري أكثر ملاءمة.
إذا كنت ترغب في تطبيق العمود الفقري على صفحة موقع الويب الخاص بك ، ولم يكن هناك منطق وهيكل معقد في الصفحة ، فإن هذا سيجعل صفحتك أكثر مرهقة وصعوبة في الحفاظ عليها.
إذا لم يكن مشروعك معقدًا ، ولكنك مثل ميزة معينة منه (قد تكون نموذج بيانات أو إدارة عرض أو جهاز التوجيه) ، فيمكنك استخراج هذا الجزء من رمز المصدر من العمود الفقري لأنه في العمود الفقري ، فإن التبعيات بين الوحدات النمطية ليست قوية للغاية ، ويمكنك بسهولة الحصول عليها واستخدامها.
4. مكتبة التبعية
لا يمكنك استخدام العمود الفقري بشكل مستقل لأن وظائفها الأساسية وعمليات DOM و Ajax تعتمد جميعها على مكتبات الطرف الثالث.
4.1 أكور
(مطلوب)
UndersCore هي مكتبة وظائف أساسية لتحسين كفاءة التطوير. يلف العمليات المشتركة على المجموعات والصفائف والكائنات والوظائف. تمامًا مثل jQuery يتغلف كائنات DOM ، يمكنك بسهولة الوصول إلى الكائنات الداخلية JavaScript والتعامل معها من خلال السطحية.
يوفر SwondScore أيضًا بعض أساليب الوظيفة العملية للغاية ، مثل اختناق الوظيفة ، وتحليل القالب ، إلخ.
سأذهب إلى تفاصيل حول بعض الأساليب الرئيسية في السطح السفلي في الفصل التالي ، ولكن قبل أن تفهم: أكد أن المكتبة هي المكتبة التي يجب أن تعتمد عليها العمود الفقري ، لأن العديد من التطبيقات في العمود الفقري تعتمد على السطح.
4.2 jQuery و Zepto
(خياري)
أعتقد أنك ستكون بالتأكيد على دراية بـ jQuery ، إنه إطار دوم و Ajax.
بالنسبة لـ Zepto ، يمكنك فهمها على أنها "نسخة متنقلة من jQuery" ، لأنها أصغر وأسرع وأكثر ملاءمة للتشغيل على متصفحات الأجهزة المحمولة ، إنها نفس بناء الجملة مثل jQuery ، حتى تتمكن من استخدامها كما تفعل مع jQuery.
يدعم Zepto حاليًا فقط المتصفحات مع kernel webkit ، لذلك فهي متوافقة مع معظم أنظمة الهاتف المحمول مثل iOS و Adnroid و Symbian و Blackberry و Meego ، بينما لا يتم دعمها بعد بالنسبة إلى Windows Phone أو Firefox OS.
نظرًا لأن بناء جملة jQuery و Zepto متماثلان ، بالنسبة للعمود الفقري ، ليس لديك مشكلة في استخدام jQuery أو Zepto (بالطبع ، لا يمكنك استخدام كليهما في نفس الوقت).
في العمود الفقري ، يستخدم كل من محدد DOM و DOM و AJAX طريقة jQuery. السبب في أنها اختيارية هنا هو أنك لا تستخدم وظيفة التزامن بيانات Ajax في العمود الفقري ، فأنت لا تحتاج إلى استيرادها.
إذا كنت لا ترغب في استخدام jQuery أو Zepto ، ولكن استخدم المكتبات الأخرى أو المخصصة ، طالما أن مكتبتك تنفذ نفس محدد DOM ، وإدارة الأحداث ، وأساليب Ajax كناء على بناء الجملة ، فلن تكون هناك مشكلة.
يتيح لك العمود الفقري تكوين مكتبات الطرف الثالث التي تحتاج إلى استخدامها من خلال طريقة setdomlibrary ، والتي يتم استخدامها غالبًا ل:
على الرغم من أن مكتبتك المخصصة تحتوي على أساليب ذات بناء جملة نفس jQuery ، إلا أن المتغير العالمي ليس $ ، وتريد الاحتفاظ بالاسم الحالي. في هذا الوقت ، يمكنك ضبطه على الكائن المشار إليه داخليًا بواسطة طريقة setdomlibrary.
تريد التحقق من بيئة المستخدم لتحديد المكتبة أكثر ملاءمة للاستخدام. على سبيل المثال: إذا وصل المستخدم إلى استخدام متصفح كمبيوتر ، قم بتحميل jQuery ، وإذا وصل المستخدم من خلال محطة الهاتف المحمول ، قم بتحميل Zepto.