cardboard js下載 - cardboard js原始碼下載

cardboard js

網站數據

1.0.0

下載

？ Carboard.js

測試主要

歡迎來到紙板。一個極其輕量（約18kb ）、高效能且非常簡單的反應式框架。它幾乎提供了您對完整框架的期望。例如管理狀態、元件、邏輯等等。但有一點不同，如果您不願意，則無需編寫任何 HTML、CSS 或 JSX 。看看它能做什麼。

它在理念上與 VanJS 類似，但具有更多功能和更廣泛的 API。

！：Cardboard 正在開發中，請謹慎使用。
您可以檢查 v1.0.0 里程碑以了解開發狀態 -非常感謝您的幫助！

 const Counter = ( ) => {
  const count = state ( 0 ) ;

  return button ( )
    . text ( `Clicked $count times` , { count } )
    . addStyle ( 'color' , 'gray' )
    . stylesIf ( count , { color : 'black' } ) // If count > 0, it will make the color black
    . clicked ( ( _ ) => count . value ++ ) ;
} ;

// Counter will be added to the body
tag ( '(body)' ) . append ( Counter ( ) ) ;

？入門 - 入門指南。

？ Wiki - 用於人類文件和範例。

？文件 - 用於技術文件。

設定

安裝

 npm install https://github.com/nombrekeff/cardboard-js

設定

 import { tag , init , allTags } from 'cardboard-js' ;
// Or
import { tag , init , allTags } from 'node_modules/cardboard-js/dist/cardboard.js' ;

const { div , p , span , b , script , button , style , a , hr } = allTags ;

const root = attach ( tag ( '(body)' ) ) ;

root . append ( div ( p ( 'Hello world!' ) ) ) ;

單一檔案腳本

如果您想將其新增至您的網站並開始使用 Cardboard，您可以匯入捆綁檔案：

 < script src =" node_modules/cardboard-js/dist/bundle/cardboard.bundle.js " > </ script >
< script >
const { div , p } = Carboard . allTags ;
</ script >

它有什麼作用？

其理念是能夠創建功能齊全且性能良好的 Web 應用程序，而無需使用 HTML、CSS 或 JSX。只是 JS 或 TS。而不是編寫HTML ，然後建立與HTML互動的 JS，並新增CSS來設定頁面樣式。您可以直接編寫代表HTML 、 CSS 、狀態和邏輯的程式碼。

您也不需要建置/編譯過程（除非您使用 TS 或想要）。鑑於 Cardboard 非常輕量，您可以將應用程式編寫為 es6 模組（請參閱此範例以查看範例設定），因此不需要任何建置過程，至少對於開發來說是如此。

它提供了一個強大的開箱即用的狀態管理解決方案。這個概念與反應類似。您建立一個狀態，然後在應用程式中使用該狀態，每當狀態變更時，無論您在何處使用它，它都會自動更新。

以下是它提供的一些功能的清單（但還有更多）：

無 HTML ：您不再需要寫那些漂亮的小尖括號了！您可以使用 Cardboard 建立任何 HTML。
狀態：開箱即用的反應狀態。
操作：根據狀態手動操作任何元素的任何 HTML 屬性。即新增類別、顯示/隱藏元素、刪除樣式、監聽事件等等......
邏輯：以非常符合人體工學且簡單的方式添加邏輯。
文字範本：處理狀態時輕鬆進行文字和範本操作。
元件：您可以建立可重複使用的元件，就像在任何其他框架中一樣。
補間：開箱即用的極為簡單的補間。
路由：輕鬆建立單頁應用程式。
JS 中的 CSS ：您可以建立style標籤，並將 CSS 直接編寫為 JS 物件。
Typed ：Cardboard 的目標是 100% typed，這表示它將建議任何建議的屬性、方法等...（即樣式properties等...）
ATAP ：盡可能進行測試！

注意：我還寫了一個Cardboard的伺服器端替代方案，稱為Hobo 。如果您需要類似於在伺服器端工作的 Cardboard 的東西！我計劃讓 Cardboard 在 v2.0.0 中也能在伺服器端工作。所以你可以期待一下，或是幫忙！

這是給誰的？

如果你不喜歡寫 HTML、CSS 或 JSX，就像我一樣。或者需要一個簡單而輕量級的框架，可以完成大型框架可以完成的大部分事情，並且佔用空間更小，同時性能非常好，Cardboard 可能適合您！ Cardboard 可用於建立從靜態頁面到更高級的應用程式（例如儀表板）的任何內容。它應該可以做大多數事情！

但當您想要建立一個非常小的頁面，並且需要一個響應式框架並且需要快速建立它時，它是完美的選擇。

背景故事

我不會說謊，當我第一次開始寫 Cardboard 時，我沒想到我會寫這篇文章。這應該是我的另一個專案（Hobo）的小實驗，我認為它會失敗。
實驗是什麼？我聽到你在問。好吧，這只是為了讓 Hobo 使用 DOM，而不是將 HTML 渲染為字串。有時事情的發展很有趣！我們永遠不知道什麼時候我們才能打造出值得自豪的東西。

您可以閱讀我撰寫的一篇關於如何製作紙板初稿的文章！

我不會告訴你完整的故事，但我知道 Cardboard 最初是一個注定會失敗的實驗。但由於某種原因，每件作品都開始彼此完美契合，直到今天，Cardboard 才被認為具有實用性。雖然還沒完成，但在那之前還有很多工作要做。這將我們帶到您身邊。我希望您能考慮提供協助。讓 Cardboard 的內容物超所值 ;)

為什麼叫這個名字？ : 有趣的故事，但其實不是。它被命名為 Cardboard，以保留 Hobo 的品牌。但你可能會認為它之所以這樣命名，是因為它像紙板一樣有用、輕巧、用途廣泛且便宜。