关于javascript:JS语言特性下

调包

即援用其余我的项目或者文件。

之所以须要把这个模块独自拎进去，是因为，一个语言能不能成气候的其中的一个关键点在于是否模块化；一个我的项目是否造成一个可观的体量也离不开模块化，简略来说就是不同文件或我的项目间是否相互调用，es5和es6中都有着不同格调的援用形式，开发时要留神本人的开发环境以及语法格局

es5

有着AMD、CMD、CommonJS三种的援用形式，其中AMD（Asynchronous Module Definition），CMD（Common Module Definition），是为了解决前端同步援用的过高提早会产生的“假死”状态而诞生的异步援用形式。

就自己而言，前端开发已基本上全面应用es6格局语法，AMD、CMD格局的援用简直不必，此处不做具体解说，详情查看链接，只解说后端罕用的CommonJS，CommonJS的倒退历史在此

CommonJS，导出有着exports和module.exports两种形式，二者是齐全等效的，然而绝大部分时候，为和es6的export辨别开，只应用module.exports

调用过程

CommonJS的调用为同步调用，在调用时，执行调用文件中的全副可执行的局部；同步援用在后端能够疏忽传输的时延，然而前端同步+高提早意味着浏览器要卡着期待接管到这个文件能力持续进行，这便有了上文提到的异步加载形式AMD和CMD

//fileA.js 导出
console.log("haoye1")
function a(){
    console.log("haoye2")
}
a();
module.exports={a}

//b.js 引入
const fileA=require("fileA")
// 控制台输入：
// haoye1
// haoye2

根本用法

代码如下

//fileA.js 导出
function a(){
    console.log("haoye")
}
const b=()=>{
    console.log("haoyeB")
}
const c=0;
module.exports={//实质上是将须要导出的值包裹成json变量赋予modules.exports
    a:a,
    b,//json格局若变量key和value的名字一样能够间接缩写
    c
}
//b.js 引入
const fileA=require("fileA")
fileA.a();//haoye
fileA.b();//haoyeB
//或者
const {a,b}=require("fileA")
a();//haoye
b();//haoyeB

值调用

援用值时，是以变量的模式引入的（let，const，var），所以援用后的变量是否可批改以变量的定义为准，个别倡议以const格局援用；

在调用个别类型的参数（number，boolean等）为深拷贝，模块内的变量与援用后的变量无关联；然而在调用object类型参数时为浅拷贝，模块内变量与援用后的值是同步的；

// b.js
let count = 1//number类
let obj = {//object类
    count: 1
}
let plusCount = () => {
    count++
}
let plusCount2 = () => {
    obj.count++
}
setTimeout(() => {
    console.log(count)//（1s后）2
    console.log(obj.count)//（1s后）2
}, 1000)
module.exports = {
    obj,
    count,
    plusCount
}

// a.js
let mod = require('./b.js')
console.log(mod.count)//1
console.log(mod.obj.count)//1
mod.plusCount()
mod.plusCount2()
console.log(mod.count)//1
console.log(mod.obj.count)//2
setTimeout(() => {
    mod.count = 3
    mod.obj.count = 3
    console.log(mod.count)//（2s后）3
    console.log(mod.obj.count)//（2s后）3
}, 2000)

es6

es6的导出为export

调用过程

同CommonJS，为同步调用，调用时先执行调用文件中的全副可执行的局部

根本用法

有多行导出、对立导出、默认导出三种格局

// fileA.js
// 多行导出
export function a() {
  console.log("haoye")
}
export const b = () => {
  console.log("haoyeB")
}
// fileB.js
// 对立导出
function a() {
  console.log("haoye")
}
const b = () => {
  console.log("haoyeB")
}
export {
    a,
    b
}
// fileC.js
// 默认导出
function a() {
  console.log("haoye")
}
const b = () => {
  console.log("haoyeB")
}
export default {//此种导出形式只能全副调用，不可只调用其中某个函数
    a,
    b
}
// fileD.js 导入演示
import { a, b } from 'fileA'//或fileB
a();//haoye
b();//haoyeB

// fileE.js 导入演示
import D from 'fileD'
import { a, b } from 'fileD'// 报错
D.a();//haoye
D.b();//haoyeB

值调用

默认所有的值以const变量模式引入（即不可批改），但同样可将object类型变量内的数据加以批改，并在原模块内仍然产生影响

// fileA.js
export let counter = {
  count: 1
}
// fileB.js
import { counter } from 'fileA'
counter.count++;
console.log(counter.count)//2
counter = {}// 报错: "counter" is read-only

异步

回调

为保障某一函数的失常执行，须要在其执行结束后对其后果进行判断，而判断这个过程所执行的函数即为回调函数

例如一个简略的a+b的函数，通常状况下，咱们可能会这么写：

function onSuccess(result){
    console.log("haoye ", result)
}
function onFailed(error){
    console.log("huaiye ", error)
}
function aPlusB(a,b){
    const c=a+b
    if(c===(Number(a)+Number(b))){//避免a或b为其余类型如字符串，在此验证
        onSuccess(c)
    }else{
        onFailed(c)
    }
}
const a=1,b=2;
aPlusB(a, b);// haoye 3

然而当我想把这个性能独立成模块，随时随地都能够解决其后果时，咱们可能会这么写：

const a=1,b=2;
function aPlusB(a,b){
    const c=a+b
    return c
}
const c=aPlusB(a, b);
if(c===(Number(a)+Number(b))){
    onSuccess(c)
}else{
    onFailed(c)
}

可随便解决其后果的代价便是，必须要将后果返回，且判断语句必须写在里面；但兴许能够这样写

function aPlusB(a,b){
    const c=a+b
    if(c===(Number(a)+Number(b))){//避免a或b为其余类型如字符串，在此验证
        return {c,succes:true}
    }else{
        return {c,succes:false}
    }
}
const a=1,b=2;
const res=aPlusB(a, b);
if(res.succes){
    onSuccess(res.c)
}else{
    onFailed(res.c)
}

肉眼可见的升高了程序的可读性，并且同样须要期待函数执行完，否则无奈执行接下来可能有的b+c，c+d等函数，若接下来要执行的函数基本用不到上一步所计算出的后果，那么期待便是齐全无意义的

js中的回调

不过好在js能够以参数的模式申明一个函数，这样就不须要期待回调也执行完，才执行下一步函数，于是有如下写法

function aPlusB(a,b,onSuccess,onFailed){
    const c=a+b
    if(c===(Number(a)+Number(b))){//避免a或b为其余类型如字符串，在此验证
        onSuccess(c)
    }else{
        onFailed(c)
    }
}
function onSuccess(result){
    console.log("haoye ", result)
}
function onFailed(error){
    console.log("huaiye ", error)
}
const a=1,b=2;
aPlusB(a,b,onSuccess,onFailed)

能够简化为es6的箭头函数模式

aPlusB(a,b,(result)=>{
    console.log("haoye ", result)
},(error)=>{
    console.log("huaiye ", error)
})

这样以来，就不影响接下来的b+c，c+d了，并且回调函数的定义也更加的灵便；

但当初又有了另一个问题，如果我接下来的b+c须要用到这一步的后果，比方我需要求a+b+c，那么我可能要这么写

const c=3
aPlusB(a,b,(result)=>{
    aPlusB(result,c,(result2)=>{
        console.log("haoye ", result2)
    },(error)=>{
        console.log("huaiye ", error)
    })
},(error)=>{
    console.log("huaiye ", error)
})

这是只须要+c的状况，然而如果我需要求a+b+c+d+e+f…呢？粗略展现下代码

const c=3,d=4,e=5
aPlusB(a,b,(res)=>{
    aPlusB(res,c,(res2)=>{
       aPlusB(res2,d,(res3)=>{
           aPlusB(res4,e,(res4)=>{
               aPlusB(res4,f,res5=>{
                   console.log("haoye ", res5)
               },err=>{
                   console.log("huaiye ", err)
               })
           },err=>{
               console.log("huaiye ", err)
           })
       },err=>{
           console.log("huaiye ", err)
       })
    },(err)=>{
        console.log("huaiye ", err)
    })
},(error)=>{
    console.log("huaiye ", err)
})

这就陷入了一种”回调天堂“，最直观的来讲，便是升高了代码的可读性和可维护性，使代码变得臃肿、低效，例如err，其实只有其中任何一步丢出了谬误，那么接下来全副的谬误捕捉函数都是无意义的，然而为了程序的稳定性，这些函数都必须要被定义，于是便有了es6中的——

Promise

中文翻译过去便是承诺，意为在将来某一个工夫点承诺返回数据给你。promise的具体介绍在此，此处仅对promise的应用做简略形容

Promise有三种状态：pending/reslove/reject 。pending就是未决，resolve能够了解为胜利，reject能够了解为回绝。
Promise罕用的几种办法 then 示意异步胜利执行后的数据状态变为reslove， catch 示意异步失败后执行的数据状态变为reject ，all示意把多个没有关系的Promise封装成一个Promise对象应用then返回一个数组数据，finally示意无论胜利还是失败，全副执行结束。

还是下面的a+b函数，这次应用promise的形式来实现

function aPlusB(a,b){
    return new Promise((onSuccess, onFailed)=>{
        const c=a+b
        if(c===(Number(a)+Number(b))){//避免a或b为其余类型如字符串，在此验证
            onSuccess(c)
        }else{
            onFailed(c)
        }
    })
}
const a=1,b=2;
aPlusB(a,b).then(res=>{//胜利后执行的函数
    console.log("haoye ", res)
},err1=>{//失败后执行的函数，可不定义，和catch至多有一个须要定义，否则抛出的谬误无奈捕捉
    console.log("huaiye ", err)
}).catch(err2=>{//等效于上方的err1=>{}，然而此处还能够抓取其余为能预测到的问题
    console.log("huaiye ", err2)
})

那么这种模式会如何应答a+b+c+d+e+f…呢？

const a=1,b=2,c=3,d=4,e=5
aPlusB(a,b).then(res=>{//胜利后执行的函数
   return aPlusB(res, b)//若return为个别变量，则下一个then的res为扭转量；若return为promise变量，则下一个res为该promise最终return的变量
}).then(res=>{
    return aPlusB(res, c)
}).then(res=>{
    return aPlusB(res, d)
}).then(res=>{
    return aPlusB(res, e)
}).then(res=>{
    return aPlusB(res, f)
}).then(res=>{
    console.log("haoye ", res)
}).catch(err=>{
    console.log("huaiye ", err)
})

劣势很显著，但问题也存在，当抛出谬误时，咱们可能不晓得谬误具体在哪一步，然而能够通过在可能出错的一步上增加onRejected回调

然而 return new Promise((r,e)=>{})这种函数定义形式可能不是那么的优雅，于是在行将推出的es7规范中（此性能目前的es6中已能够应用），新增async，await这两个语法糖，能够使返回简单的promise类以一般函数的模式编写，以上函数可简写为

async function aPlusB(a,b){
    const c=a+b
    if(c===(Number(a)+Number(b))){
        return c// 正确则返回后果
    }else{
        throw new Error(c)// 谬误则抛出谬误
    }
}

若心愿此函数以同步的形式运行则须要await关键词

const c=await aPlusB(a, b)

然而await只能在异步函数中应用，只能对异步函数应用

单线程

js有着高效的运行速度，但其却是一种单线程语言，js的单线程运行机制在此，但这也带来了很多麻烦，因为服务器后盾有着多线程解决的刚需

于是，nodejs为解决多线程的需要，在node10之后，有了稳固的worker解决方案，但worker并没有给js产生第二个线程，而是启动了一个新的过程，过程之间应用json格局数据来进行通信

关于javascript:JS语言特性下

调包

es5

调用过程

根本用法

值调用

es6

调用过程

根本用法

值调用

异步

回调

js中的回调

单线程

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于javascript:JS语言特性下

调包

es5

调用过程

根本用法

值调用

es6

调用过程

根本用法

值调用

异步

回调

js中的回调

单线程

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复