새로운 한 달이 왔습니다. 새로운 Javascript 라이브러리를 돌아볼 때가 되었습니다!!🔥
 

편집하다회사 명

Editor.js는 풍부한 미디어 이야기의 블록 편집기다.
블록 스타일은 각 요소(단락, 제목, 이미지, 목록, 참조)가 독립적으로 간주됨을 의미합니다contenteditable.이 솔루션은 일반적인 다른 솔루션과 달리 기본 작업공간 contenteditable 에서 모든 HTML 내용을 봉인합니다.그러나 이런 방법은 패턴 과부하와 다른 짜증나는 부작용을 가져올 수 있다.
편집하다js에서 인라인 편집 메뉴를 만들 수 있습니다.

또는 선택한 텍스트뿐만 아니라 편집 가능한 전체 대상 블록의 범위인 블록 설정 메뉴:

웹 응용 프로그램에서 사용하려면baseeditorjs를 가져온 후에 필요한 도구를 하나의 플러그인으로 추가할 수 있습니다.
이러한 모듈화는 설계를 통해 구현되었으며 필요한 기능만 가져올 수 있습니다.

import EditorJS from '@editorjs/editorjs'; 
import Header from '@editorjs/header'; 
import List from '@editorjs/list'; 

const editor = new EditorJS({ 
  /** 
   * Id of Element that should contain the Editor 
   */ 
  holderId: 'codex-editor', 

  /** 
   * Available Tools list. 
   * Pass Tool's class or Settings object for each Tool you want to use 
   */ 
  tools: { 
    // Here we can include the tools we want
    header: Header, 
    list: List 
  }, 
})

또 다른 좋은 점은 대량의 HTML 태그를 생성하는 다른 편집기에 비해 출력은 JSON이라는 것이다.
다음은 미디어 플랫폼의 출력 예입니다.

<section name="0ed1" class="section section--body section--first">
   <div class="section-divider">
      <hr class="section-divider">
   </div>
   <div class="section-content">
      <div class="section-inner sectionLayout--insetColumn">
         <h3 name="f8e8" class="graf graf--h3 graf--leading graf--title">
            <br>
         </h3>
         <p name="982b" class="graf graf--p graf-after--h3">
            The example of text that was written in 
            <strong class="markup--strong markup--p-strong">one of 
            popular</strong> text editors.
         </p>
         <h3 name="c2ad" class="graf graf--h3 graf-after--p">
            With the header of course
         </h3>
         <p name="83d3" class="graf graf--p graf-after--h3">
            So what do we have?
         </p>
      </div>
   </div>
</section>
<section name="d1d2" class="section section--body">
  ...
</section>

편집기에서 생성한 것과 같은 내용입니다.js:

{
    "time" : 1550476186479,
    "blocks" : [
        {
            "type" : "paragraph",
            "data" : {
                "text" : "The example of text that was written in 
                          <b>one of popular</b> text editors."
            }
        },
        {
            "type" : "header",
            "data" : {
                "text" : "With the header of course",
                "level" : 2
            }
        },
        {
            "type" : "paragraph",
            "data" : {
                "text" : "So what do we have?"
            }
        }
    ],
    "version" : "2.8.1"
}

우리는 편집자가 어떻게 하는지 똑똑히 볼 수 있다.js 출력이 그리 지루해 보이지 않습니다.
 

고함자.회사 명

이 JavaScript audio library 는 웹 사이트, 흐르는 인터넷 라디오에 음성 효과를 추가하거나 트랙에 고급 음성 제어를 제공할 수 있다.

그것은 매우 가볍다(7KB 압축), 어떠한 외부 의존 관계도 없다.
이 밖에 상자를 열면 바로 사용할 수 있는 최적화 기능도 제공했다.로드된 사운드는 자동으로 캐시되고 후속 호출에서 다시 사용됩니다.
간단한 사용 방법:

import {Howl, Howler} from 'howler';

// Setup the new Howl.
const sound = new Howl({
  src: ['sound.webm', 'sound.mp3']
});

// Play the sound.
sound.play();

// Change global volume.
Howler.volume(0.5);

Demo examples
 

한시

Bit는 React UI 구성 요소(버튼, 차트, 캘린더 등) 집합을 제공하는 플랫폼입니다.유사 Semantic-UI-React.

누구나 개인 구성 요소를 발표하고 지역 사회에 무료로 제공할 수 있다.
개인 센터 - 사인 회원만 방문할 수 있고 사용할 수 있으며 매우 편리하다.
서로 다른 팀을 뛰어넘는 프로젝트에서 일한다고 상상해 보세요.동료와 구성 요소를 공유할 수 있으면 팀의 생산력을 크게 높일 수 있다.그것은 두 개의 서로 다른 단체가 두 번 통용적으로 입력 필드를 자동으로 완성하는 고전적인 장면을 쉽게 방지할 수 있다!!
익숙하게 들리시나요?🤦‍♂️
 

경탄

Flicking는 유연한 회전목마로 가장 유행하는 JS 프레임워크(React, Vue.JS, Angular)와 쉽게 통합할 수 있다.
무한 스크롤, 자유 스크롤, 다중 패널 등의 기능을 제공합니다.

기본 기능을 더욱 확장할 수 있는 플러그인도 있습니다.

시도(다음 예제에서는 각도 사용):
 

SweetAlert2

자바스크립트 팝업 창을 맞춤형으로 만들어서 더 스타일리시하게 만들어야 하지만, 전체 디자인 프레임워크를 사용하고 싶지 않다면 SweetAlert2 아주 적합합니다.이것은 제로 관련성을 가지고 각도와 React와 통합할 수 있다.
일반 팝업 창을 업그레이드할 수 있습니다.

더욱 매력적:

알림 유형(성공, 정보, 오류 등)을 선택할 수 있습니다.팝업 내용에 대해 다른 입력 유형을 정의합니다.

Swal.fire({
  title: 'How old are you?',
  type: 'question',
  input: 'range',
  inputAttributes: {
    min: 8,
    max: 120,
    step: 1
  },
  inputValue: 25
})

앞의 코드 세그먼트에서 범위 선택 팝업 창을 생성합니다.

사용자가 버튼을 클릭하면 경고가 닫힙니다. Swal.fire () 는 약속을 되돌려줍니다.우리는 단지 사용자의 답안을 검출하겠다는 약속을 해결할 수 있을 뿐이다.간단하고 빠르다!
라이브러리는 사용자가 팝업 창을 닫았는지 확인하는 방법도 제공합니다. 예를 들어 ESC 키를 누르거나 취소 단추를 누르십시오.이런 상황에서 Swal.fire () 는 한 대상{ dismiss: reason }을 되돌려 주고 해고 원인을 설명한다.
내가 Sweet Alert2를 좋아하는 것은 간단하지만 예쁜 사용자 정의 알림을 만들 수 있다는 점이다.
그들의 사이트에는 또 다른 몇 가지 용법examples이 있다.
 
🎉 이번 달은 여기까지입니다.🎉
9월에 발견으로 가득 찬 새로운 문장을 다시 한 편 봅시다!!