前端语言串讲丨青训营笔记

Vanish
85 阅读2分钟

本文同步发布于博客（xblc.netlify.app），如果有更新博客会在第一时间更新

前端语言的基本能力

超文本标记语言

  • 构建结构，装饰的基础

层叠样式表

  • 语法非常简单，选择器 + 由键值对组成的 Declaration
  • 元素自身的状态，元素的内容分别使用一个冒号和两个冒号 image.png
  • 介绍看文档的方式
    • 斜体的部分可以在下面查

JS

历史

  • 和 Java 无本质联系，蹭热度
  • 几分钟诞生的
  • 几种语言的特性柔和而成

特性

现代特性

生态产品

基本语法

image.png

  • 七大类型
  • 基本词汇
  • 对象
  • 函数

前端语言的协作配合

Browser

image.png

  • 浏览器一般包含两大引擎：渲染 JS

image.png

  • Turbofan 如果发现还可以优化，回返回过去让 ig 优化
    • 尽量不要改变类型

Trending

  • 分别的生态产品
    • HTML 语法糖 模板语言为主
      • 划时代的 JSX
    • CSS 框架库
    • JS 框架库的变化是最大的
      • 以前的基本都死了
      • 以 WebView 渲染的框架库
      • 跨端
  • 各自的生态会探索得越来越深，最终和组合成最佳实践

混合使用

CSS in HTML

JavaScript in HTML

  • script 默认阻塞渲染
  • 。

DOM

  • Node开始的派生
  • 事件机制
    • 捕获和冒泡
    • EVENT LOOP，先执行宏任务（一些默认执行的代码），然后执行微任务

HTML in Javascript

  • 模板语言的出现
  • JSX 技术，比较完美地将 HTML 结合到JS

CSS in JavaScript

  • 直接添加

  • React

  • Vue

  • CSS Module

  • JSS

你不知道的 HTML

HTML 不图灵完备，只是标记语言

image.png

标签分类

image.png

  • <canvas> jsapi?

head标签

body 功能性标签

image.png

  • 嵌入元素标签是比较新的特性

  • ARIA 可以用来指导 UI 设计

HTML 5 特性

语义化标签

  • 语义化的标签可以可以用来更好的设计网站结构（尽管有时候没有删除的给弄个

表单增强

HTML 5 存储

image.png

  • session 会话关闭就过期

IndexedDB

  • 存储任何类型
  • 异步调用

PWA & AMP

  • AMP 关乎网站收录

Audio

Video

  • Source Buffer
  • 可定制化 Video Source

二进制

其他 API

  • 获取用户位置

WebWoker

WebSocket

Shadow DOM

  • 递归定义
  • 不能被外部节点访问
  • 可以作为一个车内聚元素

WebComponent

  • 自定义标签

SVG & Canvas

  • 矢量和点阵

  • paint 和 draw

  • 他们在应用场景上的适配性

WebGL & WebGPU

  • mesh 对象

WebAssembly

  • wasm 一种直接在浏览器运行的编码
  • 容器化是未来的突破方向

扩展

风靡的原因

  • 用户友好
  • 开发者友好：心智模型，整体认识；丰富API能力；标准化工具
  • 领域成熟度：厂商整合；
  • 未来方向：
    • 效率工具（Rust）
    • JS 2 ANYTHING
    • 容器化
    • 代码
    • 大前端统一
    • 三维可视化

大前端

  • Android 用 XML 用定义一些组件
  • 微信小程序

三种架构模式

  • MVC
  • MVVM
  • MVP
avatar
文章
阅读
粉丝