一、JSONP

首先创建外部一个存储数据的文件，如下：
在这里插入图片描述
内容是以一个函数的形式，如下：

在此，（‘’）中的内容可以为任何形式。。

再看js中的访问方式：（此时我引用了vue的外部依赖）
在此可以直接复制代码，需要做的操作就是调用 getData 方法。
方法第一行括号中的路径根据个人的需求进行修改，需要注意的是，?callback=data，这里callback后面等于的就是你在 .data文件中定义的函数，名称保持一致即可。（路径也不要错）

getData() {
    this.jsonp('./Report/data.data?callback=data', (res) => {
        console.log('res', res);
    })
},
parseQueryString(url) {
    if (!/^(\.\/Report|Report)/.test(url)) return null
    var obj = {};
    var keyvalue = [];
    var key = "", value = "";
    var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
    for (var i in paraString) {
        keyvalue = paraString[i].split("=");
        key = keyvalue[0];
        value = keyvalue[1];
        obj[key] = value;
    }
    return obj;
},
jsonp(url, callback) {
    let script = document.createElement('script')
    script.type = 'text/javascript';
    script.src = url;
    //传递的参数
    let result = this.parseQueryString(url);
    let callbackFn = result['callback'];
    window[callbackFn] = function (data) {
        callback(data)
        delete window[callbackFn]
        document.head.removeChild(script)
    }
    document.head.appendChild(script);
},
jsonpall(urlArray, callback) {
    let resultAll = [];
    // 数量
    let len = 0;
    urlArray.forEach(item => {
        jsonp(item.dataUrl, (result) => {
            len++;
            resultAll.push({
                res: result.data,
                path: item.path
            })
            // 最后一次请求完成,所有数据请求完成返回结果
            if (len == urlArray.length) {
                // console.log("所有结果", resultAll);
                callback(resultAll)
            }
        })
    })
}

二、使用标签获取外部 js 文件中的数据

首先随便创建一个js文件，写法如下：
应该看得懂吧，看不懂就直接复制，修改 return 中的数据即可

(function (window) {
  function generateConfigure() {
    return {
      name: "张三",
      age: 18,
    };
  }
  window.configure = generateConfigure();
})(window);

创建一个 html 文件，其 js 代码如下：
下面还有个vue的，往下看↓

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrapper">
    </div>
    <script>
      const $nav = document.querySelector(".sidebar-nav");
      Array.from($nav.children).forEach((element, index) => {
        element.addEventListener("click", function () {
          const scripts = document.querySelectorAll("script");
          if (scripts.length > 1) {
            let script = Array.from(scripts).find((script) => {
              if (script.src) {
                return script;
              }
            });
            document.documentElement.removeChild(script);
          }
          const script = document.createElement("script");
          script.src = index !== 0 ? `config_${index}.js` : "config.js";
          script.onload = function () {
            console.log("加载配置文件完成");
            document.querySelector("#code").innerHTML = JSON.stringify(
              window.configure
            );
          };
          document.documentElement.appendChild(script);
        });
      });
    </script>
  </body>
</html>

vue:(此时我已经引用了vue的外部依赖)

<script>
const vm = new Vue({
  el: "#app",
  data() {
    return {
      configure: {},
    };
  },
  mounted() {
    const that = this;
    this.$nextTick(() => {
      const $nav = document.querySelector(".sidebar-nav");
      Array.from($nav.children).forEach((element, index) => {
        element.addEventListener("click", function () {
          const scripts = document.querySelectorAll("script");
          if (scripts.length > 2) {
            console.log(scripts);
            let script = Array.from(scripts).find((script) => {
              if (script.src && script.src.includes("config")) {
                return script;
              }
            });
            console.log(script);
            document.documentElement.removeChild(script);
          }
          const script = document.createElement("script");
          script.src = index !== 0 ? `config_${index}.js` : "config.js";
          script.onload = function () {
            console.log("加载配置文件完成");
            that.configure = configure;
            console.log("vue instance", that, that.configure);
            that.$el.innerHTML = JSON.stringify(that.configure);
          };
          document.documentElement.appendChild(script);
        });
      });
    });
  },
});
</script>

需要注意的是 script.src 后面的文件名字，也就是路径，需要自己对应好。

三、html使用 Ajax 获取本地 Json 文件数据

首先这是我创建的本地的json数据：
在这里插入图片描述
其数据格式为：

{
    "datas": [
        {
            "dialogueId": "世人千万再难遇我"
        },
        {
            "dialogueId": "去你妈的。"
        }
    ]
}

在 html 中我也引用了vue，代码如下：
这里直接调用 init 方法即可

init() {
  $.ajax({
    url: "/jsonData/one.json",
    type: "GET",
    dataType: "json",
  }).then((response) => {
    console.log('response', response.datas);
  })
}