javascript按需加载

前言

按需加载是性能优化的一部分.在网络环境不好,网速慢的时候,使用按需加载可以达到优化的目的

按需加载通常用于原生js开发的项目

实现

思路

1.判断url是否已经存在,如果存在不执行后续,不存在才会执行后续的按需加载

2.获取标签head

3.我们要实现< script src="xx.js" type="text/javascript"> 加载完成执行一个操作,具体实现方法:

• 创建script标签,添加属性src和type.
• script加载完毕后在ff浏览器中会执行onload事件(兼容ff浏览器)
• script加载完毕后在ie中要实现立即执行某个事件需要onreadystatechange事件和this.readyState事件共同判断,this.readyState为loaded或者是complete都表明script已经加载完毕

var obj ={};
/**
   * 按需加载JS
   * @param {string} url 脚本地址
   * @param {function} callback  回调函数
   */
export function dynamicLoadJs (url, callback) {
 if(obj[url]){
         callback();
         return;
       }
       obj[url]=true;
  var head = document.getElementsByTagName('head')[0]
  var script = document.createElement('script')
  script.type = 'text/javascript'
  script.src = url
  if (typeof (callback) === 'function') {
    script.onload = script.onreadystatechange = function () {
      if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
        callback()
        script.onload = script.onreadystatechange = null
      }
    }
  }
  head.appendChild(script)
}