异步流程工具

总结

nextTick()的回调函数执行的优先级要高于setImmediate();

process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者.

​

​ - idle观察者，也就是事件轮询最先进行的任务

​ - I/O观察者， 也就是事件轮询中的任务（任务中的回调函数）

​ - check观察者 事件轮询中的任务的结束

​ 在具体实现上,process.nextTick()的回调函数保存在一个数组中,

​ setImmediate()的结果则是保存在链表中.

​ 在行为上,process.nextTick()在每轮循环中会将数组中的回调函数全部执行完.

​ 而setImmediate()在每轮循环中执行链表中的一个回调函数.

使用格式

process.nextTick( callback )
1. setImmediate( callback )

执行顺序

nextTick> setImmediate

1. nextTick 中 的nextTick > 外层的setImmediate

2. 外层setImmediate > 内层的setImmediate

   process.nextTick( function () {
   console.log('A')
   process.nextTick( function(){
   console.log('D')
   })
   setImmediate( function () {
   console.log('E')
   })
   })
   
   setImmediate( function () {
   console.log( 'B' )
   process.nextTick( function(){
   console.log('F')
   })
   setImmediate( function () {
   console.log('G')
   })
   })
   
   process.nextTick( function () {
   console.log( 'C')
   })
   
   console.log( '主线程任务' )

第三方的async.js

串行 ： series

• 并行 ： parallel

• 串行格式：

  async.series({ 任务名称： 任务值 },function( err, data ) {})

• 并行格式：

  async.parallel({ 任务名称： 任务值 },function( err, data ) {})

var async = require( 'async' )
//串行
async.series({
one: function( callback ) {
setTimeout ( function () {
callback( null, '任务1' )
},2000)
},
two: function ( callback ) {
setTimeout ( function () {
callback( null, '任务2')
},1000)
}
},function ( err , data ) {
console.log( data )
})

//并行
async.parallel({
one: function ( callback ) {
setTimeout ( function () {
callback( null , '任务1')
},2000)
},
two: function ( callback ) {
setTimeout ( function () {
callback( null , '任务2')
},1000)
}
},function(error,data){
console.log( data )

console.log( '任务3' )
})

前端原生js提供的数据请求有两种

1. ajax
2. fetch

gulp 4.x

• 多任务执行
  串行
  1. 并行

前端渲染 vs 后端渲染

1. 前端渲染是通过ajax请求数据，然后通过js语法将数据展示到页面中，称之为前端渲染

2. 后端渲染是通过后端语言 + 后端模板( ejs ) 将 页面整个发送给前端

   后端模板

   ejs
3. pug( jade )
4. art-template

现在流行的： 前端渲染

问题： 当前后端同时进行项目开发是， 后端数据接口没有写好，但是前端却需要这个接口，这个时候怎么办？
分析： 需要一段数据
解决： 模拟假数据（ mock数据 json-server / mock.js ）

• 以上这种形式叫做 ： 前后端架构分离

• 很久以前，没有前端岗位的， 所有的网页都需要后端完成， 那个时候的情况我们称之为： 前后端耦合

Node.js做项目的时候 ，就有两种选择了

前后端分离 ：后端提供接口，前端渲染
1. 前后端耦合： 后端渲染

直接借助一个工具来搭建一个Node.js项目，这个工具叫做 express-generator ,这个工具帮助我们实现了express框架

创建express项目的流程

安装 express-generator


$ cnpm i express-generator -g

1. 创建express 项目
   

   $ express -e 项目名称

   -e是安装 ejs 模板

2. 分析目录

   package.json 整个项目的依赖配置文件
   • app.js 是整个项目的入口文件
   • views/xx.ejs 是整个项目的模板（模板内容是什么，将来页面呈现就是什么）
   • routes 是整个项目的路由配置文件
   • public 静态资源文件（img css js )
   • node_modules 整个项目的依赖包
   • bin / www 整个项目的服务器配置文件

3. 启动项目 package.json 中 npm 脚本
   

   $ npm run start

4. 研究项目代码

   入口文件