其他

前端发展方向

  • 数据可视化 echarts canvas BI
  • 架构师 基础组件开发 代码抽象 封装能力
  • 向后开发 node方向 熟悉后端开发
  • 交互动效 对设计功底有要求
  • h5 微信h5 对UI还原 兼容性要求高
  • PC端开发 主要是增删改查
  • 游戏前端 cocos 小游戏 站在游戏引擎上跳舞

如何算是真正的掌握学习内容？

一般来说，满足以下三个条件，就算真正掌握了学习内容：

  • 能用自己的话语表达出来，无论是图表、歌诀、顺口溜、思维导图、类比等什么形式都可以；
  • 能讲给别人听，并能回答对方的疑问；
  • 有机会刻意去运用，并能用学到的知识去解释、解决工作中的问题。

infra 团队

infra 是 infrastructure的缩写，就是基础设施

  • 美国这边，专门的 Infra 团队几乎是每个公司的标配
  • 国内
    • 大厂
      • 阿里
        • 大中台战略，解放了各个产品部门的生产力
      • 腾讯
        • 虽然TEG 事业群做基础设施建设
        • 各个团队依然在重复造轮子
    • 中小公司
      • 没钱养一个不能直接带来 KPI 提升的团队
    • 绝大部分公司的技术基础设施都非常差

PC 组件库设计

  • 通用
    • Button
    • Icon
  • 布局
    • Grid 栅格
    • Layout 布局
    • Space 间距
  • 导航
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • Menu 导航菜单
    • Pagination 分页
    • Steps 步骤条
    • PageHeader 页头
  • 数据录入
    • Rate 评分
    • Radio 单选框
    • Switch 开关
    • AutoComplete 自动完成
    • Checkbox 多选框
    • Cascader 级联选择
    • DatePicker 日期选择框
    • TimePicker 时间选择框
    • Form 表单 高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
    • Input 输入框
    • InputNumber 数字输入框
    • Select 下拉选择器
    • TreeSelect 树选择
    • Transfer 双栏穿梭框
    • Upload 上传
  • 数据展示
    • Avatar
    • Collapse
    • Comment 评论组件
    • Carousel 走马灯
    • Card 卡片
    • Descriptions 描述列表 常见于详情页的信息展示。
    • Empty 空状态
    • List 列表
    • Tabs 标签页
    • Table 表格
    • Statistic 统计数值
    • Timeline 时间轴
    • Tag 标签
  • 反馈
    • Alert 不会自动消失，用户可以点击关闭。
    • Drawer 抽屉 屏幕边缘滑出的浮层面板。
    • Modal 对话框
    • Message
    • Notification
    • Progress
    • Popconfirm
    • Spin 加载中
    • Skeleton 骨架屏
  • 其他
    • BackTop 回到顶部
    • Divider 分割线

mqtt

阿里云 iot

  • 多种协议接入
  • 例如MQTT、CoAP、HTTP等

EMQ 管理监控 API

用户可以通过 REST API 查询 MQTT 客户端连接(Connections)、会话(Sessions)、订阅(Subscriptions)和路由(Routes)信息，还可以检索和监控服务器的性能指标和统计数据。

知乎 Live 不吹不黑聊聊前端框架

  • CSS 管理方案
    • 降低思维负担
  • 路由
  • 构建工具
    • 前端工具的能力
      • 语法糖
      • 热加载
      • 编译时优化
    • 现在 npm scripts 够用了
  • 数据抓取和同步
    • 后端暴露 restful API
    • restful 围绕资源
    • GraphQL
      • 对数据量的优化
      • 是否需要GraphQL
        • 应用复杂度是否到了Facebook那种程度，
  • 跨平台渲染

microsoft/frontend-bootcamp 2天学会前端

Day one

Day one covers the basics of HTML, CSS and JavaScript, as well as an introduction to React and Typescript.

  1. Introduction to HTML
  2. Introduction to CSS
  3. Introduction JavaScript
  4. Introduction to React
  5. React Components
  6. State-driven UI
  7. Types and UI-driven state

Day two

  1. TypeScript basics
  2. UI Fabric component library
  3. Theming and styling
  4. React Context
  5. Redux: Store
  6. Redux: React binding

Bonus content 奖励内容

  • Redux: Service calls
  • Testing with Jest

Additional resources

  • MDN Web Docs 火狐文档
  • React Docs React文档
  • Thinking in React

Other projects from the UI Fabric team at Microsoft

  • UI Fabric - github repo 改名了 现在叫 fluentui https://github.com/microsoft/fluentui
  • Just: The task library that just works - github repo
  • Rush: A scalable monorepo manager for the web - github repo

移动端调试神器 browser-sync

browser-sync start --server --files "css/*.css, *.html"
browser-sync start --server --files "**/*.css, **/*.html"  深度匹配

EE 学过的

  • PN结
  • 汇编语言
  • 数字电路
  • 软件工程
  • 单片机原理
  • 计算机组成原理
  • 数字信号处理
  • 数字图像处理
  • 高等数学
  • 数据结构
  • 信号与系统
  • 通信原理
  • 控制工程
  • 工程经济
  • 物理

浏览器内核和 JS 引擎

  • 浏览器内核又称渲染引擎
    • 渲染引擎、排版引擎、解释引擎，英文 Rendering Engine
  • 早期内核也是包含 js 引擎的，而现在 js 引擎越来独立了
    • 最常见的 js 引擎就是 v8 了
  • Chrome =（Blink + V8）
    • webkit - blink
  • edge
    • edgehtml
  • edge chromium
    • blink
  • safari
    • webkit

Polyfill 方案

  • useBuiltins: entry + targets
    • useBuiltIns: entry 的含义是找到入口文件里引入的 @babel/polyfill，并替换为 targets 浏览器/环境需要的补丁列表
    • 问题
      • 只会包含 es 规范里的内容
      • 不包含 dom 里的补丁
  • 在线补丁
    • polyfill.io
  • 手动引入
    • 牺牲效率也要追求性能
    • 手动引入 core-js/modules 下的文件，缺啥加啥就好
  • 按需特性检测
    • useBuiltIns: usage + @babel/preset-env 配上 targets

你学 BFF 和 Serverless 了吗

BFF

  • backend for frontend
  • 好处
    • 组合后端接口
    • 降低沟通成本
    • 减少 http 请求
    • 适配多端
  • 缺点
  • 有什么方案可以解决痛点？
    • 可以解决前端不懂运维部署
      • 负载均衡
      • 备份冗灾
      • 监控报警
    • 使用 Serverless 无服务器

Serverless

  • Serverless = Faas + Baas
  • 架构图
  • 优势
    • 成本低，按需收费
    • 弹性伸缩
  • 缺点
    • 冷启动时间长
    • 调试困难
  • 应用场景
    • 定时任务，报表统计

工具函数

https://juejin.im/post/5da1a04ae51d45783d6122bf

数组

  • 两数组的交集

const intersection = (a, b) => {
  const s = new Set(b);
  return a.filter(x => s.has(x));
};

intersection([1, 2, 3], [4, 3, 2]); // [2, 3]
  • 根据parent_id生成树结构（阿里一面真题）
const nest = (items, id = null, link = 'parent_id') =>
  items
    .filter(item => item[link] === id)
    .map(item => ({ ...item, children: nest(items, item.id) }));

函数

  • memoize 缓存函数
const memoize = fn => {
  const cache = new Map();
  const cached = function(val) {
    return cache.has(val) ? cache.get(val) : cache.set(val, fn.call(this, val)) && cache.get(val);
  };
  cached.cache = cache;
  return cached;
};
  • once 只调用一次的函数
const once = fn => {
  let called = false
  return function () {
    if (!called) {
      called = true
      fn.apply(this, arguments)
    }
  }
};

浏览器

  • isBrowser 是否为浏览器环境
const isBrowser = () => ![typeof window, typeof document].includes('undefined');

isBrowser(); // true (browser)
isBrowser(); // false (Node)
  • scrollToTop：平滑滚动至顶部
const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};

scrollToTop();
  • smoothScroll：滚动到指定元素区域
const smoothScroll = element =>
  document.querySelector(element).scrollIntoView({
    behavior: 'smooth'
  });
  
smoothScroll('#fooBar'); 
smoothScroll('.fooBar');

Vanilla JS

意思就是 pure javascript

  • 核心功能
    • DOM(遍历/选择器)
    • 基于原型的对象系统
    • AJAX
    • 动画
    • 事件系统
    • 正则表达式
    • 函数作为第一类对象
    • 闭包
    • 数学库
    • 数组库
    • 字符串库
  • 世界上最轻量的 javascript 框架
  • 无需下载
    • 浏览器内置了，😁
  • Vanilla JS 的另一个名字是 Javascript。。。。。。

EcmaScript

TC39

  • 按照惯例每年3月份在TC39委员会上，Stage 4的特性会被确定，新的语法特性已被认可
  • Stage 4的特性都是确定会作为新版特性发布的
  • 每年3月份的时候，当前年度版本的新特性已经确定下来了
  • 4月份-7月份为ECMA CC、ECMA GA复审阶段
  • 7月份 ECMA General Assembly 批准新的标准，即在7月份当年份标准正式发布。

jinkelajs 一个神奇的框架

。。。。

Svelte 框架

<script>
import { onMount } from 'svelte'

let count = 0

function increment() {
  count++
}

$: console.log(count)

onMount(() => console.log('mounted!'))
</script>

es6 新增了什么

  • constants
  • scoping
  • arrow functions
  • extended parameter handing
    • default parameter values
    • rest parameter
    • spread operator
  • tempalte literals
    • raw string accesss
    • string interpolation
  • extended literals
    • binary & octal literal
    • unicode string & regexp literal
  • enhanced regular expression
    • sticky
  • exhanced object properties
    • property shortland
    • computed property names
    • method properties
  • destructuring assignment
  • modules
  • classses
  • symbol type
  • iterators
  • generators
  • map/set & weak Map/ weak Set
  • typed arrays
  • new built in methods
  • promises
  • meta-programming
  • localization
Last Updated:
Contributors: wangqi