0

0

拥抱 Underscore.js 的温暖

WBOY

WBOY

发布时间:2023-08-28 14:53:09

|

1158人浏览过

|

来源于php中文网

原创

拥抱 underscore.js 的温暖

随着 JavaScript 慢慢移出浏览器,出现了一些可以显着提高 JavaScript 稳健性的工具。

其中一个工具称为 Underscore.js,这就是我们今天要介绍的工具。让我们开始吧!


认识 Underscore.js

那么Underscore到底是做什么的?

Underscore 是一个 JavaScript 实用工具库,它提供了许多您在 Prototype.js(或 Ruby)中所期望的函数式编程支持,但没有扩展任何内置 JavaScript 对象。 使用 Python 或 Ruby 工作的好处之一是像 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; iscoreLimit) { 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 就像传入目标对象或数组以及选择哪个属性一样简单。在这里,我只是提取每个网站的利基市场。

地图

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 提供的处理数组的方法非常少。

蛙蛙写作——超级AI智能写作助手
蛙蛙写作——超级AI智能写作助手

蛙蛙写作辅助AI写文,帮助获取创意灵感,提供拆书、小说转剧本、视频生成等功能,是一款功能全面的AI智能写作工具。

下载

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

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

455

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

546

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

334

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

82

2025.09.10

jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

156

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

334

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

406

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

515

2023.12.04

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号