1. Immutable.js
如今 React+Redux+Immutable.js 的组合已在项目中广泛应用,但对于 Vue 技术栈的同学们来说,认知 immutable-js 也同样关键且必要。
通过 immutable-js 构造的数据一旦创建,就不会更改;原理是:每当对其进行修改时,会返回一个新的 immutable 对象,以此来保证先前数据不可变(底层数据结构 Trie 前缀树 + 结构共享 Structural Sharin)。
如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享
这样做的优势就是:节省 CPU、节省内存;
因为我们常通过深拷贝解决不变数据的问题,深拷贝即需要做额外的操作消耗 CPU、拷贝新数据需新内存;
例🌰
import { Map} from 'immutable';
let a = Map({
select: 'users',
filter: Map({ name: 'Cam' })
})
let b = a.set('select', 'people');
a === b; // false
a.get('filter') === b.get('filter'); // true
复制代码
2. Redux.js
Redux 并非 React 人专用,它借用函数式编程思想,旨在提供可预测的状态管理;
具体的,在 Redux 中的 state 没有 setter
方法,取而代之的是:state 经过一个接一个的 reducer
函数计算后得值,state 只读,不可修改;
这正是 FP 中 把原始不可变的数据放入不同函数组合成的管道进行计算 的思想!
例🌰
function visibilityFilter(state = 'SHOW_ALL', action) { // state 只读
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
text: action.text,
completed: false
}
]
case 'COMPLETE_TODO':
return state.map((todo, index) => {
if (index === action.index) {
return Object.assign({}, todo, {
completed: true
})
}
return todo
})
default:
return state
}
}
import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos }) // Reducer 组合 == 函数组合
let store = createStore(reducer)
复制代码
3. Omniscient.js
Omniscient.js 用于将 不可变数据 自上而下的快速渲染;
例🌰
var React = require('react');
var ReactDOM = require('react-dom');
var component = require('omniscient');
var HelloMessage = component(({name}) => <div>Hello {name}</div>);
ReactDOM.render(<HelloMessage name="John" />, document.querySelector('#app'));
复制代码
// without JSX
var {div} = React.DOM; // Extract the div convenience function from React
var HelloMessage = component(({name}) => div({}, `Hello ${name}`));
// Omniscient components are interoperable with JSX and non-JSX
ReactDOM.render(HelloMessage({ name: 'John' }), document.querySelector('#app'));
复制代码
4. D3.js
至于 JavaScript 可视化图表库,本瓜一直用 Echart.js,永远的神;
不过,要知道的是 Github 上 star 最多的 JS 图标库是 D3.js Star 98.8K+ ✨
5. SurveyJS
SurveyJS 是目前可用的最多的 feature-rich 调查/表单库;并且它可以很容易地定制和扩展,以满足您的需要。
配置后生成代码:
6. Final Form
轻松创建漂亮且易于表单的库;
当表单状态更改时,React Final Form 能重新渲染仅需要更新的组件:
import { Form, Field } from 'react-final-form'
复制代码
const MyForm = () => (
<Form
onSubmit={onSubmit}
validate={validate}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<h2>Simple Default Input</h2>
<div>
<label>First Name</label>
<Field name="firstName" component="input" placeholder="First Name" />
</div>
<h2>An Arbitrary Reusable Input Component</h2>
<div>
<label>Interests</label>
<Field name="interests" component={InterestPicker} />
</div>
<h2>Render Function</h2>
<Field
name="bio"
render={({ input, meta }) => (
<div>
<label>Bio</label>
<textarea {...input} />
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
)}
/>
<h2>Render Function as Children</h2>
<Field name="phone">
{({ input, meta }) => (
<div>
<label>Phone</label>
<input type="text" {...input} placeholder="Phone" />
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
)}
</Field>
<button type="submit">Submit</button>
</form>
)}
/>
)
复制代码
7. Choreographer.js
一个简单的库来处理复杂的动画;
$ npm install --save choreographer-js
复制代码
const Choreographer = require('choreographer-js')
let choreographer = new Choreographer({
animations: [
{
range: [-1, 1000],
selector: '#box',
type: 'scale',
style: 'opacity',
from: 0,
to: 1
}
]
})
window.addEventListener('mousemove', function(e) {
choreographer.runAnimationsAt(e.clientX)
})
复制代码
8. typeahead.js
在输入框输入信息后,自动提示补全;
9. Multiple.js
创建跨多个元素的共享背景(包括背景的渐变效果),激发网站视觉;
.selector {
background-image: linear-gradient(white, black);
background-size: cover;
background-position: center;
background-attachment: fixed; /* <- here it is */
width: 100px;
height: 100px;
}
复制代码
关键:background-attachment: fixed
将背景扩展到视口的大小并在每个元素中显示适当的块;不过在移动端,则需 clip: rect(0 auto auto 0)
额外处理;
10. ApexCharts
图表具有更好的交互~~ 适用 js 原生 + 3 大框架;
本瓜体验了一下,确实有不一样的交互感受,很细节(●'◡'●);
11. Premonish.js
Premonish 可以检测用户鼠标的移动位置并预测他们要移向哪个元素,帅的嘛,不谈了~~ 😀
前往体验便知它是怎么预测的:地址
import Premonish from 'premonish';
const premonish = new Premonish({
selectors: ['a', '.list-of' '.selectors', '.to', '#watch'],
elements: [] // Alternatively, provide a list of DOM elements to watch
});
premonish.onIntent(({el, confidence}) => {
console.log(el); // The DOM node we suspect the user is about to interact with.
console.log(confidence); // How confident are we about the user's intention? Scale 0-1
});
复制代码
12. Stretchy
用于表单元素自动调整大小;还能监听你的 input 等文本框大小,如果尺寸错误,则会报错;体积 1.5KB;
13. Hammer.JS
Hammer 是一个开源库,可以识别由触摸、鼠标和指针事件做出的手势。它没有任何依赖关系,而且很小,只有 7.34 kB!
var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
console.log(ev);
});
复制代码
默认情况下,它添加了一组tap
、doubletap
、press
、水平 pan
和swipe
以及多点触控pinch
和rotate
识别器;
14. JS Encrypt
JS Encrypt 为应用程序提供易于实现的 RSA JavaScript 加密;
15. Discord.js
discord.js 是一个强大的 Node.js 模块,可让您轻松与 Discord API 交互;
- Discord 是一款专为社群设计的免费网路即时通话软体与数位发行平台,拥有 1.3 亿注册用户;
16. Google Maps Utility Library
顾名思义,谷歌地图共用库,可将 Google 地图导航,以及其它基于地图的功能应用于你的程序当中;
17. Typed.js
Typed.js 提供打字动画,兼容性极好。
18. Math.js
有了这个库,复杂的数学问题就可以在前端浏览器上计算,而不会给后端服务器带来压力;它具有灵活的表达式解析器,支持符号计算,内置大量函数和常量,并提供了一个集成的解决方案来处理不同的数据类型,如数字、大数、复数、分数、单位和矩阵;
功能强大且易于使用~
19. howler.js
howler.js 让音频处理变得容易、好用;
20. ScrollMagic
给你得网页滚动效果施加魔法!
纸上得来终觉浅,抽空也试一试吧~~
小结
可以看到,以上分享的库,有的库高达几百 K star,有的库在小 1 K star 徘徊,但也丝毫不影响它们被列在一起;本瓜以为:反而,这些体量小的库,能针对解决某一项问题,核心原理奇妙,官网也做得特别精美,叫人爱之尤甚;
还是那句老话:工具选的好,下班下的早;开发工作分两类:写轮子的为一类,用轮子的为一类;写轮子也是从用轮子做起的,因为找不到更适用的轮子,才想自己写一个,分享给大家用;开源万岁!
以上。愿君有所获~
作者:掘金安东尼
链接:https://juejin.cn/post/7017575020633260069
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。