前端语言串讲 | 青训营

Zanebla
70 阅读3分钟

前端语言串讲

语言的基本能力

前端三剑客 HTML 负责构建结构

  1. 控制内容布局
  2. 为Web页面设计提供结构
  3. 任何网页的基本构建模块

CSS 负责美化网站

  1. 为网页元素添加样式
  2. 适应不同的屏幕尺寸，做到响应式布局
  3. 网页美化

JS 负责增加交互

  1. 添加交互
  2. 处理复杂的函数与特性
  3. 增强功能

三者互相配合

CSS主要语法是选择器Selector 大括号里面是由分号分隔的声明Declaration 声明由属性Property和值Value组成

CSS选择器有很多种类

需要注意的是伪类和伪元素

此外我们可以在MDN上学习到更多关于CSS的知识 包括语义，属性值，值类型以及描述等等

JS于1995年诞生

  1. 借鉴C的基本语法
  2. 借鉴Java的数据类型和内存管理
  3. 借鉴Scheme将函数提升为first class
  4. 借鉴Self使用基于原型（prototype）的继承机制

2000年AJAX使得JS广泛流行

通用JS有许多特性

  1. 确认用户输入
  2. 简单客户端计算
  3. 更好的控制
  4. 平台独立性（跨平台）
  5. 处理数据与时间
  6. 生成HTML内容
  7. 检测用户浏览器与操作系统

现代JS新增许多特性

  1. Let/Const
  2. 箭头函数
  3. 模版字符串（字面量）
  4. 新的数组函数
  5. 默认参数
  6. 属性快捷方式

JS CheatSheet

  1. 7种数据类型
  2. 基本词汇 Variable Operator Statement Keyword/reserved word Expression
  3. 对象 Key Value Method
  4. 函数

浏览器Browser

CSS树 树用来描述节点之间的关系

V8工作流程 V8的工作是将js代码翻译为CPU指令

  1. 源代码
  2. 解析器
  3. AST树
  4. AST树通过Ignition转化为字节码
  5. Turbofan
  6. Machine code

语言的协作配合

前端的发展 可以从HTML，CSS和JS的生态发展综合来看

CSS in HTML

  1. Inline CSS
  2. Internal CSS
  3. External CSS

JS in HTML

HTML in JS JSX JSX是一种JavaScript的语法扩展，首先运用于React中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的 元素是构成React应用的最小单位，JSX就是用来声明React当中的元素 React主要使用JSX来描述用户界面，但React并不强制要求使用JSX，而JSX也在React之外的框架得到了广泛的支持

CSS in JS JSS CSS-in-JS是一种技术（technique），而不是一个具体的库实现（library） 简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些.css，.scss或者less之类的文件 这样就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义 CSS-in-JS不是一种很新的技术，其出现是因为一些component-based的Web框架（例如React，Vue和Angular）的逐渐流行，使得开发者也想将组件的CSS样式也一块封装到组件中去以解决原生CSS写法的一系列问题 CSS-in-JS在React社区的热度是最高的，因为React本身不会管用户怎么去为组件定义样式的问题，而Vue和Angular都有属于框架自己的一套定义样式的方案

HTML5

HTML 不是图灵完备的，因此只是一门标记语言

拓展

后面还有很多有意思的，但是还需要我去学习更多内容才能明白

avatar
文章
阅读
粉丝