用实体实验法学Web前端开发 (Learn Web Frontend Development The Physical Way)

用实体模型表达Web前端开发的基本组件

• Clients-Server实体数据交互模型
• 内联文本语义
  • Hyperlink
• 表单
  • Form(input)
• 内容分区
  • div
  • Heading
  • Paragraph
• 图片和多媒体
  • Image
  • Video
  • Audio
• 脚本
  • Canvas

用Javascript CRUD DOM的Tree节点

• 体验html页面的DOM结构和节点数据
• CRUD DOM Tree
  • 体验DOM树结构的数据节点
  • 创建DOM树的数据节点
  • 读取DOM树的数据节点内容
  • 改变DOM树的数据节点内容
  • 删除DOM树的数据节点
• 用DOM操控常用元素
  • 用DOM操控div
  • 用DOM操控Form中的input
  • 用DOM操控Canvas
  • 用DOM创建todo list
• 调用浏览器的API:setInterval()
• 用DOM创建weekly tasks
  • 创建table
  • 创建tasks
  • 拖拽tasks后放到目标位置

React

• 核心逻辑，数据结构，和算法

  • 把简单函数组合成复杂的函数
  • 使用JavaScript对象创建React的元素
  • 在Chrome控制台里查看JSX语法被编译后生成的DOM元素
  • 理解Virtual DOM和diff()

• 读取并传递Data

  • 渲染出Mock的[obj1,obj2,...objN]数据
  • 在组合多个组件的过程中使用props传入Mock的[obj1,obj2,...objN]数据
  • 在组合多个嵌套组件的过程中使用props传入Mock的[obj1,obj2,...objN]数据
  • 使用无状态函数组件的props传入Mock的[obj1,obj2,...objN]数据
  • User interact后调用组件的setState()改变组件的初始state

• UI's Grammar: Javascript XML(JSX)

  • 在render()里使用(...html...)返回html语句
  • 在render()里返回的(...html...)里使用{...javascript...}运行JavenaScript语句
  • 在render()里的html元素的class标签需要写成className
  • 使用key值识别Virtual DOM的节点

ECMAScript 6 ...

• 基本语法

  • 使用块级作用域的let和const取代函数作用域的var
  • 使用Template Literals拼接多行字符串
  • 使用解构获取对象或数组中的数据并赋值给不同的变量
  • 使用Object Literal Shorthand的对象字面量简写语法
  • 使用for...of loop取代for loop和for...in loop操纵数组中的数据
  • 使用[...nameOfArray]连接n个不同的数组或使用{...nameOfObject}添加n个不同对象的键值对
  • 使用...Rest参数把1个不定数量的参数表示为1个数组

• 类和对象

  • c语言中存储多种数据类型的结构体
  • c++语言中存储多种数据类型的结构体
  • 存储多种数据类型的对象
  • 用可以传入参数的构造函数创建对象
  • this关键字的三种常用指向
  • 使用prototype对象实现构造函数的继承
  • 使用ES6的class语法糖创建对象
  • 使用super和extends的语法糖实现构造函数的继承