前端框架，Front End Framework
##简介
Puppet是基于逻辑层抽像的前端框架,致力于更高效,便捷,优雅的构建 开发复杂的前端工程.Puppet是基于MVC的传统架框方法,抽象所有的前端模型进行封装.
##方法参考
###renderModel ###普通渲染模型
其实前端大多数的操作,无非抽象为,从cgi取到数据然后把数据展示出来.普通的渲染模型即是,从cgi取到数据,通过模型进行数据处理后交给视图层去使用.
####配置参数
#####cgiName
{string}
请求的cgi路径
#####renderTmpl
渲染的模板对象
视图模板 如果cgi返回数据中有result，直接使用result进行渲染，否则使用原始数据渲染
//数据为
data = {
result: {
list: [
],
bid: 10038
},
retcode: 0
}//模板中
<div data-bid="<%=bid%>">soda</div>
<ul>
<% for(var i = 0; i < list.length; i ++){
%>
<li>soda</li>
<% }
%>
</ul>#####renderContainer {string} | {jqueryObj}
渲染到的元素 #####param {function}|{object}
cgi的请求参数
// 页面的头部模块
var header = new renderModel({
param: {
bid: 10038,
name: 'a'
}
});或者
var bid,name;
// ...
var header = new renderModel({
param: function(){
return {
bid: bid,
name: name
};
}
});#####data {object} 可选的
如果存在data就会使用data渲染模板而不请求cgi #####renderTool {object}
渲染模板时候可用的工具函数对像
var header = new renderModel({
renderTool: {
formatTime: funtion(t){
return "2014";
}
}
});
//模板中可以直接用
<div><%=$Tool.formatTime('a')%></div>#####processData {function}
对数据的加工与处理，此时对当前模板视图内的DOM操作是禁止的
processData的第一个参数为Data，第二个参数为cgi的请求次数
var hender = new renderModel({
processData: function(res, cgiCount){
if(cgiCount === 0){
// cgiCount为0始终是在用本地缓存中的数据
// 必要时可进行一些操作
}
// 注意res为引用传递 想办法修改res而不是覆盖res
}
});#####error {function}
cgi请求出错时，一般为网络错误导致
var hender = new renderModel({
error: function(res, cgiCount){
if(cgiCount === 0){
// cgiCount为0始终是在用本地缓存中的数据
// 必要时可进行一些操作
}
}
});#####complete {function}
视图层渲染完成时进行的一些操作，这时可以对视图内的DOM进行处理 参数同processData #####myData {object}
自定义数据，可以在processData、complete中使用,直接用this.myData引用即可，常用于对继承中的特殊处理
var tab1 = new renderModel{
myData: {
type: 100
},
processData: function(res){
if(this.myData == 100){
res.result.flag = 1;
//....
}else if(this.myData == 300){
res.result.flag = 0;
//....
}
}
};
var tab2 = render.extend({
myData: {
type: 300
}
});#####events {function}
此模块的事件绑定 代码内做了防止多次事件绑定，被继承的事件也只会执行一次
var tab1 = new renderModel({
events: function(){
$("#list").on("tap", function(e){
});
}
});
// tab2继承了tab1的events，events不会再次执行
var tab2 = tab1.extend({
});
// tab3定义了events，tab3的events会继续执行
var tab3 = tab1.extend({
events: function(){
$("#list2").on("tap", function(e){
});
}
});#####onreset {function}
模型被重置（调用了reset方法）前触发的操作，重置请参考reset方法 #####noRefresh {boolean}
true： 模型调用resfresh方法时，不进行任何操作，false： 会执行refresh操作
####模型方法 #####rock() 使模型开始执行
var hender = new renderModel({
});
hender.rock();#####update(data) 用新的数据更新模型
//...
// 模型使用新的数据重新渲染视图
hender.update(data);#####reset() 重置模型
重置模型，即是，重置模型将会使模型的所有状态回归，但已经请求的数据会缓存，不会重新请求cgi,常跟rock配合使用，用于使用缓存的数据重新渲染视图，对于scrollModel即是重新渲染视图，滚动加载时，有数据会用缓存数据，没有会重新请求cgi进行渲染
reset方法会调用onreset的配置方法
#####refresh() 刷新模型，重新请求cgi，重新渲染
refresh其实是进行了以下三个步骤：清空缓存数据，调用reset方法重置，调用rock方法完成了模型的刷新操作，refresh方法会执行onreset配置
//...
// 点击刷新时，刷新hender的模块
$("#refresh").on("tap", function(e){
hender.refresh();
});#####feed(model) 使用该模型的数据对某模型渲染
一般来说，某个小模块依赖于某个大模块的cgi返回数据，可以使用此方法
var header = new renderModel({
cgiName: "/cgi-bin/header",
//...
});
var navigator = new renderModel({
});
header.feed(navigator);
header.rock();#####resetData() 要求该模型下次被调用rock方法时去拉最新的数据，常用于model被mutitab管理时，要求刷新某个模型的数据
#####show() 显示模块对应的container #####hide() 隐藏模快对应的container #####extend(opt) 从该模块继承一个新的模块
opt即是配置参数，如果没有定义param，则会使用原有可能被缓存的param
var tab1 = new renderModel({
param: function(){
return {
bid: bid,
name: name
}
},
cgiName: '/cgi-bin/tab1',
renderContainer: ".tab",
renderTmpl: Tmpl_inline.tab,
processData: function(data){
}
});
var tab2 = tab1.extend({
cgiName: '/cgi-bin/tab2'
});#####freeze() 冻结该模块 主要是对于滚动加载的模块，调用此方法可以使不再滚动加载
// 滚动加载模型
var tab1 = new scrollModel({
param: function(){
var every = 10;
var start = - every;
return function(){
bid: bid,
name: name,
start: start += every,
every: every
}
},
cgiName: '/cgi-bin/tab1',
renderContainer: ".tab",
renderTmpl: Tmpl_inline.tab,
processData: function(data){
// 数据结束，滚动加载模型冻结
if(data.isend){
this.freeze();
}
}
});#####melt()
解冻该模块
###scrollModel ####滚动加载模型
滚动加载模型继承自renderModel，所以拥有renderModel的所有配置参数和方法
scrollModel默认的滚动元素在ios下（其子元素比该元素高)是id为"js_bar_main"的元素，android下为window
例子
主文件
<div class='tabWrapper'>
<ul class='tab'>
</ul>
</div>模板文件
<% for(var i = 0; i < list.length; i ++){
var item = list[i];
%>
<li data-bid="<%=item.bid%>"><%=item.name%></li>
<% }
%>js文件
var tab1 = new scrollModel({
renderContainer: ".tab",
renderTmpl: Tmpl_inline.tab1,
cgiName: "/cgi-bin/tab1",
processData: function(data){
data.result.flag = 1;
},
events: function(){
$(".tab li").on("tap", function(){
var bid = $(this).data(bid);
Util.openDetail(bid);
});
}
});
tab1.rock();###cgiModel ####发cgi请求的模型 ####参数配置 #####cgiName {string} cgi路径 #####param 请求参数 #####processData 处理数据 #####complete 完成请求后的处理 #####error 网络请求失败的处理
####模型方法 #####rock() 模型动起来
多次调用可能会使用缓存数据，此场景请使用refresh方法
#####refresh() 刷新模型
#####reset() 模型重置 #####extend(opt) 继承出一个新的对象
###mutitabModel ####多tab管理模型
多tab管理模型是管理多个tab之间切换模型，自带刷新，隐藏
####参数配置 无
####模型方法 #####add(selector, model) selector {string} 元素选择器
model {Model} 对应的模型
增加一个模型的管理， 点击selector的元素，对应模型显示出来
如果几个selector对应的模型的渲染container为同一个，则会使用reset + rock方式进行渲染，从而达到缓存数据的目的，不同container将会使用显示与隐藏的方式渲染
var mutitab = new mutitabModel();
mutitab.add(".tab1", tab1);
mutitab.add(".tab2", tab2);
mutitab.rock();#####init(selector) 定义初始渲染的tab是哪个模型
如果不调用此方法，mutitab将会初始化渲染第一个被增加上去的model
此方法要在rock前调用才有效
#####rock() mutitab模型动起来
点击某个selector是，selector对应的元素会被增加一个active类，其他mutitab管理的selector元素将被取消active类
#####ontabswitch(function) 切换tab时进行的操作
function(selector, type)
selector：当前切过来的model对应的selector
type：'init' 或者 'switch' 分别代表是初始化还是切换的状态
#####switchTo(selector) 手动将tab切到某个selector对应的model
#####refresh() 刷新当前被展示的model，重新请求cgi，重新渲染
#####refreshList(selector) 刷新selector对应的模型，selector如果被隐藏，下次展示时重新请求cgi渲染，如果显示，直接执行刷新操作
#####freeze() 冻结整个mutitab，主要是冻结mutitab的滚动加载不再执行
#####freezeCurrent() 冻结当前model，主要是冻结当前model的滚动加载
###pageModel ####页面管理模型
主要是将页面上的所有模型归为page来统一管理，方便rock、继承等操作
####模型配置 无
####模型方法
#####add(model) 将模型增加到page上去
#####remove(model) 移除model
#####refresh() 刷新页面
#####reset() 重置页面
#####hide() 隐藏页面
#####show() 显示页面
#####extend(opt) 继承出来一个对象
##Sincerely End