前端三大件的学习

前言

之前做​​前端学习梳理​​的时候，总结了三块知识。三大件+组件化、网络基础+性能优化、工程化。目前写了后两部分的笔记。今天写第一部分的笔记。

  • 网络基础和性能优化部分的笔记是：​​《前端技术架构与工程》之性能笔记​​ 里面性能评估模型、从URL到页面、内存管理极限运算性能的理解能对前端的学习有指向性的作用。对代码质量的理解十分有帮助。
  • 工程化部分的笔记是：​​《前端技术架构与工程》之工程思维与服务支撑笔记​​ 里面工程思维和开发支撑的部分值得前端借鉴。对代码规范和组件化的理解也十分有帮助。
  • 编程语言部分的笔记是：​​《前端技术架构与工程》之编程语言笔记​​ 里面讲的三大件对三大件的学习有指向性的作用。

最后落实到代码的书写上。今天梳理梳理HTML+CSS+JavaScript。

文章目录

  • ​​前端三大件的学习​​
  • ​​前言​​
  • ​​三大件​​
  • ​​HTML5​​
  • ​​常用标签​​
  • ​​div和语义化​​
  • ​​本地存储​​
  • ​​SSR与CSR​​
  • ​​CSS3​​
  • ​​选择器+dev​​
  • ​​盒子模型​​
  • ​​响应布局​​
  • ​​预处理语言​​
  • ​​JavaScript​​
  • ​​事件与输出​​
  • ​​数据类型​​
  • ​​DOM​​
  • ​​静态类型​​
  • ​​异步编程​​
  • ​​ES6​​

三大件

之前学习三大件的时候一直比较懵，说学会吗，应该是没学会，说没学会吧，也能建网页。但是随着慢慢地学习，好像明白之前为什么会懵了，因为学的内容和我想象中的内容不一样。有两点，一点是我想象中的网站是有后台有交互的网站，但光学三大件做不到这些，还需要学后端（数据库和服务器）；一点是我想象中的网站很好看，很新颖，但是只用三大件会很难实现，还需要学习框架。不过现在总算有了整体的认识，我觉得学习前端还需要架构和后端的知识，才能清楚定位前端。

浏览器的知识：从URL到页面显示的过程（Fetch阶段和Render阶段）。

HTML的语义化和div、CSS的选择器和预编译。

JavaScript的DOM控制和静态数据类型。

HTML5

主要讲常用标签、HTML5语义化和div、本地存储、SSR与CSR。

  • 常用标签、HTML5语义化和div是基础
  • 本地存储和SSR与CSR是进阶

常用标签

从前后端交互的角度可以分为静态标签（我定义的）和动态标签。静态标签是不涉及交互的，如h1>p>img>canvas<ul<table<a；动态标签是交互的内容，给后台发生信息的标签，如input type=“text”>；

div和语义化

语义化是用除div>标签的标签来显示HTML文档，这样的优点有许多，如清晰的页面结构、有利于SEO、便于开发与维护；不过通常情况下还是div一把梭，用得很爽，不用担心默认样式。

需要UI框架就是利于div标签和类选择器来设计的。使用UI框架只需要在类选择器中填写类就可以显示想要的效果，十分舒适。

本地存储

在HTML4的时候本地存储是利用cookie，并且本地不能存数据库。在HTML5中的本地存储是web Storage，并且可以用indexedDB存储数据库。

相关资料如下：（根据题目搜到，可以自行搜索类似的）

借鉴​​《前端技术架构与工程》之性能笔记​​的从URL到页面显示能更好理解。

​​浅谈session,cookie,token,webStorage区别​​

​​看完这篇 Session、Cookie、Token，和面试官扯皮就没问题了​​

​​看完这篇HTTP，跟面试官扯皮就没问题了​​

​​看完这篇 HTTPS，和面试官扯皮就没问题了​​

除了web Storage外，HTML5 中的web worker（多线程并发）、文件API、fetchAPI、通信API（webSockets）、web组件、绘制图形canvas、多媒体相关API都是重点，但是在这就没具体展开了，可以根据这些关键词搜。我是通过《HTML5与CSS3权威指南》作为参考，懒得去官网找了。

SSR与CSR

看​​《前端技术架构与工程》之编程语言笔记​​的HTML部分。里面讲的virtual DOM、预渲染、SEO值得借鉴。可以作为基础后面的部分，补充学习，便于理解MVVM框架。

CSS3

主要讲CSS常用选择器、盒子模型、响应布局、预处理语言

  • 常用选择器、盒子模型、响应布局是基础
  • 预处理语言是进阶

选择器+dev

CSS的class选择器结合HTML的div标签简直六的一批。许多UI库就是自己设置盒模型和响应布局，我们去使用只需要把class填入即可。特别提高效率。如果以后熟练了，自己也设计一套自己常用的UI库。

常用的选择器有元素选择器、ID选择器、class选择器。

CSS在HTML中的使用有外部样式表、内部样式表、内联样式表；大部分UI库采用的就是外部样式表，可以统一设计网站风格；内部样式表专门设计当前HTML文档的页面，一般放在head中，在渲染的时候可以和HTML一起渲染；内联样式则是对HTML中元素的设计，专门针对一个元素。具体内容在​​菜鸟教程​​​、​​w3cschoo​​​l或​​MDN​​中找。

盒子模型

设计元素的格式。

外边距margin：bottom、left、right、top；完全透明，起清除周围元素的作用

轮廓outline：width、style、color；起突出元素的作用

边框border：width、style、color、spacing、collapse；可以指定元素边框

内边距padding：bottom、left、right、top；完全透明，起清除边框内样式的作用

响应布局

我定义的。方便记定位、浮动、flexbox、滚动条、链接；

定位opsition：static、relative、absolute、fixed、sticky；比如定位导航栏

浮动float：left、right、none；比如走马灯

弹性盒子flexbox：row、column、wrap

滚动条overflow：visible、hidden、scroll、auto、inherit

链接：link、visited、hover、active

预处理语言

CSS有不少缺点。如CSS没有命名空间，选择器中的表都是全局应用的；CSS没有报错基础，只要运行后才能看到哪出错了；各浏览器对CSS规范支持程度不一，为了照顾兼容性，CSS会有大量兼容性的代码，这使得CSS文件冗余。

为了弥补这些缺点，如less的预处理语言引入了变量、混合、模块、继承等特性，同时支持易于编写和维护的嵌套语法。

不过预处理语法也有新的缺点，如大而全、难扩展；

最新的处理方法是CSS in JS，借助JavaScript，使得CSS弥补了模块体系，便于CSS的封装和解耦，有命名空间，使得CSS有局部作用域。

JavaScript

主要讲事件与输出、数据类型、DOM、静态类型、异步编程、ES

  • 事件与输出、数据类型、DOM是基础
  • 静态类型、异步编程、ES6是进阶

事件与输出

既然有交互，那么就会有事件和输出，通常是HTML中的动态标签输入，然后JavaScript根据事件作出响应。这些就涉及到了JavaScript中处理的对象了。总共有四种对象（我定义的）：JS对象、BOM对象、DOM对象、HTML对象；

事件有DOM中的事件和DOM中的Event事件；输出主要有操作DOM的document、element、attribute对象和CSSStyleDeclaration、console对象、操作BOM的一些对象。

下面这是我根据《JavaScript权威指南（第6版）》附录摘录的。

JS对象是JavaScript语言里的对象，主要有number、string、Boolean、underfined、symbol、num六种基础数据类型、array、object、function三种引用数据类型。在下面这个表中还有描述时间的date对象、描述数学公式的math对象、描述正则表达式的RegExp对象、描述报错的Error对象。

BOM对象是浏览器对象模型，主要有window对象、navigator对象、screen对象、history对象、location对象、存储对象。

DOM对象是文档对象模型，主要有Document、Element、Attribute三个操作HTML的对象，事件对象Event、控制台对象console、CSS样式对象CSSStyleDeclaration、以及collection对象。

HTML对象则是HTML对象中的标签对象，也是DOM中的一种，但是我单独拿出来了，方便记忆，如anchor、body、button、style等。

一、JS对象

Array对象：属性（length）方法（fill、find、pop、push）

Boolean对象：属性（constructor、prototype）方法（toString、valueOf）

Date对象：属性（construct）、方法（getDate、setDate、toJSON）

Math对象：属性（PI）、方法（asin、cos、pow、sqrt）

Number对象：属性（NaN、MAX_VALUE）方法（toString）

String对象：属性（用数组）、方法（search、tostring）

RegExp对象：pattern、modifiers、方括号、元字符、量词、方法（test、toString）

全局属性：属性（infinity、NaN、undefined）函数（decodeURI）

运算符：算数、赋值、字符串、比较、条件、逻辑、位

Error对象：属性（name、message）

二、BOM对象

Window对象：属性（closed、history、location）方法（alert、close、scrollto）

Navigator对象：属性（appname、useragent）、方法（javaenabled）

Screen对象：属性（availHeight、colorDepth、height）

History对象：属性（length）、方法（back、forward、go）

Location对象：属性（hash、host、href、port、search）方法（reload）

存储对象：属性（length）、方法（key、clear）

三、DOM对象

Document对象：属性（document.activeElement、document.cookie）

Element对象：属性（element.getAttribute）

Attributes对象：属性（attr.value）

Events对象：属性（onclick、onkeydown、onerror、onsubmit、oncopy）

Console对象：方法（clear、error、log）

CSSStyleDeclaration对象：属性（csstext、length）方法（item、removeProperty）

Collection对象：方法（item、length、nameditem）

四、HTML对象

Anchor对象：属性（href、name、type）

Body对象：属性（background、link、text）、事件（onload）

Button对象：属性（disabled、form、name、type、value）

Canvas对象：属性（fillstyle、shadowcolor、font）、方法（fill、scale、drawimage）

Form对象：属性（action、length、name）方法（reset、submit）、事件（onreset、onsubmit）

Image对象：属性（align、alt、border、src）、事件（onload、onerror）

Link对象：属性（href、type）

Script对象：属性（async、src、text、type）

Style对象：属性（aligncontent、background、bottom、color、font、margin）

数据类型

在ES6中，变量用let定义、常量用const定义；ES6之前是var定义。

JavaScript中，数据类型分为基础类型和对象类型。

基础类型有六种：数字、布尔、字符型、underfined、null、以及ES新特性符号；

对象类型分为自定义类型和内置类型，自定义类型是object、内置类型有六种：array、date、error、function、object、RegExp。

类型转换、标识符命名、运算符和表达式、控制流；这些根据关键词查就可以。在这我就不展开了。

DOM

文档对象模型，是HTML和XML文档的编程接口。虽然上面讲了部分DOM的知识，但是DOM的知识有许多，是前端开发的核心。

jQuery：降低开发者操作DOM的复杂度。以优秀的DOM操作闻名。

MVVM中的virtual DOM则是大幅度降低了DOM操作，提高性能。

静态类型

在ES6之前的JavaScript采用的是var定义的动态类型，这种类型虽然灵活，对轻量级项目有绝对积极的作用，但是设计大型项目时会有巨大影响，如和类型相关的bug一般的在测试或者生产环境中爆发，如果采用静态类型的话，就可以在编译环境中提前发现。TypeScript是JavaScript静态类型编程语言，可以帮助我们写静态类型的JavaScript。

异步编程

异步编程的好处是并发，提高响应。ajax和node.js都有类似的思路。

ES6

是新版本JavaScript语言标准，其新特性有变量与常量、类的引入、箭头函数；

更新地址：​​GitHub​​

更多内容请关注：​​​​GitHub​​