前端的知识点和工具链

JavaScript的特点

• 弱类型语言

• 函数是第一公民

• 回调

window.addEventListener('resize',function(e){
   console.log('window resize')
})

• 闭包

function a(){
  let num = 1
  return function (){
    return  num++
  }
}
let b = a()
console.log(b()) 
console.log(b())

• Promise

let url = '//vip.video.qq.com/fcgi-bin/comm_cgi?name=abc&otype=xjson'

// demo1
request(url, function(err, userInfo){
  if (err) {
    console.error(err)
  } else {
    console.log(userInfo)
  }
})

// demo2
let userInfoPromise = new Promise(function(resolve, reject){
  request(url, function(err, userInfo){
    if (err) {
      reject(err)
    } else {
      resolve(userInfo)
    }
  })
})

userInfoPromise.then(function(userInfo){
  console.log(userInfo)
}).catch(function(err){
  console.error(err)
})

// demo3
lett userInfoPromise = fetch(url)
userInfoPromise.then(function(userInfo){
  console.log(userInfo)
}).catch(function(err){
  console.error(err)
})

• async 和 await

async function getData(){
   let userInfo = await fetch('userInfo.json')
   let vipInfo = await fetch('vipInfo.json')
   console.log(userInfo, vipInfo)
   return {
      userInfo,
      vipInfo
   }
}

getData().then(function(data){
  console.log(data)
}).catch(function(err){
  console.error(err)
})

JavaScript语法教程

前端工具链

• node.js（https://github.com/coreybutler/nvm-windows）
• npm
• webpack
• babel
• @vue/cli
• jest
• puppeteer

模块化

• Common JS: http://javascript.ruanyifeng.com/nodejs/module.html
• ES6 Module

Vue前端框架