Skip to content
This repository has been archived by the owner on Mar 28, 2022. It is now read-only.

Latest commit

 

History

History
173 lines (108 loc) · 5.15 KB

README.md

File metadata and controls

173 lines (108 loc) · 5.15 KB
Raw
marp
true

full stack on js with vue + koa2

xsthunder/full-stack-on-js https://github.com/xsthunder/full-stack-on-js

曾健骏

2020年5月13日

目的

是：

  1. js全栈技术点

  2. 技术前瞻&带货

不是：

  1. js教程

  2. vue or koa2教程，vue教程点击此处

vue：数据绑定

想法

逻辑代码和视图交互数据，统一存放在this.data

vue监听this.data变化，自动更新视图。

逻辑和视图分开，this.data是桥梁。

示例 TodoList.vue

v-model 双向数据绑定

:，单向数据绑定

@<action>="fuc"绑定事件，事件放在this.methods中

提示：前台可以通过桩模块暂时代替后台，从而不被后台的进度阻塞。示例api.js

vue 模块化 + 打包

示例

  1. 组件模块化，有输入输出 HelloWorld.vue App.vue

  2. 两个组件，两个文件，增强可维护性

  3. 引入外部依赖，引入开源库antdv日历 示例 App.vue

  4. 开源库和其管理工具Yarn npm

  5. 打包发布yarn build 即 工程化 工具Vue CLI

后台：koa2

Koa - next generation web framework for node.js 基於Nodejs的Koa2基本教學 - 倫斯的技術隨筆 - Medium

  1. 异步，非阻塞，基于promise
  2. 性能
  3. 洋葱模型

后台：koa2 洋葱模型

height:550

前端常见问题

  1. 前后台的功能划线

    1. 前台可以负责第一次检查，但是后台必须再检查一次。（安全考虑）

  2. uid的处理: 使用uuid

  3. 事件处理

    1. 保存过于频繁：Debounce

    2. 数据竞争：throttle

    3. 参考Throttling and Debouncing in JavaScript - codeburst

    4. solve this once for all？

Rxjs

Rxjs统一处理数据流，28定律，看一部分即可 RxJS - merge h:500

RxJS debounceTime

RxJS - debounceTime

RxJS - throttleTime

RxJS - throttleTime

前端进阶：

  1. 数据什么时候获取？ 组件生命周期 — Vue.js

  2. 全局状态管理What is Vuex? | Vuex

  3. SEO Vue.js 服务器端渲染指南 | Vue SSR 指南

  4. 端到端测试 cypress or selenium

  5. webpack的使用，proxy，code shake

  6. 原理

其他：

  1. 引入typescript

  2. 项目使用framework

  3. 前端模拟数据生成nuysoft/Mock: A simulation data generator

framework示例

where to find? koajs/koa Wiki ant-design-vue-awesome

  1. koa Egg.js
  2. vueComponent/ant-design-vue-pro: 👨🏻‍💻👩🏻‍💻 Use Ant Design Vue like a Pro!

技术选型

技术选型，请教senior，综合考虑人员，性能，周期

示例

  1. 前端框架:vueComponent/ant-design-vue-pro: 👨🏻‍💻👩🏻‍💻 Use Ant Design Vue like a Pro!
    1. 不使用vuex
    2. ……
  2. 后端框架：Egg.js
  3. 接口格式：接口的数据协议推荐使用form-data,axios使用form-data，后端向前端以可调试的postman集合形式交付接口实现样例。
  4. 用户标识鉴权，接口设计参照，git的使用规范
  5. 技术对比文档，端到端测试平台对比