超全超实用的Javascript类库和jQuery插件大全之二：文字处理，表格和列表处理，实用的javascript开发工具

2022-01-24 07:59:54

日期：2012-10-15 来源：GBin1.com

如果你需要解决一些开发中遇到的技术问题的话，很可能会找到一些相关的javascript类库或者是jQuery插件来实现。这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的，特别是如果你不希望自己去处理不同浏览器的兼容性问题的话，使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率。

使用javascript类库可能并不一定是最好的选择，很多情况1下可能你会发现类库加载并不正确，或者有性能上的问题，例如，移动设备上使用js类库。很多情况下使用类似jQuery的类库可能有点杀鸡用宰牛刀的感觉，然而，一些超轻量级的类库可能更加的实用。这里我们也会介绍一些。

在这个两个部分的文章中，我们将介绍一些非常实用的javascript和jQuery类库，帮助你解决你经常遇到的问题。你可能知道一些，但是你肯定不会都知道。希望我们这片文章能够帮助你发现一些你能应用到项目中的实用类库。

这里我们继续超全超实用的Javascript类库和jQuery插件大全之一系列。这是第二部分，包含如下内容：

文字处理:

syntax highlighter – URI.js – jQuery URL parser – cutting paragraphs – text truncation – TOC generator –FAQ generator – sorting text by relevancy.

表格和列表处理:

table styling – searchable/sortable lists – visual search – nested sortable lists – large data sets – CSV to table conversion (or Csonv.js) – Excel-like tables – advanced tables

实用的javascript开发工具:

Yeoman – command line for JS – image placeholder – percentage loader – URL parser – URI normalization –touch events – multi-touch gestures – Markdown Embedding – accessibility enhancement – templating engine– filepicker – extensible regex – client-side caching

文字处理

Prism

一个轻量级并且可扩展的语法高亮类库。不需要指定的class或者标签，你可以使用标准的标签。Prism支持web workers。所有的样式都是由CSS来处理生成，比较敏感的class名称包括，.comment，.string，.property等等。压缩版1.5kb

TOC jQuery Plugin: Generate Tables Of Contents

这个类库可以帮助你针对页面生成一个内容表格，支持自定义并且当前内容可以高亮显示。轻量级，可以在页面上使用多次，包含了一个页面内容平滑滚动功能。类似的插件有：Tocify jQuery plugin

MagicNav: Generates Links for The FAQ

如果你希望创建一个快速FAQ导航，你可以使用这个jQuery插件，能够动态的生成内容的导航链接

Cutter.js

这个类库解决了内容剪裁问题，可能你有内容长度的限制，而且你不希望修改标签。它帮助你简单的剪裁内容到需要的长度，而且允许你查看完整的内容。

Trunk8

这是个文字剪裁jQuery类库，帮助你剪裁合适的文字来适应页面内容。和传统的剪裁不一样，它不指定文字长度来剪裁而是自动剪裁合适的文字长度来适应给定的空间。

Relevancy.js

这个类库允许你基于数组项目的相关性来排序。这个脚本尝试基于部分内容来匹配，当然目前来说这个方式还没有非常成功的实现。它需要你提供一个字符串来匹配内容进行排序。

表格和列表处理

Handsontables: Excel-Like Tables For The Web

这个超棒的jQuery类库帮助你自动的扩展和自动补齐来添加行和列内容。同时包含了图例，滚动，上下文菜单，条件格式化和其它特性。你可以设置监控表格变化。所有的数据都可以被拷贝到excel，google spreadsheet和libreoffice。

List.js

一个跨浏览器的本地js类库将HTML列表转变成灵活的可编辑内容。是的你的列表更加容易搜索和排序。一个模板驱动的概念使得你更加简单的编辑和添加内容

Create Nested Sortable Lists With jQuery

这个插件帮助你创建一个可排序的列表，你的用户可以拖拽列表中的项目到任何选择的配置。你可以设置各种属性，例如最大的镶套数量层次，设置自定义的方法（包括层次，数组和序列化）。类似插件还有 HTML5 Sortable ，一个HTML5实现的类似功能

Pivot.js

使用pivot你可以轻松的处理大量数据。这个类库帮助你创建自定义的表格视图。pivot表格工具结果（例如，排序，计算，总计，平均数）可以来自输入数据(JSON或者CSV)并被显示为HTML表格

jQuery CSV to Table

这个类库从CSV文件中或者tab分隔文件TSV中读取数据并且生成HTML table

Csonv.js

一个小巧的类库用来获取CSV数据。使用中，每一个文件代表一个实体，类库可以镶套数据，就好像在数据库中使用SQL join一样。

DataTables jQuery Plug-in

这个类库可以显示不同来源的数据，例如，DOM，数组，或者服务器端JSON格式文件。提供了分页，过滤和多列排序功能。很多免费的功能都通过插件来实现，例如，行分组，列过滤，列改变大小。这个类库最小68kb，gzip后20kb。开源并且基于GPL和BSD。

实用的javascript开发工具

Yeoman

一套类库和工具帮助你处理新的项目，自动编译coffeescript和Compass，基于jshint来运行你的脚本以便测试正确的语言覆盖并且优化你的图片。有效的利用了NodeJS，Compass和PhantomJS等插件，要求安装Node 0.8.x

Grunt.js: Task-Based Command Line Tool

Grunt是一个基于任务的javascript命令行编译工具。拥有大量的预定义的任务：文件关联，项目管理，JSHint语法验证，UglifyJS压缩，qUnit单元测试，服务器启动，运行单元测试等

Holder.js

一个客户端的图片占位类库，帮助你处理生成浏览器中的占位内容。支持在线和离线，提供了一个链状的API。你可以使用在不同区域不同的主题。因为它使用你的设置扩展了缺省的设置，你只需要包含哪些你需要修改的配置即可

PxLoader

一个javascript类库帮助你在执行一定操作前更简单的下载图片，声音文件或者其它文件。这个脚本允许你设置一个HTML5游戏或者网站的preloader。你可以监控下载状态甚至设定优先级。

Percentage Loader

这个超棒的进度条我们在分享一个超炫HTML5开发的jQuery进度条插件 - percentageloader 中介绍过这个超棒的类库，允许你生成漂亮的进度条样式。

Resumable.js

这个类库设计用来处理大文件的HTTP上传容错机制。提供了多个，同时，可续传的HTML文件API，这意味着丢失连接后不需要一个完整的重新上传。用户可以不担心丢失来管理上传。当然，需要浏览器支持HTML5 File API，所有只有Firefox4+和Chrome11+可以使用。

History.js

这个类库优雅的在浏览器中支持HTML5 history/State API（pushState，replaceState，onPopState）。包括了而支持数据，标题，replaceState。支持jQuery，Mootools和Prototype。你可以修改URL，不需要使用hashes。

Jurlp

一个jQuery的URL的插件用来解析，处理，过滤和监控URL中的href和src属性，也可以从URL创建锚定元素。

URI.js

如果处理URL，你可以使用这个类库。提供了jQuery样式的API。提供简单，强大的方式来处理查询字符串，拥有很多URI相关的功能方法，可以转化相对和绝对路径。

Touchy.js

一个处理触摸事件的类库，没有任何类库依赖。可以很方便的帮助你处理触摸事件。类似类库： Hammer.js

gridster.js

这个超酷的类库在 jQuery插件：超酷的多列网格式拖放插件gridster.js文章中我们曾经介绍过，另外一个款非常不错的拖拽jQuery插件。

Strapdown.js

这个工具帮助你嵌入一个编辑器到你的页面。不需要任何服务器端支持。跨浏览器并且拥有Github风格的语法高亮。

accessifyhtml5.js

一个HTML5的 polyfill 。很多现代浏览器都支持HTML的新的元素。但是缺乏ARIA访问属性。这个脚本帮助添加这些属性到你的网站。

jQuery++

一个jQuery的扩展类库，添加了很多事件和特性。参考：jQuery的实用特性扩展类库：jQuery++

Hogan.js

Twitter的模板引擎，允许针对vanilla javascript来你预编译你的模板。这个引擎使用Mustache测试套件来开发

Zepto.js

超棒的轻量级的javascript类库，拥有类似jQuery的语法。更多信息请查看：了解轻量级的移动开发Javascript类库- Zepto.js

Has.js

帮助你查找所使用类库参考及其关联的javascript类库，纯javascript实现

XRegExp

一个开源的MIT license的js类库。提供了可扩展的正则表达式。提供了跟多新的语法，标示和方法。类似类库：Matches.js

FrameWarp

这个类库帮助你使用CSS过渡效果来展示页面。拥有一个辅助方法来比较iframe中的URL和地址栏中的URL。如果匹配则访问iframe中的DOM，并且添加APU方法，一个隐藏，另一个发送消息到父窗口。

Filer.js

基于HTML5的File system API的封转类库。重用了类似UNIX的命令，是的HTML5更加容易使用。可能你对另外一个类库DownloadBuilder.js也有兴趣。提供了本地文件合并及其用户session存储来缓存JSONP/AJAX请求

Client Side Caching For JavaScript

服务器端缓存对于响应速度非常有益处。但是有时候可能希望在客户端执行缓存。这个类库使用HTML5的本地存储来缓存内容。拥有类似memcache的API。不依赖其它类库。如果浏览器不支持本地存储的话，这个类库可以自动适应。IE6/7用户不会遇到任何js错误。

最后两个好东西

ReView.js

我们曾经介绍过的review.js，超棒的javascript响应式视图（viewport）切换工具类库，帮助你更好的控制和管理响应式视图。

A Hotline For All Your JavaScript Problems

在线帮助你处理javascript问题的网站，当然，使用英文！

via smashingmagazine

来源：超全超实用的Javascript类库和jQuery插件大全之二：文字处理，表格和列表处理，实用的javascript开发工具

日期：2012-10-8 来源：GBin1.com

因为文章篇幅的原因，这里我们分为几个部分：

web表单
web印刷排版
实用类库
地图和图片

快速了解：

下面你将看到一个简单的类库列表介绍，每个类库连接到了对应的网站，能够帮助你快速的找到需要的类库工具。

web表单：

forms framework – auto-saving drafts – file upload (and resuming large downloads) – <select> boxes – modal boxes – form accordion – dynamic labels – drop-down with images – tooltips – extended input – form validation – credit card validation (alternative) – email check – password complexity

web印刷排版：

repairing vertical baseline – align text to a grid – responsive measure – fixing widows – fluid line height –scalable headlines (or smart headlines) – Lettering.js – Kerning.js

实用类库：

exchange rates and currency – date/time formatting – relative timestamps – number and currency formatting– cookies.js – zip.js – extra string methods – countdown.js – sticky content – Google Maps – interactive maps– progress bar – favicon notifications (or Notificon)

图片，地图和图形：

world maps – subway map – Google maps – open source maps – SVG fallback – gauges – graphs – timeline– Retina display – magnifying glass – interactive graphs – plots – time visualization

Web表单和输入验证

一个用来替换和增强<select>的jQuery插件。这个插件支持搜索，远程数据集合无限滚动。用户可以通过输入来查找他们需要查找的内容。非匹配的内容将会被移除，选择项可以通过鼠标单击和回车来选取。这个插件可以支持标准的selectbox和多选selectbox及其optgroup。同时也支持selected，disabled和缺省文字（HTML5的placeholder属性）。这个插件基于Chosen，另外一个支持jQuery，Mootools和Prototype及其Drupal 7模块的类库解决方案。