<!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>
  <script>
    function jsonp({
      url,
      params,
      cb
    }) {
      // 处理参数拼接
      function handlerParams(query) {
        return Object.keys(query).reduce((result, k, i) => (result = result + (i < 1 ? '' : `&`) + `${k}=${query[k]}`, result), '?')
      }
      return new Promise((resolve, reject) => {
        // 1. 首先创建 script 标签
        const script = document.createElement('script')
        // 2. 创建一个挂载到 window 上的函数，方便访问，在函数里将数据抛出去，然后降创建的 script 标签删除掉
        window[cb] = function(data) {
          resolve(data);
          document.body.removeChild(script)
        }
        // 3. 将回调函数名拼接到最后
        params = {
          ...params,
          cb
        }
        // 4. 处理参数后拼接url
        script.src = url + handlerParams(params)
        
        // 5. 将 script 标签添加到 body 中
        document.body.appendChild(script)
      })
    }
    jsonp({
      url: 'https://www.baidu.com/sugrec',
      params: {
        wd: 'aab',
        prod: 'pc'
      },
      cb: 'cb'
    }).then((data) => {
      const div = document.createElement('div')
      div.innerHTML = JSON.stringify(data)
      document.body.appendChild(div)
    })
  </script>
</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.