欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

荐 前端三大件的学习——wsdchong

程序员文章站 2022-06-22 17:13:41
前端三大件的学习前言之前做前端学习梳理的时候,总结了三块知识。三大件+组件化、网络基础+性能优化、工程化。目前写了后两部分的笔记。今天写第一部分的笔记。网络基础和性能优化部分的笔记是:《前端技术架构与工程》之性能笔记里面性能评估模型、从URL到页面、内存管理极限运算性能的理解能对前端的学习有指向性的作用。对代码质量的理解十分有帮助。工程化部分的笔记是:《前端技术架构与工程》之工程思维与服务支撑笔记里面工程思维和开发支撑的部分值得前端借鉴。对代码规范和组件化的理解也十分有帮助。编程语言部分的笔记...

前端三大件的学习

前言

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

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

三大件

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

浏览器的知识:从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中元素的设计,专门针对一个元素。具体内容在菜鸟教程w3cschool或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

更多内容请关注:CSDNGitHub掘金

本文地址:https://blog.csdn.net/weixin_42875245/article/details/106786978