jquery抓取网页内容( CodePen上的演示——3.1.1上插件)

　　jquery抓取网页内容(

CodePen上的演示——3.1.1上插件)

　　

　　又一年即将结束，正如我们预期的那样，网络平台将继续爆炸式增长，涌现出大量创新、兴奋和令人兴奋的新工具和技术。与此同时，作为开发人员，我们的生活变得更加简单。

　　React 和 Angular 等流行工具不断更新，而 Vue.js 等更新工具已经出现并迅速吸引了大量开发人员的兴趣。

　　众所周知，由于我策划了一本专注于开发工具的周刊，而且我在研究的过程中也遇到了一些可笑的事情，所以我会更加关注流行的工具。但我仍然欣赏那些既有趣又有用但很少被注意的工具。

　　所以，就像去年一样，在这篇文章中，我将与你分享一些我今年最喜欢的为前端开发人员构建的工具。

　　模态

　　我总是觉得具有可访问性功能的工具在我们的行业中往往被低估了。所以，我要分享的第一个工具是一个灵活易用的模态窗口插件。

　　

　　尽管找到模态窗口插件并不难，但很难找到能够检测所有窗口及其功能的插件。这个模态窗口的行为与它应该的完全一样——它是响应式的。它完全基于用户交互（例如，当您按下 ESC 键时，它会关闭）。同时通过了Web Content Accessibility Guidelines2.version 0的AA级，接受几乎所有类型的内容，支持全屏操作，并提供pre/post open和close的回调事件，以及很快。

　　这是 CodePen 上的一个演示，我将通过代码演示如何使用它。

　　

　　但是，使用 Modaal 的唯一缺点是它目前依赖于 jQuery，因此无法使用 jQuery 的 slim 插件构建它。我在 CodePen 上演示了 jQuery 3.1.1，我还用 V2.0 对其进行了测试。因此，它应该适用于 jQuery 1.11.2 及更高版本。

　　果酱 API

　　这个WEB服务可以在很多不同的场景中派上用场，不仅仅局限于前端开发。它被描述为“一种利用 CSS 选择器将任何站点转换为 JSON 可访问 API 的服务”。所以，它是一个帮助你抓取内容的工具——但是，CSS 部分确实让前端开发人员感觉很有趣。

　　

　　使用API​​时，需要对Jam API网站进行POST请求，并发送你要抓取网站的URL地址，代码会根据你使用Node的环境而有所不同, Ruby 等来展示。为方便起见，我将演示他们在 GitHub 存储库中提供的 JavaScript 示例。使用这个示例，我将构建一个简单的工具，向您展示如何从我的 CSS 值中获取任何 CSS 属性的可能值网站。

　　这是 CodePen 的演示：

　　

　　当然，这个例子没有实际意义，因为 CSS Values网站 已经这样做了。但这是演示 Jam API 工作原理的简单方法。

　　JavaScript的关键代码部分如下：

　　body: JSON.stringify({

url: 'http://cssvalues.com',

json_data: '{"values": "#' + prop + ' ul"}'

})

　　这里我输入我要抓取的网站的地址，然后我使用CSS选择器来确定要抓取页面的哪个部分。因此，如果用户输入 display 属性，JavaScript 将评估如下：

　　body: JSON.stringify({

url: 'http://cssvalues.com',

json_data: '{"values": "#display ul"}'

})

　　自从构建了我自己的 网站，我知道每个 CSS 属性都有一个与其属性名称相匹配的 ID。我还了解到，每个属性的值都列在无序列表中。所以，只要你了解 HTML 的结构，获取这些值对你来说是非常有用的。

　　postcss-grid-kiss

　　当我第一次看到这个工具时，我认为这是一个笑话。但显然它是一个真正的 PostCSS 插件，旨在使 W3C 的新网格布局模块语法不言自明。

　　通常，当我们使用网格布局时，CSS 会是这样的：

　　body {

display: grid;

align-content: space-between;

grid-template-rows: 120px 1fr 60px;

grid-template-columns: 150px 1fr;

grid-template-areas:

"header header"

"sidebar main "

"footer footer"

}

body > header {

grid-area: header;

align-self: start

}

body > .sidebar {

grid-area: sidebar

}

body > main {

grid-area: main

}

body > footer {

grid-area: footer;

justify-self: center;

align-self: end

}

　　然而，当我们使用 postcss-grid-kiss 时，你会这样写：

　　body {

grid-kiss:

"+------------------------------+ "

"| header ↑ | 120px"

"+------------------------------+ "

" "

"+--150px---+ +----- auto -----+ "

"| .sidebar | | main | auto "

"+----------+ +----------------+ "

" "

"+------------------------------+ "

"| ↓ | "

"| → footer ← | 60px "

"+------------------------------+ "

}

　　是的，你没看错：你基本上可以使用 ASCII 字符作为 grid-kiss 属性值来绘制你的 网站 布局。然后插件将为您处理，类似于第一个代码块中显示的 CSS 等效项。

　　此外，文档还包括一个可以实时操作语法的地方。它还鼓励开发人员切换键盘上的插入键，并使用其文本编辑器中可用的多光标功能来更有效地绘制网格。

　　虽然，我不是 PostCSS 的用户，只是在实时操作中试验语法。但无论如何，我认为将此工具添加到列表中仍然是明智之举。

　　MJML 应用程序

　　HTML 电子邮件正在蓬勃发展，您可能已经注意到，每个月都会发布大量资源和工具来帮助响应式电子邮件通讯设计和编码。MJML 应用程序是一个本地桌面应用程序，允许您使用 MJML 创建和编辑响应式 HTML 电子邮件，以及编译为电子邮件兼容 HTML（即嵌套表格代码）的自定义标记语言框架。

　　

　　今年年初，它的框架和应用程序发布，该应用程序可在 Windows、OSX 和 Linux 上使用。编辑器还有很多主题供你选择，还支持分屏查看和实时预览。

　　这是一个简单的 MJML 语法示例：

　　

Testing

　　正如您在此 Gist 中所读到的，它呈现有效的 HTML。虽然有点麻烦，但这就是使语言和应用程序有用的原因 - 您不必担心它的兼容性，它会为您完成所有工作。该应用程序还支持导出 MJML 或 HTML，您可以将模板快速保存为 GitHub 中的匿名 Gists。

　　DevTools 时间线查看器

　　这是来自 Chrome DevTools 团队的官方工具，可让您轻松查看和共享您的 DevTools 时间线跟踪的 URL。Chrome DevTools 中的 Timeline 选项卡可帮助您记录和分析 Web 应用程序的活动。通过分析 JavaScript、图形等，您可以检测潜在的性能问题。

　　

　　通过捕获一些时间线数据（通过刷新在时间线中打开的页面，或通过点击“记录”并与页面交互），您将看到基于捕获内容的详细图表和数据。

　　当您右键单击时间线时，您会注意到有“加载时间线数据”和“保存时间线数据”选项。“保存...”选项会将您的时间线数据导出到 JSON 文件。然后，您可以将该数据保存到 Dropbox、GitHub Gist 或 Google Drive 以与他人共享。从现在开始，您可以轻松地与远程工作人员和同事共享时间线数据。

　　如您所见，我使用此处导出的数据的 Gist 示例。如果您还不熟悉 Chrome DevTools 上的 Timeline，那么这是了解它的好地方。

　　通知记录器

　　这个工具，你可以很容易地得到它。如果您进行大量 JavaScript 调试，您可能正在使用 console.log 消息。这比做烦人的alert() 更有用，但是每次想要做一个简单的日志时打开控制台还是有点乏味。

　　

　　Notification Logger 可以轻松解决这个问题，它使用 Notification API 将您的 console.log 消息转换为桌面通知。使用 logger.init 初始化时，可以调用 logger.destroy 来恢复正常的 console.log 功能，只通过桌面通知，或者同时通过桌面通知和控制台控制台。

　　这说得通。您不仅不必打开控制台来查看日志消息，因为消息通知与浏览器窗口分离，而且您不必取消停靠 DevTools 即可获得原创窗口大小。

　　中冷器.js

　　这个工具在 Hacker News 上引起了很多关注，同时也引发了一些关于它的实用性的争议。它被描述为“带有属性的 Ajax”，这也使得它吸引了那些喜欢使用 Hook HTML 并且需要较少 JavaScript 库的人。

　　

　　该库通过添加到 HTML 元素的预定义 ic-* 属性来工作，完整的参考可在 网站 获得。例如，您可以使用 ic-target 和 ic-get-from 等属性来创建内置的点击编辑 UI；使用 ic-history-elt 添加 URL/历史支持；使用 ic-prepend-from 和 ic-poll 创建暂停/播放 UI。您还可以在示例页面上获得更多描述和演示。

　　这个库唯一的缺点是它依赖于 jQuery（它看起来像 1.10.2+ 支持）。但我想这没什么大不了的，因为这类项目的目标开发人员可能是那些使用 jQuery 的人。

　　Intercooler 承诺您可以在不重写的情况下逐步将 Ajax 添加到现有应用程序中，并且它还可以与任何后端技术或其他 JavaScript 框架一起使用。

　　荣誉奖

　　以下是我今年发现的一些更酷的东西：

　　今年你发现了哪些有用的前端工具？

　　如果您在过去一年中发现了一些未知的工具或库来改进您的工作流程或简化某些开发，请在评论中与我们分享。同时，我希望我在本文中提到的工具可以帮助您或您的团队。

　　如果你觉得 文章 不错，请点赞。

　　笔记：

　　因译者水平有限，如有翻译不当，请指正，我会尽快修改；

　　本文版权归原作者所有。如需转载，请注明出处，谢谢！

　　英文原版：前端工具：我最喜欢的 2016 年发现