es6 实战

前端启动

  • yarn install
  • yarn dev

后端启动

  • rollup -c -w (等待30s)
  • nodemon ./dist/bundle.js

后端 - node 框架；

Koa

  • express
  • Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。
  • 回调函数；
  • 内置了很多 中间件；
  • koa
  • Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。
  • async / await ；
  • 中间件需要第三方引用；
  • restana
  • nest (next.js, nuxt.js)
洋葱模型
  • 中间件(middleware / compose)：
  • redux 的中间件 reduce();
  • koa 的中间件 dispatch 递归函数;
  • axios // [ ] req -> unshift(); res -> push()
  • express
koa
基本写法
const Koa = require("koa");
const app = new Koa();

const main = ctx => {
    ctx.body = "hello Koa";
}

app.use(main);
app.listen(3002, () => {
    console.log('Koa server is running in 3002')
})
koa-router
// index.js
import Koa from 'koa';
import Router from 'koa-router';
// const Koa = require("koa");
// const Router = require('koa-router');

import movie from './movie';
import user from './user';

const app = new Koa();
const router = new Router();

// router.get('/api', (ctx, next) => {
//     ctx.type = "application/json";
//     ctx.body = { data: "hello Api" };
// })

[movie, user].forEach(route => {
    app.use(route.routes());
    app.use(route.allowedMethods());
})

app.listen(3002, () => {
    console.log('Koa server is running in 3002')
})

// movie.js
import Router from 'koa-router';

// koa-cors
// koa-bodyparser
// koa-helmet

const router = new Router();

router.get('/movie', async (ctx, next) => {
    ctx.body = "Movie"
})

export default router;
做一个装饰器
export const RequestMethod = {
    "GET": 'get',
    "POST": 'post',
    "PUT": 'put',
    "DELETE": 'delete',
    "OPTION": 'option',
    "PATCH": 'patch'
}

export const controllersArray = [];

// 装饰器对类的行为的改变，是代码编译时发生的，而不是运行时；
// 所以，在之前就干了这么一件事
// movieController -->   movieController.prefix = "/movie"
export function Controller(prefix = "") {
    return function (target) {
        target.prefix = prefix;
    }
}

export function RequestMapping(method = "", url = "") {
    return function (target, name, descriptor) {
        let path = '';
        if (!url) {
            path = '/' + name;
        } else {
            path = url;
        }
        // 创建 router 需要的数据
        const item = {
            url: path,
            method: method,
            handler: target[name],
            constructor: target.constructor,
        }
        controllersArray.push(item)
    }
}

前端

• svelte(react / vue)
• rollup(webpack)
• smelte(antd / element)
• tailwind CSS (bootstrap / css / postcss)

后端

  • Sequelize(java-mybatis)

其他

Rollup

rollup -c -w

  • c: 找根目录的 rollup.config.js 作为我的构建的配置；
  • w: watch 监听文件的变化，实时构建；

中间件

redux-compose

function(arr) {
    return arr.reduce((a, b) => (...args) => a(b(...args)) )
}

面向切面。

继承

oop

java -> 一切皆对象。
创建对象的方式
proto prototype
继承 – 组合寄生 / es6

问题

1. ES 的装饰器有哪些？

  • 类装饰器
  • 可以用来装饰整个类
@testable
class MyTestableClass {
// ...
}

function testable(target) {
target.isTestable = true;
}

MyTestableClass.isTestable // true
  • 方法、属性装饰器
class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}
// 装饰器第一个参数是类的原型对象，上例是Person.prototype，装饰器的本意是要“装饰”类的实例，但是这个时候实例还没生成，所以只能去装饰原型（这不同于类的装饰，那种情况时target参数指的是类本身）；第二个参数是所要装饰的属性名，第三个参数是该属性的描述对象。

2. 为什么装饰器不能用于函数？

装饰器只能用于类和类的方法，不能用于函数，因为存在函数提升。
另一方面，如果一定要装饰函数，可以采用高阶函数的形式直接执行。

3. 请实现一个 koa-compose

function compose(args) {
    let result ;
    return function(ctx) {
        let i = 0;
        let dispatch = function(i, ctx) {
            let fn ;
            if(i < args.length) fn = args[i];
            // console.log(ctx)
            if(i === args.length) {
                result = ctx; 
                return;
            }
            return fn(ctx, dispatch.bind(null, ++i));
        }
        dispatch(0, ctx);
        return result;
    }
}
// 测试：
function discount (ctx, next) {
    console.log("starting discount..")
    next(ctx * 0.8) // 八折优惠
    console.log("ending discount..")
}

function express (ctx, next) {
    console.log("starting express..")
		next(ctx + 12) // 不包邮，12元运费
    console.log("ending express..")

}

function num (ctx, next) {
    console.log("starting num..")
		next(ctx * 10) // 一共十个
    console.log("ending num..")
}
const c = compose([num, discount, express]);
console.log(c(15))

4. 如何在 node 环境下使用 esm 规范？

  1. 利用编译工具运行 esm，比如课程中的 Rollup 的方式；
  2. 使用一些工具直接运行，比如 babel-node；
  3. 使用mjs作文文件后缀；
  4. 在package.json中配置module；

5. 说一下你理解的 svelte?

  • 开放性问题。
  • 可以考虑从：编译体积、编译期的工作以及语法规范这几个方面进行回答。