JavaScript小知识点

• 创建页面元素

var hidden = document.createElement(“input”);
hidden.type = “hidden”;
hidden.id = “hidden”;
hidden.name = “hidden”;
hidden.value = document.body.outerHTML;
form1.appendChild(hidden);

• 使用DOM元素前要先判断是否存在
  • 如if (document.getElementById('xxx'))
• 控制按钮等元素是否可用
  • document.getElementById("btn1").disabled=true;
• 控制按钮等元素的焦点
  • document.getElementById("btn1").blur();
• 事件
  • 阻止事件冒泡
    • 为了避免操作子元素时触发父元素的事件，需要使用(click)="$event.stopPropagation()"阻止其事件向上冒泡。
• 打开新窗口，并填入内容
  • 注意使用document写入窗口内容后，要close，不然在某些浏览器的版本中，标签页上会始终是loading的转动状态

    html2canvas(document.getElementById(_target)).then(canvas => {
      const win = window.open();
      const doc = win.document;
      doc.write(`<img src=${canvas.toDataURL()} />`);
      doc.close();
    });

• 原生js操作dom添加删除替换class

  • html5增加了classList
    • classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。
    • classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
    • 增加：document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
    • 去除：document.getElementById("myDIV").classList.remove("mystyle");
    • 替换：document.getElementById("myDIV").classList.replace("someClassName","otherClassName");
  • 比较传统的方法

  var classVal = document.getElementById("id").getAttribute("class");
  
  //删除的话
  classVal = classVal.replace("someClassName","");
  document.getElementById("id").setAttribute("class",classVal );
  
  //添加的话
  classVal = classVal.concat(" someClassName");
  document.getElementById("id").setAttribute("class",classVal );
  
  //替换的话
  classVal = classVal.replace("someClassName","otherClassName");
  document.getElementById("id").setAttribute("class",classVal );
  

• setTimeout()

  • 异步、延迟的执行后续逻辑操作。

  • 可以避免使用sleep来进行延迟操作。

  • setTimeout的第一个参数是想要延迟的逻辑函数；第二个参数是延迟时长，可以指定延迟多久再进行后续逻辑操作，单位是毫秒。

    • 逻辑函数可以直接指定函数名（不需要传参的话），也可以使用匿名函数

    setTimeout(this.logicFunction,5000);
    
    setTimeout(function () {
      this.logicFunction();
    }, 1000);
    
    setTimeout(() => {
      this.logicFunction();
    }, 1000);
    

    • 如果逻辑函数需要使用外层代码的数据作为参数，那么可以包在一个匿名函数中

    setTimeout(function () {
      this.logicFunction(params);
    }, 1000);
    

    • 如果逻辑函数中使用到了this，而且是想代表外层调用者，那么需要把this传给逻辑函数

      • 把外层的this当做参数传进去，但这样不太好，如果逻辑函数是多处复用的，那么别的地方就也要传this参数了
      • 利用bind()方法

      setTimeout(function () {
        this.logicFunction(params);
      }.bind(this), 1000);
      

    • 使用箭头函数。

      • 这是因为箭头函数中的this总是指向外层调用者

      setTimeout(() => {
        this.logicFunction(params);
      }, 1000);
      

  • 异步也可以结合使用Typescript风格的Promise来实现。

  function sleep(ms: number): Promise<number> {
    return new Promise<number>((resolve, reject) => {
      setTimeout(() => resolve(ms), ms);
    });
  }
  

  • Angular中也可以通过那个Zone来异步执行程序，但好像不能指定延迟多久？

  this.zone.run(() => {
    this.snackBar.open(message, 'X', {
      duration: milliseconds
    });
  });
  

• setInterval()

  • 每隔一个固定时间段执行一次代码
  • 可以取消

this.timerInterval = setInterval(() => {
  // logic code
}, 3000);

if (this.timerInterval) {
  clearInterval(this.timerInterval);
}

• 字符串
  • 删除字符串前后的空格
    • str = str.replace(/(^\s)|(\s$)/g, "");
• Object
  • Object.keys()
    • 可以循环对象的所有成员变量，然后可以使用.map()来转成其他变量。也可以处理枚举。