JavaScript高级面试题（1）

笔记只是部分摘录

1.课程概述

包括：高级基础，框架原理，app混合开发

技术：JS、ES6、虚拟DOM、vue、React、hybrid

知识点介绍：

高级基础：
ES6常用语法：Class、Module、Promise等
原型高级应用：结合jQuery和zepto源码
异步全面讲解：从原理到jQuery再到Promise

框架原理：
虚拟DOM：存在价值，如何使用，diff算法
vue：MVVM，vue响应式，模板解析，渲染
React：组件化，JSX，vdom，setState
对比：有主见，自圆其说

涉及知识点：es6、异步、原型、vdom、mvvm、组件化、hybrid和其他

es6：模块化的使用和编译环境、Class和JS构造函数的区别、Promise的用法、ES6其他常用功能

异步：什么是单线程和异步有何关系、什么是event-loop、目前JS解决异步的方案有哪些、如果只用jQuery如何解决异步、Promise的标准、async/await的使用

原型：原型如何实际应用、原型如何满足扩展

vdom：什么是vdom为何要用vdom、vdom如何使用核心函数有哪些、了解diff算法吗

MVVM：之前使用jQuery和现在使用vue或React框架的区别、你如何理解MVVM、vue如何实现响应式、vue如何解析模板、介绍vue的实现流程

组件化：对组件化的理解、JSX是什么、JSX和vdom什么关系、简述React和setState、简述自己如何比较React和vue

其他：如何写博客、如何做开源

2.ES6

问题

ES6模块化如何使用，开发环境如何打包
Class和普通构造函数有何区别
Promise的基本使用和原理
总结一下ES6其他常用功能

3.ES6模块化

export和import

//export
export default{
	a:100
}

export function fn1(){
	console.log('fn1');
}
export function fn2(){
	console.log('fn2');
}

let myName="laowang";
let myAge=90;
let myfn=function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
    myName,
    myAge,
    myfn
}

//import
import util1 from './util1.js'
console.log(util1)

import {fn1,fn2} from './util2.js'
fn1()
fn2()

import {myfn,myAge,myName} from "./test.js";
console.log(myfn());//我是laowang！今年90岁了
console.log(myAge);//90
console.log(myName);//laowang

babel使用

参考之前文章：https://blog.csdn.net/u014465934/article/details/85306244

---

下面介绍两种方式使用babel：

1.直接使用.babelrc文件和package.json配置babel环境

开发环境：
1.电脑有node环境，运行npm init
2.安装bable中的一些依赖

npm install babel-core babel-present-es2015 babel-preset-latest --save-dev

3.创建.baberrc文件

{
	"presets":["es2015","latest"],
	"plugins":[]
}

4.安装babel-cli

npm install --global babel-cli

5.创建./src/index.js

[1,2,3].map(item => item+1);

6.运行 babel ./src/index.js。

再说明下，我们经常看见到babel src -d lib的意思是把src文件夹下的文件都转译，转译后的文件放到lib目录下。

附注说明：如果你不想生成.babelrc文件，你可以在你的package.json文件中对babel进行配置。

看下面代码：

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "arrow.js",
  "scripts": {
    "build": "babel src -d lib --comments=true"
  },
  "babel":{
    //babel选项
    "presets":["es2015"],
    "comments":false
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0