Что такое методы подчеркивания в Backbone.js?

Backbone.js — это среда JavaScript, которая обеспечивает структуру веб-приложений, отделяя данные приложения (модели) от его представления (представления) и его логики (контроллеры). Он предназначен для минимального и гибкого использования и хорошо работает с другими библиотеками и фреймворками, такими как Underscore.js и jQuery.

В этой статье мы обсудим методы подчеркивания в Backbone.js. Underscore.js — это библиотека JavaScript, предоставляющая широкий спектр служебных функций для работы с массивами и объектами. Backbone.js — это библиотека JavaScript для создания веб-приложений со структурированной архитектурой, включающая подмножество библиотеки Underscore.js.

Синтаксис:

_.method(data, function);

Где метод — это вызываемый метод подчеркивания (например, каждый, карта, уменьшение и т. д.), данные — это набор данных (массив или объект), к которому применяется метод, а функция — это функция, определяющая операцию, которая должна быть выполнена. выполняется при сборе данных.

Параметры: параметры методов подчеркивания в Backbone.js различаются в зависимости от используемого метода.

Data: этот параметр представляет собой набор данных, к которому применяется метод. Это может быть массив или объект.
Функция: этот параметр представляет собой функцию, которая вызывается для каждого элемента в коллекции, это функция обратного вызова, она используется для работы с коллекцией данных. Функция обратного вызова принимает разные аргументы в зависимости от используемого метода подчеркивания.

Например, функция обратного вызова для _.each принимает три аргумента ( элемент, индекс, список ), а функция обратного вызова для _.map принимает три аргумента ( элемент, индекс, список ) и должна возвращать новое значение для этого элемента. Функция обратного вызова для _.reduce принимает четыре аргумента ( memo, element, index, list ) и должна возвращать уменьшенное значение.

Кроме того, для некоторых методов подчеркивания могут потребоваться дополнительные параметры. Например, _.sortBy принимает итератор дополнительного параметра, который представляет собой функцию, возвращающую критерии сортировки, _.find и _.filter принимают параметр-предикат, который представляет собой функцию, определяющую истинный тест, применяемый к элементам в Коллекция.

Методы: некоторые из наиболее часто используемых методов подчеркивания в Backbone.js включают:

each(list, iterator): просматривает каждый элемент в списке и выполняет над ним функцию.
map(list, iterator): создает новый список, применяя функцию к каждому элементу исходного списка.
reduce(list, iterator, memo): объединяет все элементы списка в одно значение.
find(list, predicate): находит первый элемент в списке, соответствующий определенному условию.
filter(list, predicate): создает новый список со всеми элементами, соответствующими определенному условию.
where(list, properties): создает новый список со всеми элементами, имеющими определенные свойства.
reject(list, predicate): создает новый список со всеми элементами, которые не соответствуют определенному условию.
every(list, [predicate]): возвращает true, если все элементы в списке соответствуют определенному условию.
some(list, [predicate]): возвращает true, если хотя бы один элемент в списке соответствует определенному условию.
pluck(list, propertyName): извлекает определенное свойство из каждого элемента в списке.
sortBy(list, iterator): сортирует копию списка на основе результата применения функции к каждому элементу.
isEqual(a, b): сравнивает, имеют ли два объекта одинаковое значение.

Пример 1:

HTML

<!DOCTYPE html>

<html>

<head>

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">

    </script>

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js">

    </script>

    <style>

        h1 {

            color: green;

            text-align: center;

        }

        h3 {

            text-align: center;

        }

    </style>

</head>

<body>

    <h1>GeeksForGeeks</h1>

    <h3><u>Underscore Methods in Backbone.js</u></h3>

    <script type="text/javascript">



        // Create a collection of books

        var books = [{

            title: "The Great Gatsby",

            author: "F. Scott Fitzgerald"

        }, {

            title: "To Kill a Mockingbird",

            author: "Harper Lee"

        }, {

            title: "Pride and Prejudice",

            author: "Jane Austen"

        }, {

            title: "The Catcher in the Rye",

            author: "J.D. Salinger"

        }];

        // Use the map method to create

        // an array of book titles

        var bookTitles = _.map(books, function (book) {

            return book.title;

        });

        document.write("<b>Book Titles: </b>", bookTitles);

        document.write("<br><br>");

        // Use the findWhere method to find

        // a book by its title

        var gatsby = _.findWhere(books, {

            title: "The Great Gatsby"

        });

        document.write("<b>The Great Gatsby: </b>",

            JSON.stringify(gatsby));

        document.write("<br><br>");



        // Use the reject method to find books that

        // are not written by J.D. Salinger

        var notSalinger = _.reject(books, function (book) {

            return book.author === "J.D. Salinger";

        });

        document.write("<b>Books not written by J.D. Salinger: </b>",

            JSON.stringify(notSalinger));

        document.write("<br><br>");

        var sortedBooks = _.sortBy(books, "title");

        document.write("<b>Books sorted by title: </b>",

            JSON.stringify(sortedBooks));

    </script>

</body>

</html>

Выход:

Объяснение: В верхней части скрипта создается массив книг с различными свойствами, такими как название и автор. Затем сценарий использует библиотеку подчеркивания для выполнения различных операций с этим массивом книг.

Первая операция — это использование метода map, который создает массив названий книг путем перебора массива книг и возврата свойства title каждой книги. Полученный массив названий книг затем отображается на странице с помощью метода document.write().

Далее метод findWhere используется для поиска конкретной книги по ее названию, в данном случае «Великий Гэтсби». Результат отображается на странице в виде объекта JSON.

Затем метод отклонения используется для поиска книг, написанных не конкретным автором, в данном случае Дж. Д. Сэлинджером. Результат отображается на странице в виде объекта JSON.

Наконец, метод sortBy используется для сортировки массива книг по свойству title. Результат отображается на странице в виде объекта JSON.

Пример 2:

HTML

<!DOCTYPE html>

<html>

<head>

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">

    </script>

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js">

    </script>

    <style>

        h1 {

            color: green;

            text-align: center;

        }

        h3 {

            text-align: center;

        }

    </style>

</head>

<body>

    <h1>GeeksForGeeks</h1>

    <h3><u>Underscore Methods in Backbone.js </u></h3>

    <script>

        // Define a model for a Person

        var Person = Backbone.Model.extend({});

        // Define a collection of Person models

        var PeopleCollection = Backbone.Collection.extend({

            model: Person

        });

        // Create a collection of Person models

        var people = new PeopleCollection([{

            name: "John Doe",

            age: 30

        }, {

            name: "Jane Smith",

            age: 25

        }, {}, {

            name: "Henry Smith",

            age: 45

        }, {}, {

            name: "Jamie Keith",

            age: 63

        }, {

            name: "Bob Johnson",

            age: 35

        }]);

        var age1 = parseInt(prompt("Enter Age"));

        // Use underscore's filter method to

        // create a new collection of Person

        // models where age is greater than 30

        var olderPeople = _.filter(people.models, function (person) {

            return person.get("age") > age1;

        });

        document.write("People older than " + age1 + " are:\n");

        document.write("<br><br>");



        // Output the names of the older people

        _.each(olderPeople, function (person) {

            document.write(person.get("name"));

            document.write("<br>");

        });

    </script>

</body>

</html>

Выход:

Объяснение: Сценарий использует метод filter из библиотеки Underscore для фильтрации моделей в PeopleCollection, возраст которых превышает возраст, введенный пользователем.

Затем он использует каждый метод для перебора отфильтрованной коллекции и записи имен пожилых людей в документ.