Underscore.JS - Hızlı Kılavuz
Underscore.JS, web geliştirmeyi kolaylaştırmak için 100'den fazla işlev sağlayan popüler bir javascript tabanlı kitaplıktır. Eşleme, filtre, çağırma ve işlev bağlama, javascript şablonu oluşturma, derin eşitlik denetimleri, dizin oluşturma vb. Gibi yardımcı işlevler sağlar. Underscore.JS, doğrudan bir tarayıcı içinde ve ayrıca Node.js ile kullanılabilir.
JavaScript kullanarak nesnelerle çalışmak oldukça zor olabilir, özellikle de onlarla yapılacak çok fazla manipülasyonunuz varsa. Alt Çizgi, nesnelerle çalışmanızı kolaylaştıran birçok özellikle birlikte gelir.
Underscore.JS, açık kaynak kodlu bir projedir ve kitaplığa kolayca katkıda bulunabilir, eklentiler şeklinde özellikler ekleyebilir ve GitHub ve Node.js'de kullanılabilir hale getirebilirsiniz.
Özellikleri
Underscore ile mevcut olan tüm önemli özellikleri ayrıntılı olarak anlayalım -
Koleksiyonlar
Underscore.JS, bir koleksiyonun her öğesine bir işlem uygulamak için kullanılan her biri, eşleme, azaltma gibi koleksiyonlar için çeşitli işlevler sağlar. GroupBy, countBy, max, min gibi koleksiyonları işleyen ve birçok görevi kolaylaştıran yöntemler sağlar.
Diziler
Underscore.JS, first, initial, lastIndexOf, intersection, fark vb. Gibi dizileri yinelemek ve işlemek gibi diziler için çeşitli işlevler sağlar.
Fonksiyonlar
Alt çizgi.JS bağlama, gecikme, önce, sonra vb. İşlevler sağlar.
Nesneler
Underscore.JS, nesneleri işlemek, nesneleri eşlemek ve nesneleri karşılaştırmak için işlevler sağlar. Örneğin, anahtarlar, değerler, extends, extendsOwn, isEqual, isEmpty vb.
Araçlar
Underscore.JS, noConflict, random, iteratee, escape vb. Gibi çeşitli yardımcı programlar sağlar.
Zincirleme
Underscore.JS, zincir değeri gibi zincirleme yöntemleri de sağlar.
Sonraki bölümlerde Underscore.JS'nin önemli işlevlerini ele alacağız.
Bu bölümde, yerel bilgisayarınızda Underscore.JS'nin çalışma ortamını kurmayı ayrıntılı olarak öğreneceksiniz. Underscore.JS üzerinde çalışmaya başlamadan önce, kitaplığa erişiminizin olması gerekir. Dosyalarına aşağıdaki yöntemlerden herhangi biriyle erişebilirsiniz -
Yöntem 1: Tarayıcıda Underscore.JS Dosyasını Kullanma
Bu yöntemde, resmi web sitesinden Underscore.JS dosyasına ihtiyacımız olacak ve onu doğrudan tarayıcıda kullanacağız.
Aşama 1
İlk adım olarak Underscore.JS'nin resmi web sitesine gidin. https://underscorejs.org/.
Size mevcut en yeni alt çizgi-min.js dosyasını UMD (Üretim) sunan bir indirme seçeneğinin mevcut olduğunu gözlemleyin . Bağlantıya sağ tıklayın ve farklı kaydet'i seçin. Dosyanın küçültülmüş ve küçültülmemiş olarak mevcut olduğunu unutmayın.
Adım 2
Şimdi dahil et underscore-min.js içinde scriptetiketleyin ve Underscore.JS ile çalışmaya başlayın. Bunun için aşağıda verilen kodu kullanabilirsiniz -
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>Burada verilen bir çalışma örneği ve daha iyi bir anlayış için çıktısı -
Misal
<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>Çıktı
Yöntem 2: Node.js'yi kullanma
Bu yöntemi tercih ediyorsanız, sahip olduğunuzdan emin olun. Node.js ve npmsisteminize kurulur. Underscore.JS'yi yüklemek için aşağıdaki komutu kullanabilirsiniz -
npm install underscoreUnderscore.JS başarıyla yüklendikten sonra aşağıdaki çıktıyı gözlemleyebilirsiniz -
+ [email protected]
added 1 package from 1 contributor and audited 1 package in 6.331s
found 0 vulnerabilitiesŞimdi, Underscore.JS'nin Node.js ile düzgün çalışıp çalışmadığını test etmek için tester.js dosyasını oluşturun ve aşağıdaki kodu ekleyin -
var _ = require('underscore');
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
console.log(listOfNumbers);Yukarıdaki programı şuraya kaydedin: tester.js. Bu programı derlemek ve çalıştırmak için aşağıdaki komutlar kullanılır.
Komut
\>node tester.jsÇıktı
1 2 3 4Underscore.JS, Koleksiyonları yinelemeye yardımcı olan kullanımı kolay birçok yönteme sahiptir. Bu bölüm bunları ayrıntılı olarak tartışmaktadır.
Underscore.JS, aşağıda listelendiği gibi Koleksiyonları yinelemek için çeşitli yöntemler sağlar -
| Sr.No. | Yöntem ve Sözdizimi |
|---|---|
| 1 | her biri _.each (liste, yineleme, [bağlam]) |
| 2 | harita _.map (liste, yineleme, [bağlam]) |
| 3 | azaltmak _.reduce (liste, yineleme, [not], [bağlam]) |
| 4 | azaltma hakkı _.reduceRight (liste, yineleme, [not], [bağlam]) |
| 5 | bulmak _.find (liste, yüklem, [bağlam]) |
| 6 | filtre _.filter (liste, yüklem, [bağlam]) |
| 7 | nerede _.where (liste, özellikler) |
| 8 | findWhere _.findWhere (liste, özellikler) |
| 9 | reddetmek _.reject (liste, yüklem, [bağlam]) |
| 10 | her _.every (liste, [yüklem], [bağlam]) |
| 11 | biraz _.some (liste, [yüklem], [bağlam]) |
Underscore.JS, Koleksiyonları işlemeye yardımcı olan kullanımı kolay birçok yönteme sahiptir. Bu bölüm bunları ayrıntılı olarak tartışmaktadır.
Underscore.JS, Koleksiyonları aşağıda listelendiği gibi işlemek için çeşitli yöntemler sağlar -
| Sr.No. | Yöntem ve Sözdizimi |
|---|---|
| 1 | içerir _.contains (liste, değer, [fromIndex]) |
| 2 | çağırmak _.invoke (liste, yöntemAdı, * bağımsız değişkenler) |
| 3 | yolmak _.pluck (liste, özellikAdı) |
| 4 | max _.max (liste, [yineleme], [içerik]) |
| 5 | min _.min (liste, [yineleme], [içerik]) |
| 6 | göre sırala _.sortBy (liste, yineleme, [bağlam]) |
| 7 | groupBy _.groupBy (list, iteratee, [bağlam]) |
| 8 | indexBy _.indexBy (liste, yineleme, [bağlam]) |
| 9 | countBy _.countBy (liste, yineleme, [bağlam]) |
| 10 | Karıştır _.shuffle (liste) |
| 11 | örneklem _.sample (liste, [n]) |
| 12 | sıralamak _.toArray (liste) |
| 13 | boyut _.size (liste) |
| 14 | bölüm _.partition (liste, yüklem) |
| 15 | kompakt _.compact (liste) |
Underscore.JS, Dizileri yinelemeye yardımcı olan kullanımı kolay birçok yönteme sahiptir. Bu bölüm bunları ayrıntılı olarak tartışmaktadır.
Underscore.JS, aşağıda listelendiği gibi Dizileri yinelemek için çeşitli yöntemler sağlar -
| Sr.No. | Yöntem ve Sözdizimi |
|---|---|
| 1 | ilk _.first (dizi, [n]) |
| 2 | ilk _.initial (dizi, [n]) |
| 3 | son _.last (dizi, [n]) |
| 4 | dinlenme _.rest (dizi, [dizin]) |
| 5 | indeksi _.indexOf (dizi, değer, [sıralı]) |
| 6 | lastIndexOf _.lastIndexOf (dizi, değer, [fromIndex]) |
| 7 | sıralanmışIndex _.sortedIndex (dizi, değer, [yineleme], [bağlam]) |
| 8 | findIndex _.findIndex (dizi, yüklem, [bağlam]) |
| 9 | findLastIndex _.findLastIndex (dizi, yüklem, [bağlam]) |
Underscore.JS, Dizileri işlemeye yardımcı olan kullanımı kolay birçok yönteme sahiptir. Bu bölüm bunları ayrıntılı olarak tartışmaktadır.
Underscore.JS, Dizileri aşağıda listelendiği gibi işlemek için çeşitli yöntemler sağlar -
| Sr.No. | Yöntem ve Sözdizimi |
|---|---|
| 1 | düzleştirmek _.flatten (dizi, [sığ]) |
| 2 | olmadan _.without (dizi, * değerler) |
| 3 | Birlik _.union (* diziler) |
| 4 | kavşak _. kesişme (* diziler) |
| 5 | fark _.difference (dizi, * diğerleri) |
| 6 | uniq _.uniq (dizi, [sıralı], [yinelenen]) |
| 7 | zip _.zip (* diziler) |
| 8 | fermuarını açmak _.unzip (dizi) |
| 9 | nesne _.object (liste, [değerler]) |
| 10 | yığın _.chunk (dizi, uzunluk) |
| 11 | Aralık _.range ([başlat], durdur, [adım]) |
Underscore.JS, işlevleri işlemeye yardımcı olan kullanımı kolay birçok yönteme sahiptir. Bu bölüm bunları ayrıntılı olarak tartışmaktadır.
Underscore.JS, aşağıda listelenen işlevleri işlemek için çeşitli yöntemler sağlar -
| Sr.No. | Yöntem ve Sözdizimi |
|---|---|
| 1 | bağlamak _.bind (işlev, nesne, * bağımsız değişkenler) |
| 2 | kısmi _.bölümlü (işlev, * bağımsız değişkenler) |
| 3 | hatırlamak _.memoize (işlev, [hashFunction]) |
| 4 | gecikme _.delay (işlev, bekleme, * bağımsız değişkenler) |
| 5 | bir Zamanlar _.once (işlev) |
| 6 | önce _.before (sayma, işlev) |
| 7 | paketlemek _.wrap (işlev, sarmalayıcı) |
| 8 | olumsuzlamak _.negate (yüklem) |
| 9 | oluşturmak _.compose (* işlevler) |
Underscore.JS, nesnelerin haritalanmasına yardımcı olan kullanımı kolay birçok yönteme sahiptir. Bu bölüm bunları ayrıntılı olarak tartışmaktadır.
Underscore.JS, aşağıda listelendiği gibi nesne eşlemeyi işlemek için çeşitli yöntemler sağlar -
| Sr.No. | Yöntem ve Sözdizimi |
|---|---|
| 1 | anahtarlar _.keys (nesne) |
| 2 | allKeys _.allKeys (nesne) |
| 3 | değerler _.values (nesne) |
| 4 | mapObject _.mapObject (nesne, yineleme, [bağlam]) |
| 5 | çiftler _.pairs (nesne) |
| 6 | ters çevirmek _.invert (nesne) |
| 7 | oluşturmak _.create (prototip, sahne donanımı) |
| 8 | fonksiyonlar _.functions (nesne) |
| 9 | findKey _.findKey (nesne, yüklem, [bağlam]) |
Underscore.JS, nesneleri güncellemede yardımcı olan kullanımı kolay birçok yönteme sahiptir. Bu bölüm bunları ayrıntılı olarak tartışmaktadır.
Underscore.JS, aşağıda listelendiği gibi nesne güncellemelerini işlemek için çeşitli yöntemler sağlar -
| Sr.No. | Yöntem ve Sözdizimi |
|---|---|
| 1 | uzatmak _.extend (hedef, * kaynaklar) |
| 2 | toplamak _.pick (nesne, * anahtarlar) |
| 3 | çıkarmak _.omit (nesne, * anahtarlar) |
| 4 | varsayılanlar _.defaults (nesne, * varsayılanlar) |
| 5 | klon _.clone (nesne) |
| 6 | dokunmak _.tap (nesne, engelleyici) |
| 7 | vardır _.has (nesne, anahtar) |
| 8 | Emlak _.property (yol) |
| 9 | mülkiyet _.propertyOf (nesne) |
Underscore.JS, nesneleri karşılaştırmaya yardımcı olan kullanımı kolay birçok yönteme sahiptir. Bu bölüm bunları ayrıntılı olarak tartışmaktadır.
Underscore.JS, aşağıda listelendiği gibi nesne karşılaştırmasını yapmak için çeşitli yöntemler sağlar -
| Sr.No. | Yöntem ve Sözdizimi |
|---|---|
| 1 | eşleştirici _.matcher (attrs) |
| 2 | eşittir _.isEqual (nesne, diğer) |
| 3 | isMatch _.isMatch (nesne, özellikler) |
| 4 | boş _.isEmpty (nesne) |
| 5 | isArray _.isArray (nesne) |
| 6 | isObject _.isObject (değer) |
| 7 | isArguments _.isArguments (nesne) |
| 8 | isFunction _.isFunction (nesne) |
| 9 | isString _.isString (nesne) |
| 10 | numara _.isNumber (nesne) |
| 11 | isFinite _.isFinite (nesne) |
| 12 | isBoolean _.isBoolean (nesne) |
| 13 | isDate _.isDate (nesne) |
| 14 | isRegExp _.isRegExp (nesne) |
| 15 | isError _.isError (nesne) |
| 16 | isSymbol _.isSymbol (nesne) |
| 17 | isMap _.isMap (nesne) |
| 18 | isWeakMap _.isWeakMap (nesne) |
| 19 | isSet _.isSet (nesne) |
| 20 | isWeakSet _.isWeakSet (nesne) |
| 21 | isNaN _.isNaN (nesne) |
| 22 | isNull _.isNull (nesne) |
| 23 | tanımsız _.isUndefined (değer) |
Underscore.JS, kullanımı kolay birçok yardımcı yönteme sahiptir. Bu bölüm bunları ayrıntılı olarak tartışmaktadır.
Underscore.JS, aşağıda listelendiği gibi çeşitli yardımcı yöntemler sağlar -
| Sr.No. | Yöntem ve Sözdizimi |
|---|---|
| 1 | Kimlik _.kimlik (değer) |
| 2 | sabit _.sabit değer) |
| 3 | noop _.noop () |
| 4 | zamanlar _.times (n, yineleme, [bağlam]) |
| 5 | rastgele _.random (min, maks) |
| 6 | karıştırmak _.mixin (nesne) |
| 7 | yineleme _.iteratee (değer, [bağlam]) |
| 8 | uniqueId _.uniqueId ([önek]) |
| 9 | kaçış _.escape (dize) |
| 10 | manzarasız _.unescape (dize) |
| 11 | sonuç _.result (nesne, özellik, [varsayılanDeğer]) |
| 12 | şimdi _.now () |
| 13 | şablon _.template (templateString, [ayarlar]) |
Underscore.JS, bir yöntem zinciri oluşturmak ve ardından bunların etkili sonuçlarını almak için yöntemlere sahiptir. Bu bölüm bunları ayrıntılı olarak tartışmaktadır.
Underscore.JS, aşağıda listelendiği gibi çeşitli yardımcı yöntemler sağlar -
| Sr.No. | Yöntem ve Sözdizimi |
|---|---|
| 1 | Zincir _.chain (nesne) |
| 2 | değer _.chain (obj) .value () |