ملخص الأساليب الشائعة من السطحية. js

ملخص

UndersCore.js هي مكتبة هزيلة للغاية ، مع ضغط 4 كيلو بايت فقط. ويوفر العشرات من أساليب البرمجة الوظيفية ، والتي تسهل بشكل كبير برمجة JavaScript. يعتمد العمود الفقري MVC Framework.js على هذه المكتبة.

إنه يحدد كائنًا مؤهلاً (_) ، وجميع طرق مكتبة الوظائف تنتمي إلى هذا الكائن. يمكن تقسيم هذه الطرق تقريبًا إلى خمس فئات: التجميع ، الصفيف ، الوظيفة ، الكائن والفائدة.

تثبيت تحت node.js

يمكن استخدام inderscore.js ليس فقط في بيئات المتصفح ، ولكن أيضًا في Node.js. أمر التثبيت كما يلي:

نسخة الكود كما يلي:

تثبيت NPM INTERSCORE

ومع ذلك ، لا يمكن لـ Node.js استخدام _ مباشرة كاسم متغير ، لذلك تحتاج إلى استخدام UndersCore.js باستخدام الطريقة التالية.

نسخة الكود كما يلي:

var u = required ("Underscore") ؛

الطرق المتعلقة بالمجموعات

جمع بيانات لغة JavaScript ، بما في ذلك هيكلين: المصفوفات والكائنات. تنطبق الطريقة التالية على كلا الهيكليين.

رسم خريطة

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

نسخة الكود كما يلي:

_.map ([1 ، 2 ، 3] ، function (num) {return num * 3 ؛}) ؛ // [3 ، 6 ، 9] _.map ({واحد: 1 ، اثنان: 2 ، ثلاثة: 3} ، الدالة (num ، مفتاح) {return num * 3 ؛}) ؛ // [3 ، 6 ، 9]

كل

تشبه هذه الطريقة الخريطة ، حيث تقوم ببعض العمليات على كل عضو في المجموعة بالتسلسل ، ولكن لا تُرجع قيمة.

نسخة الكود كما يلي:

_.each ([1 ، 2 ، 3] ، تنبيه) ؛ _.each ({واحد: 1 ، اثنان: 2 ، ثلاثة: 3} ، تنبيه) ؛

يقلل

تقوم هذه الطريقة ببعض العمليات على كل عضو في المجموعة بالتسلسل ، ثم تتراكم نتائج العملية على قيمة أولية معينة. بعد اكتمال جميع العمليات ، يتم إرجاع القيمة المتراكمة.

هذه الطريقة تقبل ثلاث معلمات. المعلمة الأولى هي المجموعة المراد معالجتها ، والمعلمة الثانية هي الوظيفة التي تعمل على كل عضو ، والمعلمة الثالثة هي المتغير المستخدم للتراكم.

_. // 6

المعلمة الثانية لطريقة تقليل هي وظيفة العملية ، والتي تقبل نفسها معلمتين. الأول هو المتغير المستخدم للتراكم ، والثاني هو قيمة كل عضو في المجموعة.

تصفية ورفض

تقوم طريقة التصفية ببعض العمليات على كل عضو في المجموعة بدورها ، ولا تعيد سوى الأعضاء الذين تكون نتيجة عملهم صحيحة.

نسخة الكود كما يلي:

_.filter ([1 ، 2 ، 3 ، 4 ، 5 ، 6] ، وظيفة (num) {return num ٪ 2 == 0 ؛}) ؛ // [2 ، 4 ، 6]

تقوم طريقة الرفض فقط بإرجاع الأعضاء الذين تكون نتيجة عملهم خاطئة.

نسخة الكود كما يلي:

_.Reject ([1 ، 2 ، 3 ، 4 ، 5 ، 6] ، Function (num) {return num ٪ 2 == 0 ؛}) ؛ // [1 ، 3 ، 5]

كل وبعض

تقوم كل طريقة ببعض العمليات على كل عضو في المجموعة بدوره. إذا كانت نتيجة التشغيل لجميع الأعضاء صحيحة ، فإنها تُرجع بشكل صحيح ، وإلا فإنها تعود خاطئة.

نسخة الكود كما يلي:

_.every ([1 ، 2 ، 3 ، 4 ، 5 ، 6] ، وظيفة (num) {return num ٪ 2 == 0 ؛}) ؛ // خطأ شنيع

تعود بعض الطريقة بشكل صحيح طالما أن هناك نتيجة تشغيل عضو ، وإلا فاضلة.

نسخة الكود كما يلي:

_.some ([1 ، 2 ، 3 ، 4 ، 5 ، 6] ، function (num) {return num ٪ 2 == 0 ؛}) ؛ // حقيقي

يجد

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

نسخة الكود كما يلي:

_.find ([1 ، 2 ، 3 ، 4 ، 5 ، 6] ، وظيفة (num) {return num ٪ 2 == 0 ؛}) ؛ // 2

يتضمن

إذا كانت القيمة ضمن المجموعة ، فإن الطريقة تُرجع صحيحًا ، وإلا فإنها تعيد خطأ.

نسخة الكود كما يلي:

_.contains ([1 ، 2 ، 3] ، 3) ؛ // حقيقي

كونبي

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

نسخة الكود كما يلي:

_.countby ([1 ، 2 ، 3 ، 4 ، 5] ، وظيفة (num) {return num ٪ 2 == 0؟ // {odd: 3 ، حتى: 2}

خلط

هذه الطريقة تُرجع مجموعة من الترتيب المضطرب.

نسخة الكود كما يلي:

_.shuffle ([1 ، 2 ، 3 ، 4 ، 5 ، 6]) ؛ // [4 ، 1 ، 6 ، 3 ، 5 ، 2]

مقاس

هذه الطريقة تُرجع عدد أعضاء المجموعة.

نسخة الكود كما يلي:

_.size ({واحد: 1 ، اثنان: 2 ، ثلاثة: 3}) ؛ // 3

الطرق المتعلقة بالكائن

تاراي

هذه الطريقة تحول الكائن إلى صفيف.

نسخة الكود كما يلي:

_.toarray ({a: 0 ، b: 1 ، c: 2}) ؛ // [0 ، 1 ، 2]

نتف

تستخرج هذه الطريقة قيمة خاصية لكائنات متعددة في صفيف.

نسخة الكود كما يلي:

var standes = [{name: 'moe' ، العمر: 40} ، {name: 'larry' ، age: 50} ، {name: 'curly' ، age: 60}] ؛ _.pluck (stooges ، 'name') ؛ // ["Moe" ، "Larry" ، "Curly"]

الطرق المتعلقة بالوظائف

ربط

تربط هذه الطريقة سياق وقت تشغيل الوظيفة ويعود كدالة جديدة.

نسخة الكود كما يلي:

_.bind (وظيفة ، كائن ، [*وسيط])

يرجى الاطلاع على المثال أدناه.

نسخة الكود كما يلي:

var o = {p: 2 ، m: function () {console.log (p) ؛}} ؛ om () // 2 _.bind (om ، {p: 1}) () // 1

bindall

تربط هذه الطريقة جميع طرق كائن (ما لم ينص على خلاف ذلك) على هذا الكائن.

نسخة الكود كما يلي:

var buttonview = {label: 'UndersCore' ، onClick: function () {Alert ('clicked:' + this.label) ؛ } ، onhover: function () {console.log ('hovering:' + this.label) ؛ }} ؛ _.bindall (ButtonView) ؛

جزئي

يرتبط ربط هذه الطريقة دالة بمعلمة وإرجاعها كدالة جديدة.

نسخة الكود كما يلي:

var add = function (a ، b) {return a + b ؛ } ؛ add5 = _.partial (إضافة ، 5) ؛ add5 (10) ؛ // 15

مذكرات

هذه الطريقة تخزين نتائج تشغيل دالة للمعلمة.

نسخة الكود كما يلي:

var fibonacci = _.memoize (function (n) {return n <2؟ n: fibonacci (n - 1) + fibonacci (n - 2) ؛}) ؛

إذا كانت الوظيفة تحتوي على معلمات متعددة ، فيجب توفير HashFunction لإنشاء قيمة تجزئة تحدد ذاكرة التخزين المؤقت.

تأخير

يمكن أن تؤخر هذه الطريقة الوظيفة لوقت محدد قبل التشغيل.

نسخة الكود كما يلي:

var log = _.bind (console.log ، console) ؛ _.delay (log ، 1000 ، "تم تسجيله لاحقًا") ؛ // "تم تسجيل الدخول لاحقًا"

تأجيل

يمكن أن تؤجل هذه الطريقة الوظيفة حتى يكون عدد المهام المراد تشغيلها 0 قبل التشغيل ، على غرار تأثير SetTimeout الذي يؤخر التشغيل بمقدار 0 ثانية.

نسخة الكود كما يلي:

_.defer (function () {Alert ('deferred') ؛}) ؛

خنق

هذه الطريقة تُرجع نسخة جديدة من الوظيفة. عند استدعاء هذا الإصدار الجديد من الوظيفة بشكل مستمر ، يجب أن تنتظر فترة زمنية معينة قبل التنفيذ التالي.

نسخة الكود كما يلي:

// إرجاع الإصدار الجديد من وظيفة updatePosition var shrottled = _.throttle (updatePosition ، 100) ؛ // سوف يؤدي الإصدار الجديد من الوظيفة فقط إلى تشغيل $ (window) .Scroll (مختنفة) ؛

Debounce

هذه الطريقة تُرجع أيضًا نسخة جديدة من وظيفة ما. في كل مرة يتم استدعاء هذا الإصدار الجديد من الوظيفة ، يجب أن يكون فاصل زمني معين من المكالمة الأخيرة ، وإلا فإنه سيكون غير صالح. تطبيقه النموذجي هو منع المستخدم من النقر المزدوج على زر واحد ، مما يؤدي إلى انطلاقات نموذجين.

نسخة الكود كما يلي:

$ ("button"). on ("Click" ، _.debounce (submitform ، 1000)) ؛

مرة واحدة

تقوم هذه الطريقة بإرجاع إصدار جديد من الوظيفة بحيث لا يمكن تشغيل الوظيفة إلا مرة واحدة. يستخدم بشكل رئيسي لتهيئة الكائن.

نسخة الكود كما يلي:

var tirlize = _.once (createApplication) ؛ تهيئة () ؛ تهيئة () ؛ // يتم إنشاء التطبيق مرة واحدة فقط

بعد

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

نسخة الكود كما يلي:

var rendernotes = _.after (notes.length ، render) ؛ _. // يتم حفظ جميع الملاحظات ، وسيتم تشغيل RenderNote مرة واحدة

طَوّق

تمر هذه الطريقة بوظيفة واحدة كمعلمة في وظيفة أخرى ، وأخيراً تُرجع إصدارًا جديدًا من الأول.

نسخة الكود كما يلي:

var hello = function (name) {return "hello:" + name ؛ } ؛ Hello = _.wrap (مرحبًا ، وظيفة (func) {return "قبل ،" + func ("moe") + "، بعد" ؛}) ؛ مرحبًا()؛ // "من قبل ، مرحبا: مو ، بعد"

تأليف

تقبل هذه الطريقة سلسلة من الوظائف كمعلمات ، وتدير من الخلف إلى الأمام ، ويتم استخدام نتيجة التشغيل للوظيفة السابقة كمعلمة تشغيل للوظيفة التالية. وهذا يعني ، تحويل شكل f (g () ، h ()) إلى f (g (h ())).

نسخة الكود كما يلي:

var greet = function (name) {return "hi:" + name ؛ } ؛ var excem = function (state) {return state + "!" ؛ } ؛ var welcome = _.compose (artica ، تحية) ؛ مرحبا بكم ('moe') ؛ // "مرحبا: مو!"

الأدوات والأساليب

نموذج

يتم استخدام هذه الطريقة لتجميع قوالب HTML. يقبل ثلاث معلمات.

نسخة الكود كما يلي:

_.

معاني المعلمات الثلاثة هي كما يلي:

Templatestring: سلسلة القالب

البيانات: أدخل بيانات القالب

الإعدادات: الإعدادات

TemplateString

سلسلة القالب المعبد هي لغة HTML عادية ، حيث يتم إدراج المتغيرات في شكل <٪ = ... ٪> ؛ كائن البيانات مسؤول عن توفير قيمة المتغير.

نسخة الكود كما يلي:

var txt = "

<٪ = Word ٪>

نسخة الكود كما يلي:

"؛ _.template (txt ، {word:" Hello World "}) //"

مرحبا بالعالم

نسخة الكود كما يلي:

"

إذا كانت قيمة المتغير تحتوي على خمسة أحرف خاصة (& <> " /) ، فيجب الهروب من <٪- ... ٪>.

نسخة الكود كما يلي:

var txt = "

<٪- كلمة ٪>

نسخة الكود كما يلي:

"؛ _.template (txt ، {word:" h & w "}) //

H & W.

يمكن إدراج أوامر JavaScript في شكل <٪ ... ٪>. فيما يلي مثال على بيان الحكم.

نسخة الكود كما يلي:

var txt = "<٪ var i = 0 ؛ if (i <1) {٪>" + "<٪ = word ٪>" + "<٪} ٪>" ؛ _.template (txt ، {word: "hello world"}) // hello world

وتشمل الاستخدامات الشائعة عبارات الحلقة.

نسخة الكود كما يلي:

var list = "<٪ _.each (people ، function (name) {٪>

<٪ = name ٪> <٪}) ؛ ٪> "؛ _.template (قائمة ، {people: ['moe' ، 'Curly' ، 'Larry']}) ؛ //"

مو

مجعد

لاري "

إذا كانت طريقة القالب تحتوي على المعلمة الأولى فقط ، تم حذف المعلمة الثانية ، فسيتم إرجاع وظيفة ، ويمكن إدخال البيانات إلى هذه الوظيفة في المستقبل.

نسخة الكود كما يلي:

var t1 = _.template ("Hello <٪ = user ٪>!") ؛ T1 ({user: ""}) // 'hello!'

بيانات

جميع المتغيرات في TemplateString هي سمات داخلية لكائن OBJ ، ويشير كائن OBJ إلى كائن بيانات المعلمة الثاني. الجملتين التاليتين متكافئتين.

نسخة الكود كما يلي:

_.

إذا كنت ترغب في تغيير اسم كائن OBJ ، فأنت بحاجة إلى تعيينه في المعلمة الثالثة.

نسخة الكود كما يلي:

_.

نظرًا لأن القالب يستخدم مع العبارات داخليًا عند استبدال المتغيرات ، سيتم تشغيل الطريقة أعلاه بشكل أسرع.