Underscore.js の暖かさを受け入れてください-＆＃＆プレス-php.cn

拥抱 Underscore.js 的温暖

JavaScript が徐々にブラウザーから移行していく中、JavaScript の堅牢性を大幅に向上させるツールが登場しています。

ツールの 1 つは Underscore.js と呼ばれるもので、それが今日紹介するツールです。はじめましょう！

Underscore.js について知る

それでは、Underscore は正確に何をするのでしょうか?

Underscore は、Prototype.js (または Ruby) に期待される関数型プログラミングのサポートの多くを提供する JavaScript ユーティリティライブラリですが、組み込みの JavaScript オブジェクトは拡張しません。
块引用>
Python や Ruby で作業する利点の 1 つは、map のような派手な構造体があり、作業が非常に簡単になることです。残念ながら、JavaScript の現在のバージョンは、低レベルのユーティリティという点では非常に粗雑です。

上で読んだとおり、Underscore.js はわずか 4kb で信じられないほどの量の機能をテーブルにもたらす、美しく小さな JavaScript ライブラリです。

アンダーラインの実際の応用

「図書館についてのナンセンスはもうたくさんだ」というあなたの声が聞こえます。あなたが正しいです！暴言を続ける前に、Underscore の動作を見てみましょう。

ランダムなテストスコアのセットがあり、90 点のスコアを含むリストが必要だとします。通常は次のように書きます:
リーリー
これは非常にシンプルで、最適化を行ったとしても、私たちがやりたいことに関しては非常に冗長です。

Underscore を使って次に何ができるか見てみましょう。
リーリー
あなたはどうか知りませんが、私はただのオタクです。これは信じられないほど簡潔な および の読みやすいコードです。

素晴らしいですが、これは本当に必要ですか?

まあ、すべてはあなたが何をしたいかによって決まります。 JavaScript の使用が DOM の操作に限定されている場合、やりたいことのほとんどは jQuery で実行できるため、答えはほとんどノーです。
＃＃＃＃＃＃はい。

一方、非 DOM コードや複雑なコードを扱っている場合は、MVC、フロントエンドコード、Underscore が間違いなく役立ちます。

このライブラリによって公開されている機能の一部は徐々に ECMA 仕様に組み込まれていますが、すべてのブラウザで利用できるわけではなく、コードをブラウザ間で動作させること自体がもう 1 つの悪夢です。アンダースコアは、どこでも使用できる優れた抽象化のセットを提供します。

あなたがパフォーマンス重視の人であれば (そうであるべきです)、Underscore は可能な限り最高のパフォーマンスを保証するために (可能な場合) ネイティブ実装にフォールバックします。

使い始める

ここからソースコードを取得して、ページに含めてください。

大規模なセットアッププロセスを期待している場合は、非常に失望するでしょう。ここからソースコードを取得して、ページに含めるだけです。

Underscore は単一のオブジェクトを通じてグローバルに作成され、そのすべての機能を公開します。オブジェクトはタイトルのアンダースコア文字 _ です。

ご参考までに、はい、これは jQuery がドル [$] 記号を使用する方法と非常に似ています。 jQuery と同様に、競合が発生した場合に備えて、この文字を再マップできます。あるいは、あなたも私と同じで、チルダに異常な愛情を持っている場合は、

関数指向かオブジェクト指向か?

ライブラリの公式マーケティングでは、関数型プログラミングのサポートを追加すると主張していますが、実際には別の方法があります。

前のコードを例として見てみましょう:
リーリー
上記のメソッドは関数的メソッドまたは手続き型メソッドです。より直接的で、おそらくより明白なオブジェクト指向のアプローチを使用することもできます。
リーリー
物事を行うための実際の「正しい」方法はありませんが、後者のアプローチを使用して jQuery スタイルのメソッドをチェーンできることに留意してください。

チェック機能

Underscore は、さまざまな機能をカバーする 60 以上の関数を提供します。基本的に、これらは以下で実行される関数のグループに分割できます。
＃＃＃集める＃＃＃＃＃＃配列＃＃＃＃＃＃物体＃＃＃＃＃＃関数＃＃＃
ユーティリティ

各セクションの内容を見てみましょう。該当する場合は、各セクションから私のお気に入りを 1 つか 2 つ挙げてみましょう。

＃＃＃集める＃＃＃
コレクションは配列またはオブジェクト、または意味的に正しい場合は JavaScript の連想配列になります。

Underscore には、コレクションを操作するためのメソッドが多数用意されています。
select
メソッドについては前に説明しました。ここではさらに非常に便利なものをいくつか紹介します。
＃＃＃選ぶ＃＃＃
キーと値のペアの小さな配列があり、各配列から特定のプロパティを抽出するとします。アンダースコアを使えば簡単です。
リーリー
pluck
の使用は、ターゲットオブジェクトまたは配列を渡してプロパティを選択するだけで簡単です。ここでは、各 Web サイトのニッチな部分だけを抽出します。
＃＃＃地図＃＃＃
Map は、関数によって各要素を変更または変更できるコレクションから配列を作成します。

让我们以前面的示例为例并对其进行一些扩展。
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 的范围，我们在这里仅仅触及了皮毛。请务必查看更多图书馆内容，如果您有任何疑问，请在下面的评论中告诉我。非常感谢您的阅读！