Agile CE移动前端框架

Agile CE移动前端框架是一个数据视图双向绑定的框架，帮助开发者将数据层和视图层分离更彻底，是一个可以让业务逻辑和视图高度复用的框架。

版本说明

V0.4.89版本实际为 V0.5.2版本

框架介绍

Agile CE框架采用类jQuery语法习惯使用MVVM，比如：

<!-- 为div设置id属性，作为JS中的唯一选择器 -->
<div id="view">
<input type="text" v-model="welcome" prompt="请输入你的名字"/>
<p>hello {{welcome}}</p>
</div>

针对上面的元素做MVVM双向绑定：

//定义渲染数据对象
var obj = {
	welcome : 'world'
};

//为View绑定数据对象
$('#view').render(obj);

使用交流如QQ群：466161478

框架支持使用类jQuery模式对DOM操作的扩展以适应不同JS运行环境的MVVM支持。默认支持运行在浏览器（browser）环境（内置jQuery），如需扩展在其他运行环境只需要按照简化的API（jqlite，可参考libs/JQLite.native.js进行封装即可）。

其他环境一般是指使用原生能力来实现自定义DOM的环境。比如：基于Android/iOS的原生View封装的JS DOM、基于WPF开发的用户界面框架封装的JS DOM等。

源码结构

目录说明

源码中包含三个目录：libs、dist和docs。

libs：此目录是源码文件，框架功能的修改可在此文件中完成，执行webpack命令后，分发的资源位于dist目录。

dist：此目录为最终开发者使用的资源文件，带有browser字样的用于浏览器，带有native或者自定义JQLite后缀的用于指定原生环境；带有min字样的是压缩版，不带有min字样的是未压缩版本。

docs：此目录为使用手册目录，具体使用请参考文件夹下的readme说明。

编译说明

libs下的文件需要经过webpack编译得到可分发的版本方能使用。

编译命令接受两个参数，--env.usein=browser|native|...和--env.compress=true|false，其中usein参数含义为框架运行的环境，目前有两个可选参数值，即browser（默认）和native，如果自行扩展了一些原生的jqlite操作类可以设置为相应的值即可；compress参数含义为是否压缩，可选值为true（默认）和false，不设置参数或者设置为true则压缩，设置为false则不压缩。

比如：

webpack

意为：将libs源码打包为一个用于浏览器环境且经过压缩的分发版本文件。这时候会在dist目录下生成一个名为agile.ce.browser.min.js文件

webpack --env.usein=native --env.compress=false

意为：将libs源码打包为一个用于某原生环境且代码不需要压缩的分发版本文件。这时候会在dist目录下生成一个名为agile.ce.native.js文件

使用方法

在浏览器中使用

在浏览器中使用，html页面中无须引用jquery（如需更改jquery的版本可在编译的时候修改libs目录下的jquery.js文件即可，或修改webpack的配置文件）。只需要把dist目录下的agile.ce.browser.js文件或者agile.ce.browser.min.js文件引入到html页面即可。

使用方法为：

var vm = $(selector).render(obj);

如需销毁ce调用destroy方法即可：

var vm = $(selector).render(obj);
vm.destroy();

或者

$(selector).render(obj);
// 只要注入过一次，调用render空方法可返回ce对象，不会重复渲染
var vm = $(selector).render();
vm.destroy();

其中selector为视图层根节点元素的选择器，请确保选择器相对于页面元素为唯一；obj为一个json对象，内部包含要往视图层渲染的数据内容和函数。可通过对obj对象的操作来控制视图层的刷新。

在原生环境中使用

视具体环境使用。

浏览器中示例

html代码片段

<div id="content">
	<input v-model="welcome" prompt="请输入"/>
	<p>hello {{welcome}}!</p>
</div>

JS代码片段

var obj = {
	welcome : 'world'
};

$('#content').render(obj);

效果： 当在输入框中输入任意字符，下方就是显示hello+输入的字符。首次默认显示hello world。

指令系统

Agile CE框架使用指令系统关联数据与视图。指令的基本写法为v-指令名[:指令类别]="指令内容"。特别的，可以通过{{指令内容}}代替v-text="指令内容"。

全部指令和用法请参考docs目录

比如：

<div v-on:click="doSubmit">{{btnName}}</div>

常用指令说明

v-text="指令内容"

用于渲染文本内容，比如：v-text="'agile ce is a'+good+'framework'"

v-html

用于渲染html片段内容，比如：v-html="richText"

v-for

用于渲染一组数组数据，比如：

<ul>
	<li v-for="item in list">{{$index}}：{{item.title}}</li>
</ul>

循环内部可以通过$index获取当前循环的索引，当有循环嵌套时，$index代表的是最近的v-for元素的循环的索引。

v-on:eventName

用于为元素动态绑定事件，比如：

<button v-on:click="doSubmit">提交</button>

当指令内容仅为函数名时，调用函数的时候会原样传递系统事件的参数；当指令内容是一个函数调用时，可通过$event来获取事件对象。

v-one:eventName

用于为元素动态绑定事件，但是与v-on区别的是v-one指令会清掉该事件之前绑定过的事件再进行绑定，即只绑定一次此事件，当事件触发的时候仅进入最后一个v-one指定的回调函数中。

用法跟v-on相同。

v-bind:attributeName

用于动态绑定元素属性，比如：

<img v-bind:src="imgSrc"/>

特别的：

如果属性为style，则指令内容可以是一个json数据，该数据的key为任意样式的名称，value值为该样式的合理的输入值，比如：

<a v-bind:style="{color:titleColor, 'background-color':titleBg}">agile ce教程</a>

这时候v-bind:style同时可简写为v-style。

如果属性class，则指令内容可以是一个json数据，该数据的key为任意已定义的class样式名，value值为boolean型，为true则元素添加此class样式，否则移除此class样式。比如：

<a v-bind:class="{colorRed:isRed, colorBlue:isBlue}">agile ce教程</a>

这时候v-bind:class可简写为v-class。

v-show

用于显隐某个元素，其指令内容执行结果应为boolean值，当为true时元素显示，false时元素隐藏。

v-if/v-else

用于元素显示的逻辑判断，v-if可以设置boolean类型值，v-else可设置空串。当v-if的值为true，则v-if内的元素显示，v-else内的元素卸载；否则相反。

v-model

用于通过表单关联数据与视图，达到双向绑定的效果。比如：

<div id="content">
	<input v-model="welcome" prompt="请输入"/>
	<p>hello {{welcome}}!</p>
</div>

上面的例子中，输入框只要有输入内容的变化都会体现到下面的p中welcome对象所在的位置。

目前支持元素包括：input、select、radio、checkbox和textarea

v-like

用于当开发者需要封装自己的类似input、select、radio、checkbox和textarea的表单组件时需要做数据的双向绑定，可以设置自己组件的v-like="input|select|radio|checkbox|textarea"，这时候组件需要封装固定含义与实现的change事件供框架调用，以实现实时通过输入改变数据的效果。