Можно, но не нужно? Поделитесь 20 библиотеками JavaScript, чтобы открыть глаза 👀

внешний интерфейс GitHub JavaScript
Можно, но не нужно? Поделитесь 20 библиотеками JavaScript, чтобы открыть глаза 👀

Мало знаний, большой вызов! Эта статья участвует в "Необходимые знания для программистов«Творческая деятельность

Эта статья приняла участие"Проект "Звезда раскопок"", чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.

Небольшой смысл: в последнее время вы можете чаще видеть статьи из списка.Так называемые статьи из списка — это 10 или 20 рекомендуемых статей.Более того, они перечислены в 4D точках, которые являются чрезвычайно привлекательными и искренними паролями для трафика; Bengua Commentary Перечислите статьи, я не хочу обсуждать их похвалу или критику, потому что это просто форма написания, хорошо это или плохо, стандарт суждения зависит от его содержания; вы читаете статьи, у вас есть беглый взгляд, список статьи, охватывающие широкий круг, четкий контекст, низкий порог, четкая цель, потребность каждого, почему бы не сделать это? Однако особо предостерегаю автора не уничтожать его достоинства и не заливать мразью, чтобы публика ненавидела название и держалась подальше, ставя телегу впереди лошади. 🐶

1. Immutable.js

в настоящее времяReact+Redux+Immutable.jsКомбинация широко использовалась в проекте, но для студентов, изучающих стек технологий Vue, когнитивныйimmutable-jsТоже критично и необходимо.

Как только данные, созданные immutable-js, созданы, они не изменятся; принцип таков: всякий раз, когда они изменяются, возвращается новый неизменяемый объект, чтобы гарантировать, что предыдущие данные неизменны (базовая структура данныхTrie префиксное дерево+ совместное использование структурыStructural Sharin).

687474703a2f2f696d672e616c6963646e2e636f6d2f7470732f69322f5442317a7a695f4b5858585858637458465858627262384f5658582d3631332d3537352e676966.gif

Если узел в дереве объектов изменяется, изменяются только этот узел и затронутый им родительский узел, а остальные узлы становятся общими.

Преимущества этого: экономия процессора и памяти;

Поскольку мы часто решаем проблему неизменяемых данных с помощью глубокого копирования, глубокое копирование требует дополнительных операций для использования ЦП, а для копирования новых данных требуется новая память;

Пример 🌰

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 неsetterметод вместо этого: состояние проходит один за другимreducerЗначение получается после вычисления функции, а состояние доступно только для чтения и не может быть изменено;

Это именно то, что ФППоместите исходные неизменяемые данные в конвейер, состоящий из различных функций для расчета.подумал о!

Пример 🌰

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 используется длянеизменяемые данныеБыстрый рендеринг сверху вниз;

image.png

Пример 🌰

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, вечный бог;

image.png

Однако важно знать, что самая популярная библиотека JS-иконок на Github — этоD3.jsЗвезда 98,8 тыс.+ ✨

image.png

Звезда Chart.js 55 000+ ✨следующий;

5. SurveyJS

SurveyJS — самый многофункциональный доступный в настоящее времяБиблиотеки опросов/форм; и его можно легко настроить и расширить в соответствии с вашими потребностями.

image.png

Сгенерировать код после настройки:

43c72fc7-2d47-494e-9b8d-84c71dc03de5.gif

6. Final Form

Библиотека для легкого создания красивых и простых форм;

image.png

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)
})

Choreographer-JS-_-Example-Two-Google-Chrome-2021-10-09-16-26-4420211091628141.gif

8. typeahead.js

После ввода информации в поле ввода автоматически будет предложено завершить;

image.png

9. Multiple.js

Создание общих ресурсов для нескольких элементовзадний план(в том числе эффект градиента фона) для стимулирования просмотра веб-сайта;

image.png

.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 основных фреймворка;

image.png

Бенгуа испытал это, и у него действительно другое интерактивное ощущение, очень подробное (●'◡'●);

11. Premonish.js

PremonishМожет определить положение движения мыши пользователя и предсказать, к какому элементу он собирается перейти, круто, не будем об этом говорить~~ 😀

image.png

Перейдите к опыту, чтобы увидеть, как он предсказывает:адрес

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

Он используется для автоматического изменения размера элементов формы, он также может контролировать размер текстовых полей, таких как ваш ввод, если размер неправильный, будет сообщено об ошибке, объем 1,5 КБ;

image.png

13. Hammer.JS

Hammer — это библиотека с открытым исходным кодом, которая распознает жесты, сделанные касанием, мышью и событиями указателя. Он не имеет никаких зависимостей и весит всего 7,34 КБ!

image.png

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 для приложений;

image.png

Демонстрационный адрес

15. Discord.js

discord.js — мощныйNode.jsмодули, которые позволяют легко взаимодействовать сDiscord APIвзаимодействовать;

  • Discord - это бесплатное программное обеспечение для обмена мгновенными сообщениями в Интернете и платформа цифровой дистрибуции, разработанная для сообщества, в котором зарегистрировано 130 миллионов пользователей;

image.png

16. Google Maps Utility Library

Как следует из названия, общая библиотека Google Maps позволяет вам применять навигацию Google Maps и другие функции, основанные на картах, к вашей программе;

image.png

17. Typed.js

Typed.js обеспечивает анимацию набора текста с отличной совместимостью.

Typed.js-Type-your-heart-out-Google-Chrome-2021-10-10-13-17-5220211010131981.gif

18. Math.js

С помощью этой библиотеки сложные математические задачи можно решать во внешнем браузере, не нагружая внутренний сервер; она имеет гибкий анализатор выражений, поддерживает символьные вычисления, имеет большое количество встроенных функций и констант и предоставляет встроенный решение для обработки различных типов данных, таких как числа, большие числа, комплексные числа, дроби, единицы измерения и матрицы;

Мощный и простой в использовании~

image.png

19. howler.js

Howler.js делает обработку аудио простой и полезной;

image.png

image.png

20. ScrollMagic

Дайте свой эффект прокрутки веб-страницы, чтобы применить магию!

ScrollMagic-♥-Demo-Google-Chrome-2021-10-10-13-33-12202110101334313.gif

image.png

Это поверхностно на бумаге, давай попробуем, когда у тебя будет время~~

резюме

Можно видеть, что некоторые из библиотек, представленных выше, достигают нескольких сотен К-звезд, а некоторые колеблются на небольшом размере в 1 К-звезду, но это не влияет на их совместное перечисление; Бенгуа считает: «Наоборот, эти небольшие объемы Библиотека может решить определенную задачу, основной принцип замечательный, да и официальный сайт тоже очень красиво сделан, что особенно любимо людьми;

Все еще старая поговорка: выбери хороший инструмент, пораньше уходи с работы; разработка делится на две категории: одна для записи колес, а другая для использования колес; запись колес также начинается с использования колес, потому что больше нет применимых колес. , я хочу написать один и поделиться им со всеми, да здравствует открытый исходный код!

выше. Желаю тебе всего наилучшего~

Я Энтони Наггетс, официальный аккаунт имеет такое же имя, выход выставляет вход, а техническое понимание жизни, до свидания!

Категории