BreezeJs用户手册

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页面其内容如下：