기본적인 프론트엔드 지식의 통합-JS 튜토리얼-php.cn

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

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

HTML에 대하여

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

DOCTYPE의 역할

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

HTML5에 어떤 새로운 태그와 장점이 추가되었나요?
페이지 또는 영역 헤더 정의

문서의 주요 내용 지정

페이지 하단 정의 또는 영역
기사

탐색 링크 정의
영역 정의

페이지 콘텐츠 부분 사이드바 정의
웹 페이지 또는 영역 섹션의 제목을 결합하는 데 사용됩니다
<그림> ;미디어 콘텐츠 및 제목 세트 정의

그림 요소 제목 정의
<주소>기사 소유자의 연락처 정보 정의

새 양식 태그 추가
날짜, 시간, 이메일, URL, 검색 및 기타 유형
비디오 태그

audio tag

장점: 다음에 따라 의미론을 사용합니다. 콘텐츠 태그의 구조화를 통해 개발자는 브라우저 크롤러 및 검색 엔진 구문 분석뿐만 아니라 더 잘 읽고 이해할 수 있습니다.
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")

4. 전역 선택기(*{})

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!