Share 12 tips and plugins that you might use to write JS

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