• MutationObserver listens for specified DOM changes

// Select the nodes that need to be observed to change
const targetNode = document.getElementById('some-id');

// Observer configuration (what changes need to be observed)
const config = { attributes: true.childList: true.subtree: true };

// The callback function that is executed when changes are observed
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.'); }}};// Create an observer instance and pass in the callback function
const observer = new MutationObserver(callback);

// Observe the target node from the above configuration
observer.observe(targetNode, config);

// After that, you can stop observing
observer.disconnect();
Copy the code
  • Add actions to combine with command queues

We need to listen for dragstart/dragend. If we need to use observer mode deepcopy, we can use the NPM package deepcopy

  • Recall and redo issues: 12345
  • Typescript array identifiers

We can define an Array like this: Array passes an interface.

export interface GrowingGoodsDetailResponse {
  data: {
    allStages: ArrayThe < {title: string; leftTitle:string; firstStage:any; secondStage:any; } >. itemId: number; taskPackageInstanceId: number; participationNum: number; taskStatus: string; taskStage: string; }; success:Boolean;
  errorCode: string;
  errorMsg: string;
}
Copy the code
  • Event delegation

Event delegation is based on the property of event bubbling, which binds the event to the parent node.

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'}} extension: > Prevent bubbling: e.toppagination (); > block the default event: e.preventDefault(); > The event object contains all the information related to the event, where target is the DOM that caused the event to occur and E.currenttarget is the DOM of the currently bound event object. < span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; word-break: inherit! Important;Copy the code
  • Vue3 study notes

computed

  • Can a proxy object instantiate an array and still iterate over it?

  • Flex layout:

    & > .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
  }
}
Copy the code

    }}

    • In addition to receiving rendered information, the container also needs to receive configuration information that defines which components we have.