++本文系慕课网学习笔记++
1、ES6 模块化如何使用，开发环境如何打包
解答思路： 语法： import export （注意有无 default）
环境： babel 编译 ES6 语法，模块化可用 webpack 和 rollup
扩展： 说一下自己对模块化标准统一的期待
模块化的基本语法
export 、export default、 import
开发环境配置 —— babel
安装 node 环境，运行 npm init
npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest
创建 .bablelrc 文件
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
npm init
npm i rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest --save-dev
配置 .babelrc
配置 rollup.config.js
rollup 功能单一， webpack 功能强大
参考设计原则和《Linux/Unix设计思想》
工具要尽量功能单一，可集成，可扩展
wangEditor 用的 gulp + rollup
关于 JS 众多模块化的标准
没有模块化
AMD 成为标准，require.js （也有 CMD）
前端打包工具，是的 nodejs 模块化可以被使用
ES6 出现，想统一现在所有模块化标准
nodejs 积极支持，浏览器尚未统一
你可以自造 lib，但是不要自造标准
2、Class 和 普通构造函数的区别（优缺点）
答案： Class 在语法上更加贴合面向对象的写法
Class 实现继承更加易读，易理解
更易于写 java 等后端语言的使用
本质还是语法糖， 使用 prototype
JS 构造函数
function MathHandle(x, y) {
this.x = x;
this.y = y;
}
MathHandle.propotype.add = function() {
return this.x + this.y;
}
var m = new MathHandle(1, 2);
m.add() // 3
继承
function Animal() {
this.eat = function() {
console.log('animal eat');
}
}
function Dog() {
this.bark = function() {
consle.log('dog bark');
}
}
Dog.prototype = new Animal();
var hashiqi = new Dog();
Class 基本语法
class MathHandle {
constructor(x, y) {
this.x = x;
this.y = y;
}
add() {
return this.x + this.y;
}
}
var m = new MathHandle(1, 2);
m.add() // 3
继承
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()
语法糖
class MathHandle {
// ... class本身就是一个语法糖
}
typeof MathHandle // "function"
// 重要！！！
MathHandle === MathHandle.prototype.constructor // true
m.__proto__ === MathHandle.prototype // true
// 语法糖：两种写法本质上是一样的，第二种比第一种简单易懂
// 形式上强行模仿 java c# ,却失去了它的本性和个性
3、Promise 的基本使用和原理
答案： new Promise 实例， 而且要 return
new Promise 的时候要传入函数， 函数有 resolve， reject 两个参数
成功时执行 resolve， 失败时执行 reject
then 监听结果
Callback Hell
function loadImg(src, callback, fail) {
var img = document.createElement('img')
img.onload = function() {
callback(img)
}
img.onerror = function() {
fail()
}
img.src = src
}
var src = 'https://img1.mukewang.com/5a38ba7100012f3404800480-100-100.jpg'
loadImg(src, function(img) {
console.log(img.width)
}, function() {
console.log('failed')
})
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 = 'https://img1.mukewang.com/5a38ba7100012f3404800480-100-100.jpg'
var result = loadImg(src);
result.then(function(img) {
console.log(img.width)
}, function() {
console.log('failed')
})
result.then(function(img) {
console.log(img.height)
})
4、总结一下 ES6 其他常用功能
let / const
多行字符串 / 模板变量
解构赋值
块级作用域
函数默认参数
箭头函数
function fn () {
console.log('real', this); //real {a: 100}
var arr = [1, 2, 3]
arr.map(function(item) {
console.log(this); // window
})
arr.map(item => {
console.log(this); // {a: 100}
})
}
fn.call({a: 100})
网友评论