js 如何保存代码段并执行以及动态加载script

1.模块化开发

  通常使用的是 export和import 实现代码的共享和导入

2.特殊情况下需要将代码段作为参数传递

可以使用function 的toString方法将整合函数和里面的代码批量转化为字符串

然后可以借助eval方法执行，eval接收一个字符串参数，并作为可执行的js代码段进行执行

如下

/* 将代码段转化为字符串 */
var fun = function a__b__a__b(){
      let a =3 *9;
      var dom = document
      console.log('dom', dom)
      console.log('a', a)
    }.toString()
/* 通过正则去除包裹函数，执行代码段 */
eval(fun.replace(/^function a__b__a__b\(\)\{|\}$/g,''))

当然eval有一定安全风险

3.动态插入 script

分为插入文件和插入可执行代码

 

插入文件

/*
* @param{String} url script 路径
* @param{Function} cb script标签加载完后的回调函数
*/

var createScript = function(url,cb){
  if(!url) return;
  let scriptDom = document.createElement('script');
  scriptDom.type = 'text/javascript';
  scriptDom.async = true
  scriptDom.src = url;
  // 判断IE
  if(!+[-1]){
    scriptDom.onreadystatechange = function(){
      if(this.readyState == 'loaded' || this.readyState == 'complete'){
        cb()
      }
    }
  }else{
    scriptDom.onload = function(){
     cb()
    } 
  }
  document.body.appendChild(scritDom)
}

 

插入可执行代码

/*@param{String} code 待执行的代码串*/
var creatScript = function(code){
  if(!code) return
  let scriptDom = document.createElement('script');
  scriptDom.type = 'text/javascript';
  try{
    let codeDom = document.createTextNode(code)
    script.appendChild()
  }catch(e){
    console.log('isIe')
    script.text = code
  }
  document.body.appendChild(scriptDom)
}