前端框架，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