BUZ-视图区域

Region -- 视图区域管理

我们可以通过Layout设计多个页面布局方案，并随意切换整体布局。

对外一般在Layout文件中使用，对内一般指的是某个区域的管理。

Region -- 视图区域管理 我们可以通过Layout设计多个页面布局方案，并随意切换整体布局。 对外一般在Layout文件中使用，对内一般指的是某个区域的管理。 1 2 3 4 5 6 7 8 9 App.initRegions(`     <div id="container" class="clearFix">         <div id="sideBar"></div>         <div id="content"></div>     </div>     `, {     sideBar: "#sideBar",     content: "#content" }); 接下来我们来看下Region具体为我们提供了哪些内容。 广播事件 事件名称 作用 备注 before:initRegions 初始化区域（Layout）前触发   after:initRegions 初始化区域（Layout）后触发   before:teardownAll 卸载所有页面区域（Layout）前触发   after:teardownAll 卸载所有页面区域（Layout）后触发   公开方法 initRegions （唯一对外公开方法） 初始化页面视图区域，通常只在Layout中进行设置 1 App.initRegions(templete, selectors); 1. 其中templete代表HTML模板，建议使用import导入HTML文件方式进行使用，不建议在JS中写入大量HTML片段。 2. selectors代表区域规划方案，key值代表区域名称，value值为HTML选择器 驱动逻辑 由于布局方案（Layout）是通过Router进行驱动加载的，在路由变化时，会检测布局方案是否改变，如果未改变则不会重复执行区域初始化。 当布局方案发生改变或首次加载布局方案时，优先执行teardownAll卸载区域内的所有视图，并清空当前区域内容。 全局观察者模式 全局观察者模式可以实现跨视图组件的事件广播，有效的降低耦合性。 但是全局观察者模式通常是在View（视图组件）中进行触发和管理，不建议直接使用，因为视图组件是具有完整生命周期，当视图卸载时，也会 在全局观察者模式中进行销毁，若在非视图组件中使用，很容易忘记卸载事件，造成不必要的内存浪费。 上面讲的驱动逻辑、全局观察者模式，这些核心方法都是由外部组件自动调用，在实际开发中几乎不会被用到，这里大家只是对其进行有个初步了解。 RegionItem 当我们执行initRegions后，区域操作把柄会在App.regions进行挂载，我们也是通过该操作把柄来实现区域的一系列操作的。 1 2 3 4 5 6 7 8 App.initRegions(templete, {     top:"#top",     bottom:"#bottom" });   //调用方式 App.regions.top; App.regions.bottom; 属性 属性名称 作用 类型 备注 selector 区域容器 BET Selector BET选择对象 name 区域名称 String   view 当前区域挂载的视图组件 View   广播事件 事件名称 作用 参数 备注 before:loadView 区域装载视图前 { view: view, pageParam: pageParam }   after:loadView 区域装载视图后 view(视图组件)   break:loadView 视图装载时异常广播   触发条件： 1.视图组件加载失败 2.区域已卸载或已装载其他组件，取消本次装载 举例： 1 2 3 4 5 6 7 App.initRegions(templete, {     top:"#top" });   //监听方式 App.regions.top.on("before:loadView",function(){}); App.region.on("before:loadView",function(){}); 由于对外操作把柄为App.region，但是对某一项区域也有独立的操作，所以广播事件在Region和RegionItem中分别进行触发。 公开方法 RegionItem 是我们比较常用的操作把柄，由它来控制区域的装载、卸载操作。 show -常用 当我们执行initRegions后，区域操作把柄会在App.regions进行挂载，我们也是通过该操作把柄来实现区域的一系列操作的。 1 2 3 4 5 6 App.initRegions(templete, {     top:"#top" });   //调用方式 App.regions.top.show(view, pageParam); 参数名 作用 类型 默认值 备注 view 视图组件/视图组件地址 View/String   可初始化视图组件后传入，也可以传入视图组件地址异步加载视图组件 pageParam 视图数据 Any   传入视图组件后可以在视图组件内进行使用，详见视图组件章节。 teardown 1 2 3 4 5 6 App.initRegions(templete, {     top:"#top" });   //调用方式 App.regions.top.teardown(); 卸载当前区域。内部使用，不建议对外主动调用。

接下来我们来看下Region具体为我们提供了哪些内容。

广播事件

事件名称	作用	备注
before:initRegions	初始化区域（Layout）前触发
after:initRegions	初始化区域（Layout）后触发
before:teardownAll	卸载所有页面区域（Layout）前触发
after:teardownAll	卸载所有页面区域（Layout）后触发

公开方法

initRegions （唯一对外公开方法）

初始化页面视图区域，通常只在Layout中进行设置

1	App.initRegions(templete, selectors);

1. 其中templete代表HTML模板，建议使用import导入HTML文件方式进行使用，不建议在JS中写入大量HTML片段。

2. selectors代表区域规划方案，key值代表区域名称，value值为HTML选择器

驱动逻辑

由于布局方案（Layout）是通过Router进行驱动加载的，在路由变化时，会检测布局方案是否改变，如果未改变则不会重复执行区域初始化。

当布局方案发生改变或首次加载布局方案时，优先执行teardownAll卸载区域内的所有视图，并清空当前区域内容。

全局观察者模式

全局观察者模式可以实现跨视图组件的事件广播，有效的降低耦合性。

但是全局观察者模式通常是在View（视图组件）中进行触发和管理，不建议直接使用，因为视图组件是具有完整生命周期，当视图卸载时，也会 在全局观察者模式中进行销毁，若在非视图组件中使用，很容易忘记卸载事件，造成不必要的内存浪费。

上面讲的驱动逻辑、全局观察者模式，这些核心方法都是由外部组件自动调用，在实际开发中几乎不会被用到，这里大家只是对其进行有个初步了解。

https://github.com/ZhangChuanHui/BUZ