这里简单介绍packet框架中最为重要的内置对象的基本信息。
adapt是packet框架中所有与面向对象相关的基础。
具体信息请参考adapt对象的说明
packet.template()
是packet的内置模板引擎,用于处理插值运算。它是轻量级的,并且具备自定义标签的能力
broode.template
为保证处理的性能在异常处理上有所保留,所以尽可能的保证语法的正确以免进入复杂的调试过程。
<% code %>
表达式为标准javascript语句(严格模式),语句末尾必须加;
<%=code;%>
赋值语句为标准javascript语句(严格模式),语句末尾必须加;
packet.template
支持自定义标签(宏),单标签宏的写法为<@tagname prop=""... />
,带标签体的宏写法<@tagname prop=""...>body</@tagname>
。宏实际上为一个javascript处理函数,它会接受两个参数,第一个参数为自定义标签属性的key-value对象,第二个为render
函数,如果该标签用于影响模板输出则应该有返回值,返回值则会直接渲染进模板。
全局宏
全局宏只需注册一次便在页面生命周期内任何地方调用模板引擎都会携带该宏
packet.setTemplateGlobalMacro("tagname",function(attrs,render){
return "";
});
对象宏
对象宏则依赖于调用模板对象,对象被清除则宏随之消失。调用方法:
packet.template().macro("tagname",function(attrs,render){
return "";
})
其他功能请参见template说明
Module是packet内置框架的核心对象。Module与DOM紧密连接,Module对象是一个自包含的页面单元,并作为一个组件存在。Module只负责处理自身的逻辑而尽量不与其他Module产生依赖,Module间的交互应该通过ViewEvent
来传递实现。
Module的API请参见request,view,viewgroup,root说明
onbeforeinit(option)
init(option)
onendinit(option)
onnodeinserted(dom)
view的dom有DOM插入时调用onchildremove(dom)
view的dom有DOM删除时调用onbeforeinit(option)
ondomready(option)
view的dom可用时调用onnodeinserted(dom)
view的dom有DOM插入时调用init(option)
onendinit(option)
oninitchild(child)
子view创建时调用onoption(ops, subview, subid)
处理子view初始化option时调用onchildremove(dom)
view的dom有DOM删除时调用onchildremove(child)
子view被移除时调用onunload()
释放view所占资源或其他view的通信功能定义于view类中,所以任何继承于view的类都具备通信能力。使用Module.dispatchEvent(eventtype,data[,true])
实现通信。当第三个参数为true
(默认为true)时对象会随着view的组合树向树顶传递,否则向所有子叶子传递。
注册事件
event_*[eventname]
为名的方法Module.addEventListener(evnetype,fn)
方法viewevent请参见viewevent对象
finder与group及groupi是将代码逻辑与DOM结构进行分离而设置的Module功能,finder或者group是一个DOM集合的包装对象,它会收集任何在模板中包含data-finder
和data-group
属性的DOM,该功能还需配合Module.delegate()
方法使用,当DOM有增加或删除操作时,需要调用该方法以更新finder和group集合。group是与groupi配合使用的,以脱离DOM结构而形成一个子集合,一个group中不能包含同名groupi。
<div data-find="test"></div>
<div data-group="test">
<div data-groupi="test-a"></div>
<div data-groupi="test-b"></div>
</div>
find和group回调
View初始化时会主动调用类中以find_*[findname]
,group_*[groupname]
为名的方法并传入对应的DOM
bind与find类似,是分离逻辑与DOM结构的方法。模板标签中包含data-bind
属性的NODE会注册相应事件,回调定义于类中bind_*[bindname]
的方法。
<div data-bind="click:name mouseup:name2"></div>
该方法是用于实现类似MVVM模式的双重绑定而设置,用于处理简单业务问题。调用该方法会将传入的对象改造成具备观察者
能力的新对象,当该对象有变动时会将对象的具体变动信息传递出去,只需在Module定义中定义以observername_objpropname_dealtype
为方法名的方法即可收到通知。对象的观察能力不同于浏览器内置的,它会传递更多信息,监听更多内容。
Module({
name:"test",
extend:"view",
init:function(){
this.observe("observname",{
aa:{
aaa:"aaa"
},
bb:"bb",
cc:[]
});
},
"observname_aa.aaa_edit":function(){},
observname_aa_edit:function(){},
observname_cc_add:function(){},
observname_cc.remove:function(){}
});
调用packet.App()
返回bootstarp对象,用于配置以及启动项目。
很多时候我们只需要关心basePath和update属性,其他属性都交由packetbuilder构建工具进行自动处理。
项目启动前可以处理很多事情,比如监听预处理资源加载,处理被载入的javascript代码等,具体信息参考packetstrap对象