Skip to content

Latest commit

 

History

History
339 lines (238 loc) · 8.53 KB

大前端技术清单.md

File metadata and controls

339 lines (238 loc) · 8.53 KB

JavaScript

JS基础 【产出：文档】

    前端组件化规范
    JS中的同源、跨域以及常见的解决方案
    JS原型链
    JS中的正则表达式及其相关方法 
    异步处理(promise、async等) 
    Array、Set、Map等新功能 
    ES6中字符串、函数、对象、类等扩展 
    Proxy、Reflect、Symbol 介绍和在实战中的应用
    JS双向数据绑定
    前端缓存
    前端算法

Typescript ：

    内容：
        基础知识普及：基本介绍语法介绍、开发流程、和JS的区别等等
        落地方案评审：解决的问题、带来的问题、是否适用、如何落地等
    产出：文章、落地方案评审
    阶段与规划：
         阶段1:
        （1）阅读ts官方doc，提炼核心用法
        （2）产出《typescript--javascript的超集》
         阶段2:
        （1）调研ts优势、使用场景、常见问题
        （2）产出《typescript or not？》
         (3) ts调研成果分享
         阶段3:
        （1）结合团队真实项目，讨论具体落地方案
        （2）产出《typescript--落地实践》

React

  • virtual DOM和Diff算法

      内容：
      Virtual DOM的模型、原理
      Diff算法
      以及他们的作用
  产出：文章、分享、简化版Virtual DOM实现 Demo
  阶段与规划：
      阶段1:
      （1）学习了解 Virtual DOM的模型、原理  
      阶段2:
      （1）学习Diff算法 
      （2）产出 <<react Virtual DOM的原理>>文章
      阶段3:
      （1）写demo整理文档
      （2）产出<<简化版Virtual DOM实现>> demo
      （3） 分享

  • redux、mobx 等flux框架 【产出：文章】

  • fiber新特性 【产出：文章】

  • react hook 【产出：文章】

  • SSR 【产出：文章、落地可行性】

ReactNative

组件

  • CollapseHeaderView 折叠header的view

  • 加载中组件

      解决现有的问题：
      Android上面会闪烁一下
      多种组件没有统一

  • 图片上传组件

  • RN图片组件优化

      内容 ： 
      解决闪一下问题
      预加载尝试

交互及特效

  • 3D陀螺仪（会员中心轮播图改造）

RN热更新 【产出：文章、生成环境落地、开源方案】

  • 热更新方案介绍

      产出：
  热更新介绍文档
  热更新实现原理文档

  • SDK文档书写

  • 热更新开源版本Demo开发

  • GetStart文档书写

工程化

  • RN版本升级

      产出：
      升级落地方案文章

  • RN升级react-natigation

      产出：调研文档、升级方案

  • RN页面调试方案

      内容：
      页面的调试、Debug方案
      测试入口页面替换
      MOCK数据？？？

  • Redux在RN中的实践（产出：文章、重写登录、注册页）

进阶

  • 如何开发一个Native组件
  • Flutter跨端技术介绍 【产出：文章】
  • RN三端统一调研 【产出：文章、Demo】
  • RN的实现实现原理、核心源码分析（iOS、Android版）
  • RN和Native通信（通信方案和通信机制）

Hybrid

  • webview ： js和native通信原理 【产出：文章】

  • 性能优化 ： Sonic方案落地 【产出：文章、生产环境落地】

CSS

  • 移动端适配 【产出：文章、 落地方案】
  • flex布局 【产出：文章】
  • 前端常见布局CSS实现、Flex实现 【产出：文章、Demo演示】

前端富交互

  • 动画特效 【待定】

      CSS3实现动画  
  帧动画
  Canvas

  • H5小游戏【待定】

Node.js

koa框架：

  • 基本使用、常见中间件、洋葱圈模型 【产出：文章】

  • koa源码分析，实现原理 【产出：文章】

    阶段与规划：

     阶段1:
  （1）学习koa2及其常用中间件
  （2）产出<<koa2及其常用中间件的基本用法>>文章 demo

 阶段2:
  （1）学习express源码
  （2）学习koa2源码

 阶段3:
  （1）express及其koa实现原理比较
  （2）产出<<koa2源码分析>> 文章

监控和运维 ：

  • PM2 PM2.5调研

      产出：
      pm2进程管理实现
      线上监控搭建监控系统
  阶段与规划：
      pm2实现分析&pm2.5调研
      线上监控搭建

  • Node.js日志对接ELK 【产出：文章、线上对接ELK】

深入 ：

  • 异步事件机制、并发模型 【产出：文章】
  • stream 【产出：文章】
  • 性能调优 【产出：文章、生产环境落地】
  • GraphQL介绍 【产出：文章】

前端安全

  • xss、csrf以及在Node.js中的落地 【产出：文章、生成环境落地】
  • https 【产出：文章】
  • 流量劫持

微信

小程序

    内容：
        小程序能力、基本语法、开发流程、常见框架介绍
        LP页面
    产出：
        LP页面落地
        文章、
        分享并指导大家完成一个最简单的小程序页面
    阶段与规划：
      阶段1:
       (1) 学习小程序入门、基本语法、小程序的能力、小程序与公众号服务号互通、小程序和APP打通
       (2) 产出《小程序入门文档》简单demo

      阶段2:
       (1) 调研小程序常见框架，并确定技术方案选型
       (2) 产出《小程序常见框架对比文档》
       (3) 产出稍微复杂的demo
      
      阶段3:
       (1) 小程序分享、Demo
       
      阶段4:
       (1) LP页面落地
       (2) 其他[支付宝、百度]小程序对比调研

微信公众号

    内容：
        定制服务号开发（配置、第三方代理等）
        access_token
        菜单定制
        消息应答、发送模板消息
        带场景值的二维码
        自动回复
    产出：
        文章
        分享并review线上代码

PWA

    内容：
        PWA service work、manifest核心技术介绍
        开发流程：从零开始完成一个PWA页面开发
        PWA中的SEO
    产出：
        M站首页 PWA落地开发 
        分享简单的PWA页面(使用各种核心技术)
    阶段与规划：
       阶段1:
        PWA基础知识(Server works, Promise and fetch, Background sync, Web push notification)
       阶段2:
        产出分享文档和Demo
       阶段3:
        PWA落地

工程化

自动化运营平台

Webpack

  • 深入浅出

      内容：
      Webpack基本使用，常见loader、plugin
      从零开始快速搭建一个简单webpack环境
      loader、plugin等工作原理
      其他前端工具介绍
  产出：
      文章
      分享并指导大家从零开始动手搭建webpack环境

  阶段与规划：
      阶段1:
      （1）学习webpack基本概念和基础配置信息
      （2）产出《webpack入门》
       (3) webpack分享Demo

      阶段2:
      （1）学习webpack的原理
      （2）学习loader、plugin原理
      （3）产出《webpack进阶》

      阶段3:
      （1）研究前端其他常用的工程化工具
      （2）产出《常用工程化工具及比较》

  • 实战经验

      内容：从零开始完成一个多页面项目webpack搭建
  产出：
      搭建常用webpack模版
      文章
      分享
  阶段与规划：
      阶段1:
        本周4 第一版细化，更新修改后的细化
      阶段2:
        完成第一版的文章的编写
      阶段3:
        整理 产出分享

git 【产出：文章】

git flow
高阶命令 ： revert、rebase、cherry-pick等

Swift

Swift 4.2 New feature & Migration

计算机基础

  • http

      基础介绍 ： 状态码、header、缓存 【分享】
  HTTPS ：

  • 浏览器渲染流程、原理 【产出：文章】

  • Nginx

      内容：
      安装
      基本命令介绍
      基本功能

常见经典面试题汇总

  • 从浏览器出入URL到最终呈现经过了哪些环节？
  • 发现网页变慢了怎么办？