Hayati kehangatan Underscore.js

Sementara JavaScript perlahan-lahan bergerak keluar daripada penyemak imbas, terdapat alat yang boleh meningkatkan keteguhan JavaScript dengan ketara.

Salah satu alatan itu dipanggil Underscore.js, dan itulah alat yang akan kami perkenalkan hari ini. Mari mulakan!

---

Temui Underscore.js

Jadi, apa sebenarnya yang dilakukan oleh Underscore?

Underscore ialah perpustakaan utiliti JavaScript yang menyediakan banyak sokongan pengaturcaraan berfungsi yang anda harapkan dalam Prototype.js (atau Ruby), tetapi tanpa memanjangkan mana-mana objek JavaScript terbina dalam.

块引用>

Salah satu perkara yang menarik tentang bekerja dalam Python atau Ruby ialah binaan mewah seperti map yang menjadikan hidup lebih mudah. Malangnya, versi semasa JavaScript agak kasar dari segi utiliti peringkat rendah. map 这样的奇特结构，它让生活变得更加轻松。遗憾的是，当前版本的 JavaScript 在低级实用程序方面相当简陋。

正如您在上面所读到的，Underscore.js 是一个漂亮的小型 JavaScript 库，它以仅 4kb 的大小带来了数量惊人的功能。

---

下划线的实际应用

“关于图书馆的废话已经够多了”，我能听到你说。你是对的！在我继续我的大喊大叫之前，让我们先看看 Underscore 的运行情况。

假设您有一组随机的测试分数，并且您需要一个包含 90+ 分数的列表。您通常会写这样的内容：

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], 
topScorers = [], scoreLimit = 90;

for (i=0; i<=scores.length; i++)
{
	if (scores[i]>scoreLimit)
	{
		topScorers.push(scores[i]);
	}
}

console.log(topScorers);

它非常简单，即使进行了优化，对于我们想要做的事情来说也相当冗长。

让我们看看接下来可以使用 Underscore 实现什么目标。

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], 
topScorers = [], scoreLimit = 90;

topScorers = _.select(scores, function(score){ return score > scoreLimit;});

console.log(topScorers);

我不了解你，但我只是有一种书呆子气。这是一些令人难以置信的简洁和可读的代码。

---

很好，但我真的需要这个吗？

嗯，这完全取决于您想要做什么。如果您对 JavaScript 的使用仅限于玩弄 DOM，那么答案大多是否定的，因为 jQuery 可以完成您想做的大部分事情。

是的。

另一方面，如果您正在处理非 DOM 代码甚至复杂代码，请考虑 MVC、前端代码，Underscore 绝对是一个福音。

虽然该库公开的一些功能正在慢慢进入 ECMA 规范，但它并非在所有浏览器中都可用，并且让您的代码跨浏览器工作本身就是另一个噩梦。 Underscore 为您提供了一组很好的抽象，可以在任何地方使用。

如果您是一个以性能为导向的人（您应该如此），Underscore 会回退到本机实现（如果可用），以确保性能尽可能最佳。

---

开始使用

只需在此处获取源代码，将其包含在您的页面中即可。

如果您期待一个大型的设置过程，那么您将会非常失望。只需在此处获取源代码，将其包含在您的页面中即可。

Underscore 在全局范围内通过单个对象创建并公开其所有功能。该对象是标题下划线字符 _。

如果您想知道，是的，这与 jQuery 使用美元 [$] 符号的方式非常相似。就像 jQuery 一样，您可以重新映射此字符，以防遇到冲突。或者，如果您像我一样对波形符有一种非理性的喜爱。

---

函数式还是面向对象？

虽然该库的官方营销宣传声称它添加了函数式编程支持，但实际上还有另一种做事方式。

让我们以之前的代码为例：

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;

topScorers = _.select(scores, function(score){ return score > scoreLimit;});

console.log(topScorers);

上面的方法是功能性或程序性方法。您还可以使用更直接、可能更明显的面向对象方法。

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;

topScorers = _(scores).select(function(score){ return score > scoreLimit;});

console.log(topScorers);

没有真正的“正确”方法来做事，但请记住，您可以使用后一种方法链接 jQuery 式方法。

---

检查功能

Underscore 提供了 60 多个函数，涵盖了多种功能。从本质上讲，它们可以分为几组功能，这些功能运行于：

• 收藏
• 数组
• 对象
• 函数
• 实用程序

让我们看看每个部分的作用，如果适用，每个部分中我最喜欢的一两个。

---

集合

集合可以是数组，也可以是对象，如果我在语义上是正确的，则可以是 JavaScript 中的关联数组。

Underscore提供了很多对集合进行操作的方法。我们之前看到了 select 方法。这里有一些更非常有用的。

采摘

假设您有一个包含键值对的漂亮小数组，并且您想从每个数组中提取一个特定的属性。有了 Underscore，一切就轻而易举了。

var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];
var niches = _.pluck(Tuts, 'niche');

console.log(niches);

// ["Web Development", "WordPress", "PhotoShop", "After Effects"]

使用 pluck

Seperti yang anda baca di atas, Underscore.js ialah pustaka JavaScript kecil yang cantik yang membawa jumlah fungsi yang luar biasa pada jadual pada hanya 4kb.

Aplikasi praktikal garis bawah

🎜 "Cukup omong kosong tentang perpustakaan," saya boleh mendengar anda berkata. anda betul! Sebelum saya meneruskan kata-kata kasar saya, mari lihat Underscore beraksi. 🎜 🎜Andaikan anda mempunyai set markah ujian rawak dan anda memerlukan senarai yang mengandungi 90+ ​​markah. Anda biasanya akan menulis sesuatu seperti ini: 🎜

var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];

var names = _(Tuts).pluck('name').map(function (value){return value + '+'});

console.log(names);

// ["NetTuts+", "WPTuts+", "PSDTuts+", "AeTuts+"]

🎜Ia sangat mudah, dan walaupun dengan pengoptimuman, agak bertele-tele untuk apa yang kita mahu lakukan. 🎜 🎜Mari lihat apa yang boleh kita capai seterusnya dengan Underscore. 🎜

var Scores = [95, 82, 98, 78, 65];
var hasPassed = _(Scores).all(function (value){return value>50; });

console.log(hasPassed);

// true

🎜Saya tidak tahu tentang awak, tetapi saya hanya seorang kutu buku. Ini adalah beberapa kod yang sangat ringkas dan boleh dibaca. 🎜 🎜 🎜Hebat, tetapi adakah saya benar-benar memerlukan ini? 🎜 🎜Nah, semuanya bergantung pada apa yang anda mahu lakukan. Jika penggunaan JavaScript anda terhad kepada bermain dengan DOM, jawapannya kebanyakannya tidak, kerana jQuery boleh melakukan kebanyakan perkara yang anda mahu lakukan. 🎜

🎜Ya. 🎜

🎜Sebaliknya, jika anda berurusan dengan kod bukan DOM atau kod kompleks, fikirkan MVC, kod bahagian hadapan, Underscore pastinya satu kebaikan. 🎜 🎜Walaupun beberapa fungsi yang didedahkan oleh perpustakaan ini perlahan-lahan memasuki spesifikasi ECMA, ia tidak tersedia dalam semua penyemak imbas dan membolehkan kod anda berfungsi merentas penyemak imbas adalah satu lagi mimpi ngeri itu sendiri. Underscore memberi anda set abstraksi yang bagus yang boleh digunakan di mana-mana sahaja. 🎜 🎜Jika anda seorang yang berorientasikan prestasi (dan anda sepatutnya), Underscore akan kembali kepada pelaksanaan asli (jika ada) untuk memastikan prestasi yang terbaik. 🎜 🎜 🎜Mulakan🎜

🎜Cukup ambil kod sumber di sini dan masukkannya dalam halaman anda. 🎜

🎜Jika anda menjangkakan proses persediaan yang besar, anda akan berasa sangat kecewa. Hanya ambil kod sumber di sini dan masukkannya dalam halaman anda. 🎜 🎜Underscore dicipta secara global melalui satu objek dan mendedahkan semua fungsinya. Objeknya ialah watak garis bawah tajuk _. 🎜 🎜Sekiranya anda tertanya-tanya, ya, ini sangat serupa dengan cara jQuery menggunakan tanda dolar [$]. Sama seperti jQuery, anda boleh memetakan semula watak ini sekiranya anda menghadapi konflik. Atau jika anda seperti saya dan mempunyai cinta yang tidak rasional untuk tilde. 🎜 🎜 🎜Fungsi atau berorientasikan objek? 🎜 🎜Walaupun pemasaran rasmi perpustakaan mendakwa bahawa ia menambah sokongan pengaturcaraan berfungsi, sebenarnya terdapat cara lain untuk melakukan sesuatu. 🎜 🎜Mari kita ambil kod sebelumnya sebagai contoh: 🎜

var uniqTest = _.uniq([1,5,4,4,5,2,1,1,3,2,2,3,4,1]);

console.log(uniqTest);

// [1, 5, 4, 2, 3]

🎜Kaedah di atas adalah kaedah fungsional atau prosedural. Anda juga boleh menggunakan pendekatan berorientasikan objek yang lebih langsung dan mungkin lebih jelas. 🎜

var tens = _.range(0, 100, 10);

console.log(tens);

// [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]

🎜Tiada cara "betul" sebenar untuk melakukan sesuatu, tetapi perlu diingat bahawa anda boleh merangkai kaedah gaya jQuery menggunakan pendekatan yang kedua. 🎜 🎜 🎜Semak fungsi🎜 🎜Underscore menyediakan lebih daripada 60 fungsi merangkumi pelbagai fungsi. Pada asasnya, ia boleh dibahagikan kepada kumpulan fungsi, yang berjalan pada: 🎜

• Koleksi
• Susun atur
• Objek
• Fungsi
• Utiliti

🎜Mari kita lihat apa yang dilakukan oleh setiap bahagian dan, jika berkenaan, satu atau dua bahagian kegemaran saya daripada setiap bahagian. 🎜 🎜 🎜Koleksi🎜 🎜Koleksi boleh menjadi tatasusunan atau objek, atau tatasusunan bersekutu dalam JavaScript jika saya betul dari segi semantik. 🎜 🎜Underscore menyediakan banyak kaedah untuk mengendalikan koleksi. Kami melihat kaedah select sebelum ini. Berikut adalah beberapa lagi yang sangat berguna. 🎜 🎜Memilih🎜 🎜Andaikan anda mempunyai susunan kecil pasangan nilai kunci yang bagus dan anda ingin mengekstrak sifat tertentu daripada setiap tatasusunan. Dengan Underscore, ianya mudah. 🎜

var tens = _.range(0, 100, 10), eights = _.range(0, 100, 8), fives = _.range(0, 100, 5);

var common = _.intersection(tens, eights, fives );

console.log(common);

// [0, 40, 80]

🎜Menggunakan pluck adalah semudah menghantar objek atau tatasusunan sasaran dan memilih sifat yang hendak digunakan. Di sini saya hanya mengekstrak niche setiap laman web. 🎜 🎜Peta🎜 🎜Map mencipta tatasusunan daripada koleksi, di mana setiap elemen boleh diubah atau sebaliknya ditukar oleh fungsi. 🎜

让我们以前面的示例为例并对其进行一些扩展。

var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];

var names = _(Tuts).pluck('name').map(function (value){return value + '+'});

console.log(names);

// ["NetTuts+", "WPTuts+", "PSDTuts+", "AeTuts+"]

由于我注意到名称末尾缺少加号，因此我将它们添加到提取的数组中。

这里您不仅限于简单的串联。您可以根据自己的意愿随意修改传递的值。

全部

all 如果您需要检查集合中的每个值是否满足特定条件，则非常有用。例如，检查学生是否通过了每个科目。

var Scores = [95, 82, 98, 78, 65];
var hasPassed = _(Scores).all(function (value){return value>50; });

console.log(hasPassed);

// true

---

数组

Underscore 有很多专门处理数组的函数，这是非常受欢迎的，因为与其他语言相比，JavaScript 提供的处理数组的方法非常少。

Uniq

此方法基本上解析数组并删除所有重复元素，只为您提供唯一元素。

var uniqTest = _.uniq([1,5,4,4,5,2,1,1,3,2,2,3,4,1]);

console.log(uniqTest);

// [1, 5, 4, 2, 3]

当您解析巨大的数据集并需要清除重复项时，这非常方便。请记住，仅计算元素的第一个实例，因此保留原始顺序。

范围

一种非常方便的方法，可让您创建“范围”或数字列表。让我们看一个超级简单的例子。

var tens = _.range(0, 100, 10);

console.log(tens);

// [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]

该方法的参数依次为起始值、结束值和步长值。如果您想知道，使用负步长值会导致递减范围。

交叉路口

此方法将两个数组相互比较，并返回在所有传递的数组中找到的元素列表，即集合论中的交集。

让我们扩展前面的示例来看看它是如何工作的。

var tens = _.range(0, 100, 10), eights = _.range(0, 100, 8), fives = _.range(0, 100, 5);

var common = _.intersection(tens, eights, fives );

console.log(common);

// [0, 40, 80]

很简单，对吧？您只需传入要比较的数组列表，Underscore 就会完成剩下的工作。

---

对象

除了预期的 is 检查之外，Underscore 还提供了各种方法来克隆、扩展和其他操作对象。

这是我最喜欢的一些。

键和值

有一个巨大的对象，您只需要键或只需要值？使用 Underscore 真是太简单了。

var Tuts = { NetTuts : 'Web Development',  WPTuts : 'WordPress',  PSDTuts : 'PhotoShop', AeTuts : 'After Effects'};
var keys = _.keys(Tuts), values = _.values(Tuts);

console.log(keys + values);

// NetTuts,WPTuts,PSDTuts,AeTutsWeb Development,WordPress,PhotoShop,After Effects

默认值

当您需要创建具有合理默认值的对象（而创建对象时可能不会使用该默认值）时，此方法非常有用。

var tuts = { NetTuts : 'Web Development'};
var defaults = { NetTuts : 'Web Development', niche: 'Education'};

_.defaults(tuts, defaults);

console.log(tuts);

// Object { NetTuts="Web Development", niche="Education"}

---

函数

尽管听起来很奇怪，Underscore 的函数可以作用于函数。大多数函数在这里解释起来往往相当复杂，因此我们将看一下最简单的函数。

绑定

this 是 JavaScript 中难以捉摸的一部分，往往会让很多开发人员感到非常困惑。此方法旨在使其更容易解决。

var o = { greeting: "Howdy" }, 
	f = function(name) { return this.greeting +" "+ name; };

  var greet = _.bind(f, o); 

  greet("Jess")

这有点令人困惑，所以请留在这儿。绑定函数基本上让您无论何时何地调用该函数都可以保留 this 的值。

当您使用 this 被劫持的事件处理程序时，这特别有用。

---

实用程序

为了进一步提高交易的吸引力，Underscore 提供了大量的实用函数。由于我们的时间已经不多了，所以让我们看看重要的事情。

模板化

已经有大量的模板解决方案，但 Underscore 的解决方案因其实现相当小而功能相当强大而值得一看。

让我们看一个快速示例。

var data =   {site: 'NetTuts'}, template =   'Welcome! You are at <%= site %>';

var parsedTemplate = _.template(template,  data );

console.log(parsedTemplate);

// Welcome! You are at NetTuts

首先，我们创建数据来填充模板，然后创建模板本身。默认情况下，Underscore 使用 ERB 样式分隔符，尽管这是完全可自定义的。

有了这些，我们就可以简单地调用 template 来传递我们的模板和数据。我们将结果存储在一个单独的字符串中，以便稍后根据需要用于更新内容。

请记住，这是 Underscore 模板的极其简单的演示。您可以使用 分隔符在模板内使用任何 JavaScript 代码。当您需要迭代复杂的对象（例如 JSON 源）时，您可以与 Underscore 出色的集合函数配合来快速创建模板。

---

仍然不相信你应该选择这个

jQuery 和 Underscore 齐头并进。

不不不，你们都错了！如果说有什么不同的话，那就是 jQuery 和 Underscore 相辅相成，齐头并进。真的！

看，jQuery 在一些事情上做得非常好。其中最主要的是 DOM 操作和动画。它不涉及较高或较低级别的任何内容。如果像 Backbone 或 Knockout 这样的框架处理更高级别的问题，那么 Underscore 可以解决所有相对裸机的问题。

从更广泛的角度来看，jQuery 在浏览器之外没有什么用途，因为它的大部分功能都与 DOM 相关。另一方面，下划线可以在浏览器或服务器端使用，没有任何问题。事实上，Underscore 依赖它的 Node 模块数量最多。

好了，今天就讲到这里。考虑到 Underscore 的范围，我们在这里仅仅触及了皮毛。请务必查看更多图书馆内容，如果您有任何疑问，请在下面的评论中告诉我。非常感谢您的阅读！

Atas ialah kandungan terperinci Hayati kehangatan Underscore.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!