帮酷LOGO
  • 显示原文与译文双语对照的内容
An attempt to port devcards to JavaScript

  • 源代码名称:devboard
  • 源代码网址:http://www.github.com/glenjamin/devboard
  • devboard源代码文档
  • devboard源代码下载
  • Git URL:
    git://www.github.com/glenjamin/devboard.git
  • Git Clone代码到本地:
    git clone http://www.github.com/glenjamin/devboard
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/glenjamin/devboard
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • Devboard

    Devboard旨在为开发用户界面代码提供交互式视觉反馈工具。 这有点像开发白板。 它是ClojureScript项目 Devcards的一个端口。

    构建在热重载工具之上,为显示和运行应用程序的小部分提供了一个框架,一次就可以完成。

    npm versionBuild StatusMIT Licensed

    说什么?

    这种方法的最佳解释及其好处来自于 Bruce,他在的奇怪循环对话中的原始创建者 ClojureScript 。 在GitHub页面上还有一个很好的写了原始的devcards文档的write 。

    一般的想法是为你定义一系列收费卡片,这些工具将为你提供一个可以浏览的方式。 每个卡片代表你的程序中执行和呈现某些结果的一部分。 在热重载环境中使用时,这些卡形成一个工作空间,你可以以用它来尝试代码的小部分。

    Devboard的目的是在应用程序的上下文中运行,以及主要关注用户界面组件的卡。

    传统上,当将UI组件添加到应用程序时,将在它的应用于最终结束的位置构建它。 通常,页面上只有一个版本,因这里它必须处于它的可以能的状态之一。 每次进行更改( 即使使用热重新加载) 时,都必须与它交互,以查看结果是否在它的他状态上。

    在处理应用程序中的许多代码时,这是我们使用单元测试的关键。 UI代码非常困难- 尤其是在验证可视属性时。

    使用 Devboard,你可以创建几个卡片以在不同的状态下显示组件,并独立构建 UI 。 你可以一次看到对所有这些状态所做的更改的结果。 希望这将会带来更好。更独立的组件,同时也是更好的工作方式。

    安装&安装

    我计划编写一个更加简单的教程风格的快速启动指南,但是现在你必须在这个示例中做。

    首先你需要Devboard本身。

    npm install devboard --save-dev

    然后你需要将它连接到你的应用程序/构建系统中。 MODULE 本身的目标是保持构建系统的不确定性,所以在这里你需要一点管道。 随着系统的成熟,将这些内容打包到其他相关模块中可能会有意义。

    下面的部分需要工作,现在参考示例帮助。

    web pack

    TODO: 将这里内容更多

    如果你已经使用 web pack,你可以扩展现有配置来创建devboard包。

    如果你还没有使用 web pack,你仍然可以使用它来创建包,但是你可能会发现 kotatsu很容易使用。

    • 创建包含卡片的入口点
    var context =require.context('./', true,/.card.js$/);context.keys().forEach(function(moduleName) {
     context(moduleName);
    });module.hot.accept();
    • 向 web pack配置添加支持设置
      • 启用热重新加载
      • 启用JSON加载程序
    • 在生成配置中添加新的entrypoint
    • 创建基本 index.html 以加载新的入口点

    kotatsu

    TODO: 将这里内容更多

    • 创建包含卡片的入口点
    var context =require.context('./', true,/.card.js$/);context.keys().forEach(function(moduleName) {
     context(moduleName);
    });module.hot.accept();
    • 通过适当的设置来运行这里入口点

    这就是所使用的方法,所以你可以参考它来获得更多信息。

    用法

    假设你已经遵循上面的设置指南,因此现在可以创建以 .card.js 结尾的文件,它们将被加载到系统中。

    创建命名空间

    首先,我们需要声明一个名称空间来放置一些卡。 这主要是为了组织目的。 文件中可以有任意多的文件,但保留它可能更方便。 如果重新声明名称空间是空的,则与热重载结合使用这里命名空间替换名称空间的最新版本。

    声明命名空间时,返回值是一个 definecard 函数,可以用于将卡添加到该命名空间中。

    var devboard =require('devboard');var definecard =devboard.ns('A bunch of cards');
    创建卡

    现在我们有了definecard函数,我们可以开始定义卡片了。

    一张卡片由以下一个或者多个组成:

    • name字符串 - 名称
    • doc字符串 - Markdown 文档
    • 在卡片上显示什么东西
    • options对象 - 一些选项,请参见下面

    为了定义一个卡,用这些组合调用函数,下面列表显示了可以能的组合。

    definecard(doc)definecard(body)definecard(name, body)definecard(name, doc)definecard(name, doc, body)definecard(name, doc, body, options)definecard.anon(doc)definecard.anon(body)definecard.anon(doc, body)definecard.anon(body, options)definecard.anon(doc, body, options)defincard.off(...)

    希望当你开始使用它时,这些组合应该开始感觉自然。

    请参见 [a walkthrough] ( http://glenjamin.github.io/devboard/#/API 演练/) 示例站点,了解如何使用卡进行操作。

    可用选项
    • 在卡周围显示一个边框,默认为 true,如果命名为则为
    • state任何 - 卡的初始状态
    • 在卡片页脚中显示状态,缺省为 false
    • hiddenboolean - 隐藏卡片,与使用相同
    • onTick(card)函数 - 如果设置,将在每个标记上调用
    • tickInterval- tick多少次,默认为
    • tickAutoplay- 自动开始计时,默认为
    卡主体

    Devboard的一部分力量是 body 参数的严重多态特性。 有计划使用户容易扩展可以以在主体中呈现的事件集,但当前列表非常重要。 还可以通过将 definecard 函数封装到自己的转换中来扩展。

    示例站点有一个类型的页面,它展示了许多受支持的类型。

    API文档

    devboard的主要入口点是 ns 方法。

    devboard.ns(name) => definecard
    • name字符串

    请参见创建命名空间

    definecard ( 。)

    有关这里函数的完整说明,请参见创建卡片

    有关可以在 body 中呈现什么的帮助,请参见卡正文

    其他方法都是帮助者,以便简洁地书写表达式卡片。

    devboard.atom() => js

    [ example ]

    从 js-atom 项目中导出 createAtom用户定义函数的方便。

    devboard.Row 组件

    [ example ]

    一个反应组件,它的每个子元素在一个盒子中浮动,它们之间有一些健康的间距。

    如果你有一个小组件,并且希望在卡片的一行中呈现一串,那么就有用了。

    devboard.DOMNode(render, cleanUp) => DOMNodeBody

    [ example ]

    • render(node)函数 - 在初始挂载时调用,然后每次更新
    • cleanUp(node)函数 - 当要删除时调用

    用于非反应系统的helper 函数。 render 函数被传递一个 DOM node,你可以根据需要修改它。 如果卡状态改变,将再次调用。 当卡被移除时,cleanUp 函数将被调用以让你整理。

    definecard('Just DOM',
     devboard.DOMNode(functionrender(node) {
     node.innerHTML='<p>Who needs React anyway?</p>';
     })
    )

    然后可以使用另一个包装器来插入你正在使用的模板语言或者组件工具。

    示例

    了解Devboard的最佳方法之一是体验它。

    你可以在 http://glenjamin.github.io/devboard/ 看到托管示例- 每个页面都有一个指向生成它的源的链接。

    然而,真正的力量是在进行实时变化时的反馈。 要查看实际操作,你可以在克隆这个存储库之后在本地机器上运行这个示例。

    cd example
    npm install
    npm start

    运行时代码

    请注意,这个项目是由一个贡献者代码发布的。 参加本项目,你同意遵守它的条款。

    许可证

    版权所有 2016 Glen邮件。

    麻省理工 Licened 。




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语