기본적인 프론트엔드 지식의 통합

프론트엔드 기초지식을 정리하는 카테고리

오랜만에 html, js 기초지식을 돌아보던 중 주말에 할 일이 없을 때 면접질문에 관한 글을 보았는데, 그리고 갑자기 나는 그것들 중 많은 것을 잊어버렸다는 것을 깨달았습니다. 좋아요, 그러면 쇠가 뜨거울 때 두드리고 기본적인 지식을 배우십시오.

• HTML에 대하여

html은 표준 범용 마크업 언어에 따른 응용 프로그램인 Hyper Text Markup Language(Hyper Text Markup Language)의 약어입니다. HTML은 프로그래밍 언어가 아니라 웹페이지 제작에 꼭 필요한 마크업 언어입니다. 사진, 음악, 비디오, 링크, 프로그램 등과 같은 텍스트가 아닌 요소를 포함할 수 있습니다.

• DOCTYPE의 역할

DOCTYPE은 문서 유형의 약어입니다. HTML의 태그가 아니라 브라우저에 어떤 버전인지 알려주기 위한 태그입니다. 현재 HTML이 작성됩니다. 브라우저가 문서를 구문 분석하기 위해 사용해야 하는 사양(DTD)(예: HTML 또는 XHTML 사양)

• HTML5에 어떤 새로운 태그와 장점이 추가되었나요?

  페이지 또는 영역 헤더 정의
  

  문서의 주요 내용 지정
  

• CSS 소개

  css는 Cascading Style Sheets(전체 영어 이름: Cascading Style Sheets)로, HTML(Standard Generalized Markup Language의 응용 프로그램) 또는 XML(Standard Generalized Markup의 하위 집합)을 표현하는 데 사용되는 응용 프로그램입니다. 언어) 파일 형식에 대한 컴퓨터 언어입니다. CSS는 웹페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립트 언어와 협력하여 웹페이지의 다양한 요소의 형식을 동적으로 지정할 수도 있습니다.

• 박스 모델이란 무엇인가요?

박스 모델은 박스 모델(Box Model)이라고도 불리며 요소 내용(content), 내부 여백(padding), 테두리(border), 외부 여백을 포함합니다. (여유). 상자의 너비와 높이를 계산합니다(내용+패딩+테두리).

• 일반적으로 사용되는 CSS 단위

1.px (픽셀을 나타내며 절대 단위입니다. 다른 요소의 크기 변화로 인해 변경되지 않으며 페이지가 정확한 픽셀로 표시됩니다)
2 .pt(절대 단위인 포인트) 1/72인치와 동일한 물리적 길이 단위인 절대 단위입니다. 값 범위는 px와 유사합니다.
3.em(텍스트의 글꼴 크기에 따라 다름) 현재 개체(예: 본문의 글꼴 크기:12px; 본문 내부의 하위 요소의 경우 1em=12px)
4.rem(루트 요소의 글꼴 크기에 상대적인 단위도 다소 비슷합니다. 단, 하나의 계산 규칙은 루트 요소에 따라 달라지고 다른 하나는 상위 요소에 따라 달라집니다.)
5.vh (레이아웃 뷰포트 높이의 1/100)
6.vw (레이아웃 뷰포트 높이의 1/100)

• 수레 청소

수레를 언제 청소해야 합니까?
하위 요소에 float 속성이 설정되어 있고 상위 요소가 너비와 높이를 설정하지 않고 하위 요소에서 지원하는 경우 이때 상위 요소의 너비와 높이가 축소됩니다. 플로트를 청소해야 합니다.
방법: 1. 상위 요소에 Overflow:hidden 속성을 설정합니다. || auto

2、子元素最后一个元素添加clear:both 3、父级定义伪类：after和zoom {display:block;clear:both;content:"",visibility:hidden;height:0} {zoom:1} 4、父级定义height 5、父级也一起浮动

• 요소를 가로 및 세로 중앙에 유지하는 방법

1. flexbox
.parent{

position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%)

}
3. 하위 요소의 너비와 높이가 고정되어 있고 상위 요소의 너비와 높이가 0
.parent{

display:flex; justify-content:center; align-items: center;

}
.children{

height:200px;

CSS 선택자란 무엇이며 우선순위는 무엇인가요?

• 1. 태그 선택자(body, p 등)2. 클래스 선택자(class="box")
3. 선택기(id="app")

5. 조합 선택기(.header .header_box)
6. 하위 선택기(.#header ul li)
7. 헤더 .content)
8. 상속된 선택(p p)
9. 의사 클래스 선택자(활성 마우스로 이동한 링크)
10. 문자열 일치를 위한 속성 선택자(^ $ *는 각각 시작, 끝, 포함에 해당)
11 . 하위 선택기(p>p)
12. CSS 인접 형제 선택기(p+p)
!중요 > 인라인 스타일 > 클래스 선택기 > 상속 > 장치 기본 속성 찾아보기

每个选择器的权值：
行内样式 1000
ID选择器 100
class选择器 10
HTML标签选择器 1

• sass

sass: 是一款强化css的辅助工具，它在css语法的基础上变量、嵌套、混合、导入等高级功能，可提高开发效率。
sass有两种语法格式，首先是scss，是在css3的语法基础上进行拓展，所有css3语法在scss中都是通用的，同时加入sass的特色功能。此外，scss也支持大多数css hacks写法以及浏览器前缀写法，以及早期的IE滤镜写法，这种格式以.scss作为拓展名。
另一种也是最早的sass语法格式，被称为缩进格式（Indented Sass）通常简称“sass”，只是与scss相比个别地方采取了不同的表达方式。
使用：
定义变量（$width:5rem #box{width:$width})
混合器 （@Minxin class {

border-radius:5px; background:#f00;

}
.box{

@include class

}
具体更多用法参考文档sass官方文档。

• javascript基础

1、js有哪些数据类型：

原始数据类型 - String Number Boolean Undefined null
对象类型 - Array Function Object

null和undefined的区别 - undefined是一个特殊值，通常不是变量尚未赋值。null是在计算机中具有保留的值，用于指示指针不引用有效对象。可以把undefined作为空的变量，null看做是空的对象。
原始类型和引用类型的区别 - 基本类型指的是保存在栈内存中的简单数据段，
引用类型指的是那些保存在堆内存中的对象，意思是，变量中保存的实际上是只是一个指针，这个指针执行内存中的另一个位置，由该位置保存对象。
访问的方式也不同 - 基本类型是按值访问，操作也是他们的实际保存的值，
引用类型是按引用方式访问，当查询时，我们需要先从栈中读取内存地址，然后再找到保存在堆内存中的值。
复制的类型也不同 - 基本类型变量的复制，从一个变量向另一个变量复制时，会在栈中创建一个新值，然后把值复制到新变量分配的位置上。
引用类型复制，复制的是存储在栈中的指针，将指针复制到栈中为新变量分配的空间中，而这个指针副本和原指针执行存储在堆中的同一个对象；复制结束后，两个变量实际上引用同一个对象，因此改变其中一个，讲影响另一个。

2、如何理解prototype，什么时候用prototype
在javascript中，所有的对象都是Object的实例，并且会继承Object.prototype的属性和方法，那么，Object.prototype是所有对象的爸爸。我们在创建对象时，就会有一些已经定义好的属性，在定义函数时候，这个预定义的属性就是prototype,是函数的一个属性，是一个指向对象的指针。而定义一个普通对象时候，会生成一个__proto__,指向的是对象的构造函数prototype。
js中构造函数和实例之间有着微妙的关系，构造函数通过定义prototype来约定其实例的规格，再通过new来构造实例，他们的作用就是产生对象。通过new构造对象的特点是，obj的prototype指向了构造器的prototype属性。
什么时候用prototype呢？
使用prototype的好处是不会产生额外的内存，所有实例化后的对象都会从原型上继承这个方法，相当于公共方法，就是一个子类拥有父类的某些特性，又可以给自己添加一些独立的属性，而且不会影响父时使用prototype。
prototype通常来解决一个问题：对象的创建比较耗费资源，例如，对象创建的时候需要访问数据库、读取外部文件、需要使用网络。这些都是比较耗费时间和内存的。
写一个prototype小栗子：

function Parent(name){ this.drink = function(){ return 'I Can Drink\t' + name } } let parent = new Parent('red wine') console.log(parent.drink())//I Can Drink red wine function Person (name, age) { Parent.call(this,'beer') this.name = name; this.age = age; } Person.prototype.sayName = function() { return this.name } let person = new Person('sunny', 18) let person1 = new Person('cherry',28) console.log(person.sayName()) // sunny console.log(person1.drink())// I Can Drink beer

3.什么是闭包、使用场景有哪些、闭包会引起什么问题
概念：闭包就是一种可以重复使用变量而且不会造成全局变量污染的机制，它是一种特殊的对象。
它由两部分组成：函数以及创建该函数的环境。而环境是由闭包创建时在作用域中的任何局部变量组成。可以用来定义私有属性和方法。
小栗子：

function sum(){ let x = 1,y = 2; function res(){ //闭包 return x + y } return res //闭包函数 } let result = sum(); result() // 3

从上面的这个简单的闭包例子可以看出，在外部函数的内部创建一个内部函数。并且内部函数读取着外部函数作用域中定义的局部变量，而内部函数又作为外部函数的返回值。所以总结一下：闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域。
使用场景：需要设计私有变量和方法的时候。
举栗子：

function Person() { let name = 'sunny' this.getName = () => name } let person = new Person; person.name //undefined person.getName() // sunny

闭包引起的问题：正常情况下，一个函数的作用域和其所有变量在函数执行后都会被销毁，但是在创建一个闭包后，这个函数会一直保存，直到闭包不存在为止。也就是闭包函数会一直保存着父函数的执行期上下文。这样就会造成内存泄露。
举个栗子：

const handleDom = () => { let dom = document.getElementById('#el'); let id = dom.id; dom.onclick = () => { console.log(id) } dom = null; }

上面这个函数中的闭包函数里保存着一个HTML元素，这就意味着这个元素无法销毁，所以我们应该在操作完元素之后要主动销毁。
还有一个场景是缓存机制，栗子在下面：

(() => { let num = 0; setInterval(() => { console.log(num++); }, 1000) })() // 1 2 3 4 5 6 ....

这个就验证了是吗的说法：闭包函数会一直拿着外部函数的变量，并且不会销毁，所以会一直用着加1之后的最新值。

4.什么是浅拷贝和深拷贝？怎么实现一个深拷贝？
在这之前要先理解一下js的基本类型和引用类型的区别：
基本类型：直接存储在栈中的数据（String、Number、Boolean、Undefined、Null)
引用类型：是把该对象的引用地址存储在栈中，对象里的数据放在堆中（Array、Function、Object)
浅拷贝：只拷贝一层，不会拷贝对象的子元素，相当于直接赋值。
深拷贝：会克隆出一个对象，数据是相同的，但是引用地址不同。
举栗子说明：

let person = { name:'sunny', age:13, sayName:function(){ console.log(this.name) } } let person1 = person; console.log(person1) //和person的相同 person1.name = 'cherry' console.log(person1.name) //cherry console.log(person.name) //cherry

因为是引用的用一个地址，所以person1的改变也修改person的值；

深拷贝：
es6的 "..."可以实现一个深拷贝，其实也说不上深拷贝， 如果对象里面包含引用类型，也会失败。

let obj = { name:'sunny', age: 30, arr: [1,2,3,4] } let obj1 = obj // console.log(obj1) // obj1.name = 'cherry' // console.log(obj1) let copyObj = { ...obj } copyObj.name = 'cherry' copyObj.arr[0] = 8 console.log(copyObj) console.log(obj)//obj的arr被改变了 ，但是基本类型没有受到影响

深拷贝实例：

const deepClone = (val) => { let res; if (val && Array.isArray(val)) { res = []; val.forEach((item) => { res.push(deepClone(item)); }); } else if (typeof val === 'object' && val !== null) { res = {}; for (let key of Object.keys(val)) { res[key] = deepClone(val[key]); } } else { res = val; } return res; }

推荐教程：《JS教程》

위 내용은 기본적인 프론트엔드 지식의 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!