يجب أن يعتمد العمود الفقري على Underscore.js لاستخدامه. يجب أن تستخدم وظائف في السفقة السفلية لإكمال العمليات الأساسية لعناصر الصفحات وعناصر المعالجة.
ملاحظة: يعمل العمود الفقري بشكل جيد مع مكتبات JS الأخرى ، لذلك فهي مكتبة وليست إطارًا.
لا يمتد السطح إلى الكائن الأصلي ، ولكنه يستدعي طريقة _ () للتغليف. بمجرد الانتهاء من التغليف ، يصبح كائن JS كائنًا ترفيديًا. يمكنك أيضًا الحصول على البيانات في كائن JS الأصلي من خلال طريقة Value () للكائن السطحي. (JQuery يحصل على كائن jQuery من خلال طريقة $ ())
السفلية لديها أكثر من 60 وظيفة في المجموع. وفقًا لكائنات المعالجة المختلفة ، يمكن تقسيمها إلى خمس وحدات رئيسية: فئة التجميع ، فئة الصفيف ، فئة الوظائف الوظيفية ، فئة الكائن ، ودالة الأداة.
قالب السطح السفلي () الوصف الوصف:
تحتوي هذه الوظيفة على ثلاثة قوالب:
(1) <٪ ٪>: يحتوي على رمز منطقي ولن يتم عرضه بعد التقديم.
(2) <٪ = ٪>: نوع البيانات ، عرض البيانات بعد التقديم.
(3) <٪- ٪>: تحويل علامات HTML إلى سلاسل مشتركة لتجنب هجمات التعليمات البرمجية.
تنسيق المكالمات:
_.template (Templatestring ، [Data] ، [Setting])
لا يتم تنفيذ ربط البيانات في اتجاهين.
1. التغليف الكائن السطحي
لا يمتد Sewrerscore في النموذج الأولي لمؤسسة JavaScript الأصلية ، ولكنه يلف البيانات في كائن مخصص مثل jQuery (يشار إليه فيما يلي باسم "كائن تحت السطح").
يمكنك الحصول على بيانات JavaScript الأصلية عن طريق استدعاء طريقة Value () لكائن تحت السطح ، على سبيل المثال:
// تحديد كائن JavaScript مدمج Var jsdata = {name: 'data'} // إنشاء الكائن ككائن ثابت من خلال طريقة _ () // النموذج الأولي لكائن Underscoredata يحتوي على جميع الطرق المحددة في السفلية. يمكنك استخدام VAR Instroscoredata = _ (JSDATA) ؛ // احصل على البيانات الأصلية من خلال طريقة القيمة ، أي JSData Underscoredata.value () ؛2. دعوة الأولوية إلى JavaScript 1.6 طرق مدمجة
هناك العديد من الطرق في السطح السفلي الذي تم تضمينه في المواصفات في JavaScript 1.6. لذلك ، ضمن الكائن السطحي ، سيتم استدعاء الأساليب المدمجة التي توفرها بيئة المضيف (إذا كانت بيئة المضيف هذه الأساليب) أولاً لتحسين كفاءة تنفيذ الوظيفة.
بالنسبة للبيئات المضيفة التي لا تدعم JavaScript 1.6 ، ستنفذها IlnerScore بطريقتها الخاصة ، وبالنسبة للمطورين ، فهي شفافة تمامًا.
قد تكون بيئة المضيف المذكورة هنا هي بيئة تشغيل Node.js أو متصفح العميل.
3. تغيير مساحة الاسم
يستخدم UndersCore _ (السفلي) بشكل افتراضي للوصول إلى كائنات وإنشاءها ، ولكن هذا الاسم قد لا يتوافق مع مواصفات التسمية الخاصة بنا أو قد يتسبب بسهولة في تعارضات التسمية.
يمكننا تغيير اسم السطح السفلي من خلال طريقة noconflict () واستعادة القيمة قبل متغير _ (السفلي) ، على سبيل المثال:
<script type = "text/javaScript"> var _ = 'custom variable' ؛ </script> <script type = "text/javaScript" src = "UndersCore/Underscore-min.js"> </script> <script type = "text/javaScript"> // interscore object console.dir (_) ؛ // إعادة تسمية كائن السفلية إلينا ، ثم الوصول إلى الكائن السفلي وإنشاء كائن تحت الحدود من خلالنا var us = _.noconflict () ؛ // الإخراج "متغير مخصص" console.dir (_) ؛ </script>
4. سلسلة التشغيل
تذكر كيف نقوم بربط العمليات في jQuery؟ على سبيل المثال:
$ ('a') .css ('position' ، 'reporative') .Attr ('href' ، '#') .show () ؛يدعم SwondScore أيضًا عمليات السلسلة ، لكنك تحتاج إلى استدعاء طريقة السلسلة () للإعلان:
var arr = [10 ، 20 ، 30] ؛ _ (arr) .Shain () .map (function (item) {return item ++ ؛}) .first () .value () ؛إذا تم استدعاء طريقة السلسلة () ، فسوف يلفت السطح الأسلوب المدعو في الإغلاق ، وتغليف قيمة الإرجاع في كائن تحت السطح وإرجاع:
// هذه وظيفة أساسية في السفلية لتنفيذ عمليات السلسلة. إنه يلف قيمة الإرجاع في كائن سطحي جديد ويقوم باستدعاء طريقة السلسلة () مرة أخرى لتوفير الدعم للوظيفة التالية في سلسلة الطريقة. var result = function (obj ، chain) {return chain؟ _ (OBJ) .SHAIN (): OBJ ؛ }5. توسيع السفلية
يمكننا بسهولة تمديد الطرق المخصصة إلى السطح السفلي عبر طريقة mixin () ، على سبيل المثال:
_.mixin ({method1: function (object) {// toDo} ، method2: function (arr) {// toDo} ، method3: function (fn) {// toDo}}) ؛يتم إلحاق هذه الطرق بكائن النموذج الأولي السطحي ، والذي يمكن استخدامه بواسطة جميع الكائنات السفلية التي تم إنشاؤها ، وتتمتع بنفس البيئة مثل الأساليب الأخرى.
6. اجتياز المجموعة
كل أساليب () و MAP () هي الأساليب الأكثر شيوعًا. يتم استخدامها للتكرار على مجموعة (صفيف أو كائن) ومعالجة كل عنصر في المجموعة بدوره ، على سبيل المثال:
var arr = [1 ، 2 ، 3] ؛ _ (arr) .map (وظيفة (العنصر ، i) {arr [i] = item + 1 ؛}) ؛ var obj = {first: 1 ، الثاني: 2} _ (obj) .each (function (value ، key) {return obj [key] = value + 1 ؛}) ؛تحتوي طريقة MAP () على نفس الدور والمعلمات مثل كل طريقة () ، لكنها تسجل النتيجة التي يتم إرجاعها بواسطة كل وظيفة تكرار إلى صفيف جديد وإرجاع.
7. وظيفة خنق
يشير اختناق الوظيفة إلى التحكم في تردد التنفيذ أو فاصل الدالة (تمامًا مثل البوابة التي تتحكم في تدفق المياه). يوفر UndersCore طريقتين: Debounce () و Throttle () لخداع الوظيفة.
لوصف هاتين الطريقتين بشكل أكثر وضوحًا ، افترض أننا بحاجة إلى تنفيذ متطلبات:
المتطلب 1: عندما يدخل المستخدم معايير البحث في مربع النص ، يتم الاستعلام عن الكلمات الرئيسية المطابقة تلقائيًا وطلب من المستخدم (مثلما عند إدخال الكلمة الرئيسية للبحث في TMALL)
أولا ، تحليل المطلب الأول. يمكننا ربط حدث keypress لمربع النص. عندما يتغير محتوى مربع الإدخال ، استعبر على الكلمة الرئيسية المطابقة وعرضها. لنفترض أنني أرغب في الاستعلام عن "Windows Phone" ، الذي يحتوي على 13 حرفًا ، ولم يستغرق الأمر سوى ثانية واحدة بالنسبة لي لإكمال الإدخال (يبدو سريعًا بعض الشيء ، وهذا ما يعنيه) ، ثم في غضون ثانية واحدة ، تم استدعاء طريقة الاستعلام 13 مرة. هذا شيء مخيف للغاية ، وإذا تم تنفيذ Tmall على هذا النحو ، فأنا قلق من أنه سيموت قبل يوم الفردي (بالطبع ، ليس هذا هشًا ، لكنه بالتأكيد ليس الحل الأفضل)
تتمثل النهج الأفضل في الاستعلام عن الكلمة الرئيسية المطابقة عندما ينتهي المستخدم من الإدخال أو ينتظر موجه (ربما يكون كسولًا جدًا لإدخال المحتوى التالي).
أخيرًا ، وجدنا أنه في كلتا الحالتين توقعنا ، سيتوقف المستخدم عن الإدخال مؤقتًا ، لذلك قررنا الاستعلام بعد أن يتوقف المستخدم عن الإدخال مقابل 200 مللي ثانية (إذا كان المستخدم يكتب باستمرار المحتوى ، فإننا نعتقد أنه قد يكون واضحًا جدًا بشأن الكلمة الرئيسية التي يريدها ، لذا انتظره مرة أخرى)
في هذا الوقت ، باستخدام دالة Debounce () في السطح ، يمكننا بسهولة تنفيذ هذا المطلب:
<type type = "text" id = "search" name = "search" /> <script type = "text /javaScript"> var query = _ (function () {// Query Operation هنا}). debounce (200) ؛ $ ('#search'). bind ('keypress' ، query) ؛ </script>يمكنك أن ترى أن الكود الخاص بنا موجز للغاية ، وقد تم تنفيذ التحكم في الاختناق في طريقة Debounce (). نخبرها فقط أنه إذا لم يتم استدعاء وظيفة الاستعلام خلال 200 مللي ثانية ، فسنقوم بتنفيذ عملية الاستعلام الخاصة بنا ، ثم ربط وظيفة الاستعلام بحدث Keypress في مربع الإدخال.
كيف حدثت وظيفة الاستعلام؟ عندما نسمي طريقة Debounce () ، سنقوم بتمرير وظيفة تؤدي عملية الاستعلام ووقت (مللي ثانية). ستؤدي طريقة Debounce () إلى اختناق الوظيفة بناءً على الوقت الذي نمر فيه ، وإرجاع وظيفة جديدة (أي وظيفة الاستعلام). يمكننا استدعاء وظيفة الاستعلام بثقة وجرأة ، وستساعدنا طريقة Debounce () على التحكم فيها كما هو مطلوب.
المتطلب 2: عندما يسحب المستخدم شريط تمرير المتصفح ، اتصل بواجهة الخادم للتحقق مما إذا كان هناك محتوى جديد
دعنا نحلل المطلب الثاني. يمكننا ربط طريقة الاستعلام بالنافذة.
هل يمكننا استخدام طريقة Debounce () أعلاه لأداء التحكم في الاختناق؟ عندما ينتهي المستخدم من سحب شريط التمرير ، ثم الاستعلام عن محتوى جديد؟ ولكن هذا لا يتوافق مع المتطلبات ، ويأمل المستخدمون في رؤية التغييرات في المحتوى الجديد أثناء عملية السحب.
لذلك قررنا القيام بذلك: عندما يسحب المستخدم ، فإن الفاصل الزمني بين كل استفسارين لا يقل عن 500 ميلي ثانية ، إذا سحب المستخدم لمدة ثانية واحدة ، فقد يؤدي ذلك إلى 200 أحداث onScroll ، لكننا نقوم فقط باستعلامات على الأكثر.
باستخدام طريقة Throttle () في السفلية ، يمكننا أيضًا تنفيذ هذا المطلب:
<script type = "text/javaScript"> var query = _ (function () {// Query Operation هنا}). Throttle (500) ؛ $ (window) .bind ('Scroll' ، Query) ؛ </script>لا يزال الرمز موجزًا للغاية ، لأنه داخل طريقة Throttle () ، فإن جميع عناصر التحكم التي قمنا بتنفيذها موجودة بالفعل.
ربما تكون قد وجدت أن طريقتي Debounce () و Throttle () متشابهة جدًا (بما في ذلك طريقة الاتصال وقيمة الإرجاع) ، لكن وظائفها مختلفة.
يتم استخدامها جميعها لخنق الوظيفة ، ولا تسمى وظائف التحكم بشكل متكرر ، مما يوفر موارد العميل والخادم.
تركز طريقة Debounce () على الفاصل الزمني بين تنفيذ الوظيفة ، أي أن وقت استدعاء الوظيفة مرتين لا يمكن أن يكون أقل من الوقت المحدد.
تركز طريقة Throttle () أكثر على تردد تنفيذ الوظيفة ، أي أنه سيتم استدعاء الوظيفة مرة واحدة فقط داخل التردد المحدد.
8. تحليل قالب
يوفر UndersCore وظيفة تحليل القالب خفيفة الوزن تساعدنا على تنظيم بنية الصفحة والمنطق بشكل فعال.
سأقدمه بمثال:
<!-تستخدم لعرض العلامات المقدمة-> <ul id = "element"> </ul> <!-حدد قالبًا ووضع محتوى القالب في علامة نصية-> <script type = "text/template" id = "tpl"> <٪ for (var i = 0 ؛ i <list.length ؛ i ++) <span> <٪ = item.firstName ٪> <٪ = item.lastname ٪> </span> <span> <٪-item.city ٪> </span> </li> <٪} ٪> </script> <script type = "text/javascript" src = "underscore/interscore.js" عناصر تقديم ومحتوى القالب var element = $ ('#element') ، tpl = $ ('#tpl'). html () ؛ // قم بإنشاء بيانات ، والتي قد تكون بيانات var التي تحصل عليها من server = {list: [{firstName: '<a href = "#"> Zhang </a> ، lastName:' San '، city:' Shanghai '} ، {firstName:' li '، lastName:' si '، city: "Wang" ، LastName: 'Wu' ، City: 'Guangzhou'} ، {firstName: 'Zhao' ، lastName: 'liu' ، City: 'Shenzhen'}]} // parse the template ، repring the protect var html = _.template (tpl ، data) ؛ // ملء المحتوى المحسّن لعنصر العرض. html (HTML) ؛ </script>في هذا المثال ، نضع محتوى القالب في علامة <script> ، ربما لاحظت أن نوع العلامة هو نص/قالب بدلاً من النص/javaScript ، لأنه لا يمكن تشغيله مباشرة كنصوص JavaScript.
أوصي أيضًا بأن تضع محتوى القالب في <script> لأنه إذا قمت بكتابتها في <Div> أو علامات أخرى ، فقد تتم إضافتها إلى شجرة DOM لتحليلها (حتى لو أخفيت هذه العلامة ، فلن يتم تجنبها).
_.
<٪ ٪>: يستخدم لاحتواء رمز JavaScript الذي سيتم تنفيذه عند تقديم البيانات.
<٪ = ٪>: يستخدم لإخراج البيانات ، يمكن أن يكون متغيرًا أو سمة كائن أو استدعاء دالة (لإخراج قيمة الإرجاع للدالة).
<٪- ٪>: يستخدم لإخراج البيانات ، وتحويل أحرف HTML الموجودة في البيانات في نماذج الكيانات (على سبيل المثال ، يقوم بتحويل عروض أسعار مزدوجة إلى الشكل) ، لتجنب هجمات XSS.
عندما نريد عرض HTML في البيانات كنص ، غالبًا ما نستخدم علامة <٪- ٪>.
يتيح لك INFRESCORE أيضًا تعديل هذه الأشكال الثلاثة من العلامات. إذا كنا نريد استخدام {٪ ٪} ، {٪ = ٪} ، {٪- ٪} كعلامات ، يمكننا القيام بذلك عن طريق تعديل templatesettings ، تمامًا مثل هذا:
_.
في هذا المثال ، نقوم بتمرير محتوى القالب والبيانات المراد ملؤها على طريقة القالب ، والتي ستتم معالجتها بالترتيب التالي:
(1) تحليل محتوى القالب في JavaScript القابلة للتنفيذ (علامات قالب Parse)
(2) تعديل نطاق JavaScript المحصور إلى كائن البيانات الذي نمر به مع العبارة ، مما يتيح لنا الوصول مباشرة إلى خصائص كائن البيانات من خلال المتغيرات في القالب.
(3) تنفيذ JavaScript المحفوظ (ملء البيانات في قالب)
(4) إرجاع النتيجة بعد التنفيذ
غالبًا ما نواجه موقفًا يتم فيه استدعاء طريقة القالب عدة مرات لتقديم البيانات إلى نفس القالب.
لنفترض أن لدينا قائمة ترحيل ، ويتم تقديم كل جزء من البيانات في القائمة من خلال قالب. عندما يدخل المستخدم الصفحة التالية ، سنحصل على بيانات الصفحة التالية وإعادة تقديمها. في الواقع ، يكون القالب هو نفسه في كل مرة يتم فيها تقديمه ، ولكن سيتم دائمًا تنفيذ جميع عمليات المعالجة للقالب الموصوفة الآن.
في الواقع ، توفر طريقة القالب السفلية وسيلة أكثر كفاءة للاتصال. نقوم بتعديل الجملتين الأخيرتين في الكود أعلاه إلى:
// تحليل القالب ، إرجاع المحتوى المحدود var render = _.template (tpl) ؛ var html = render (data) ؛ // populate the located to the element.html (html) ؛
ستجد فرقًا دقيقًا: عندما نسمي طريقة القالب ، نمرر فقط محتوى القالب ، ولكن ليس البيانات. في هذا الوقت ، ستقوم طريقة القالب بتحليل محتوى القالب ، وإنشاء رمز JavaScript القابل للتنفيذ ، وإرجاع وظيفة ، وجسم الوظيفة هو JavaScript المحفوظ. لذلك ، عندما نسمي هذه الوظيفة لتقديم البيانات ، فإننا نحذف إجراء تحليل القالب.
يجب عليك تخزين الوظيفة التي تم إرجاعها (تمامًا كما أقوم بتخزينها في متغير العرض) ، ثم تقديم البيانات عن طريق استدعاء الوظيفة ، خاصة إذا كان يمكن تقديم نفس القالب عدة مرات. القيام بذلك يمكن أن يحسن كفاءة التنفيذ (يجب أن يعتمد التحسن المحدد على طول وتعقيد القالب الخاص بك ، لكنه عادة جيدة على أي حال).