现在有很多各种各样的JavaScript库,但这里将介绍7个很优秀的可用于你下一个JavaScript项目的库。
仪表盘是用于目标或业务流程的视觉指示工具,也用于切割杂乱无章的数据,从而分割出要点的重要工具。它可帮助评估信息,并及时做出正确的决定。实时可视化的仪表盘由图标、测绘图、图形符号,以及数据表格等组成。
目前有一些开源或商业的库用于创建仪表盘。在本文中,我们将会展示一些可帮助创建美观且可自定义的仪表盘的JavaScript库。
1.Gridster.js
Gridster是一个jQuery插件,可以从跨多个列的元素构建直观的可拖拽布局。
它可以让你从网格中动态添加或删除小部件,甚至可以获得一个具有所有小部件位置的对象的JavaScript数组,从而可以在以后使用这些数组来加载小部件。
2.angular-gridster
这是一个用于AngularJS的格子状小部件的实现。它具有jQuerygridster插件等功能,也具有一些其他的功能。
它完全使用Angular指令重写,还可以使用Angular的数据绑定功能。
3.gridstack.js
gridstack.js是一个用于小部件布局的jQuery插件,灵感来自gridster.js。这是一个可拖放的多列网格,可让你构建可拖拽的响应式Bootstrapv3的友好布局,
它还适用于knockout.js,angular.js和触摸设备。
4.jQueryGridly
Gridly是一个jQuery插件,电脑培训http://www.kmbdqn.cn/建议可用于拖放以及在网格中调整大小。
5.Packery
Packery是一个JavaScript库和jQuery插件,可用于生成无缝且可拖拽的布局。它使用bin-packing算法来填充空隙。
它适合用于创建一个可拖拽的仪表盘和无缝的“砖石图像画廊”布局。
EMCAScript6(ES6)是最新的Javascript,它包含了一些很棒的新特性。这些特性拥有不同程度的复杂性,对于简单的脚本和复杂的应用程序都非常的有用。\x0d\x0a\x0d\x0a增加的新特性:\x0d\x0a\x0d\x0a1.箭头操作符\x0d\x0a如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs。\x0d\x0a我们知道在JS中回调是经常的事,而一般回调又以匿名函数的形式出现,每次都需要写一个function,甚是繁琐。当引入箭头操作符后可以方便地写回调了。\x0d\x0a\x0d\x0a2.类的支持\x0d\x0aES6中添加了对类的支持,引入了class关键字(其实class在JavaScript中一直是保留字,目的就是考虑到可能在以后的新版本中会用到,现在终于派上用场了)。JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。\x0d\x0a\x0d\x0a3.增强的对象字面量\x0d\x0a对象字面量被增强了,写法更加简洁与灵活,同时在定义对象的时候能够做的事情更多了。具体表现在:\x0d\x0a(1).可以在对象字面量里面定义原型\x0d\x0a(2).定义方法可以不用function关键字\x0d\x0a(3).直接调用父类方法\x0d\x0a\x0d\x0a4.字符串模板\x0d\x0a字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生。\x0d\x0a\x0d\x0a5.解构\x0d\x0a自动解析数组或对象中的值。比如若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。但在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。\x0d\x0a\x0d\x0a6.参数默认值,不定参数,拓展参数\x0d\x0a(1).默认参数值\x0d\x0a现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。\x0d\x0a(2).不定参数\x0d\x0a不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖,在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中,?x代表了所有传入add函数的参数.\x0d\x0a(3).拓展参数\x0d\x0a拓展参数则是另一种形式的语法糖,它允许传递数组或者类数组直接做为函数的参数而不用通过apply。\x0d\x0a\x0d\x0a6.let与const 关键字\x0d\x0a可以把let看成var,只是它定义的变量被限定在了特定范围内才能使用,而离开这个范围则无效。const则很直观,用来定义常量,即无法被更改值的变量。\x0d\x0a\x0d\x0a7.for of 值遍历\x0d\x0a我们都知道for in 循环用于遍历数组,类数组或对象,ES6中新引入的for of循环功能相似,不同的是每次循环它提供的不是序号而是值。\x0d\x0a8.模块\x0d\x0a在ES6标准中,JavaScript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的,比如CommonJS和AMD模式。\x0d\x0a\x0d\x0a9.Map,Set 和 WeakMap,WeakSet\x0d\x0a这些是新加的集合类型,提供了更加方便的获取属性值的方法,不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的。同时,在进行属性值添加与获取时有专门的get,set方法。\x0d\x0a\x0d\x0a10.Proxies\x0d\x0aProxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力,同时在数据绑定方面也很有用处。\x0d\x0a\x0d\x0a11.Symbols\x0d\x0a我们知道对象其实是键值对的集合,而键通常来说是字符串。而现在除了字符串外,我们还可以用symbol这种值来做为对象的键。Symbol是一种基本类型,像数字,字符串还有布尔一样,它不是一个对象。Symbol 通过调用symbol函数产生,它接收一个可选的名字参数,该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性,外部无法直接访问由symbol做为键的属性值。\x0d\x0a\x0d\x0a12.Math,Number,String,Object 的新API\x0d\x0a对Math,Number,String还有Object等添加了许多新的API。下面代码同样来自es6features,对这些新API进行了简单展示。\x0d\x0a\x0d\x0a13.Promises\x0d\x0aPromises是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的deferred 对象。当你发起一个异步请求,并绑定了.when(), .done()等事件处理程序时,其实就是在应用promise模式。1、cypress
Cypress是新一代前端测试框架,它基于node js。解决了开发人员和QA工程师在测试现代应用程序时面临的关键难点问题。
2、rollup
rollup是一款小巧的javascript模块打包工具,更适合于库应用的构建工具可以将小块代码编译成大块复杂的代码,基于ES6 modules,它可以让你的 bundle 最小化,有效减少文件请求大小
3、day.js
2KB 不可变日期和时间库。
4、immer.js
Immer核心实现是利用 ES6 的 proxy,几乎以最小的成本实现了 js 的不可变数据结构,简单易用、体量小巧、设计巧妙,满足了我们对JS不可变数据结构的需求。
5、jsdoc
JSDoc 是一个根据 JavaScript 文件中注释信息,生成 JavaScript 应用程序或模块的API文档的工具。你可以使用 JSDoc 标记如:命名空间,类,方法,方法参数等。从而使开发者能够轻易地阅读代码,掌握代码定义的类和其属性和方法,从而降低维护成本,和提高开发效率。
6、ramda.js
一款实用的 JavaScript 函数式编程库。
7、p-limit
以有限的并发运行多个承诺返回和异步函数
可以限制Javascript中的promise或同时阻止来自服务器的所有请求调用。
8、Akta
为Javascript应用程序量身定制的状态管理库
9、js-cookie
用于处理浏览器cookie的轻量级Javascript API。