JS(JavaScript)脚本库的积累

在现在互联网盛行的时代，使得B/S架构飞速发展。曾经在大学的时候我一直都梦想着毕业后要找一个像腾讯这样大企业做C/S方面的开发工作（其实现在腾讯也有很多B/S软件），因为C/S体验度非常高，感觉非常好。但是此时此刻，我却没有这样的想法了。这是为什么呢？对于有经验的软件工程师都很清楚，B/S的程序部署在服务器，客户端只需要浏览器即可使用，而C/S需要客户在终端安装客户端程序，所以B/S在维护和升级方面的简易性上，无疑有独有优势，而且对客户端的硬件要求相对于C/S软件一般都要低。B/S当然它也有它的弊病，就是客户端使用不同版本浏览器，显示结果会有所差异，这个其实就是浏览器的兼容性导致的，而C/S一般不存在。

 

现在随着经济水平的发展，对物质的要求越来越高，对互联网的体验度的也要求越来越高，所以网站设计体验越来越重要，它关系到产品的成败（产品的成败是指的客户是否接受，而不是产品可以正常运行）。一些中大型软件公司都有独立的UED部门，他们主要从事软件界面设计，小公司的话也有美工设计。其实对于一个网站前端设计，大致主要是四大技术HTML+CSS+IMAGE+JS（暂不谈论优化这一块的技术）。其中JS提高体验度的重中之重。因为JS是前端脚本，很多公司和工程师，为了方便开发，封装了很多JS库，供团队使用。其中互联网上有很多非常优秀开源JS库，都可以找到源码，示例和文档。一个网站如果用这些JS库就会加快项目开发速度，而且它们兼容性会更好，用户的体验度也会更高。我们通常可以使用JS库能帮助我们实现很多复杂的功能或者常用的功能，如：菜单树、弹窗、验证、文本编辑器、图表、日期等。

 

我们使用这些JS库的其实目的很简单，就是为了让他帮助实现自己想实现的部分功能。这里就需要考虑到了一些问题，如代码开源与否，是否还有团队维护，是否允许商用，同行使用率是否高等。以方便使用过程中遇到问题，可以得到维护团队的解决或自行解决。因为JS也是别人写的，它就是一个产品（开发团队可能公开源码却不允许商用。其中开源协议中有定义，可以百度找下），它就会存在bug。

 

我之所以废话这么多，其实就是想表述JS值得大家去学习和研究，网络上的资源很多。即使你是后台工程师，你学习它对工作会有非常大帮助。

 

下面我再来总结一下常用的JS脚本库，供大家学习参考。其实大多数的JS库都是基于jQuery

 

一、基本库

 

1、jQuery

 

a、简介

 

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

 

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

 

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

 

jQuery，顾名思议，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

 

c、官方网站：http://jquery.com/ 

 

b、学习指南或文档

 

     学习教程：http://www.w3school.com.cn/jquery/

 

     在线API：http://www.css88.com/jqapi-1.9/

 

※注：jQuery2.*将不再支持IE6/7/8浏览器，如果你无法抛弃IE 6/7/8，那么你可以继续使用jQuery 1.*

 

二、常用JS库

 

1、验证（jquery.validate）

 

a、简介

 

这个 jQuery 插件方便简单验证客户端表单，同时仍提供大量的自定义选项。如果您正在重新开始构建一些新的东西，但当想要的已有的东西(这里指的是JS脚本)融入现有的应用程序里，它使一个不错的选择。该插件捆绑了一组有用的验证方法，包括 URL 和电子邮件验证，同时提供一个 API 来让你您自己编写方法。所有验证方法可以默认错误提示消息语言是英语和已经翻译成的其他37语言。

 

b、官方网站：http://jqueryvalidation.org/

 

c、学习指南或文档:http://jqueryvalidation.org/documentation/

 

2、弹窗(artDialog)

 

a、简介

 

artDialog是一个精巧的web对话框组件，压缩后只有十多KB，并且不依赖其他框架。

 

b、官方网站：http://jqueryvalidation.org/

 

c、学习指南或文档:http://jqueryvalidation.org/documentation/

 

3、日期(My97日期控件)

 

a、简介

 

支持静态限制，动态限制，脚本自定义限制，以及无效天和无效日期功能，利用这样功能可以任意定制不能选择的日期，这些日期即使毫无规律，毫无连续性，也可以通过这些功能的组合使用轻松搞定。

 

b、官方网站:http://www.my97.net

 

c、学习指南或文档:见官网

 

4、菜单树(zTree)

 

a、简介

 

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等。

 

b、官方网站: http://www.ztree.me

 

c、学习指南或文档: 见官网

 

5、图表(ECharts)

 

a、简介

 

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

 

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达 图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现。

 

b、官方网站：http://echarts.baidu.com

 

c、学习指南或文档: 见官网

 

6、在线编辑器(KindEditor)

 

a、简介

 

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序接合。

 

b、官方网站：http://kindeditor.net

 

c、学习指南或文档: 见官网

 

 

 

三、WebUI

 

1、jQuery UI

 

a、简介

 

jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。

 

b、官方网站：http://jqueryui.com/

 

c、学习指南或文档: http://www.w3cschool.cc/jqueryui/jqueryui-intro.html

 

2、EasyUI

 

a、简介

 

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式 有深入的了解，开发者需要了解的只有一些简单的html标签。

 

b、官方网站：http://www.jeasyui.com/

 

c、学习指南或文档: http://www.w3cschool.cc/jeasyui/jqueryeasyui-tutorial.html

 

由于时间的关系有些JS库的资料还未整理好，等整理好后，再做更新。