Node.js基础知识-3

六、自定义上传包（npm包）

• 注意： 记住要发送邮箱激活
• 注意： 切换你的npm源 nrm
• 注意： 你的包的名称不要和别人的重复
• 步骤：
  1. 登录npm账号
     • npm adduser
  2. 上传
     • npm publish

七、node后端路由基本原理

后端路由其实就是一个web服务器

http://localhost:5000/shopcar

路由

• 路： url路径
• 很久以前： 多页面 index.html
• a标签 herf = “./detail.html”
• a标签 herf = “./shopcar.html”
• 现在流行的： 单页面 index.html
• 我们这个时候，会将detail/shopcar做成模板 [ ejs pug(jade) 【 Node.js专用】 art-template[ 后端使用 ] ]，替换index.html里面的内容

  const http = require( 'http' )
  const host = 'localhost'
  const fs = require( 'fs' )
  const port = 5000

  http
    .createServer( ( req,res ) => {
      res.writeHead( 200,{
        'Content-type': 'text/html;charset=utf8'
      })
      switch ( req.url ) {
        case '/home':
          res.write('home')
          res.end()
    	break;
    case '/shopcar':
      fs.readFile( './static/shopcar.html', 'utf8',( error,docs ) => {
        res.write( docs )
        res.end()
      })
      break;
    case '/1.jpg':
      fs.readFile( './static/1.jpg',( error,docs ) => {
        // 图片是以二进制传输的
        res.write( docs, 'binary')
        res.end()
      })
      break;
    case '/index.js':
      fs.readFile( './static/js/index.js',( error,docs ) => {
        // 图片是以二进制传输的
        res.write( docs )
        res.end()
      })
      break;
    default:
      break;
  }
})
.listen( port,host,() => {
  console.log( `服务器运行在：http://${ host }:${ port }` )
})

八、npm脚本 npm scripts

概念

npm脚本指的是package.json中的scripts字段

认识package.json

• package.json 是记录项目依赖包信息和npm脚本命令的一个配置文件
• 项目依赖包信息：
• dependencies 生产环境的依赖包
• devDependencies 开发环境使用的依赖包
• 脚本命令：

{
  "name": "3-npmscripts",//文件名
  "version": "1.0.0",//版本
  "description": "",//项目的描述
  "main": "index.js",//入口文件
  "scripts": {//脚本
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node index.js",
    "app": "node app.js"
  },
  "keywords": [],//关键字
  "author": "",//作者
  "license": "ISC",//认证方式
  "dependencies": {//生产环境
    "jquery": "^3.4.1"
  },
  "devDependencies": {//开发环境
    "request": "^2.88.0"
  }
}

九、前端异步流程工具

为什么要进行异步操作？

• javascript是单线程，依次执行一个任务，要想让任务能够顺利进行，我们需要排队
• 异步就是将任务放入异步队列，在主线程执行结束之后再去执行

前端异步的操作方式

​ - 传统方式

​ - 回调函数

​ - 事件

​ - 前端异步流程工具 【 封装出来函数、库 】

​ - es6 Promise

​ - es6 Generator函数

​ - es6 - es8 async 函数

​ - Node中的异步处理工具： nextTick setImmediate

​ - 第三方类库： async.js

参考资料

Promise

https://blog.youkuaiyun.com/MrJavaweb/article/details/79475949

• promise有两个重要的方法

• Promise.all([promise实例1，promise实例2])

  • all中，一次执行任务，即使有延时任务，也必须等待延时任务结束，后续任务才能进行

const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('任务一');
    },2000);
    
}).then(data=>{
    console.log(data);
})
.catch(error=>{
    if(error){
        throw error;
    }
});
const p2 = new Promise((resolve,reject)=>{
    resolve('任务二');
}).then(data=>{
    console.log(data);
}).catch(error=>{
    if(error){
        throw error;
    }
});
Promise.all([p1,p2])
console.log('主线程');
输出：主线程、任务一、任务二

Promise .race([promise实例1，promise实例2])

• race指的是 任务快 的先进行，其他延时任务后续进行

const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('任务一');
    },2000);
    
}).then(data=>{
    console.log(data);
})
.catch(error=>{
    if(error){
        throw error;
    }
});
const p2 = new Promise((resolve,reject)=>{
    resolve('任务二');
}).then(data=>{
    console.log(data);
}).catch(error=>{
    if(error){
        throw error;
    }
});
Promise.race([p1,p2]);
console.log('主线程');
输出：主线程、任务二、任务一

Generator

​ https://www.cnblogs.com/imwtr/p/5913294.html

• generator生成器函数
  1. function 关键字后面跟一个*来定义一个generator函数
  2. 使用yield关键字来定义任务

function* p1 () {
  // yield 任务
  yield '任务一'
  yield '任务二'
  yield '任务三'
  yield '任务四'
  yield '任务五'
  return '任务六'
}

const task = p1() // 迭代器Iterator对象

console.log( task.next() ) // 通过next方法来遍历执行任务
console.log( task.next() ) // 通过next方法来遍历执行任务
console.log( task.next() ) // 通过next方法来遍历执行任务
console.log( task.next() ) // 通过next方法来遍历执行任务
console.log( task.next() ) // 通过next方法来遍历执行任务
console.log( task.next() ) // 通过next方法来遍历执行任务

// { value: '任务六', done: true } 

/* 
  value 表示任务执行的结果
  done  表示总任务执行状态 ，若为false 则说明任务未执行完，为true,则执行完
*/

Async-await

​ - 里层请求数据结果返回到外层使用

​ - Async函数式generator函数 + spawn 自动执行器函数的 封装

async function p1(){
    const reslut = await '任务一';
    return reslut;
}
async function p2(){
    const reslut = await '任务二';
    return reslut;
}
async function p3(){
    const reslut = await '任务三';
    return reslut;
}
console.log(p1().then(res=>{
    console.log(res);
}));
console.log(p2().then(res=>{
    console.log(res);
}));
console.log(p3().then(res=>{
    console.log(res);
}));
console.log('主线程')//主线程、任务一、任务二、任务三

//定义一个模块
const request = require( 'request' )

const status = {
  init () {
    return new Promise(( resolve,reject ) => {
      request( 'https://m.lagou.com/listmore.json', ( a,b,c ) => {
        resolve( c )
      })
    })

  }
}


module.exports = {
  init: status.init
}

/* const p1 = () => {
  const result = init().then( res => console.log( res ))
  return result 
}

p1() */



// --------------- 以上是小程序数据请求封装 ----------------


const p1 = async () => {
  const result = await init()
  console.log( result )
}

console.log( p1() )


// --------------------- vue angular  react -------------

Node.js 中的nextTick()和setimmediate()

​ https://www.cnblogs.com/5ishare/p/5268273.html

• Node.js中的异步流程工具
• javascript全局变量是window对象
• Node.js全局变量是什么？ global

process.nextTick( () => {
  console.log('A')
})

setImmediate(() => {
  console.log('C')
})

process.nextTick( () => {
  console.log('B')
})


console.log( '主线程任务' )
//主线程任务、A、B、C
//nextTick 比 setImmediate快

async库

​ https://caolan.github.io/async/

• 多任务执行，引用async库

const { series,parallel } = require('async') 


// series  表示 串行

// series([任务一,任务二],callback)
// 串行： 表示两个任务在一个任务线上，任意一个任务崩溃，其余任务全部无法执行


series([
  function ( callback ) {
    callback( null, '任务一')
  },
  function ( callback ) {
    setTimeout(() => {
      callback( null, '任务二')
    },2000)
  }
],function (error,result ) {
  console.log('任务六')
  console.log( result )
})
//任务三     [ '任务一', '任务二' ]

// parallel 并行
parallel([
  function ( callback ) {
    callback( null, '任务三')
  },
  function ( callback ) {
    setTimeout(() => {
      callback( null, '任务四')
    },2000)
  }
],function (error,result ) {
  console.log('任务五')
  console.log( result )
})


console.log('主线程')
//任务三     [ '任务一', '任务二' ]
//任务五     [ '任务三', '任务四' ]

参考文档

• Event-loop

  http://www.ruanyifeng.com/blog/2014/10/event-loop.html?bsh_bid=983729729

史上最易读懂的 Promise/A+ 完全实现

https://zhuanlan.zhihu.com/p/21834559