我是靠谱客的博主 淡然小松鼠,最近开发中收集的这篇文章主要介绍前端异步的一些概念如何上传自定义模块至npm?,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

文章目录

  • 如何上传自定义模块至npm?
    • Node.js后端路由基本原理
    • 认识package.json
    • 前端的异步流程
      • Promise函数
      • Generator生成器函数
      • async
      • Node.js中的异步流程工具

如何上传自定义模块至npm?

1.首先上npm注册一个属于自己的账户
2.注册完账户以后需要通过邮箱激活npm账户,否则无法正常上传
3.在终端里切换nrm源,切换成npm源,taobao源会上传出问题
4.上传的包名称不可以和别人上传的名称一致

上传步骤
1.终端登录npm账号
npm adduser 账号

2.上传
npm publish 上传包的路径

Node.js后端路由基本原理

路由:顾名思义 路指的是url路径,由:由来, 路径的由来

在以前的项目里的页面基本上都是多页面,页面之前切换是页面的跳转,跳转的间隙会有几秒的空白等待时间。

现在流行的是单页面的切换,点击切换不会切换页面,只是内容的切换

我们这个时候会将以前的页面内容做成一个一个的模板,切换的只是内容的模板

Node.js专用模板 [ ejs pug(jade) ]

后端专用模板 [ art-template ]

npm脚本 npm scripts

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

认识package.json

  • package.json 是记录项目依赖包信息和npm脚本命令的一个配置文件
    ** 项目依赖包信息;
    1.dependcies 生产环境的依赖包
    2.devDependcies 开发环境的依赖包

**脚本命令
在命令执行的脚本命令

& vs &&

举例
npm run dev & npm run app 全部执行完毕最后输出结果

npm run dev && npm run app 依次执行

前端的异步流程

1.为什么要进行异步操作?
● javascript是单线程,一次执行一个任务,要想任务能够顺利进行,我们需要排队。
● 异步就是将任务放入异步队列,在主线程执行任务结束之后再去执行
2.前端异步的操作方式
○ 传统方式
■ 回调函数
■ 事件
○ 前端异步流程工具【封装出来函数、库】
■ es6 Promise
■ es6 Generator 函数
■ es6 -es8 async函数
■ Node中异步的处理工具:nexTick SetImmadeiate
■ 第三方类库: asyc.js

Promise函数

Promise函数中有两个状态,开始到成功(resolve) 开始到失败(reject)

Promise函数中还有两个方法 all race

all是所有的promise实例都成功或者都失败才会执行,

race是任务赛跑,谁快就谁执行,不会任务堵塞

Generator生成器函数

  • function 关键字后面跟一个 * 来定义一个generator函数

** 使用 yield 关键字来定义任务
function* fn(){
yield ‘任务一’;
yield ‘任务二’;
yield ‘任务三’;
}
const task=fn() //迭代器 interator对象
console.log(task.next()) //任务一 //通过next方法来遍历执行任务
console.log(task.next()) //任务二
console.log(task.next()) //任务三
{ value:’ 任务 一’ ,done: false }
value:表示任务执行的结果
done:false表示任务执行状态未完成 true表示任务执行完成

async

通过async 和 await 来定义函数
async function fn(){
const result=await ‘任务一’
return result
}
调用 console.log(fn().then ( ( res)=>{
console.log(res)
} )

如何把在外层使用内层请求结果?

return new Promise((res,rej )=>{
request( ‘xxx’,(a,b,c)=>{
resolve©
})
})


  • const p1= ()=>{
    const result=init().then(res => console.log (res ) )
    }
    p1()
    这个是小程序数据请求封装

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

这个是 vue angular react 数据请求封装

Node.js中的异步流程工具

javascript全局变量是window Node.js中全局变量是global

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

nodejs中是事件驱动的,有一个循环线程一直从事件队列中取任务执行或者I/O的操作转给后台线程池来操作,把这个循环线程的每次执行的过程算是一次轮询.

setImmediate()的使用
即时计时器立即执行工作,它是在事件轮询之后执行,为了防止轮询阻塞,每次只会调用一个。

Process.nextTick()的使用
它和setImmediate()执行的顺序不一样,它是在事件轮询之前执行,为了防止I/O饥饿,所以有一个默认process.maxTickDepth=1000来限制事件队列的每次循环可执行的nextTick()事件的数目。

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

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

async.js 里的两个方法(第三方库)

series 表示串行

series([任务一,任务二 ], call back )

串行:表示两个任务在一个任务线上,任意一个任务崩溃,其余任务全部无法执行

parallel 表示并行

parallel ([任务一,任务二 ], call back )

并行:每个任务都在自己的任务线上,互不影响

最后

以上就是淡然小松鼠为你收集整理的前端异步的一些概念如何上传自定义模块至npm?的全部内容,希望文章能够帮你解决前端异步的一些概念如何上传自定义模块至npm?所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(68)

评论列表共有 0 条评论

立即
投稿
返回
顶部