preface
This article’s examples are after practice, summed up some more practical skills, if confused or wrong, welcome to correct!
Thenby multiple sort
Making the address
Scenario: Multiple sorts of data are required
var data = [ { phare: 1.order: 1 }, { phare: 2.order: 2 }, { phare: 2.order: 1}];var sortData = data.sort(
firstBy(function(a, b) { return a.phare - b.phare })
.thenBy(function(a, b) { return a.order - b.order })
);
Copy the code
Of course, if you just sort by small, you could write it like this in this example:
data.sort(firstBy('phare').thenBy('order'))
Copy the code
Gets the current page scroll position
Scenario: Get how far the page scrolls in the x or y direction
const getScrollPosition = (el = window) = > ({
x: el.pageXOffset ! = =undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset ! = =undefined ? el.pageYOffset : el.scrollTop
});
Copy the code
Scroll smoothly to the top of the page
Scenario: When browsing the web, we want to go back to the top quickly
const scrollToTop = () = > {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8); }}Copy the code
Determines whether the current element is visible in the current view
const elementIsVisibleInViewport = el= > {
const { top, left, bottom, right } = el.getBoundingClientRect();
const { innerHeight, innerWidth } = window;
return top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};
Copy the code
Checks whether the current browser TAB is focused
const isBrowserTabFocused = () = > !document.hidden;
Copy the code
Obtain the second-level, third-level, four-level and five-level linkage address data of towns and villages in urban areas of China province
Making the address
Delete existing data
$ rm dist/*.csv && rm dist/[a-z]*.json && rm dist/data.sqlite && touch dist/data.sqlite
# pull data (this step is time-consuming)
$ npm run fetch
# Format JSON CSV and linkage data, etc
$ npm run build
Copy the code
React Route Cache
Making the address
import React from 'react'
import { HashRouter as Router, Route } from 'react-router-dom'
import CacheRoute, { CacheSwitch } from 'react-router-cache-route'
import List from './views/List'
import Item from './views/Item'
const App = () = > (
<Router>
<CacheSwitch>
<CacheRoute exact path="/list" component={List} />
<Route exact path="/item/:id" component={Item} />
<Route render={()= > <div>404 Not Found</div>} / ></CacheSwitch>
</Router>
)
export default App
Copy the code
React’s fancy Toast component
Making the address
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
toast.warn("Warning Notification !", {
position: toast.POSITION.BOTTOM_LEFT
});
Copy the code
A component that handles how images are rendered
The demo address
Let’s take a look at the normal picture display effect without any processing:
Let’s look at the effect with effect=”blur” :
import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';
<LazyLoadImage
alt="img"
height={400}
effect="blur"
src="https://www.albertjuhe.com/images/07.jpg"
/>
Copy the code
Gets the value of the property based on the DOM and its property name
const SPECIAL_CHARS_REGEXP = / [\ \ - \ _] + (.). )/g;
const MOZ_HACK_REGEXP = /^moz([A-Z])/;
const camelCase = function(name) {
return name
.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
return offset ? letter.toUpperCase() : letter;
})
.replace(MOZ_HACK_REGEXP, 'Moz$1');
};
const getStyle = function(element, styleName) {
if(! element || ! styleName)return null;
styleName = camelCase(styleName);
if (styleName === 'float') {
styleName = 'cssFloat';
}
try {
var computed = document.defaultView.getComputedStyle(element, ' ');
return element.style[styleName] || computed ? computed[styleName] : null;
} catch (e) {
returnelement.style[styleName]; }}; getStyle(DOMRef.current,'width')
Copy the code
Use range skillfully to calculate the width of the content
Scenario: Get the sum of the widths of all the nodes in a div
const range = document.createRange();
range.setStart(element, 0);
range.setEnd(element, element.childNodes.length)
range.getBoundingClientRect().width
Copy the code
Validates a set of data
Making the address
let yup = require('yup');
let schema = yup.object().shape({
name: yup.string().required(),
age: yup.number().required().positive().integer(),
email: yup.string().email(),
website: yup.string().url(),
createdOn: yup.date().default(function () {
return new Date(a); })});// check validity
schema
.isValid({
name: 'jimmy'.age: 24,
})
.then(function (valid) {
valid; // => true
});
// you can try and type cast objects to the defined schema
schema.cast({
name: 'jimmy'.age: '24'.createdOn: '2014-09-23T19:25:25Z'});Copy the code