导航  导航
每日一言

能被js重写的终将会被js重写。

js 标签下的全部文章(2)

对于nodejs与浏览器的事件循环的个人理解

平时开发过程中,对于事件,我们基本只需要知道同步和异步的区别就差不多了,但是如果业务逻辑比较复杂时,不理解事件循环机制的话,很容易掉进坑里。无奈网上的一些文章文字太多,大多堆砌了太多官方概念,对于我这种看文字就头晕的人,很容易被劝退。但实在没办法,只能多看几篇文章,硬着头皮去理解,然后用自己的语言来记录一下。1、js的任务分为宏任务和微任务宏任务:setTimeout, setInterval, setImmediate, I/O, UI rendering微任务:process.nextTick, Promise等2、nodejs事件循环执行同步任务--->遇到异步任务,把异步任务放进任务队列--->执行宏任务(执行之前检测任务队列里有没有微任务,有则先执行微任务),如此循环。3、浏览器事件循环与nodejs的事件循环不同的是,如果宏任务里面包含微任务,则把里面的所有微任务放进队列,然后执行完宏任务里的所有微任务。下面举一个烂大街的例子:'use strict'; console.log(1); setTimeout(() => { console.log(2) new Promise((resolve) => { console.log(6); resolve(7); }).then((num) => { console.log(num); }) }); setTimeout(() => { console.log(3); new Promise((resolve) => { console.log(9); resolve(10); }).then((num) => { console.log(num); }) setTimeout(()=>{ console.log(8); }) }) new Promise((resolve) => { console.log(4); resolve(5) }).then((num) => { console.log(num); new Promise((resolve)=>{ console.log(11); resolve(12); }).then((num)=>{ console.log(num); }) }) 以上代码在nodejs下与浏览器下的执行结果分别是:nodejs:1、4、5、11、12、2、6、3、9、1、10、8浏览器:1、4、5、11、12、2、6、7、3、9、10、8可以明显的看出,浏览器在执行setTimeout时,直接执行了里面的promise。需要注意的是:promise里的代码属于同步代码,then里面的才是异步代码。以上结论纯属个人理解,如有错误,请指正。

js中间件的实现,简单 容易理解

中间件是一张设计模式,所谓中间件,简单的理解就好比工厂的流水线,每一个流程需要用到的机器都是一个中间件,对产品进行加工包装。我们在使用vue、react等前端框架或者nodejs的koa、express等框架的时候,使用中间件通常是下面这种方式:app.use(function(ctx,next){ ctx.title = "hello" next() }) 那么我们如何使用js编码,能够实现上面的用法呢?接下来,咱们就动手实现一下:const app = { fns:[], use:function(fn){ this.fns.push(fn) }, run:function(ctx,callback){ let i = 0 const next = () => { i++ } this.fns.map((fn,index) => { if(i == index){ fn(ctx,next) } }) i == this.fns.length && callback && callback(ctx) } } app.use(function(ctx,next){ ctx.title = "hello" next() }) app.run({},function(ctx){ console.log(ctx) // 输出{ title: 'hello' } })