BreezeJs用户手册
2015-07-18 17:28
507 查看
BreezeJs用户手册
1 BreezeJs简介
BreezeJs是一个模板机制为基础的客户端框架,可以独立应用,也可以配套后台BreezeJava使用。
BreezeJs是一个核心的底层框架,也是BreezeCMS的一个基础。
在概念上,BreezeJs的基础是Gadget,也就是,Breeze是将页面切分成若干个小应用块来实现的。
每个小应用快都视为一个独立的应用。当gadget和某个页面标签绑定后,就可以用逻辑控制和操纵这个绑定标签下面的页面显示逻辑了。
2 何为gadget
如上章节所描述,gadget是一个页面上的小应用块的代码逻辑。
Gadget的行为,很像java的class的行为(如果不是java工程师,可以不必理解这个描述),有对应的名称,公有方法,私有方法,事件方法。
Gadget本身需要实例化后才能真正的使用,这就好比java的class的行为,class是必须被实例化。实例化后就是app而实际逻辑执行就是这些app。
所以,一个gadget可以在页面上被多个标签绑定,因为不同的绑定实际已经将同一个gadget实例化成多个app,由app进行实际标签绑定后的代码逻辑。
如果,对面向对象没有基础的同学可以理解为gadget实际是一个模版,这个模版实例化创建成app,而页面上所有的资源绑定都是这些由模版创建的app来实现的。
Gadget定义采用seajs进行加载,换句话说gadget是遵循 CMD 规范,这就是前端CVC的框架。
一个文件就是一个gadget定义,一个gadget完成一个规定的业务逻辑。
3 实战样例
我们实际看一个实际的例子。
我们声明一个test.js的文件。文件的内容如下:
define(function(require, exports, module) {
var FW =require(“../../breeze/framework/js/BreezeFW”);
var formatJS =require(“../../breeze/framework/js/tools/formatJS”);
FW.register(
{
name:”test”,
onCreate:function(){
this.display();
},
public:{
display:function(){
vardisplayData = {
name:”my dear”,
action:”hello”
}
this.API.show(“helloView”,displayData);
}
}
}
);
return FW;
});
上述代码中,黄色底的代码是固定模式,说明了要注册一个gadget。这部分代码相对固定,可以不理会。
红色字体才是真正的代码逻辑。
这个代码可以看到是已json的方式声明的,几个重点说明一下:
name:”test”—这句话声明了本gadget的名称,也就是这个gadget的标识(如果熟悉java的同学,可以把这个理解成类名)
onCreate:function…. – 这个onCreate是这个gadget被实例化成app后,首先被系统调用的入口函数,所以app的一切动作,由此为入口。(熟悉java同学可以理解这个为构造函数)
public:–这里下面声明的所有方法都是公有方法,简单的说,公有方法就是可以使用this.xxx或则外部其他app可以直接调用的方法(相对私有方法,其调用方法是和公有方法是不同的,而且外部不能直接调用)
display:function –这里声明了一个display的公有方法,很明显,在onCreate里面,直接调用了这个方法。
this.API.show –this就代表了本app实例(注意不是gadget了,而是实例化后的app)this.API是系统默认提供给APP的一套api函数。show是这套API函数中的一个,其含义就是将视图显示到和该app绑定的标签下面。其中hellowView是视图的名称。displayData是视图显示时,需要的数据。
下面,我看看html页面上怎么应用。
这时我们建立一个hello.html页面其内容如下:
1 BreezeJs简介
BreezeJs是一个模板机制为基础的客户端框架,可以独立应用,也可以配套后台BreezeJava使用。
BreezeJs是一个核心的底层框架,也是BreezeCMS的一个基础。
在概念上,BreezeJs的基础是Gadget,也就是,Breeze是将页面切分成若干个小应用块来实现的。
每个小应用快都视为一个独立的应用。当gadget和某个页面标签绑定后,就可以用逻辑控制和操纵这个绑定标签下面的页面显示逻辑了。
2 何为gadget
如上章节所描述,gadget是一个页面上的小应用块的代码逻辑。
Gadget的行为,很像java的class的行为(如果不是java工程师,可以不必理解这个描述),有对应的名称,公有方法,私有方法,事件方法。
Gadget本身需要实例化后才能真正的使用,这就好比java的class的行为,class是必须被实例化。实例化后就是app而实际逻辑执行就是这些app。
所以,一个gadget可以在页面上被多个标签绑定,因为不同的绑定实际已经将同一个gadget实例化成多个app,由app进行实际标签绑定后的代码逻辑。
如果,对面向对象没有基础的同学可以理解为gadget实际是一个模版,这个模版实例化创建成app,而页面上所有的资源绑定都是这些由模版创建的app来实现的。
Gadget定义采用seajs进行加载,换句话说gadget是遵循 CMD 规范,这就是前端CVC的框架。
一个文件就是一个gadget定义,一个gadget完成一个规定的业务逻辑。
3 实战样例
我们实际看一个实际的例子。
我们声明一个test.js的文件。文件的内容如下:
define(function(require, exports, module) {
var FW =require(“../../breeze/framework/js/BreezeFW”);
var formatJS =require(“../../breeze/framework/js/tools/formatJS”);
FW.register(
{
name:”test”,
onCreate:function(){
this.display();
},
public:{
display:function(){
vardisplayData = {
name:”my dear”,
action:”hello”
}
this.API.show(“helloView”,displayData);
}
}
}
);
return FW;
});
上述代码中,黄色底的代码是固定模式,说明了要注册一个gadget。这部分代码相对固定,可以不理会。
红色字体才是真正的代码逻辑。
这个代码可以看到是已json的方式声明的,几个重点说明一下:
name:”test”—这句话声明了本gadget的名称,也就是这个gadget的标识(如果熟悉java的同学,可以把这个理解成类名)
onCreate:function…. – 这个onCreate是这个gadget被实例化成app后,首先被系统调用的入口函数,所以app的一切动作,由此为入口。(熟悉java同学可以理解这个为构造函数)
public:–这里下面声明的所有方法都是公有方法,简单的说,公有方法就是可以使用this.xxx或则外部其他app可以直接调用的方法(相对私有方法,其调用方法是和公有方法是不同的,而且外部不能直接调用)
display:function –这里声明了一个display的公有方法,很明显,在onCreate里面,直接调用了这个方法。
this.API.show –this就代表了本app实例(注意不是gadget了,而是实例化后的app)this.API是系统默认提供给APP的一套api函数。show是这套API函数中的一个,其含义就是将视图显示到和该app绑定的标签下面。其中hellowView是视图的名称。displayData是视图显示时,需要的数据。
下面,我看看html页面上怎么应用。
这时我们建立一个hello.html页面其内容如下:
相关文章推荐
- BreezeJs使用
- 轉發和重定向-JSP
- JSP实现文件上传,解决上传文件名为乱码问题
- json字符串解析
- JS frame 跨域 传值
- js打印数组,js打印对象的方法
- JS null问题
- 【JavaScript 13—应用总结】:锁屏遮罩
- 【JavaScript 13—应用总结】:锁屏遮罩
- 浏览器调试动态js脚本
- JS刷新验证码
- JavaScript函数
- JavaScript面向对象与原型
- 深入浅出js事件
- javascript实现页面刷新时自动清空表单并选中的方法
- 安卓客户端与jsp互相用json进行数据的传递与解析
- 关于html选择文件(input指定类型js判断)
- JS高级程序设计11-DOM扩展
- javascript 字符串加减法
- jsp-DB