其他相关技术问题解答

1

1.1 定时器

xxxxxxxxxx
由于组件里添加了定时器，而更改属性时，我们会渲染组件，执行您的js逻辑，那么如果有setInterval就会被不停的执行，针对此情况怎么办呢
​
1 把定时器对象存储在window.intervalList对象里，这样全局情况能访问到
2 每次布局器刷新时，会执行iframe-ui.js的render方法，请在此处做一次遍历window.intervalList
 调用clearInterval方法先清理之前存储的循环定时器 这样就能干净的执行自己的组件最新的定时器了

1.2 如果默认ui并未按照我们的需要 放置drag-mc-pane data-magicalcodr-id那怎么办呢

xxxxxxxxxx
比如 el-card 
我们在element/iframe-ui.js里加了这种修复代码 可以保证 当组件未按照我们的预期放置可拖拽 或者mcId 我们就可以手动修复它
//修复下card
$(".el-card").each(function(){
    $(this).removeClass(dragMcPane);
    var cardBody = $(this).find(".el-card__body");
    var mcId = $(this).attr(magicalCoderIdAttrName);
    $(this).removeAttr(magicalCoderIdAttrName);
    if(cardBody.length<=0){
        $(this).append("<div class='el-card__body "+dragMcPane+"'"+magicalCoderIdAttrName+"='"+mcId+"'></div>")
    }else{
        cardBody.attr(magicalCoderIdAttrName,mcId);
        cardBody.addClass(dragMcPane)
    }
​
})

1.3 当默认ui生成了平级的2块结构怎么办？

xxxxxxxxxx
比如layui的select antd的a-popover
constant.js的tagClassMapping    
"a-popover":{"name":"气泡卡片","dragInto":true,"duplicate":true,"assistDuplicate":true,"copy":true,"paste":true,"canDelete":true,"assistDelete":true,"assistZoom":true,"canZoom":true,tmpWrapTag:'div',tmpWrapType:1},
​
主要是tmpWrapTag:'div',tmpWrapType:1

1.4 我希望做一个自由布局的业务场景 内部有联动

xxxxxxxxxx
比如 上面有个下拉框，下面有个统计图表 下拉框变动 图表跟着变 那我们怎么做呢
​
以下有三种方式可供您参考

xxxxxxxxxx
方式一：模块化组件封装法
    整体思路就是 自己封装一个组件，组件内部自己放select,echarts组件，而交互的逻辑肯定就在组件内部实现了。而此时布局器仅仅负责配置这个组件的属性就达到组件的功能
优点：简单易实现 用户仅关心这个组件的配置 而不操心组件内部具体的逻辑 布局等
确定：如果用户希望自由布局 或者操作select ecahrts图表的属性 就很难实现了
​
使用jquery框架的ui(layui,bootstrap...)
    <div class='my-component' remote-api=""></div>
    至于my-component的部分，您可以自己写个js来实现它 就是包含一个select echarts，select变化 去请求remote-api的接口数据 刷新到echarts上
​
使用vue框架的ui（element,antd...）
    <my-component></my-component>
    请参考vue组件封装的方式 思路同上

xxxxxxxxxx
方式二： 仅支持vue
    打开iframe-ui.js 我们可以看到IframeUi.prototype.api = function(){} 这里提供了大量修改脚本的api 比如绑定变量 修改method等
​
    首先： 您需要固定好一个场景 就是不能让用户自由度太大，比如让用户拖拽一个像淘宝一样的页面，那就不可控了，所以当前业务场景下 加载出来的布局器
    一个左侧只有布局容器，下拉框，echarts图表组件，而滑动条 按钮等不相干的都要去掉 这就大大缩小了用户的范围，我们可以更好的控制脚本内容的生成
​
    其次： 您需要熟练callback.js api.js的内容
    我们可以使用：after_workspace_change回调 每当布局器有变动 都会通知您 您需要获取布局器的json结构
    MagicalCallback.prototype.after_workspace_change = function () {
        var api = new MagicalApi();
        var rootNode = api.getRootNode();
        //rootNode里有select ecahrt图表 您可以操作他们 给他们去v-model 变量名 等
        //然后 api.getIframeUi().api().xxx操作脚本内容，或者更暴力的方式
        api.getIframeUi().setJavascript(全部按照您预设的脚本来执行)
    }

xxxxxxxxxx
方式三：仅支持jquery
​
    首先： 您需要固定好一个场景 就是不能让用户自由度太大，比如让用户拖拽一个像淘宝一样的页面，那就不可控了，所以当前业务场景下 加载出来的布局器
    一个左侧只有布局容器，下拉框，echarts图表组件，而滑动条 按钮等不相干的都要去掉 这就大大缩小了用户的范围，我们可以更好的控制脚本内容的生成
    
    其次：咱们提前写好一段脚本，先引入到iframe-xxx.html，但是不要执行 比如执行的时候就是new MyStage().start();
    至于MyStage的逻辑就是：检测页面的下拉框 当下拉框变更时，寻找echarts组件，去修改它的初始化逻辑，因为jquery寻找组件的能力强 很灵活。
​
    因为执行时机在iframe-ui.js内 此时您可以 直接放this.defaultJavascript内，也可以直接放render下的eval(javascript)后面
    eval(javascript);
    new MyStage().start();
​
    原理：就是利用布局器每次变更都会执行 ifram-ui.js中的render方法 此时再嵌入我们的脚本 那就可以了

1.4 拖拽一个表单，并非建表，并且能自动把数据提交到后端

xxxxxxxxxx
    如果是jqeury 就很简单了 自己写脚本 遍历即可解决
​
    如果是vue: 操作就相对复杂点了 因为vue不好遍历 也不好全局给按钮绑定事件