vita-plus: vita-plus是围绕spring mvc和组件构成的一个异想天开的前端框架，主要体现在开发套路的改变。它集成了多个开源框架和工具包，辅以自主研发的功能，给了开发们一个不一样的体验。同时，vita-plus还实现了一种另类的客户端自适应方式。

# vita-plus 前端框架 #

----------

## 简介 ##

vita-plus是围绕spring mvc和组件构成的一个异想天开的前端框架，主要体现在开发套路的改变。它集成了多个开源框架和工具包，辅以自主研发的功能，给了开发们一个不一样的体验。同时，vita-plus还实现了一种另类的客户端自适应方式。

## 开发依赖 ##

- spring mvc
- velocity
- jsoup
- UserAgentUtils
- jquery
- underscore（可选）
- backbone（可选）

## 开发套路 ##

写一个html：

<div data-widget="homepage">
    	这里是<a>首页</a>
		<div>这是做一个$options.text</div>
    </div>

然后写一个js：

再写一个java：

@Component("vita.homepage")
    public class Homepage extends AbstractComponent{
    	public Map achieveData(Object... params) throws Exception {
    		Map options = new HashMap();
			options.put("text","开发套路");
    		return options;
    	}
    	public String indexClick() throws Exception {
    		return "您点击了首页！";
    	}
    }

最后写一个controller的服务：

@RequestMapping(value = "homepage")
    public String homepage(HttpServletRequest request, Model m) throws Exception {
    	Map options = achieveData("homepage");
    	return initView("homepage", "首页", options, m, request);
    }

当访问homepage这个服务的时候，浏览器会渲染出：

这里是首页
	这是做一个开发套路

当点击`首页`时，会alert提示`您点击了首页！`。

## 交互示意 ##
![](http://i.imgur.com/AbX3g1J.png)
> 
- “组件对象”是模块的java bean部分，可以从服务层获取数据，并加以处理成模版所需的数据
- “模版视图”是模块的html部分，是界面模版
- “模版处理”是vita-plus框架部分，这里主要处理html上的事件绑定（js）
- 数据和模版由spring的控制层交给velocity完成界面的组装，再由vita-plus框架完成事件绑定，完成界面初始化

![](http://i.imgur.com/gpYnnfK.png)

## 实现思路与方案 ##

- 需要模块化设计、开发，在整体把控的情况下，将应用划分成独立的模块进行设计和开发
- 每个功能模块均由html、js、java bean三部分的组件组成，分别处理界面模版、界面事件逻辑、界面数据，即，模块 = html组件 + js组件 + java组件
- 模块之间引用可按html、js、java bean组件分别引用，原则上，模块引用时，各类型组件需要分别引用对应类型的组件
- 由vita-plus框架提供的控制器统一管理模块的三部分组件，实现html上的事件处理（js），实现js和后端服务（java）的交互和数据处理
- js组件可以继承，可以在核心组件的基础上进行本地化
- 利用velocity的自定义指令，实现模块的html组件，允许引用其他模块的html，并且加载对应的js组件和css部分（如果css有按模块划分的话）
- 利用spring实例化模块的java bean组件，并加载在spring容器中
- 利用spring mvc和velocity，将模块的html（模版）和java（数据）部分，在服务端生成界面交给浏览器渲染，减少js对数据和界面渲染的逻辑量
- 在vita-plus框架里，实现模块的html（模版）和js（逻辑、事件）组件的绑定
- 在vita plus框架里，实现模块的js（逻辑）和java bean（数据）组件的数据通信
- 实现模块以及模块实例生命周期管理（组件注册、实例化、模块化、使用、销毁等）

## 与一般开发差别 ##
1. 模块化设计（重要）、开发，每个模块可以分成html、js、java三个部分，放弃js与html混合、js请求controller的模式
2. 使用布局容器，每个html无需关注通用资源的引入，只关心自身使用的一些特定资源。以便尽可能减少重复资源的加载
3. 在继承backbone视图和模型基类的基础上，抽象了一系列方法，形成业务上使用的一个基类，每个js都要继承这个基类开发
4. 涉及到受理报文的，就在基类上设计报文对象，则每个继承该基类的js组件共享该数据，避免业务数据的传递
5. 每个模块，除了入口写在controller里，其他代码只需要在模块自身的js、html、java里编写，无需关注其他文件。移植模块时，只要移植入口和相关文件即可
6. 本地化：html无需继承，可在本地工程直接覆盖；js可以继承，也可以覆盖，继承方式文件名加extend，比如cashier.js，继承文件名为cashier.extend.js；java直接继承
7. html和js，资源与路径无关，预加载到服务器内存中，因此要求在指定范围内，文件名不能重复，重复即覆盖

## 对backbone的扩展 ##
1. initialize是backbone的初始化方法，但是backbone没有提供抽象方法做统一的初始化操作，或者提供组件内私有初始化接口。js组件基类则将initialize作为统一的初始化操作，组件内私有的初始化方法调整为_initialize
2. remove是backbone的销毁方法，但没有提供组件内私有销毁方法。js组件基类增加了destroy方法作为新的销毁方法（该方法先调用_destroy再调用remove），并且提供了_destroy方法作为组件私有的销毁方法。案例：取消填单后要释放已占用的资源，此时资源释放逻辑可以写在_destroy里，在组件销毁（destroy）前会先释放资源，而无需开发注意逻辑顺序
3. 提供singleton设置是否单例，如果设置为单例（工具），每次通过require出来的实例都是同一个，如果设置多例（UI），则require出来的将是构造函数（不可见），需调用.new(｛｝)方法来生成实例
4. 增加evaluate方法，合并model和view，默认backbone要自己实现，可重写

## 第一章 框架能力 ##
### 第一节 js基础能力 ###
该框架在js方面，提供了以下能力：
> 
1. `核心`：基础函数实现，核心能力不依赖第三方
2. `执行队列`：以生产和消费消息体的方式，实现js函数的执行队列，支持队列分类管理
3. `事件侦听`：以发布订阅的方式，实现在对象上的事件侦听，支持事件注册、监听、派发，事件派发处理使用了`执行队列`
4. `切面`：支持js对象和dom对象的事件/方法切面处理，支持事件前、事件后、事件前后处理
5. `ajax`：封装$.ajax以及$.fn.load方法，实现404、500等异常处理，实现统一遮罩等
6. `路由`：管理history（不是浏览器的history），可以判断是程序切换，还是前进后退按钮，并且可以限制路由变化
7. `组件框架`：js组件框架实现，组件可继承，并且维护组件极组件实例的生命周期（组件注册、注销、实例化、使用、销毁等），实现了js组件基类、js ui组件基类、js backbone组件基类、js biz业务组件基类
8. `模块`：js组件模块化封装，隐藏js组件的属性和私有函数，支持与seajs和requirejs模块的相互调用

### 第二节 js功能组件 ###
框架提供了以下js功能组件：
> 
- 封装underscore工具，按使用对象拆解成`util`、`objectUtil`、`functionUtil`、`domUtil`、`collectionUtil`、`chain`、`arrayUtil`模块
- 封装bootstrap，按bootstrap组件分类解析成`input`、`container`、`inlineText`等等，支持主题切换
- datetime组件，主要用于移动端的时间选择
- dialog组件，对话框
- loading组件，遮罩
- popup组件，提示框
- moveTo组件，移动动画
- webAssist组件，用来支撑流程，利用锚点实现界面跳转（开源框架称之为路由router），实现单界面应用的后退和前进、遮罩等
- 提供js组件基础类，提供模块刷新、服务访问等公共能力

### 第三节 html功能组件 ###
框架提供了两个html布局容器，一个独立访问模块时使用，另一个在流程中使用
> 
- widgetContainer.html是模块容器
- assistContainer.html是流程容器
- include.html是公共资源容器
- 以上均可自定义

### 第四节 模版资源加载器 ###
框架希望在开发时，所需的资源与路径无关，所以需要将资源加载到内存中

### 第五节 终端适配 ###
根据访问服务的终端，推送适配终端的模版

### 第六节 velocity自定义指令 ###
通过velocity自定义指令，实现html、js、css资源的按需加载

### 第七节 java组件 ###
配置资源与路径无关的目标，实现了一系列的java方法和接口，用来数据处理或者与服务端的数据交互

## 第二章 首次使用 ##

### 第一步 依赖vita-plus ###

在pom.xml中做以下依赖：

### 第二步 加载vita-plus配置 ###
在spring配置文件中，引入以下xml：

### 第三步 加载velocity配置 ###
在spring配置文件中，引入以下bean配置，将使用velocity作为视图解析器：

<bean id="velocityConfigurer" class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
      	<property name="resourceLoaderPath" value="/WEB-INF/classes/com/al/crm,classpath:com/ai"/>
      	<property name="velocityProperties">
    		<props>
      			<prop key="input.encoding">utf-8</prop>
      			<prop key="output.encoding">utf-8</prop>
      			<prop key="userdirective">com.ai.vita.velocity.directive.WidgetCreate</prop>
    		</props>
      	</property>
    </bean>

如果已有该配置，则做以下配置：

- 在`resourceLoaderPath`属性里增加`classpath:com/ai`
- 在`velocityProperties`增加`<prop key="userdirective">com.ai.vita.velocity.directive.WidgetCreate</prop>`

> `com.ai.vita.velocity.directive.WidgetCreate`是自定义velocity指令

### 第四步 资源加载配置 ###
该框架的资源取自于内存，所以配置所需资源的加载配置，在spring配置文件中增加以下bean配置：

<bean id="templateLoader" class="com.ai.vita.template.TemplateLoader" init-method="init">
    	<property name="realTime" value="true"/>
    	<property name="resourcePaths">
    		<array>
    			<value>com/al/crm/superSo</value>
    		</array>
    	</property>
    	<property name="subDirectory" value="true"/>
    	<property name="filter" value="js,html,css"/>
    	<property name="minified" value="true"/>
    	<property name="minifiedExt" value="min"/>
    	<property name="properties">
    		<map>
    			<entry key="scriptType" value="text/javascript"></entry>
    		</map>
    	</property>
    </bean>

> 
- `realTime`是boolean类型，表示是否实时更新资源，必须设置
- `resourcePaths`是String[]类型，用来存放所需加载资源的路径，至少指定一个路径
- `subDirectory`是boolean类型，表示是否包含子目录，必须设置
- `filter`是String类型，用来存放资源的过滤，多个过滤使用英文逗号分隔
- `minified`是boolean类型，表示是否使用minified资源
- `minifiedExt`是String类型，用来存放minified资源的标识，如果不设置默认为min
- `properties`是Map类型，用来存放各种设置属性，目前实现scriptType，用来设置script标签中的type

### 第五步 添加第一个控制器 ###

创建一个控制器，继承`com.ai.vita.ApplicationController`，在构造函数里设置以下属性：

setAssistContainer("superSo/frame/assistContainer");
    setWidgetContainer("superSo/frame/widgetContainer");
    setServicePath("../superSo");
    setClassifications(MDA.classificationsMap);

> 
- `setAssistContainer`用来设置界面切换用的布局容器，不设置将使用框架自带的布局容器
- `setWidgetContainer`用来设置模块界面使用的布局容器，不设置将使用框架自带的布局容器
- `setServicePath`用来设置服务路径，将供js组件使用，一般设置成当前控制器的RequestMapping，也可以是其他控制器的RequestMapping，只要是继承了`com.ai.vita.ApplicationController`或者`com.ai.vita.AbstractController`的控制器都行，不设置将抛出异常
- `setClassifications`用来设置模版分类，可根据终端类型推送设置好的模块模版，不设置则不区分终端，可以设置的key有Computer、Mobile、Tablet
- 该控制器里，只需要编写界面入口

### 第六步 添加第一个模块 ###

以首页为例，模块命名为homgpage：

> 
- 创建html组件，文件名约定为：homepage-tpl.html
- `data-widget`标识为依赖的js组件名

<div data-widget="homepage">
    	这里是首页
    </div>

> 
- 创建js组件，文件名约定为：homepage.js
- `vita.Backbone.BizView`是基于backbone的view封装扩展的一个view基类，所有的js组件都需要继承它来开发
- `events`是backbone提供的事件侦听配置
- backbone提供的组件初始化方法是initialize，该方法被vita用来处理框架逻辑，组件私有初始化方法改为`_initialize`
- `vita.widget.register("homepage", homepage, true)`这里是把js组件注册到vita的容器管理，true表示需要生成名为homepage的jquery插件，即增加$.fn.homepage方法，以供jquery对象直接访问组件里的方法

> 
- 创建java组件，文件名约定为：Homepage.java
- 必须要继承`com.ai.vita.AbstractComponent`
- beanId约定为`vita.homepage`
- 必须要实现`Map achieveData(Object... params)`，该接口用来组件数据准备，供html组件使用，这个接口供界面入口调用，也可以被其他模块的java组件调用

@Component("vita.homepage")
    public class Homepage extends AbstractComponent{
    	public Map achieveData(Object... params) throws Exception {
    		Map options = new HashMap();
    		return options;
    	}
    }

> 
- 在控制器里创建界面入口，RequestMapping约定为`homepage`
- 通过`achieveData`方法，初始化组件数据，第一个入参是模块名
- 通过initView方法，处理模版和数据，入参分别为：模块名、显示名称（title）、数据、Model、HttpServletRequest

@RequestMapping(value = "homepage")
    public String homepage(HttpServletRequest request, Model m) throws Exception {
    	Map options = achieveData("homepage");
    	return initView("homepage", "首页", options, m, request);
    }

> 以上完成了一个完整的模块开发，可以使用`/控制器/homepage`路径进行访问

### 第七步 添加第一个流程 ###

一个模块开发完，是不能进行界面切换的，需要创建一个流程来实现界面间的切换。

流程，可以认知为，是为了实现某个业务目的的一个模块集合，通过这个模块集合里的模块切换，协同支撑了该业务目的的实现。

以命名为main的流程为例：

> 
- 创建一个js文件，约定命名为：main-assist.js
- `assist`是一个变量，将被框架捕捉
- `prototype`属性，指定一个类的原型，将被框架捕捉，即，只有继承该原型的组件，才会被框架识别
- `nodes`属性，指定该流程的模块集合
- `name`属性，指明节点名称，约定为模块名
- `url`属性，指明节点界面入口，即上节内容里的控制层服务地址
- `assist`属性，js组件里assist接口的具体实现，用来请求某个模块，来获取并处理数据
- `end`属性，js组件里end接口的具体实现，用来交出界面控制权
- `assist`和`end`的实现，都需要一个return，其完整的返回值格式为`[ [ 目标节点名称 , 参数 , 是否刷新 ] , [ 回调函数 , 回调函数调用对象 ] ]`

> 以上完成一个完整的的流程开发，意思是：
> 
- 框架在该流程中只识别继承`vita.Backbone.BizView`的模块
- 该流程中，只有两个模块来支撑一个业务，分别为`homepage`和`partyQuery`
- 在访问该流程时，默认将进入homepage界面（第一个节点）
- 在homepage模块的js组件中，调用assist方法时，将请求partyQuery模块，并获取partyQuery模块的数据，然后返回homepage界面
- 使用`/控制器/vector?assist=main`进行访问

## 第三章 深入开发 ##
### 第一节 基础能力 ###
### 第二节 js组件 ###
js组件基类分为视图（view）和模型（model）两个，其中视图用来处理各种事件、小部分额外的界面渲染，而模型用来数据处理。
#### vita.Backbone.BizView ####
BizView作为所有组件的视图基类，实现了以下方法，在其子组件内部可以通过this调用

***refreshPart*** ： 局部刷新，可以指定组件内部的一部分html进行刷新操作

this.refreshPart(methodName, params, selector, keyName, callBack, options);
> 
- `methodName`指定需要调用的方法，该方法必须在js组件对应的java组件里存在的方法
- `params`指定调用`methodName`时送入的参数，类型建议是string或者json，如果需要传递多个入参，则可以将该参数设置为数组，数组长度必须与`methodName`的参数个数相同，否则会抛出异常
- `selector`指定选择器，即被刷新部分的容器，比如："#offer"，则被刷新的内容就是id为offer的html对象里面的内容
- `keyName`指定key值，即模版里使用的$options的key，用于模版取值。如果`methodName`的返回值是map类型，则该参数无效，可不送入，返回值的key将与$options的key对应，调用可变成`this.refreshPart(methodName, params, selector, callBack, options)`；否则没有该参数将抛出异常。
- `callBack`指定回调函数，用于`refreshPart`方法返回数据时的处理，该回调函数可通过第一个形参获取到`refreshPart`方法的返回数据，如`function(re){}`。注意：`refreshPart`的返回值是已经拼装完成的html的字符串，可使用$()转成jquery对象。
- `options`指定ajax的参数，参数值参考$.ajax，另外增加了mask属性，用来启用遮罩，如`{mask : true}`

***increasePart*** ： 局部增加，可以指定组件内部的一部分html进行累加操作

this.increasePart(methodName, params, selector, keyName, callBack, options)
> 
- `methodName`指定需要调用的方法，该方法必须在js组件对应的java组件里存在的方法
- `params`指定调用`methodName`时送入的参数，类型建议是string或者json，如果需要传递多个入参，则可以将该参数设置为数组，数组长度必须与`methodName`的参数个数相同，否则会抛出异常
- `selector`指定选择器，即被刷新部分的容器，比如："#offer"，则被刷新的内容就是id为offer的html对象里面的内容
- `keyName`指定key值，即模版里使用的$options的key，用于模版取值。如果`methodName`的返回值是map类型，则该参数无效，可不送入，返回值的key将与$options的key对应，调用可变成`this.increasePart(methodName, params, selector, callBack, options)`；否则没有该参数将抛出异常。
- `callBack`指定回调函数，用于`increasePart`方法返回数据时的处理，该回调函数可通过第一个形参获取到`increasePart`方法的返回数据，如`function(re){}`。注意：`increasePart`的返回值是已经拼装完成的html的字符串，可使用$()转成jquery对象。
- `options`指定ajax的参数，参数值参考$.ajax，另外增加了mask属性，用来启用遮罩，如`{mask : true}`

***refreshView*** ： 刷新视图

this.refreshView(params, callBack, options)
> 
- `params`指定刷新时送入的参数，类型建议是string或者json，如果需要传递多个入参，则可以将该参数设置为数组，数组长度必须与java组件中`achieveData`方法的参数个数相同，否则会抛出异常
- `callBack`指定回调函数，用于`refreshView`方法返回数据时的处理，该回调函数可通过第一个形参获取到`refreshView`方法的返回数据，如`function(re){}`。注意：`refreshView`的返回值是已经拼装完成的html的字符串，可使用$()转成jquery对象。
- `options`指定ajax的参数，参数值参考$.ajax，另外增加了mask属性，用来启用遮罩，如`{mask : true}`

***callService*** ： 服务访问，仅访问对应的java组件里的服务（js里只能访问java组件里的服务，不允许方法controller，为的是服务与controller解绑，便于模块移植）

this.callService(methodName, params, callBack, options)
> 
- `methodName`指定需要调用的方法，该方法必须在js组件对应的java组件里存在的方法
- `params`指定刷新时送入的参数，类型建议是string或者json，如果需要传递多个入参，则可以将该参数设置为数组，数组长度必须与java组件中`methodName`方法的参数个数相同，否则会抛出异常
- `callBack`指定回调函数，用于`callService`方法返回数据时的处理，该回调函数可通过第一个形参获取到`callService`方法的返回数据，如`function(re){}`。
- `options`指定ajax的参数，参数值参考$.ajax，另外增加了mask属性，用来启用遮罩，如`{mask : true}`

***addListener*** ： 增加侦听，在接收到事件时促发，一般用于不同模块之间的交互

this.addListener(eventName, func)
> 
- `eventName`指定需要侦听的事件名，在接收到该事件时促发func
- `func`指定促发事件时需要执行的逻辑，可通过形参接收到事件所附加的数据

***removeListener*** ： 删除侦听

this.removeListener(eventName, func)
>
- `eventName`指定需要删除的事件名
- `func`指定需要删除事件逻辑，如果不送，则删除该事件下的所有逻辑

***dispatchEvent*** ： 事件派发，一般用于不同模块之间的交互

this.dispatchEvent(widget, eventName)
	this.dispatchEvent(eventName, data...)
	this.dispatchEvent("vita.widgetName", eventName, data...)
	this.dispatchEvent("#id1,id2", eventName, data...)
>
- `widget`指定接收事件的组件，可不指定；不指定时，所有侦听了`eventName`事件的组件都将接收到事件；指定时，可以加vita.前缀标识使用了vita框架的组件，或者可以加#标识组件实例的id，需要指定多个组件时，可以用,分隔
- `eventName`指定事件名，必须指定
- 可以在`eventName`后增加参数，作为事件附加数据

***popup*** ： 弹窗1，用于alert、confirm

this.popup(info, baseFunction, extFunction)
>
- `info`指定提示信息
- `baseFunction`指定点击“确定”时的事件
- `extFunction`指定点击“取消”时的事情
- 注意：没有或者只有baseFunction时，`popup`显示为alert模式；同时存在`baseFunction`和`extFunction`时，`popup`显示为confirm模式

***dialog*** ： 弹窗2，用于对话框、需要填写内容等

this.dialog(id)
	this.dialog(options)
>
- `id`指定id，用于打开已经使用id生成过dialog的场景
- `options`指定生成新dialog的参数，是一个json结构，说明如下：
- `options.id`指定dialog的id，可不指定，若指定id并且destroy值为false时，下次可通过id使用该dialog
- `options.title`指定dialog的标题，可不指定
- `options.url`指定dialog需要加载的url，优先级比`options.content`高
- `options.params`指定dialog加载url时需要传递的参数，为json结构
- `options.content`指定dialog需要加载的内容，优先级比`options.url`低
- `options.buttons`指定dialog需要生成的按钮，结构为json或者json数组，可以设置三个属性：`class`指定样式，`text`指定按钮名称，`click`指定按钮事件
- `options.onClose`指定dialog在关闭时需要触发的事件
- `options.onCancel`指定在取消dialog时触发的事件，如dialog自身的“关闭”按钮
- `options.destroy`指定dialog在关闭的时候是否销毁，需是boolean值
- `options.autoClose`指定dialog在触发按钮事件后，是否需要自动关闭窗口，需是boolean值

***assist*** ： 请求协助，一般用于请求其他模块的数据，类似服务调用；在组件里，只是描述为一个接口，在界面流转时才会有真实逻辑

this.assist(flag, data, callBack)
>
- `flag`指定一个描述，用于描述一个需要请求的模块名，该模块名可以真实存在，也可以是虚拟描述
- `data`指定在请求`flag`模块时，需要传递的参数，建议为json
- `callBack`指定请求`flag`模块后，用来接收`flag`模块输出的数据的处理函数，如`function(re){}`

***end*** ： 当前模块逻辑结束描述，一般在明确当前模块的逻辑全部处理完，需要把焦点传递给其他模块时调用，表明当前模块逻辑结束；在组件里，只是描述为一个接口，在界面流转时才会有真实逻辑；

this.end(flag, data, special)
>
- `flag`指定一个描述，用于描述下一个接收焦点的模块名，该模块名可以真实存在，也可以是虚拟描述
- `data`指定在移交焦点给`flag`模块时，需要传递的参数，建议为json
- `special`指定特殊处理标识，当前有两类特殊处理，一类是强制移交，值为vita.REDIRECT；另一类是移交给上级界面流转描述，值为vita.OUT_OF_FOCUS

***refreshSession*** ： 更新session，用于员工信息、渠道更新（可按需重写）

this.refreshSession(session)
>
- `session`指定要更新的session值，json类型

***removeSession*** ： 清除session（可按需重写）

this.removeSession()

***refreshParty*** ： 更新session中的客户信息（可按需重写）

this.refreshParty(party, reset)
>
- `party`指定要更新的party值，json类型
- `reset`指定是否需要重置，重置会清除原有全部信息，再用`party`赋值，如果不重置，只会重置`party`里有的值，其余值保留

***removeParty*** ： 清除session中的客户信息（可按需重写）

this.removeParty()

#### vita.Backbone.BizModel ####
BizModel作为所有组件的模型基类，暂无扩展

### 第三节 html组件 ###
html组件上提供的能力主要分为两类：一类是velocity自定义指令；一类是html自定义标签
#### $options ####
html组件里统一的取数据入口，所有送到html组件的数据，统一由$options取出

$options.offerSpec

#### #widgetCreate ####
velocity自定义指令，在html里引用组件，可以加载html组件、对应的js组件、对应的本地js组件、对应的css，实现按需加载

#widgetCreate(widgetName, data)
>
- `widgetName`指定要加载的模块名称
- `data`指定传递给`widgetName`的数据

#### <vita-data></vita-data> ####
html自定义标签，提供数据附加能力，将该标签里的数据，附加到指定的html对象上，再通过jquery的data方法取出使用

<input type="text" id="test">
	<vita-data for="test">{"partyId":123456}</vita-data>
>
- `for`属性指定html对象的id，即把标签内的数据附加到指定id的html对象上
- `data`指定附加的数据，建议为json，如果是json，则附加到html对象上的key将等同与json里的key；如果不是json，会将数据以`vita-data`为key，附加到html对象上;上例中调用$("#test").data("partyId") => 123456

<input type="text" id="test">
	<vita-data>123456</vita-data>
>
- 没有指定`for`属性时，优先将该标签的前一个标签作为附加数据的html对象
- `data`指定附加的数据，建议为json，如果是json，则附加到html对象上的key将等同与json里的key；如果不是json，会将数据以`vita-data`为key，附加到html对象上;上例中调用$("#test").data("vita-data") => 123456

<div id="test">
		<vita-data>{"partyId":123456}</vita-data>
	</div>
>
- 没有指定`for`属性时，并且没有前一个标签时，将该标签的父级标签作为附加数据的html对象
- `data`指定附加的数据，建议为json，如果是json，则附加到html对象上的key将等同与json里的key；如果不是json，会将数据以`vita-data`为key，附加到html对象上;上例中调用$("#test").data("partyId") => 123456

#### <vita-bind></vita-bind> ####
html自定义标签，提供数据绑定能力，将指定的html对象与js组件里的model做绑定，并且将标签内的数据作为默认值。model值变化时将作用到html对象，html对象值变化时将作用到model。

<input type="text" id="test">
	<vita-bind for="test" action="input" mapper="value" model="data">123456</vita-bind>
>
- `for`属性指定与model绑定的html对象的id
- `mapper`属性指定与model绑定的html属性
- `model`属性指定与model绑定的key
- `action`属性指定一个html事件，在该事件触发时，去改变model
- `data`指定默认值，可不指定
- 上述标签描述为：将#test（`for`）对象的value（`mapper`）属性，在触发input（`action`）事件时，写入到js组件model的data（`model`）里；在js组件的model的data（`model`）值被改变时，将改变后的值，写到#test（`for`）对象的value（`mapper`）属性；123456（`data`）作为data（`model`）和value（`mapper`）的默认值

<input type="text" id="test">
	<vita-bind model="data">123456</vita-bind>
>
- 没有指定`for`属性时，优先将该标签的前一个标签作为附加数据的html对象
- 没有指定`action`属性时，默认为输入事件，一般情况下，输入事件禁止显式设置，因为设置成input会有IE8的兼容性问题，不设置的话，框架会做兼容性处理
- 没有指定`mapper`属性时，如果html对象是输入型的，框架将默认为value；如果是不可输入型的，框架将默认成html
- `model`必须设置，不设置该标签无效

<div id="test">
		<vita-bind model="data">123456</vita-bind>
	</div>
>
- 没有指定`for`属性时，并且没有前一个标签时，将该标签的父级标签作为附加数据的html对象
- 没有指定`action`属性时，默认为输入事件，一般情况下，输入事件禁止显式设置，因为设置成input会有IE8的兼容性问题，不设置的话，框架会做兼容性处理
- 没有指定`mapper`属性时，如果html对象是输入型的，框架将默认为value；如果是不可输入型的，框架将默认成html
- `model`必须设置，不设置该标签无效

### 第四节 java组件 ###

### 第五节 流程 ###

XuG/vita-plus

简介

发行版

贡献者

近期动态