Underscore.JS - Szybki przewodnik
Underscore.JS to popularna biblioteka oparta na javascript, która zapewnia ponad 100 funkcji ułatwiających tworzenie stron internetowych. Zapewnia funkcje pomocnicze, takie jak mapowanie, filtrowanie, wywoływanie, a także wiązanie funkcji, tworzenie szablonów javascript, głębokie kontrole równości, tworzenie indeksów i tak dalej. Underscore.JS może być używany bezpośrednio w przeglądarce, a także z Node.js.
Praca z obiektami za pomocą JavaScript może być dość trudna, szczególnie jeśli masz do wykonania wiele manipulacji. Podkreślenie zawiera wiele funkcji, które ułatwiają pracę z obiektami.
Underscore.JS jest projektem typu open source i możesz łatwo wnieść wkład do biblioteki i dodawać funkcje w postaci wtyczek oraz udostępniać je na GitHub i Node.js.
funkcje
Pozwól nam szczegółowo zrozumieć wszystkie ważne funkcje dostępne w Underscore -
Kolekcje
Underscore.JS zapewnia różne funkcje dla kolekcji, takie jak każda, map, redukuj, które są używane do wykonywania operacji na każdym elemencie kolekcji. Zapewnia metody takie jak groupBy, countBy, max, min, które przetwarzają kolekcje i ułatwiają wiele zadań.
Tablice
Underscore.JS zapewnia różne funkcje dla tablic, takie jak iteracja i przetwarzanie tablic, takich jak first, initial, lastIndexOf, intersection, Difference itp.
Funkcje
Underscore.JS udostępnia funkcje takie jak bind, delay, before, after itp.
Obiekty
Underscore.JS zapewnia funkcje do manipulowania obiektami, mapowania obiektów i porównywania obiektów. Na przykład klucze, wartości, extends, extendsOwn, isEqual, isEmpty itp.
Narzędzia
Underscore.JS udostępnia różne metody narzędziowe, takie jak noConflict, random, iteratee, escape itp.
Łańcuch
Underscore.JS zapewnia metody łańcuchowe, takie jak łańcuch, wartość.
W kolejnych rozdziałach omówimy ważne funkcje Underscore.JS
W tym rozdziale dowiesz się szczegółowo o konfiguracji środowiska pracy Underscore.JS na komputerze lokalnym. Zanim zaczniesz pracować nad Underscore.JS, musisz mieć dostęp do biblioteki. Możesz uzyskać dostęp do jego plików za pomocą dowolnej z następujących metod -
Metoda 1: użycie pliku Underscore.JS w przeglądarce
W tej metodzie będziemy potrzebować pliku Underscore.JS z jego oficjalnej strony internetowej i będziemy go używać bezpośrednio w przeglądarce.
Krok 1
Najpierw przejdź do oficjalnej strony Underscore.JS https://underscorejs.org/.
Zwróć uwagę, że dostępna jest opcja pobierania, która udostępnia najnowszy dostępny plik z podkreśleniem min.js UMD (produkcja) . Kliknij łącze prawym przyciskiem myszy i wybierz opcję Zapisz jako. Zwróć uwagę, że plik jest dostępny z minifikacją i bez niej.
Krok 2
Teraz uwzględnij underscore-min.js w środku scripttag i rozpocznij pracę z Underscore.JS. W tym celu możesz użyć kodu podanego poniżej -
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>Podano tutaj działający przykład i jego wyniki dla lepszego zrozumienia -
Przykład
<html>
<head>
<title>Underscore.JS - Working Example</title>
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
<style>
div {
border: solid 1px #ccc;
padding:10px;
font-family: "Segoe UI",Arial,sans-serif;
width: 50%;
}
</style>
</head>
<body>
<div style = "font-size:25px" id = "list">
</div>
<script type = "text/JavaScript">
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
document.getElementById("list").innerHTML = listOfNumbers;
</script>
</body>
</html>Wynik
Metoda 2: Korzystanie z Node.js.
Jeśli decydujesz się na tę metodę, upewnij się, że masz Node.js i npmzainstalowany w twoim systemie. Możesz użyć następującego polecenia, aby zainstalować Underscore.JS -
npm install underscorePo pomyślnym zainstalowaniu Underscore.JS można zobaczyć następujące dane wyjściowe -
+ [email protected]
added 1 package from 1 contributor and audited 1 package in 6.331s
found 0 vulnerabilitiesTeraz, aby sprawdzić, czy Underscore.JS działa dobrze z Node.js, utwórz plik tester.js i dodaj do niego następujący kod -
var _ = require('underscore');
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
console.log(listOfNumbers);Zapisz powyższy program w formacie tester.js. Poniższe polecenia służą do kompilowania i wykonywania tego programu.
Komenda
\>node tester.jsWynik
1 2 3 4Underscore.JS ma wiele łatwych w użyciu metod, które pomagają w iterowaniu kolekcji. W tym rozdziale omówiono je szczegółowo.
Underscore.JS zapewnia różne metody iteracji kolekcji, jak podano poniżej -
| Sr.No. | Metoda i składnia |
|---|---|
| 1 | każdy _.each (lista, iteracja, [kontekst]) |
| 2 | mapa _.map (lista, iteracja, [kontekst]) |
| 3 | zmniejszyć _.reduce (lista, iteracja, [notatka], [kontekst]) |
| 4 | redukujRight _.reduceRight (lista, iteracja, [notatka], [kontekst]) |
| 5 | odnaleźć _.find (lista, predykat, [kontekst]) |
| 6 | filtr _.filter (lista, predykat, [kontekst]) |
| 7 | gdzie _.where (lista, właściwości) |
| 8 | findWhere _.findWhere (lista, właściwości) |
| 9 | odrzucać _.reject (lista, predykat, [kontekst]) |
| 10 | każdy _.every (lista, [predykat], [kontekst]) |
| 11 | trochę _.some (lista, [predykat], [kontekst]) |
Underscore.JS ma wiele łatwych w użyciu metod, które pomagają w przetwarzaniu kolekcji. W tym rozdziale omówiono je szczegółowo.
Underscore.JS zapewnia różne metody przetwarzania Zbiorów, jak podano poniżej -
| Sr.No. | Metoda i składnia |
|---|---|
| 1 | zawiera _.contains (lista, wartość, [fromIndex]) |
| 2 | odwołać się _.invoke (lista, nazwa metody, * argumenty) |
| 3 | podroby _.pluck (lista, propertyName) |
| 4 | max _.max (lista, [iteracja], [kontekst]) |
| 5 | min _.min (lista, [iteracja], [kontekst]) |
| 6 | Sortuj według _.sortBy (lista, iteracja, [kontekst]) |
| 7 | Grupuj według _.groupBy (lista, iteracja, [kontekst]) |
| 8 | indexBy _.indexBy (lista, iteracja, [kontekst]) |
| 9 | countBy _.countBy (lista, iteracja, [kontekst]) |
| 10 | człapać _.shuffle (lista) |
| 11 | próba _.sample (lista, [n]) |
| 12 | toArray _.toArray (lista) |
| 13 | rozmiar _.size (lista) |
| 14 | przegroda _.partition (lista, predykat) |
| 15 | kompaktowy _.compact (lista) |
Underscore.JS ma wiele łatwych w użyciu metod, które pomagają w iteracji tablic. W tym rozdziale omówiono je szczegółowo.
Underscore.JS udostępnia różne metody iteracji tablic, jak podano poniżej -
| Sr.No. | Metoda i składnia |
|---|---|
| 1 | pierwszy _.first (tablica, [n]) |
| 2 | Inicjał _.initial (tablica, [n]) |
| 3 | ostatni, ubiegły, zeszły _.last (tablica, [n]) |
| 4 | odpoczynek _.rest (tablica, [indeks]) |
| 5 | indeks _.indexOf (tablica, wartość, [posortowane]) |
| 6 | lastIndexOf _.lastIndexOf (tablica, wartość, [fromIndex]) |
| 7 | sortIndex _.sortedIndex (tablica, wartość, [iteracja], [kontekst]) |
| 8 | findIndex _.findIndex (tablica, predykat, [kontekst]) |
| 9 | findLastIndex _.findLastIndex (tablica, predykat, [kontekst]) |
Underscore.JS ma wiele łatwych w użyciu metod, które pomagają w przetwarzaniu tablic. W tym rozdziale omówiono je szczegółowo.
Underscore.JS udostępnia różne metody przetwarzania tablic, jak podano poniżej -
| Sr.No. | Metoda i składnia |
|---|---|
| 1 | spłaszczyć _.flatten (tablica, [płytka]) |
| 2 | bez _.without (tablica, * wartości) |
| 3 | unia _.union (* tablice) |
| 4 | skrzyżowanie _.intersection (* tablice) |
| 5 | różnica _.difference (tablica, * inne) |
| 6 | uniq _.uniq (tablica, [isSorted], [iteratee]) |
| 7 | zamek błyskawiczny _.zip (* tablice) |
| 8 | rozsunąć suwak _.unzip (tablica) |
| 9 | obiekt _.object (lista, [wartości]) |
| 10 | kawałek _.chunk (tablica, długość) |
| 11 | zasięg _.range ([start], stop, [step]) |
Underscore.JS ma wiele łatwych w użyciu metod, które pomagają w obsłudze funkcji. W tym rozdziale omówiono je szczegółowo.
Underscore.JS udostępnia różne metody obsługi funkcji wymienionych poniżej -
| Sr.No. | Metoda i składnia |
|---|---|
| 1 | wiązać _.bind (funkcja, obiekt, * argumenty) |
| 2 | częściowy _.partial (funkcja, * argumenty) |
| 3 | memoize _.memoize (funkcja, [hashFunction]) |
| 4 | opóźnienie _.delay (funkcja, czekaj, * argumenty) |
| 5 | pewnego razu _.once (funkcja) |
| 6 | przed _.before (liczba, funkcja) |
| 7 | owinąć _.wrap (funkcja, opakowanie) |
| 8 | negować _.negate (predykat) |
| 9 | komponować _.compose (* funkcje) |
Underscore.JS ma wiele łatwych w użyciu metod, które pomagają w mapowaniu obiektów. W tym rozdziale omówiono je szczegółowo.
Underscore.JS udostępnia różne metody obsługi mapowania obiektów, jak podano poniżej -
| Sr.No. | Metoda i składnia |
|---|---|
| 1 | Klucze _.keys (obiekt) |
| 2 | allKeys _.allKeys (obiekt) |
| 3 | wartości _.values (obiekt) |
| 4 | mapObject _.mapObject (obiekt, iteracja, [kontekst]) |
| 5 | pary _.pairs (obiekt) |
| 6 | odwracać _.invert (obiekt) |
| 7 | Stwórz _.create (prototyp, rekwizyty) |
| 8 | Funkcje _.functions (obiekt) |
| 9 | findKey _.findKey (obiekt, predykat, [kontekst]) |
Underscore.JS ma wiele łatwych w użyciu metod, które pomagają w aktualizacji obiektów. W tym rozdziale omówiono je szczegółowo.
Underscore.JS udostępnia różne metody obsługi aktualizacji obiektów, jak podano poniżej -
| Sr.No. | Metoda i składnia |
|---|---|
| 1 | poszerzać _.extend (miejsce docelowe, * źródła) |
| 2 | wybierać _.pick (obiekt, * klucze) |
| 3 | pomijać _.omit (obiekt, * klucze) |
| 4 | domyślne _.defaults (obiekt, * domyślne) |
| 5 | klon _.clone (obiekt) |
| 6 | kran _.tap (obiekt, przechwytywacz) |
| 7 | ma _.has (obiekt, klucz) |
| 8 | własność _.właściwość (ścieżka) |
| 9 | własność _.propertyOf (obiekt) |
Underscore.JS ma wiele łatwych w użyciu metod, które pomagają w porównywaniu obiektów. W tym rozdziale omówiono je szczegółowo.
Underscore.JS udostępnia różne metody porównywania obiektów, jak podano poniżej -
| Sr.No. | Metoda i składnia |
|---|---|
| 1 | dopasowanie _.matcher (atrybuty) |
| 2 | jest równy _.isEqual (obiekt, inny) |
| 3 | isMatch _.isMatch (obiekt, właściwości) |
| 4 | jest pusty _.isEmpty (obiekt) |
| 5 | isArray _.isArray (obiekt) |
| 6 | isObject _.isObject (wartość) |
| 7 | isArguments _.isArguments (obiekt) |
| 8 | isFunction _.isFunction (obiekt) |
| 9 | isString _.isString (obiekt) |
| 10 | isNumber _.isNumber (obiekt) |
| 11 | isFinite _.isFinite (obiekt) |
| 12 | isBoolean _.isBoolean (obiekt) |
| 13 | isDate _.isDate (obiekt) |
| 14 | isRegExp _.isRegExp (obiekt) |
| 15 | isError _.isError (obiekt) |
| 16 | isSymbol _.isSymbol (obiekt) |
| 17 | isMap _.isMap (obiekt) |
| 18 | isWeakMap _.isWeakMap (obiekt) |
| 19 | isSet _.isSet (obiekt) |
| 20 | isWeakSet _.isWeakSet (obiekt) |
| 21 | isNaN _.isNaN (obiekt) |
| 22 | isNull _.isNull (obiekt) |
| 23 | isUndefined _.isUndefined (wartość) |
Underscore.JS ma wiele łatwych w użyciu metod narzędziowych. W tym rozdziale omówiono je szczegółowo.
Underscore.JS udostępnia różne metody narzędziowe wymienione poniżej -
| Sr.No. | Metoda i składnia |
|---|---|
| 1 | tożsamość _.identity (wartość) |
| 2 | stały _.stała wartość) |
| 3 | noop _.noop () |
| 4 | czasy _.times (n, iteratee, [kontekst]) |
| 5 | losowy _. losowo (min, max) |
| 6 | mixin _.mixin (obiekt) |
| 7 | iteratee _.iteratee (wartość; [kontekst]) |
| 8 | unikalny identyfikator _.uniqueId ([prefiks]) |
| 9 | ucieczka _.escape (ciąg) |
| 10 | unescape _.unescape (ciąg) |
| 11 | wynik _.result (obiekt, właściwość, [defaultValue]) |
| 12 | teraz _.teraz() |
| 13 | szablon _.template (templateString, [ustawienia]) |
Underscore.JS ma metody tworzenia łańcucha metod, a następnie pobierania ich efektywnych wyników. W tym rozdziale omówiono je szczegółowo.
Underscore.JS udostępnia różne metody narzędziowe wymienione poniżej -
| Sr.No. | Metoda i składnia |
|---|---|
| 1 | łańcuch _.chain (obiekt) |
| 2 | wartość _.chain (obj) .value () |