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库的资料还未整理好,等整理好后,再做更新。

时间: 2024-10-06 21:35:35

JS(JavaScript)脚本库的积累的相关文章

JavaScript图表库的新选择!LightningChart JS入门须知了解一下

对于LightningChart JS,可能很多用户并不是很了解这个产品,这是由Arction Ltd公司最新推出的JavaScript图表库工具.LightningChart JS是Web上性能最高的图表库具有出色的执行性能 - 使用高数据速率同时监控数十个数据源. GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用,从而实现高刷新率和流畅的动画.非常适合用于贸易,工程,航空航天,医药和其他领域的应用. 入门视频 LightningChart JS入门视频(一):使用JavaScr

探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密

原文:探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密 下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问百度首页的情景. 在firefox的请求瀑布图里有个表现非常之明显:就是javascript文件下载完毕后,有一段时间是没有网络请求被处理的,这段时间过后http请求才会接着执行,这段空闲时间就是所谓的http请求被阻塞

给开发者提供的 35 款 JavaScript 图形图表库

给开发者提供的 35 款 JavaScript 图形图表库 图表是数据图形化的表示,也就是“通过形象的图表来展示数据,比如条形图,折线图,饼图”.几乎每个开发或者项目管理团队都需要图表或者图形来简化 理解,可视化复杂的数据和 web 应用工作流.可视化图表可以帮助开发者更容易理解复杂d数据,提高生产的效率和 web 应用和项目的可靠性. JavaScript 图表和图形库就是一个简单创建图表和图形的工具.现在互联网上有许多五花八门的 JavaScript 图表和图形库,帮助开发者们更好的创建 w

html5shiv让IE也能支持HTML5标签的JavaScript兼容库

使用方法 作者已经把这段代码放到了Google code project上,不过由于Google的原因不能访问了,只需要在你的head标签中中调用这段代码就行. <!–if lt IE 9]> <script src="js/html5shiv.js"></script> <!–endif]–> 当然你也可以直接把这个文件下载到自己的网站上.这个文件必须在head标签中调用,因为IE必须在元素解析这前知道这些元素,才能启作用!或许你还要在

完全免费开源!开发者用了都说好的5款JavaScript图表库

用过不少的商用图表工具&图表库,比如Fusioncharts.AmChart,技术服务好,厂家的支持给力,总是物有所值.随着一些产品的开源,除了商用图表,现在也开始关注开源图表工具了.虽然和Fusioncharts.AmChart,这样的大品牌比起来,是小巫见大巫,不过这并不代表他们不行,相反,他们各有各的独特魅力,值得我们去发现他.使用它! Planetary.js 是一个JavaScript图表库,用于构建交互式地球仪.它使用D3 和TopoJSON 解析并显示地理数据. Planetary

微信小程序开发:学习笔记[5]——JavaScript脚本

微信小程序开发:学习笔记[5]--JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求. 在大部分开发者看来,ECMAScript和JavaScript表达的是同一种含义,但是严格的说,两者的意义是不同的.ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言, JavaScript 是 ECMAScript 的一种实现.理解 JavaScr

ABP展现层——Javascript函数库

ABP展现层——Javascript函数库 点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之21.ABP展现层——Javascript函数库 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://github.com/aspnetboilerplate ASP.NET Boil

SOAPUI中文教程---脚本和脚本库

SoapUI为脚本编写提供了广泛的选择,使用Groovy或Javascript(由SoupUI 3.0开发)作为脚本语言,使用哪些选项可在左下方的项目详细信息选项卡中设置项目级别. 这里提供的大部分文档将适用于Groovy语言,因为它可以大大简化Java API的脚本(您可以在Groovy网站上获取更多信息,教程等). 本文档将进一步介绍如何使用JavaScript的概述. 脚本可以在了SoapUI以下地方使用: Groovy Script TestStep 运行测试之前和之后运行一个TestC

JS的脚本语言

js的脚本语言全程javascript在网页里面使用的脚本语言:分类:1.嵌入网页里面2.在外部脚本标签可以写在网页的任何地方,但一般都写在网页的底部:<script type="text/javascript"></script>代表这是一个脚本:二.注释语法样式表的注释:单行注释用//表示:多行注释/**/可以注释多行文字: <!---->是在网页里面的注释:三.数据类型的分类:1.整型(存放整数的数据)用int来表示整型:2.flioat(单精