Cample.js 다운로드 - Cample.js 소스 코드 다운로드

Cample.js

타사 구성 요소

3.2.1-beta.1

다운로드

Cample.js- 인터넷에서 가상 DOM이없는 가장 빠른 프레임 워크 중 하나!

웹 사이트 • 문서 • 예제 • 예제 소스

알파 버전

cample.js에 대해?

Cample.js는 사용자 인터페이스를 만들기위한 오픈 소스 JavaScript 프레임 워크입니다. 프레임 워크는 현재 상태를 가져오고 내보내서 각 구성 요소를 상호 연결할 수있는 구성 요소 기반 접근 방식에서 작동합니다. Cample.js는 가상 DOM을 사용하여 실제 DOM과 상호 작용하지 않으므로 반응성 프로세스가 훨씬 빨라집니다.

주요 이점

JavaScript 프레임 워크 및 라이브러리의 성능 다이어그램.
123 릴리스를 기반으로 한 결과

설치

응용 프로그램을 만들려면 공식 Cample-Start 명령을 사용하여 현재 사용 가능한 두 개의 템플릿에서 선택한 "시작점"을 생성하는 것이 좋습니다.

npx cample-start

주요 두 템플릿은 웹 팩 및 소포와 같은 두 개의 모듈 번들을 기반으로합니다. 터미널의 목록에서 그 중 하나를 선택하려면 가장 적합한 것을 선택할 수 있습니다. 그들 모두는 공식적인 지원을받습니다.

또한 프레임 워크 만 설치하려면 다음 명령을 사용할 수 있습니다.

npm i cample

이 설치를 통해 기능은 여전히 모듈에서 직접 사용할 수 있습니다. Cample-Start를 사용한 설치는 단순히 응용 프로그램의 시작 파일을 지정합니다.

시작하기

응용 프로그램의 시작점을 설정 한 후 JS 파일에는 다음 코드 또는 동일한 코드가 포함되어 있지만 HTML 가져 오기가 포함됩니다.

자바 스크립트

 const newComponent = component (
  "new-component" ,
  `<div class="component">
    <div class="clicks" data-value="{{dynamicData}}">Clicks:{{dynamicData}}</div>
    <button class="button">Click</button>
  </div>` ,
  {
    script : ( { element , functions } ) => {
      const button = element . querySelector ( ".button" ) ;
      const updateFunction = ( ) => {
        functions ?. updateClicks ( ( data ) => {
          return data + 1 ;
        } ) ;
      } ;
      button . addEventListener ( "click" , updateFunction ) ;
    } ,
    data : ( ) => {
      return {
        dynamicData : 0 ,
      } ;
    } ,
    dataFunctions : {
      updateClicks : "dynamicData"
    } ,
  }
) ;
cample ( "#app" , {
  trimHTML : true ,
} ) . render (
`<template data-cample="new-component">
</template>` ,
  {
    newComponent
  }
) ;