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

программирования HTML Изучение

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 принимают параметр-предикат, который представляет собой функцию, определяющую истинный тест, применяемый к элементам в Коллекция.

Читайте также:  Классы подхода Bootstrap 5

Методы: некоторые из наиболее часто используемых методов подчеркивания в 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, возраст которых превышает возраст, введенный пользователем.

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

Оцените статью
bestprogrammer.ru
Добавить комментарий