笔记只是部分摘录
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-load