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

NanCheng
45 阅读5分钟

目录

image.png

Step1 前端语言的基本能力

市面上流行的前端语言：

  • HTML
    • Hypertext Markup Language
    • 主要用来构建网站的框架结构，控制布局等
  • CSS
    • Cascading Style Sheet 层叠样式表
    • 为网站的元素添加样式，用于增强网站的外表和体验
  • Javascript
    • JS用于Web网站的交互功能，例如一些按钮点击、轮播图等

image.png

根据上述图片可知，HTML相当于人的骨架，CSS相当于人的皮肤，JS相当于人的肌肉；各司其职。

HTML

image.png

HTML是一门标签语言，如上图所示，所有的元素都由标签构成，不同的标签所代表的作用不同，例如head标签、body标签等。

CSS

image.png

CSS 的语法十分简单，由上图所述，CSS语句由选择器和属性列表组成。 但是想要将HTML元素进行适当的组合，达到想要的效果，仍需要进行不断的尝试。 选择器包括：

  • 类选择器
  • 标签选择器
  • id选择器
  • 子选择器
  • 伪元素选择器
  • 兄弟选择器

image.png

元素自身使用伪类选择器，元素内容选择伪元素选择器

JavaScript

image.png

image.png

JS的一些通用能力：

  • 用户输入
  • 简单的客户端运算
  • 交互控制
  • 平台无关性
  • 处理日期和时间
  • 修改HTML内容
  • 检测用户的浏览器和操作系统

现代的JS的一些能力：

  • 预变量 let/Const
  • 箭头函数
  • 字符串模板
  • 扩展数组函数
  • 支持默认参数
  • 变量重命名

image.png

上图是js的一些产品

JS基本语法：

image.png

image.png

  • ①： 七种变量类型
  • ②： 基本语法
  • ③： 对象
  • ④： 函数

Browser

image.png

浏览器一般包含两种引擎：

  • 渲染引擎
    • 渲染引擎首先会根据HTML元素构建DOM树
    • 然后计算CSS树生成CSS OM 树
    • 根据结合的DOM树的结构特性和OM树的样式特性，渲染引擎会计算网页的排版，将样并且会推断其中一部分是一个整体，形成一个个图层，以加快渲染效率
    • 最后将页面绘制出

image.png

以2017年的V8引擎举例，介绍JS引擎的工作流程

  • JavaScript 引擎
    • 首先JS引擎会将JS源码通过语法解析生成AST语法树
    • 接着通过Ignition解析为字节码
    • 虚拟机会直接识别字节码，这里的Turbofan如果识别到有热点代码，可以反过来让Tuborfan直接生成优化后的机器码
    • 如果Turbofan 发现有变量类型的改变，就会进行一个Optimize的流程，并且将代码返回给Ignition进行再次识别。

Step2 前端语言的协作配合

image.png

纵轴代表时间轴 - 横轴代表HTML、CSS、JS等语言相关

从上图我们可以看到

  • HTML 的相关技术较少
  • CSS 的相关技术较多
    • OOCSS
    • BootStrap等等
  • JS 的相关技术最多
    • JS ES系列
    • React Native、Vue Native
    • React、Preact
    • Vue

CSS in HTML

image.png

CSS 在HTML中有三种表现引入方式，如上图所述

  1. 直接在HTML标签内部的style属性中引入
  2. 直接在HTML的head标签内通过style标签引入
  3. 通过在head标签内使用link标签进行引入

JavaScript in HTML

image.png

JS 在HTML中既可以直接编写，也可以通过外部文件引入

JS中定义的函数是面向HTML全局的，并且JS的脚本加载是会阻塞HTML文件加载的

image.png

JS在HTML中会将HTML内的标签分解为各个元素，并且支持在JS函数中引用并能够对其进行修改

image.png

JS 的事件触发机制包括两个阶段，分为事件捕捉和事件捕获。

  • 事件捕捉的顺序是从DOM->HTML->……->BUTTON的顺序
    • 对计算机来说，能够方便它更精准的找到事件触发的元素
  • 事件捕获的顺序是冒泡顺序
    • 对开发者来说，方便他们做一些事件代理等功能

image.png

JS的任务执行机制

  • 首先JS里有一个宏任务队列Macrotask Queue 以及 微任务队列Microtask Queue
  • 它会先完成宏任务队列里所有的宏任务依次执行，只有完成了所有的宏任务，才会去从微任务队列里取出任务执行
  • 执行完成微任务队列之后才会再去执行宏任务队列里的任务

微任务： 常见的 Promise、Callback等等 宏任务： 常见的一些浏览器上的代码，例如 setTimeOut()、setInterval()等等

HTML in JavaScript

image.png

在JS中，我们可以通过DOM树来操纵HTML语言，但是在后续的发展当中产生了一些模板和框架，使得我们可以通过使用模板来进行数据绑定等等。

例如在上图中，我们使用了mustache 模板来进行对name变量的动态绑定。

右侧是更加现代化的JSX技术，可以完美的结合HTML和JavaScript，使用类似于函数等方式对HTML标签进行动态修改

CSS in JavaScript

image.png

JS 修改CSS元素也有许多中途径：

  • 通过对DOM树下标签的Style属性进行修改即可
  • 通过React 函数返回的HTML标签内部属性进行修改
  • Vue可以通过使用template模板指定样式，例如上图右侧的jade

image.png

CSS中容易出现全局类名冲突等问题，但是CSS Module会帮助我们随机生成一个类名来防止类类名冲突。

而JSS则是直接在JS代码使用变量的形式，通过自定义变量来标识类名，然后在标注类名时，将变量带入即可解决全局类名冲突的问题。

Step3 你不知道的HTML(5)

HTML DTD

image.png

HTML只是一门标记语言，无法形成完整的控制流

HTMl 全部标签分类

  • 文档型
    • <!DOCTYPE>
    • <head>
    • <body>
  • 闭合型
    • 闭合标签
      • <p></p>
    • 空标签
      • <br>
      • <img>
      • <input>
  • 换行型
    • 块级标签
      • <div>
      • <h1>、<h2、……、<h6>
    • 行内标签
      • <span>
      • <a>
  • H5新元素
    • 语义化标签
    • 媒体标签
      • <video>
      • <audio>
      • <embed>
    • 表单标签
      • <input type="date">
      • <input type="color">
    • 功能标签
      • <canvas>
      • <progress>

HTML head标签

image.png

HTML body标签

image.png

ARIA

image.png

image.png

HTML语义化标签

image.png

用对比不用好 不用比用错好

HTML5 表单增强

image.png

avatar
文章
阅读
粉丝