| window.addEventListener('load', function() { g3d.addToDOM(); //将 3D 场景添加进 body 中 document.body.appendChild(E.top.getView()); //将 form 表单组件底层 div 添加进 body 中 window.addEventListener('resize', function() {//窗口大小变化事件监听 E.top.iv();//更新 form 表单的底层 div }); }); |
这里说明一下 addToDOM 函数，对于了解 HT 的机制非常重要。HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外层的 HT 组件则需要用户手工将 getView() 返回的底层 div 元素添加到页面的 DOM 元素中，这里需要注意的是，当父容器大小变化时，如果父容器是 BorderPane 和 SplitView 等这些 HT 预定义的容器组件，则 HT 的容器会自动递归调用孩子组件invalidate 函数通知更新。但如果父容器是原生的 html 元素， 则 HT 组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。
为了最外层组件加载填充满窗口的方便性，HT 的所有组件都有 addToDOM 函数，其实现逻辑如下，其中 iv 是 invalidate 的简写：
| addToDOM = function(){ var self = this, view = self.getView(), style = view.style; document.body.appendChild(view); //将场景的底层 div 添加进 body 中 style.left = '0';//HT 默认将所有的组件底层div的position设置为absolute style.right = '0'; style.top = '0'; style.bottom = '0'; window.addEventListener('resize', function () { self.iv(); }, false); //窗口大小变化监听事件，通知组件变化更新 } |
这样，所有的代码就结束了，可以自己右键“检查”，network 中可以获取相对应的 json 文件。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
