通过「百度搜索」来学习Jsonp,Promise,bind,apply,debounce

最新推荐文章于 2024-05-29 10:18:45 发布
最新推荐文章于 2024-05-29 10:18:45 发布
阅读量158 收藏
点赞数
文章标签： 前端 javascript 面试 ViewUI
原文链接：https://juejin.im/post/5c9f43746fb9a05e3b24aa2d
版权

前言

最近在温习基础知识，如：jsonp,promise,bind,apply,debounce 等。那通过什么来测试练习了，就想到了「百度搜索」功能满足上面的测试。

Jsonp

jsonp 主要是用来解决跨域问题的。应用非常广泛，关于更多的解决跨域方案请看前端面试总结之：js跨域问题

那jsonp的原理是什么了？ 比如我们定义一个函数foo，然后调用它

// 定义
function foo() {
    console.log('foo')
}

// 调用
foo()
复制代码

那我们将调用foo()的这段代码放在一个新建的js文件，比如a.js然后通过script标签引入a.js了

// a.js
foo()
复制代码
function foo() {
    console.log('foo')
}

<script src="./a.js"></srcipt>
复制代码

jsonp原理与之类似:
我们在本地定义好一个函数,如jsonp_1234565,然后将这个函数名通过特定标识符如cb=jsonp_1234565通过script的src属性去请求一个js资源（一个get请求），即动态创建script标签。如：<script src="https://www.baidu.com?a=1&b=2&cb=jsonp_1234565"></script>后台通过cb这个特定标识符得到前端定义的函数名为jsonp_1234565然后将前端真正要的的数据放在jsonp_1234565的参数里，并将这个函数返回给前端如：jsonp_1234565({status: 0, data: {...}}) 代码如下

function jsonp({url = '', data = {}, cb='cb'} = {}) {
    if (!url) return
    // myPromise 请看下面实现,可以用成功回调的，因为学习特意用了Promise
    return myPromise((resolve, reject) => {
        const cbFn = `jsonp_${Date.now()}` // 定义函数名
        data[cb] = cbFn // 将函数名放在`cb`标识符里
        
        const oHead = document.querySelector('head')
        const oScript = document.create('script')
        
        const src = `${url}?${data2Url(data)}`
        oScript.src = src
        oHead.appendChild(oScript) // 将script标签插入head,以发送get请求
        
        // 定义函数，后台返回就调用
        window[cbFn] = function(res) {
            res ? resolve(res) : reject('error')
            // 如果不用Promise用回调的话只需在参数中加个success参数然后调用即可
            // success && success(res)
            
            oHead.removeChild(oScript) // 请求回来之后就没用了。如果不删除，每次请求之后就会创建一个script标签，导致页面很多的script标签，所以将它删除。用完了就扔，感觉有点过河拆桥的意思
            window[cbFn] = null
        }
    })
}

function data2Url(data) {
    return Object.keys(data).reduce((acc, cur) => {
        acc.push(`${cur}=${data[cur]}`)
        return acc
    }, []).join('&')
}

// 可以先把myPromise改成原生的Promise测试百度搜索的接口
jsonp({
    url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
    data: {
        wd: 'a'
    },
    cb: 'cb'
}).then(res => {
    console.log(res)
})
复制代码

测试建议用 EGOIST开源的codepan.net/ 类似于JSBin/CodePen/JSFiddle

Promise

简易版的Promise实现，没有遵循A+规范，查看原文JavaScript Promises - Understand JavaScript Promises by Building a Simple Promise Example

new Promise((resolve, reject) => {
    // 一系列操作 伪代码
    if (true) {
       resolve(res) 
    } else {
        reject(err)
    }
})
.then(fn1)
.then(fn2)
...
.catch(handleError)

复制代码

大致意思就是Promise这个类接受一个函数作为参数，这个参数函数又接受两个函数作为参数
new Promise 这个实例有then和catch这两个方法，then和catch又都接受函数作为参数，并且可以链式调用

核心思路就是定义个数组promiseChianFn用来装then的回调函数，then一次，就往promiseChianFn push一条then的回调函数，当在调用resolve函数的时候，就循环执行promiseChianFn的函数

class myPromise {
    constructor(excuteFn) {
        this.promiseChianFn = []
        this.handleError = () => {}
        // mybind 请看下面实现
        this._resolve = this._resolve.mybind(this)
        this._reject = this._reject.mybind(this)
        // 立即执行
        excuteFn(this._resolve, this._reject)
    }
    
    then(fn) {
        this.promiseChianFn.push(fn)
        
        return this // 原生Promise返回的是一个新的Promise
    }
    
    catch(handleError) {
        this.handleError = handleError
        
        return this
    }
    
    _resolve(val) {
        try {
            let storeVal = val
            // 循环执行，并把第一个函数执行的返回值赋值给storeVal 共下个函数接收 如：
           /**
            * .then(res => {
            *    renturn 1
            *  })
            * .then(res => {
            *    console.log(res) // 1
            * })
            *
            */
            this.promiseChianFn.forEach(fn => {
                storeVal = fn(storeVal)
            })
        } catch(err) {
            this.promiseChianFn = []
            this._reject(err)
        }
    }
    
    _reject(err) {
        this.handleError(err)
    }
    
}

// 现在可以用myPromise 测试上面的jsonp了
复制代码

apply

call和apply都是用来改变函数的上下文里面的this的,即改变this指向。
注意：上下文包含 VO（variable Object--变量对象）,作用域链和this这三个东西,具体请看js引擎的执行过程（一）

// 将 foo里面的上下文指向 ctx
foo.call(ctx, 1,2,3)
foo.apply(ctx, [1,2,3])
复制代码

call和apply的原理就是方法借用
在知乎上面看到一篇文章的比喻 猫吃鱼，狗吃肉
那猫要吃肉，就借用狗吃肉的方法 即 狗.吃肉.call(猫)
那狗要吃鱼，就借用猫吃鱼的方法 即 猫.吃鱼.call(狗)

// fn.call(ctx) 既然是方法借用，那就给ctx添加一个该方法就可以了
Function.prototype.myapply = function(ctx, args = []) {
    const hash = Date.now() // 用时间戳是防止 ctx 上面的属性冲突
    ctx[hash] = this // 给 ctx 添加一个方法，this 就是 fn
    
    const res = ctx[hash](...args)
    delete ctx[hash] // 过河拆桥
    return res
}

// call 的话，只需将 args = [] 改为 ...args 即可

// 测试
const a = {
    name: 'a',
    getName() {
        console.log(this.name)
    }
}

const b = {
    name: 'b'
}

a.getName() // a
a.getName.myapply(b) // b
复制代码

bind

bind 返回一个新函数，并永久改变 this 指向，返回的新函数无论之后再怎么call,apply,bind都不会改变 this 指向了,并有偏函数的效果 如果要考虑 New的情况请参照MDN

// fn2 = fn.bind(ctx)
Function.prototype.mybind = function(ctx, ...args1) {
    const _this = this
    return function(...args2) {
        // 永远指向 ctx
        return _this.myapply(ctx, args1.concat(args2))
    }
}
// 测试
const fn = a.getName.mybind(b)
fn() // b
const fn2 = fn.bind(a)
fn2() // b
复制代码

debounce

「百度搜索」并没有加入 debounce ,我们可以给他加个 debounce 看下效果
debounce(防抖) 和 throttle(节流)主要是用来做性能优化
debounce 就像压弹簧，只要手不松开，弹簧就不会弹起来，常见应用场景就是input输入框，我们在停止输入后才去做相关操作
throttle 就像拧紧水龙头，让水龙头隔一秒钟滴一滴水，常见应用场景为页面滚动优化

function debounce(cb, delay = 300) {
    let timer
    return function(...args) {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            cb && cb.apply(this, args)
        }, delay)
    }
}
复制代码

接下来我们模拟「百度搜索」加上debounce 想传 GIF 传不了， 请上 codepan.net/ 测试

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="text">
</body>
</html>
复制代码
function jsonp({url = '', data = {}, cb = 'cb'} = {}) {
  
    return new myPromise((resolve, reject) => {
        if (!url) return
        const cbFn = `jsonp_${Date.now()}`
        data[cb] = cbFn
        
        const oHead = document.querySelector('head') 
        const oScript = document.createElement('script')
        
        const src = `${url}?${data2Url(data)}`
        oScript.src = src
        
        oHead.appendChild(oScript)
        
        window[cbFn] = function(res) {
            resolve(res)
            oHead.removeChild(oScript)
            window[cbFn] = null
        }
    })
}

function data2Url(data) {
    return Object.keys(data).reduce((acc, cur) => {
        acc.push(`${cur}=${data[cur]}`)
        return acc
    }, []).join('&')
}

class myPromise {
    constructor(excuteFn) {
        this.promiseChainFn = []
        this.handleError = () => {}
        this._resolve = this._resolve.myBind(this)
        this._reject = this._reject.myBind(this)
        excuteFn(this._resolve, this._reject)
    }
  
    then(cb) {
        this.promiseChainFn.push(cb)
        return this
    }
  
    catch(handleError) {
        this.handleError = handleError
        return this
    }
  
    _resolve(res) {
        try {
            let storeVal = res
            this.promiseChainFn.forEach(fn => {
                storeVal = fn(storeVal)
            })
        } catch(e) {
            this.promiseChainFn = []
            this._reject(e)
        }
    }
  
    _reject(err) {
        return this.handleError(err)
    }
}

Function.prototype.myApply = function(ctx, args = []) {
  const hash = Date.now()
  ctx[hash] = this
  
  const res = ctx[hash](...args)
  delete ctx[hash]
  return res
}

Function.prototype.myBind = function(ctx, ...args1) {
  const _this = this
  return function(...args2) {
    return _this.myApply(ctx, args1.concat(args2))
  }
}

function debounce(cb, delay = 300) {
  let timer
  return function(...args) {
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
      cb && cb.myApply(this, args)
    }, delay)
  }
}


const oInput = document.querySelector('input')

oInput.oninput = debounce(handleInput, 1000)

function handleInput(v) {
  jsonp({
    url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
    data: { wd: this.value},
    cb: 'cb'
  }).then(res => {
    console.log(res)
    return 1
  }).then(res => {
    console.log(res)
    return 2
  }).then(res => {
    console.log(res)
  }).catch(function a(err) {
    console.log(err)
  })
}
复制代码

转载于:https://juejin.im/post/5c9f43746fb9a05e3b24aa2d

weixin_34336526
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现promise、call、apply、bind
yy_huang的博客
10-12 513
实现promise、call、apply、bind 下面直接上代码，实现分析实现promise、call、apply、bind原理实现,如有问题欢迎指点。 // prmoise实现 const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' function MyPromise(fn) { const that = this that.state = PENDING that.v
rewrite:手写的Promise调用apply等，JavaScript版数据结构与算法
03-30
学习的笔记 添加学习数据结构时的示例代码 节点myPromiseTest.js运行查看结果 节点callAndApplyReWrite.js运行查看结果
详解防抖函数（debounce）和节流函数（throttle）
dksks130的博客
12-06 8865
详解防抖函数（debounce）和节流函数（throttle）
手写promise、call、apply、debounce、throttle 等
最新发布
zjq_1234的博客
05-29 459
手写常见方法实现
cb.apply is not a function
weixin_40779234的博客
08-17 6145
yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 且npm cb.apply is not a function问题
gitbook报错cb.apply不是一个function
weixin_46169275的博客
05-20 541
安装gitbook遇到的问题：已解决 TypeError: cb.apply is not a function at D:\SoftWare\nodejs\node_global\node_modules\gitbook-cli\node_modules\npm\node_modules\graceful-fs\polyfills.js:287:18 问题：看提示信息 Polyfills.js文件第287行有问题，cb.apply不是一个function，找到文件代码，看注释是为了解决老版本bug，
利用jsonp跨域调用百度js实现搜索框智能提示
11-25
【JSONP跨域调用与百度搜索框智能提示】 在Web开发中，由于浏览器的同源策略限制，JavaScript无法直接发起跨域请求。为了解决这个问题，JSONP（JSON with Padding）应运而生。JSONP是一种绕过同源策略的技术，通过...
百度搜索框智能提示案例jsonp
11-29
在本文中，我们将深入探讨一个基于JSONP的百度搜索框智能提示案例，它展示了如何利用JavaScript和jQuery实现类似百度搜索引擎的动态下拉建议功能。JSONP（JSON with Padding）是一种跨域数据交互协议，常用于解决...
jQuery使用jsonp实现百度搜索的示例代码
10-15
主要介绍了jQuery使用jsonp实现百度搜索，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
vue-resource:jsonp请求百度搜索的接口示例
10-16
在本文中，我们将深入探讨如何使用`vue-resource`库进行JSONP请求，特别是在与百度搜索接口集成的场景下。首先，让我们了解JSONP是什么以及它为何在跨域数据请求中至关重要。 **JSONP (JSON with Padding)** 是一种...
JS中Promise/A+规范的实现（直接上代码）
SCUhzs
09-16 484
文章目录前言代码测试其它版本的实现 前言 我是跟着b站视频敲的。 视频地址：《【全网首发:完结】Promises/A+规范与源码重写【面试必备】》 https://www.bilibili.com/video/BV1nV411S7Et 视频质量很好，一边带着读英文规范，一遍写代码，说逻辑，跟着视频实现了一个完整的，符合规范的Promise对象。 在视频代码的基础上，我补充了all、race、Promise.resolve、Promise.reject、finally等方法的实现。 建议跟着视频做一遍后
debounce-promise:创建 Promise 返回函数的去抖动版本
08-05
去抖动承诺 创建 Promise 返回函数的去抖动版本 安装 npm i -S debounce-promise 使用示例 var debounce = require ( 'debounce-promise' ) function expensiveOperation ( value ) { return Promise . resolve ( value ) } var saveCycles = debounce ( expensiveOperation , 100 ) ; [ 1 , 2 , 3 , 4 ] . forEach ( num => { return saveCycles ( 'call no #' + num ) . then ( value => { console . log ( value ) } ) } ) // Will only c
07前端基础--Promise用法
hbmern的博客
05-09 2806
一、Error对象简介： 1、Error常见的错误类型及处理方法： Error:所有错误的父类型 （1）ReferenceError：引用的变量不存在 （2）TypeError：数据类型错误 （3）RangeError：数据不在其允许的范围内 （4）SyntaxError：语法错误 2、错误的处理： （1）捕获错误：try...catch 把可能出现的错误，放在try语句中 例如以下的例子： try{ let b; console.log(b.xxx); }catch(E..
防抖和节流（附带promise版）
cc的博客
04-20 1522
promise 防抖和节流
解决 npm ERR! cb.apply is not a function 的常见问题与解决方法
pleaseprintf的博客
08-16 9162
在使用 npm 安装依赖包时，有时会遇到 npm ERR!cb.apply is not a function 错误。本文将详细介绍这个错误的原因，以及多种可能的解决方法。通过本文，你已经了解了如何解决 npm ERR!cb.apply is not a function 错误。这些方法可以帮助你排除安装依赖时遇到的问题，使你的项目能够顺利进行。希望本文对你在解决 npm 安装依赖错误时有所帮助。如果你有任何问题或疑问，欢迎留言讨论。
手动实现简单的Promise及其基础功能
MiMeng的博客
04-01 600
文章目录一、Promise期约函数基本使用二、手动实现Promise基础功能1 声明方式2 实现简单的resolve和reject 一、Promise期约函数基本使用 function Ran(){ return new Promise((resolve, reject) => { setTimeout(() => { let ranDomNum = Math.random(); // 模拟可能成功或者失败的异步任务 ranDomNum > 0.5 ? resol
debounce实现 js_javascript – 使用promises实现的Debounce功能
weixin_39821605的博客
12-22 243
我找到了一个更好的方法来实现承诺：function debounce(inner, ms = 0) {let timer = null;let resolves = [];return function (...args) {// Run the function after a certain amount of timeclearTimeout(timer);timer = setTimeou...
cb函数_如何在使用Gitbook时解决“ cb.apply不是函数”错误
cuk0051的博客
08-25 2431
cb函数I regularly use Gitbook, a little Node.js software used to generate an ebook from a set of markdown files. 我经常使用Gitbook ，这是一个小的Node.js软件，用于从一组markdown文件生成电子书。 I use it for my ebooks. Today I wa...
npm 报错cb.apply is not a function
weixin_46370867的博客
01-19 6392
npm 报错cb.apply is not a function的解决办法： 按照这个目录C:\Users(your username)\AppData\Roaming 可以Win + r 输入 %appdata% 步骤一： 找到npm cache文件夹并删除, 在cmd下运行 npm clean cache —force 步骤二： 找到npm文件夹并删除， 在cmd下运行： npm clean cache —force ...
使用JS实现百度搜索框及JSONP跨域请求
"这篇文档详细介绍了如何使用JavaScript实现一个类似百度搜索框的功能，涉及到的主要技术包括JSONP和AJAX请求，以及前端布局、DOM操作和性能优化策略。" 在JavaScript实现百度搜索框的过程中，主要涉及以下几个核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值