Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”
This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.
Small sense: recently you or see more List of articles, the so-called List of articles, such as 10, 20 recommended er, more even, ten thousand words points listed, eye-catching extreme, sincere flow password; This melon comments the List of articles, do not want to comment on its praise or criticism, because it is nothing more than the form of writing, good or bad, the judgment standard lies in its content; The List of articles covers a wide range of topics, with a clear context, a low threshold, a clear purpose and various needs. Why not? But especially warned the author, do not destroy its advantages, fill more with dross, so that the visitors see the title of evil, far, put the cart before the horse. 🐶
1. Immutable.js
The React+Redux+Immutable. Js combination is now widely used in projects, but it is also critical and necessary for students of the Vue stack to recognize Immutable.
Once created, immutable data constructed by imMUTation-js does not change; Each time it is modified, a new IMmutable object is returned to ensure that the previous data is immutable (the underlying data structure Trie prefix tree + the structure shares Structural Sharin).
If a node in the object tree changes, only that node and its affected parent are modified, and the other nodes are shared
The advantages of this are: save CPU, save memory;
This is because we often solve the problem of immutable data by deep copy, which requires additional operations to consume CPU and new memory to copy new data.
Example 🌰
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
Copy the code2. Redux.js
Redux isn’t just for React people. It borrows functional programming ideas and aims to provide predictable state management.
Specifically, there is no setter method for state in Redux. Instead, state is obtained after reducer function calculation one after another. State is read-only and cannot be modified.
This is the idea of putting raw immutable data into a pipeline of different functions for calculation in FP!
Example 🌰
function visibilityFilter(state = 'SHOW_ALL', Action) {// state read-only 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, Map-reducers == map-reducers == map-reducersCopy the code3. Omniscient.js
Omniscient.js is used for fast top-down rendering of immutable data;
Example 🌰
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'));
Copy the code// 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'));
Copy the code4. D3.js
As for the JavaScript visual chart library, Bengua has always used Echart.js, god forever;
However, the most popular JS icon library for Star on Github is d3.js star 98.8k + ✨
Chart.js Star 55K+ ✨;
5. SurveyJS
SurveyJS is the most feature-rich survey/form library available; And it can be easily customized and extended to suit your needs.
Generate code after configuration:
6. Final Form
Easy to create beautiful and form-friendly libraries;
React Final Form can re-render components that only need to be updated when the Form state changes:
import { Form, Field } from 'react-final-form'
Copy the codeconst 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> )} /> )Copy the code7. Choreographer.js
A simple library to handle complex animations;
$ npm install --save choreographer-js
Copy the codeconst 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)
})
Copy the code
8. typeahead.js
After input information in the input box, automatic prompt for completion;
9. Multiple.js
Create shared backgrounds across multiple elements (including gradients for backgrounds) to inspire the look of the site;
.selector {
background-image: linear-gradient(white, black);
background-size: cover;
background-position: center;
background-attachment: fixed; /* <- here it is */
width: 100px;
height: 100px;
}
Copy the codeKey: background-attachment: fixed expands the background to the size of the viewport and displays the appropriate block in each element; On the mobile terminal, clip: rect(0 auto auto 0) is required.
10. ApexCharts
Graphs have better interaction ~~ suitable for JS native + 3 framework;
One item for a taste: a decidedly different item: ◡ (●’◡’●);
11. Premonish.js
Premonish can detect where the user’s mouse is moving and predict which element they are moving towards
Go play it and see how it predicts: address
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
});
Copy the code12. Stretchy
Automatic resizing of form elements; Also can listen to your input and other text box size, if the size is wrong, will report an error; Volume 1.5 KB;
13. Hammer.JS
Hammer is an open source library that recognizes gestures made by touch, mouse, and pointer events. It has no dependencies and is small, only 7.34 kB!
var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
console.log(ev);
});
Copy the codeBy default, it adds a set of TAP, DoubleTap, Press, horizontal PAN and SWIPE, and multi-touch Pinch and rotate recognizers;
14. JS Encrypt
JS Encrypt provides easy-to-implement RSA JavaScript encryption for applications;
The Demo address
15. Discord.js
Discord. Js is a powerful Node.js module that lets you easily interact with the Discord API;
- Discord is a free online messaging app and digital distribution platform designed for social groups. It has 130 million registered users.
16. Google Maps Utility Library
As the name suggests, the Google Maps Commons library, which brings Google Map navigation and other map-based features to your applications;
17. Typed.js
Typed. Js provides typing animation with excellent compatibility.
18. Math.js
With this library, complex mathematical problems can be computed on the front-end browser without straining the back-end server; It has a flexible expression parser, support for symbolic computation, a large number of built-in functions and constants, and provides an integrated solution to handle different data types such as numbers, large numbers, complex numbers, fractions, units, and matrices;
Powerful and easy to use
19. howler.js
Howler.js makes audio processing easy and useful;
20. ScrollMagic
Give your web scrolling effect magic!
On paper come zhongjue shallow, sometime also try ~~
summary
As can be seen, some of the libraries shared above are as high as several hundred K star, while others hover at less than 1 K star, but they are still listed together. Bengua thinks: on the contrary, these small libraries can solve a certain problem, the core principle is wonderful, the official website is also made particularly exquisite, which makes people love it especially;
Or that old saying: the best tools, early off work; Development work falls into two categories: those who write about wheels and those who use wheels; Writing wheels also started with wheels. Because I couldn’t find a more suitable wheel, I decided to write one myself and share it with everyone. Long live open source!
The above. May you gain something
I am Nuggets Anthony, the public number of the same name, output exposure input, technical insights into life, goodbye!