Underscore.js의 따뜻함을 받아들이세요

JavaScript가 브라우저에서 천천히 이동함에 따라 JavaScript의 견고성을 크게 향상시킬 수 있는 도구가 있습니다.

그 중 Underscore.js라는 도구가 있는데, 오늘 소개할 도구가 바로 그것입니다. 시작하자!

---

Underscore.js를 만나보세요

그렇다면 Underscore의 역할은 정확히 무엇인가요?

Underscore는 Prototype.js(또는 Ruby)에서 기대할 수 있는 많은 기능적 프로그래밍 지원을 제공하지만 내장된 JavaScript 개체를 확장하지 않는 JavaScript 유틸리티 라이브러리입니다.

块引用>

Python 또는 Ruby에서 작업할 때의 이점 중 하나는 map와 같은 멋진 구성으로 인해 삶이 ​​훨씬 쉬워진다는 것입니다. 불행히도 현재 버전의 JavaScript는 하위 수준 유틸리티 측면에서 매우 조잡합니다.

위에서 읽은 것처럼 Underscore.js는 단 4kb의 테이블에 엄청난 양의 기능을 제공하는 아름답고 작은 JavaScript 라이브러리입니다.

---

밑줄 활용법

“도서관에 대한 헛소리는 그만하세요.”라고 말하는 것이 들립니다. 당신 말이 맞아요! 계속해서 불평하기 전에 Underscore가 실제로 작동하는 모습을 살펴보겠습니다.

임의의 시험 점수 집합이 있고 90개 이상의 점수가 포함된 목록이 필요하다고 가정해 보겠습니다. 일반적으로 다음과 같이 작성합니다.

으아아아

매우 간단하며, 최적화를 하더라도 우리가 하려는 작업에 대해서는 상당히 장황합니다.

Underscore를 통해 다음에 무엇을 달성할 수 있는지 살펴보겠습니다.

으아아아

당신은 어떤지 모르겠지만 저는 좀 멍청해요. 이것은 믿을 수 없을 정도로 간결하고 읽기 쉬운 코드입니다.

---

좋아요. 그런데 이게 꼭 필요한가요?

글쎄, 그것은 모두 당신이 무엇을 하고 싶은지에 달려 있습니다. JavaScript 사용이 DOM을 다루는 것으로 제한되어 있다면 대답은 대부분 '아니요'입니다. 왜냐하면 jQuery는 여러분이 원하는 대부분의 작업을 수행할 수 있기 때문입니다.

그렇습니다.

반면에 DOM이 아닌 코드나 복잡한 코드를 다루고 있다면 MVC, 프런트엔드 코드, Underscore가 확실히 도움이 될 것입니다.

이 라이브러리에서 제공하는 기능 중 일부가 ECMA 사양에 서서히 반영되고 있지만 모든 브라우저에서 사용할 수 있는 것은 아니며 코드가 여러 브라우저에서 작동하도록 하는 것은 그 자체로 또 다른 악몽입니다. Underscore는 어디에서나 사용할 수 있는 멋진 추상화 세트를 제공합니다.

당신이 성과 지향적인 사람이라면(그리고 그래야만 한다면) Underscore는 가능한 최고의 성능을 보장하기 위해 기본 구현(가능한 경우)으로 돌아갈 것입니다.

---

시작하기

여기에서 소스 코드를 가져와서 페이지에 포함하세요.

대규모 설정 과정을 기대했다면 크게 실망하실 것입니다. 여기에서 소스 코드를 가져와서 페이지에 포함시키세요.

Underscore는 단일 개체를 통해 전역적으로 생성되며 모든 기능을 노출합니다. 개체는 제목 밑줄 문자 _입니다.

궁금하시겠지만, 그렇습니다. 이는 jQuery가 달러 [$] 기호를 사용하는 방식과 매우 유사합니다. jQuery와 마찬가지로 충돌이 발생할 경우 이 문자를 다시 매핑할 수 있습니다. 아니면 당신이 나와 같고 물결표에 대한 비합리적인 사랑을 가지고 있다면.

---

함수 지향인가요, 아니면 객체 지향인가요?

도서관의 공식 마케팅에서는 함수형 프로그래밍 지원을 추가한다고 주장하지만 실제로는 다른 작업 방식이 있습니다.

이전 코드를 예로 들어보겠습니다.

으아아아

위의 방법은 기능적 또는 절차적 방법입니다. 보다 직접적이고 보다 명확한 객체 지향 접근 방식을 사용할 수도 있습니다.

으아아아

일을 수행하는 데 실제로 "올바른" 방법은 없지만 후자의 방법을 사용하여 jQuery 스타일 방법을 연결할 수 있다는 점을 명심하세요.

---

체크 기능

Underscore는 다양한 기능을 포괄하는 60개 이상의 기능을 제공합니다. 기본적으로 다음에서 실행되는 기능 그룹으로 나눌 수 있습니다.

컬렉션
배열
객체
기능
유틸리티

각 부분의 기능을 살펴보고, 해당되는 경우 각 부분에서 내가 가장 좋아하는 한두 가지를 살펴보겠습니다.

---

컬렉션

컬렉션은 배열이나 객체가 될 수 있으며, 의미상 올바른 경우 JavaScript의 연관 배열이 될 수도 있습니다.

Underscore는 컬렉션을 조작하는 다양한 방법을 제공합니다. 우리는 앞서

방법을 보았습니다. 여기에 더 유용한 것들이 있습니다. select

픽킹

키-값 쌍으로 구성된 작은 배열이 있고 각 배열에서 특정 속성을 추출한다고 가정해 보겠습니다. Underscore를 사용하면 매우 쉽습니다.

으아아아

사용은 대상 객체나 배열을 전달하고 사용할 속성을 선택하는 것만큼 간단합니다. 여기서는 각 웹사이트의 틈새시장을 추출했습니다. pluck

지도

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 的范围，我们在这里仅仅触及了皮毛。请务必查看更多图书馆内容，如果您有任何疑问，请在下面的评论中告诉我。非常感谢您的阅读！

위 내용은 Underscore.js의 따뜻함을 받아들이세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!