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 的品牌。但你可能会认为它之所以这样命名，是因为它像纸板一样有用、轻便、用途广泛且便宜。