低代码搭建组件库笔记（草稿）

• mutationObserver 监听指定的DOM变化

// 选择需要观察变动的节点
const targetNode = document.getElementById('some-id');

// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后，可停止观察
observer.disconnect();

• 添加动作与命令队列结合 我们需要监听dragstart/dragend ，这个时候需要用到观察者模式 深拷贝的话，直接使用npm包deepcopy吧

• 撤回与重做的问题： 12345

• typescript 数组标识

定义一个数组可以这样：就相当于Array传了一个接口嘛。

export interface GrowingGoodsDetailResponse {
  data: {
    allStages: Array<{
      title: string;
      leftTitle:string;
      firstStage:any;
      secondStage:any;
    }>;
    itemId: number;
    taskPackageInstanceId: number;
    participationNum: number;
    taskStatus: string;
    taskStage: string;
  };

  success: Boolean;
  errorCode: string;
  errorMsg: string;
}

• 事件委托 事件委托是基于事件冒泡的特性的，即将事件绑定到父节点上。

var ulist = document.getElementsByClassName('palette')[0];
ulist.onClick = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() === 'li') {
        document.getElementsByClassName('color-picker')[0].innerHTML = 'afsd'
    }
}
拓展： 
>阻止冒泡：e.stopPagination();
>阻止默认事件： e.preventDefault();
>事件对象event中包含了所有与事件有关的信息，其中的target是导致事件发生的DOM，
而e.currentTarget是当前绑定事件对象的DOM。
> 不同浏览器的事件对象是不一样的，我们可以通过事件代理进行兼容

• vue3学习笔记 computed

• proxy对象 实例化数组时候仍然可以遍历？

• flex布局:

  & > .visual-editor-content { width: 100%; height: 100%; overflow: auto; display: flex; justify-content: center;

  & > .visual-editor-container {
    background: white;
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
  
    .visual-editor-block {
      position: absolute
    }
  }
  

  } }

  • 容器除了接收渲染的信息之外，还需要接收一个配置信息 ，这个配置信息就是来定义我们有哪些组件。