Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 216 lines (153 sloc) 6.97 KB

domcom速查表

下载

npm install --save domcom

git clone https://www.github.com/taijiweb/domcom

向页面添加domcom

  • 开发版本: <script src="path/to/domcom.js"/>或者<script src="path/to/domcom.js"/>
  • 产品版本: <script src="path/to/domcom.min.js"/>或者<script src="path/to/domcom.min.js"/>
  • cdn(x.y.z使用实际的版本号,比如0.5.2): http://cdn.jsdelivr.net/domcom/x.y.z/domcom.min.js

使用dc

推荐使用Coffee-script。

{ see, flow, 
  div, 
  if_, list, each
} = dc

使用ES6也很好。可以使用babel来支持ES6语法,特别是解构赋值。上述代码在ES6中可写成:

const { see, flow, 
   div, 
   if_, list, each
 } = dc;

使用原生ES5也是很可行的,但是可读性稍差,代码稍长。即便如此,也能比用JSX编写reactJS得到更简练的代码。

说明

domcom是用coffee-script开发的。本文档也借用了一些coffee-script的写法。特别是涉及到提供函数参数、回调的地方,比如,
-> 代表函数定义 function () {... }
(arg1, arg2...) -> ... 代表函数定义function (arg1, arg2...) { ... }

响应函数和响应函数生成器

公开的辅助函数列表:

react, lazy, renew, flow, pipe, see,seeN, bind, duplex, unary, binary
一元运算:not, neg, bitnot, reciprocal, abs, floor, ceil, round
二元运算:and, or, add, sub, mul, div, min, max, funcAttr
杂项:if_(三元运算), toggle, thisBind, bindings, seeAttrs

上述函数的实现都极其简单。比如一元运算和二元运算都是基于flow.unary和flow.binary的单行代码。更多细节请参看lazy-flow包。
为提高代码可读性,对一元、二元、三元运算及其它可能引起歧义的函数名称请参照flow.and的方式,带上flow名字空间进行引用。

r$ = see(value, transform)
num1$ = see(1)
num2$ = see(2)
sum$ = flow.add(num1$, num2$)
username$ = see("Tom")
score = { name: "Tom", points: 95 } 
name$ = flow.bind(scores, "name")
points$ = flow.duplex(scores, "points")

部件

引用部件的dom节点:component.node

部件方法:mount, unmount, render, renderWhen, remove, destroy, replace, emit, on, off, getPrevComponent, getNextComponent, isOffspringOf, inFamilyOf, clone, toString

部件辅助函数:isComponent, toComponent, toComponentArray

大多数部件类型的实例化函数都可以通过提供一个Tag属性集(attrs:Attrs,可以是{})使其外部被Tag部件包裹。

BaseComponent基类

ListMixin

ListMixin方法:insertChild, insertChildBefore, insertChildAfter, pushChild, unshiftChild, removeChildshiftChildpopChild, replaceChild, setChildren, setLength

ListMixin的方法可以在List部件和Tag部件使用。

List部件(列表)

new List(children)
 list(attrs:Attrs, children...:[toComponent])
 every(attrs:Attrs, items, options)
 each(attrs:Attrs, items, options)
 funcEach(attrs:Attrs, itemsFunc, options)
 
 items(或itemsFunc返回的items)可以是数组,也可以是Object。
 
options可以是Object,或者是itemFn。
options可包含如下选项: itemFn, separatorFn, updateSuccChild, updateSuccIndex。
如果items是数组,则itemFn的类型标签为`(item, index, items,component) -> toComponent`
如果items是数组,则itemFn的类型标签为`(value, key, index, items,component) -> toComponent`
示例
list(
    label "user name: ",
    text placeholder: "input here: ", value: username$
)

Tag部件(标签元素)

dcTagName(attrs, children...)
inputType(attrs:Attrs, value:domField)
tag(tagName:TagName, children...)
tag(tagName, attrs:Attrs, children...) 
new Tag(tagName, attrs, children)

方法

propattr, css, show, hide, bind, unbind, delegate, delegateToHolder, delegateToComponent

示例:
div({className: 'frame-work', style: {position: 'absolute'}},
  ul(
    li('Domcom'),
    li('Angular'),
    li('React')
  )
) 
span("hello")  
li(-> x)  
 text({$model: model$})
 select($options:[['domcom', 'angular', 'react']])
 input({type:"text", value: who$, onchange: -> alert "hello, " + who$()})

Html部件

new(Html htmlText:domField[, transform:(String) -> String])
html(attrs:Attrs, htmlText:domField [, transform:(String) -> String])
示例
html("<div> This is domcom </div> <div> That is angular </div>")
html(someHtmlTextString, escapeHtml) 

Text部件(正文节点)

new Text(attrs:Attrs, text:domField)
txt(attrs:Attrs, string:domField)

任何需要部件的位置,如果传入的不是部件,也不是null或者undefined,都会被转为Text部件。

示例

下面代码中括号里的子部件都是正文部件。

div(1) # 等价于div(txt(1))
p("hello", who$) # 等价于p(txt("hello"), txt(who$))
li(someVariable) # 等价于li(txt(someVariable))
span(-> someVariable) # 等价于span(txt(-> someVariable))

Comment部件(注释节点)

new Comment(attrs:Attrs, text:domField)
comment(text:domField)
示例
comment("this is a comment")

TransformComponent基类

特性:transformValid, content

If分支

new If(test:ValueReactive, then_:toComponent[, else_:toComponent])
if_(attrs:Attrs, test:ValueReactive, then_:toComponent[, else_:toComponent])

实例化函数:if_, forceIf, mergeIf, recursiveIf

Case多分支

new Case(test:ValueReactive, caseMap:Hash[, else_:toComponent])
case_(attrs:Attrs, test:ValueReactive, caseMap:Hash[, else_:toComponent]) 

实例化函数:case_, forceCase

Cond多测试

new Cond(testComponentPairList:[Reactive, toComponent, ...][, else_:toComponent])
cond(attrs:Attrs, testComponentPairList:[Reactive, toComponent, ...][, else_:toComponent]) 

Func函数部件

new Func(func:Reactive)
func(attrs:Attrs, func:Reactive) 

Route部件

route routeList:[RoutePattern, RouteHandler...], [otherwise:toComponent][, baseIndex] 
route.to path:RelativePath|AbsolutePath
childRoute.to path:RelativePath|AbsolutePath

Defer部件

 defer(attrs:Attrs, 
    promise:Promise,
    fulfill:((value, promise, component) -> toComponent),
    [reject: ((value, promise, component) -> toComponent),
    [init:toComponent]] 
)

 
new Defer(
    promise:Promise
    fulfill:((value, promise, component) -> toComponent)
    [reject: ((value, promise, component) -> toComponent)
    [init:toComponent]]

)

Tag特性辅助函数

classFn, extendEventValue, styleFrom, extendAttrs

dc直属辅助函数

dc.reset, dc.clean, dc.renderWhen, dc.stopRenderWhen, dc.error, dc.directives, dc.ready

指令

注册指令

dc.directives

常用指令

$bind, $model, $options, $show, $hide

以下两条指令定义在dc-controls包中:

$splitter, $blink

dc-controls部件

combo, dialog, triangle, autoWidthInput, accordion