Cample.jsダウンロードCample.jsソースコードのダウンロード

Cample.js

サードパーティ製コンポーネント

3.2.1-beta.1

ダウンロード

CAMPLE

cample.js-インターネット上に仮想DOMがない最速のフレームワークの1つ！

ウェブサイト•ドキュメント•例•例のソース

アルファバージョン

cample.jsについて？

Cample.jsは、ユーザーインターフェイスを作成するためのオープンソースJavaScriptフレームワークです。フレームワークは、現在の状態をインポートおよびエクスポートすることにより、各コンポーネントを相互接続できるコンポーネントベースのアプローチで機能します。 cample.jsは仮想DOMを使用して実際のDOMと対話するため、反応性プロセスがはるかに高速になります。

主な利点

JavaScriptフレームワークとライブラリのパフォーマンス図。
123リリースに基づく結果

インストール

アプリケーションを作成するには、公式のCample-Startコマンドを使用して「開始点」を生成し、現在利用可能な2つのテンプレートから選択することをお勧めします。

npx cample-start

主な2つのテンプレートは、WebpackやParcelなどの2つのモジュールバンドラーに基づいています。ターミナルのリストからそれらのいずれかを選択するには、最適なものを選択できます。それらはすべて公式のサポートを持っています。

また、フレームワークのみをインストールするには、次のコマンドを使用できます。

npm i cample

このインストールにより、機能はモジュールから直接利用可能になります。 Cample-Startを使用したインストールは、アプリケーションのSTARTファイルを指定するだけです。

はじめる

アプリケーションの開始点を設定した後、JSファイルには次のコード、または同じコードが含まれますが、HTMLインポートが含まれます。

JavaScript

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