尤大的知乎Live记录

Euan You's Record

Posted by yellowDog on 2018-04-19

# Vue


# 组件

  理解组件: React中组件就是一个个函数

# 组件的分类

  • 接入型 container
  • 展示型
  • 交互型 比如各类加强版的表单组件,通常强调复用,逻辑复杂
  • 功能型 比如 <router-view><transition>,作为一种扩展、抽象机制存在。

# Colocation

组件以组件为切分,而不是CSS,JavaScript,HTML这些语言切分


# imperative(命令式)和声明式

  • jQuery拿到 DOM node 就去操纵,写的很爽,但是不好维护,代码像意大利面

  • 声明式,数据和 DOM 的关系产生映射

  • Vue 的模版编译成渲染函数

  • React 中的等式

$$view = render(state)$$


# 变化侦测

暴力比对检查数据是否变化,React中的Virtual Dom,Angular中的脏检查


# 问题 1

html 中的 onclick = ‘doSomething’ 一直让人诟病,但是 Vue 中的声明式很推崇


html 中的 onlick 绑定的是一个全局函数,造成维护性问题,但是 Vue 中 methods 啥的作用域都是这个组件

# 路由

简单说就是把 url 映射到组件树上


# CSS 方案

  • 跟 JS 完全解耦,靠预处理器和比如 BEM 这样的规范来保持可维护性,偏 传统
  • CSS Modules,依然是 CSS,随机CSS类名 ,但是通过编译来避免 CSS 类名的全局冲突
  • 各类 CSS-in-JS 方案,React 社区为代表,比较激进
  • Vue 的单文件组件Scoped CSS,或是 Angular 的组件 CSS(写在装饰器里面),一种比较折中的方案

# 传统 CSS 的问题

  1. 作用域
  2. Critical CSS 首屏需要加载的 css,但是如果全部 css 在 html 之前加载,会出现问题
  3. Atomic CSS 共享的属性写在一个类中
  4. 分发复用
  5. 跨平台复用

# 构建工具

前端的 Web 平台能力和需求越来越高,普通的弱交互页面和单页应用的复杂度肯定是不能比的,面对复杂的任务,你需要的工具也是更复杂的

# 构建工具解决的问题

  • 任务的自动化
  • 开发体验和效率(新的语言功能,语法糖,hot reload 等等)因为浏览器不支持新功能的限制
  • 部署相关的需求
  • 编译时优化

grount,gulp,requireJS,CommonJS,browserify,webpack

Webpack 之所以配置复杂,因为它本来要解决的问题就很复杂,文件打包 ->请求的合并(浏览器的请求有限 -> 确保缓存 -> 前端运维

压缩代码,减少编译时的开销


# postscript

学啥东西先要懂一些原理,已经它对你原来的方案有什么优化的地方,或者说是原来方案一定做不到的地方…比如尤大在讲 React 社区的CSS in JS的时候,就是分析了原来的 CSS 也可以通过编译和优化能做出一样的效果

用英文写博客真的让人羡慕惹…加油 💪