# domcom速查表

## 下载

	npm install --save domcom
	
	git clone https://www.github.com/taijiweb/domcom
	
##代码规模 
Domcom自身最小化文件domcom.min.js大约21k。总共包含src／下7个.coffee源文件约500行代码。

## 向页面添加domcom
先要添加React和ReactDom链接。

        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        
或

        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        
然后添加Domcom script标签：

* 开发版本: `<script src="path/to/domcom.js"/>`
* 产品版本: `<script src="path/to/domcom.min.js"/>`
* cdn: 

        https://unpkg.com/domcom@0.8.4/dist/domcom.js
        https://unpkg.com/domcom@0.8.4/dist/domcom.min.js
        https://cdn.jsdelivr.net/npm/domcom@0.8.4/dist/domcom.js
        https://cdn.jsdelivr.net/npm/domcom@0.8.4/dist/domcom.min.js


## 使用dc
推荐使用Coffee-script, 使用ES6也很好。可以使用babel来支持ES6语法, 使用原生ES5也是很可行的，不管用何种语言，用Domcom都能比用JSX编写reactJS得到更简练的代码。
因为domcom建立中React基础之上，所有Domcom部件最终都会转化为ReactProxy部件。因此使用Domcom前第一步需要执行以下代码，

        import React, {Component} from 'react'
        import ReactDom from 'react-dom'
        dc.addReactProxy React, ReactDom, Component
        
如果用script标签方式引入请使用window对象下的全局变量：
        
        dc.addReactProxy window.React, window.ReactDOM, window.React.Component


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

  
## 部件
产生部件： `comp = dc(config={data, view, ....})`  
引用部件的react元素和dom节点：`comp.reactElement`，`comp.node`  
部件方法：`mount`, `unmount`, `update`, `copy`, `extend`, `on`, `off`, `emit`  
部件事件：`mounting`, `mounted`, `unmounting`, `updating`, `updated`

## 标签元素
`[tag, {props...}, children...]`  
`['div.class1.class2#id##styles...', {props...}, children...]`
children可以包含别的标签元素、React部件元素（下文给出的数组形式表示的或者直接用原始的React部件元素）。**特别注意，当然也可以包含Domcom部件实例！**

###input标签
`[type, {props...}]`  
`['text.class1.class2#id##styles...', {$model:field...}]`  
`['text', modelFiled]`

##React部件元素
`[ReactClass， {props...}, children...]`  
`[ReactClass， '.class1.class2#id##styles...', {props...}, children...]`

##指令
Domcom提供了如下内建指令，`$model`, `$show`, `$options`。开发者也可以根据需要方便地扩充自己的指令。


## 便利机制
Domcom提供了一些使开发更方便的机制，列举如下：

* 如果props中没有key， Domcom会自动产生唯一的key，缺点是每次render key值都是变化的。  
* props可以提供keepid，要求Domcom的ReactProxy每次render都为该项使用缓存的相同React元素。这适用于完全静态不变的元素。  
* props可以提供focusid，这可以帮助Domcom每次update后能正确处理节点focus，适合于TextInput，TextArea等标签。
* props中可以写classes代替className，className可以使用object，并且能用value来控制
key在classes中的有无。虽然Domcom没有使用[classnames](https://www.npmjs.com/package/classnames)，但是理解使用上可参考[classnames](https://www.npmjs.com/package/classnames)
* Domcom 会使用camelcase这个库处理props中的键。可以加入props.dontCamel取消这一处理， 对props.style总是会做这一处理。
* 有的React元素不希望耽搁child元素不以数组形式提供，可以加入props.useSingleChildren满足这一需求。

props中的指令，keepid，focusid， classes， dontCamel， useSingleChildren不会出现在后来产生的react 元素中，不用担心会因此产生警告或错误。




