ES6
模块化
export import
/* util1.js */
export default {
a: 100
}
/* util2.js */
export function fn1(){
alert('fn1')
}
export function fn2(){
alert('fn1')
}
/* index.js*/
import util1 from './util1.js'
import { fn1, fn2} from './util2.js'
console.log(util1)
fn1()
fn2()
babel
- npm init
- 安装必要的安装包 npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest
- 创建.babelrc文件
- npm install --global babel-cli
- babel --version
- 创建./src/index.js
- 内容:[1,2,3].map(item => item+1)
- 运行 babel ./src/index.js
webpack
- npm install webpack babel-loader --save-dev
- 配置webpack.config.js
- 配置package.json中的scripts
- 运行npm start
高级的打包工具 rollup
rollup功能单一,webpack功能强大,但是学习成本高
rollup打包后的js文件比较小,没有冗余的代码
关于JS众多模块化标准
- 没有模块化
- AMD成为标准,require.js
- 前端打包工具,使得node.js模块化可以被使用
- ES6出现,想统一现在所有模块化标准
- nodejs积极支持,浏览器尚未统一
- 你可以自造lib,但是不要自造标准!
class
class语法是构造函数的语法糖
构造函数的显示原型的constructer等于它本身
实例的隐式原型等于构造函数的显示原型
继承
class Animal {
constructor(name){
this.name = name
}
eat() {
console.log(`${this.name} eat`)
}
}
class Dog extends Animal {
constructor(name){
super(name)
this.name = name
}
say() {
console.log(`$(this.name) say`)
}
}
const dog = new Dog('哈士奇')
dog.say()
dog.eat()
super代表把Animal的构造器执行一遍
promise
function loadImg(src) {
const promise = new Promise(function(resolve, reject){
var img = document.createElement('img')
img.onload = function(){
resolve(img)
}
img.onerror = function () {
reject()
}
img.src = src
})
return promise
}
var src = 'http://xxx/xx.png'
var result = loadImg(src)
result.then(function(img){
console.log(img.width)
}, function (){
console.log('failed')
})
result.then(function(img){
console.log(img.height)
})
ES6其他常用功能
let/const
多行字符串/模板变量
解构赋值
块级作用域
函数默认参数
箭头函数
网友评论