이 기사에는 수집할 가치가 있는 일부 웹 프런트엔드 인터뷰 질문이 요약되어 있습니다(답변 포함). 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
HTML, CSS 관련
1. 인터넷에서 가장 일반적으로 사용되는 이미지 형식은 무엇입니까? ps
가 jpeg 형식으로 저장되면 파일이 최소 로 압축됩니다. , CSS 상자 모델을 간략하게 설명하십시오. (바깥쪽 여백), border(테두리), padding(안쪽 여백), content (내용). 기본적으로 상자의 width
및 height
속성은
content
(content)의 너비와 높이를 설정합니다. 상자의 실제 너비는 다음과 같아야 합니다. +왼쪽 및 오른쪽 패딩+왼쪽 및 오른쪽 여백+왼쪽 및 오른쪽 테두리상자의 실제 높이는 콘텐츠 높이+상단 및 하단이어야 합니다. padding+상단 및 하단 여백+ 상단 및 하단 테두리
3. 비디오/오디오 태그 사용동영상: 동영상 태그 속성:
src
재생해야 할 동영상 주소너비/높이 재생할 동영상의 너비와 높이를 설정합니다. img 태그의 너비 및 높이 속성과 동일
autoplay
자동 재생 여부
컨트롤 컨트롤 막대 표시 여부
포스터 이전에 재생되지 않음 표시된 부스 사진
loop 반복 재생 여부
perload 비디오(캐시)를 autoplay Looking Con conflict로 미리 로드합니다.
autoplay
속성이 설정된 경우 과속
속성이 유효하지 않습니다.
음소거
무음 모드
Audio: Audio 속성은 비디오 속성과 유사하지만 width, height 및 poster 속성은 사용할 수 없습니다
4. HTML5의 새로운 콘텐츠는 무엇인가요?
멀티미디어 태그
5. Html5의 새로운 의미 태그는 무엇인가요?
시맨틱 태그의 장점: 1.접근성 향상 2.seo 3.유지 관리에 도움이 되는 명확한 구조
Header
page header mainmain page content footer페이지 하단
Navnavigation bar alongsidebar 기사 로딩 페이지 독립적인 콘텐츠 조각
Section은 과 동일합니다. p 그림로드 독립적 내용(위 그림 아래 텍스트) figcaption 그림 제목
Hgroup제목 조합 태그 표시 강조 표시 대화 상자 대화 상자 레이블 로드(반드시
open
과 일치해야 함) 속성) Embed플러그인 라벨 로드 비디오비디오 로드 audio오디오 로드(지원되는 형식
ogg
, mp3, wav)6 .Css3 새로운 기능 Border: border-radios
둥근 테두리 추가
border-shadow
: 상자에 그림자 추가
(수평 변위, 수직 변위, 흐림 반경, 그림자 크기, 그림자 색상,
insetr (내부
/
외부 그림자))
border-image: 테두리 이미지 설정 b 주문 이미지 -source
테두리 이미지 경로
border-image-slice
그림 테두리가 안쪽으로 기울어져 있습니다. Move
border-image-width
그림 테두리 너비
border-image-outset
테두리 이미지 영역이 테두리를 초과하는 양
border-image-repeat 이미지 테두리가 타일로 되어 있습니까? Background:Background-size Background image size
Background-origin
은 의 위치를 규정합니다. background-position
속성은
Background-clip
배경 그리기 영역을 지정합니다(
padding-box, border-box, content-box
).
)
그라디언트: 선형 그라데이션 () 선형 그라데이션
방사형 그라데이션
() 방사형 그라데이션
텍스트 효과:
Word-break
: 줄 바꿈 방법 정의
Word-wrap
: 긴 내용을 자동으로 줄 바꿈
Text-overflow: 수행해야 할 작업 지정 텍스트가 해당 요소를 오버플로하는 경우
Text-shadow: 텍스트 그림자(수평 변위, 수직 변위, 흐림 반경, 그림자 색상)
Transform:
Transform
2D3DTransform에 적용하면 요소를 회전, 크기 조정, 이동, 기울일 수 있습니다.
Transform-origin
요소 변환의 위치를 변경할 수 있습니다. (
xyz 변경 축) Transform 스타일
3차원 공간에서 중첩된 요소가 렌더링되는 방식 지정
2D변환 방법:
rot 먹었다rotation 번역해
(
x, y
)은 2차원 공간에서 요소의 변위를 지정합니다.
scale（ n) 스케일링 변환 정의 3D 변환 방법: Perspective(n
)은
3Dconversion 번역 회전 배율
전환: 전환 속성 전환 속성 이름
전환 기간 전환 효과를 완료하는 데 걸리는 시간
전환 타이밍 기능 전환 효과의 속도 지정
전환 지연 지정 전환할 시간 효과
애니메이션: animation
Animation-name for @keyframesanimation-name
애니메이션 지속 시간 시간 애니메이션에 소요되는 시간
animation-timing-function
애니메이션이 사이클을 완료하는 방법
animation-delay
애니메이션이 시작되기 전의 지연 간격
anim 반복 횟수
애니메이션 재생 횟수
animation-direction
애니메이션을 역순으로 재생할지 여부
7. 각각의 장점을 알려주세요.
높이 축소:
모든 하위 요소가 부동 상태이고 상위 요소에 높이가 설정되지 않은 경우 상위 요소의 높이가 축소됩니다.
플로팅 메소드 지우기
1: 상위 요소의 높이를 별도로 정의
장점: 빠르고 간단하며 코드가 적음
단점: 반응형 레이아웃을 수행할 수 없음
플로트 웨이 지우기
2: 상위 정의 overflow: hidden: zoom: 1(ie6 호환용)
장점: 간단하고 빠르며, 코드가 적고, 호환성이 높음
단점: 남는 부분이 숨겨져 있으므로 레이아웃할 때 주의하세요
플로팅 방식 지우기
3: 부동 요소 뒤에 빈 태그 추가 both: height: overflow: hidden 장점: 간단하고 빠릅니다. 코드가 적고 호환성이 높습니다
, 글꼴 변형 , font-weight, text-꾸밈, text-transform, direction
문자 간격
단락 간격 줄 높이글꼴 색상 . .. 4. 이미지 로딩이 너무 많아서 최적화할 수 있는 방법이 없나요? 1. 이미지의 보이지 않는 영역에 스크롤 막대 이벤트를 추가하여 이미지 위치와 브라우저 상단 사이의 거리를 결정하고 페이지가 더 작은 경우 이미지 지연 로딩. 후자보다 로딩이 우선입니다2 .이미지 사전 로딩 기술을 사용하여 현재 표시된 이미지의 이전 및 다음 사진을 먼저 다운로드하세요3.
csssprite
또는
를 사용하세요. svgsprite
15. 인라인 요소/블록 수준 요소란 무엇입니까?
인라인 요소: 인접한 인라인 요소는 같은 줄에 배열되며 한 줄만 차지하지 않습니다 너비와 높이 설정이 잘못되었습니다.span
블록 수준 요소: 한 줄만 차지합니다너비, 높이 등의 속성을 설정할 수 있습니다p
가변 요소: 상황별 경고를 기반으로 요소가 블록 요소인지 인라인 요소인지 결정합니다.
블록 수준 요소: p h1- h6 hr p ul ol table address blockquote dir from menu
인라인 요소: a br I em img input selectspan sub sup u textarea
변수 요소: button del iframe ins
16 .브라우저의 표준 모드와 이상한 모드의 차이점은 무엇입니까?
표준 모드: 브라우저는 W3C 표준에 따라 코드를 구문 분석하고 실행합니다.
이상 모드: 브라우저는 서로 다른 방식으로 코드를 구문 분석하고 실행합니다. 다르게는 이상한 모드라고 합니다
차이:
이상한 모드에서는 상자 모델이 이상한 상자 모델입니다표준 모드에서는 표준 상자 모델입니다
수직 정렬 그림 요소
인라인 요소와 table-cell 요소의 경우 표준 모드에서 vertical-align 속성의 기본값은 baseline이고, 이상한 모드에서는 table셀의 이미지는 vertical-align 속성의 기본값이 bottom이므로 이미지 하단에 몇 픽셀의 공간이 생깁니다
글꼴
css 요소 font 속성은 모두 상속 가능합니다. 이상한 모드에서는 table 요소의 경우 글꼴의 일부 요소를 다른 캡슐화된 요소에서 상속할 수 없습니다. , 특히 font-size 속성
인라인 요소의 크기
표준 모드에서는 대체되지 않은 인라인 요소를 대문자로 맞춤 설정할 수 없습니다. 요소의 너비와 높이는 요소의 크기에 영향을 줍니다
요소
의 백분율 높이 요소가 백분율 높이를 사용하는 경우 표준 모드에서 높이는 콘텐츠 변경에 따라 달라집니다. 이상하게 손실됩니다. , 백분율이 정확하게 적용됩니다.
요소 오버플로 처리
표준 모드에서 overflow의 기본값은 visible입니다. 확장된 box, 즉 요소의 크기는 콘텐츠에 따라 결정되며 오버플로 내용은 잘리지 않습니다. 요소 상자는 오버플로 콘텐츠
17을 포함하도록 자동으로 조정됩니다. 여백과 패딩이 사용되었나요?
Padding
자체 여백과 자체 내용 사이의 거리
border 외부에 공간을 추가해야 할 경우 margin을 사용하고, border 내부에 공간을 추가해야 할 경우 padding
을 사용하세요. 18. 의 속성은 무엇입니까? 유연한 상자 레이아웃? 간략한 설명
Flex-direction: 유연한 컨테이너의 하위 요소 배열(주축 배열)
Flex-wrap: 하위 요소를 래핑할지 설정 상위 컨테이너를 초과하는 경우 플렉스 박스
Flex-flow: flex-direction 및 flex-wrap
Align-item의 약식입니다. 측면 축의 플렉스 박스 요소 정렬
Align-content: 행 정렬 설정
Justify-content: 기본 축의 플렉스 박스 요소 정렬 설정
19. 라벨을 비활성화하는 방법
Adddisabled Attributes
20. Flex 레이아웃 원칙
은 flex 속성을 추가하여 하위 상자의 위치와 배열을 제어하는 것입니다. parent box
21.Px, rem, em 차이
Px, 절대 길이 단위, 픽셀 px은 모니터 화면 해상도
em 상대 길이 단위입니다. , 현재 개체 내 텍스트의 글꼴 크기에 비례
em 값은 고정되어 있지 않습니다
em中모든 글꼴은 상위 요소의 크기에 따라 결정됩니다
html
루트 요소의 font-size
1em=1rem=16px inbody에 상대적인 rem font-size
을
에 추가하세요. : 62.5% 이것은 원래 px 값을 10 더하기 em으로 나눈 값입니다. 그게 바로 22입니다. 웹 페이지의 3계층 구조(? html 또는 xhtm
마크업 언어) 성능(
css
스타일 시트) 행동(
js) 23. 미디어 문의에 대해 간략하게 설명해주세요
미디어 쿼리는 media 속성을 확장합니다. 은 적응형 목적을 달성하기 위해 다양한 미디어 유형에 따라 다양한 css 스타일을 설정하는 것입니다.
24.Rem 단점
예: 참신한 웹사이트, 화면이 작을수록 모바일 장치에서 rem을 사용하면 확실히 더 작은 텍스트가 표시되므로 기사를 읽는 것이 특히 번거롭습니다
25. 호환성 첫 번째 단계에서 몇 가지 공통 사항
26. 세로 및 가로 센터링 방법
27 양쪽에 고정된 중간 적응형 3열 레이아웃 방법
1. 여백 음수 값 방법: 왼쪽 및 오른쪽 열은 모두 왼쪽으로 부동하고 왼쪽 및 오른쪽 열은 음수 margin 값을 사용합니다. 중간 열은 너비가 100%
2인 부동 요소로 래핑됩니다. 자체 부동 방식: 왼쪽 열은 왼쪽으로 부동하고, 오른쪽 열은 오른쪽으로 부동하며, 중간 열이 배치됩니다. last
3. 절대 위치 지정 방식: 왼쪽 열과 오른쪽 열은 절대 위치 지정을 채택하고 페이지 중앙의 본문 열은 왼쪽과 오른쪽으로 각각 고정됩니다. margin 값. 4.flex table
layout28.Doctype 함수문서 유형 선언Javascript 관련
1. Js의 기본 데이터 유형은 무엇인가요?
문자열 String 숫자 값
Number
Boolean
boolean null undefine
Object
Array
2. 완전한
AJAX 요청에는 5단계가 포함됩니다.
XMLHTTPRequest 생성 객체는 open
메소드를 사용하여
http
요청을 생성하고 요청을 설정합니다. 주소
xhr. open
(
get/post
, url,
async
,
true(비동기), false(동기))은 종종 처음 세 개를 사용합니다. 매개변수
전송된 데이터를 설정하려면
sendSend Request 이벤트 등록(ajax에 대한 이벤트 설정) 응답을 받고 페이지를 업데이트하세요
3. 데이터가 NaN인지 판단하는 방법
ㅋㅋㅋ
typeof를 사용하여 number 유형인지 확인하고 isnan
을 만족하는지 확인합니다.
NaN을 사용하는 것은 그 자체의 n과 동일하지 않은 유일한 기능입니다! 용 == nObject.is () =ES6에서 제공하는 메소드 (두 값이 같은지 판단) n == nan
4. 차이점 Js에서는 null이고 정의되지 않음 같은 점: if로 판단하면 둘 다 false
로 변환됩니다. 차이점:
number변환된 값이 다릅니다 번호(null
)은
0이고 숫자
(
undefine
)은 NaNNull
으로 표시됩니다. 값이 정의되었지만 이 값은 Null 값입니다.
정의되지 않음 변수가 선언되었지만 값이 할당되지 않았습니다. 5. 클로저란 무엇입니까? 특징은 무엇입니까? 페이지에 어떤 영향을 미칠까요? 클로저는 간단하게 함수 내부에 정의된 함수로 이해될 수 있습니다. 내부 함수 중 하나가 이를 포함하는 외부 함수 외부에서 호출되면 클로저가 형성됩니다. 기능: 함수 중첩 함수.
외부 매개변수와 변수는 함수 내에서 참조될 수 있습니다.
매개변수와 변수는 가비지 수집 메커니즘에 의해 재활용되지 않습니다.
함수 내부의 변수를 읽으려면
을 사용하세요.
이러한 변수의 값은 항상 메모리에 유지되며 외부 함수 후에 자동으로 지워지지 않습니다. 호출됩니다.
이점:
변수는 오랫동안 메모리에 상주합니다.
전역 변수의 오염을 방지합니다.
비공개 회원의 존재;
단점: 메모리 누수 발생
6 Js의 일반적인 메모리 누수:
예기치 않은 전역 변수
잊혀진 타이머 또는 콜백 함수
참조 출처 DOM
클로저
7. 이벤트 위임이란 무엇인가요? 이벤트 소스를 결정하는 방법 (Event.target 누가 이벤트 소스라고 부르든)
JS고급 말하기: 이벤트 위임은 이벤트 버블링을 사용하고 특정 이벤트의 모든 이벤트를 관리하는 타임 핸들러만 개발하는 것입니다. 유형 .
이벤트 프록시라고 하는 이벤트 위임은 js에서 이벤트를 바인딩하는 데 매우 일반적으로 사용되는 기술입니다. 이벤트 위임은 원래 하위 요소에 바인딩해야 하는 응답 이벤트를 상위 요소에 위임하는 것입니다. 이벤트 모니터링 기능은 이벤트 위임의 원칙이 DOM 요소
의 이벤트 버블링입니다.
이벤트가 트리거된 후 하위 요소와 상위 요소 간에 전파됩니다. 이 전파는
캡처 단계(window 개체에서 대상으로 수행)의 세 단계로 나누어집니다. 노드(외부에서) 내부), 이 단계는 어떤 이벤트에도 응답하지 않습니다), 대상 단계(대상 노드에서 트리거됨), 버블링 단계(대상 노드에서 다시 window 객체로 수행됨)(내부에서 외부)), 이벤트 위임/이벤트 프록시는 이벤트 버블링 메커니즘을 사용하여 내부 레이어가 외부 레이어에 응답해야 하는 이벤트를 바인딩합니다
9 로컬 저장소와 쿠키의 차이점
쿠키 는 쿠키를 의미합니다. 이름에서 알 수 있듯이 cookie 는 실제로 매우 작으며 크기는 약 4KB로 제한됩니다. 주요 목적은 로그인 정보를 저장하는 것입니다. 예를 들어 특정 웹사이트 마켓에 로그인하면 "Remember Password"가 표시되는데, 이는 일반적으로 섹션을 저장하여 사용자의 신원을 식별하는 것입니다. 쿠키 데이터에서 달성합니다.
localStorage
localStorage 는 HTML5 표준에 새로 추가된 기술입니다. 일찍이 IE 6 시대에는 로컬 저장소로 사용되는 userData 라는 것이 있었습니다. 그 당시에는 브라우저 호환성을 고려하면 Flash를 사용하는 것이 더 일반적인 솔루션이었습니다. 요즘에는 대부분의 브라우저에서 localStorage 를 지원합니다. 웹 사이트에서 IE6+을 지원해야 한다면 userData 을 솔루션으로 사용하는 것이 좋습니다.
sessionStorage
sessionStorage 는 localStorage 와 인터페이스가 비슷하지만 데이터 저장 수명주기가 localStorage 와 다릅니다. 백엔드 개발을 해본 학생들은 Session 이라는 단어의 의미가 문자 그대로 " Session " 으로 번역된다는 것을 알아야 합니다. 그리고 sessionStorage 는 프런트엔드 개념입니다. 현재 세션의 데이터 중 일부만 저장할 수 있으며 페이지를 새로 고쳐도 데이터는 그대로 유지됩니다. 하지만 페이지가 닫히면 sessionStorage 의 데이터가 삭제됩니다.
세 가지의 유사점과 차이점
기능
Cookie
localStorage
sessionStorage
데이터 수명
은 일반적으로 서버에서 생성되며 만료 시간을 설정할 수 있습니다. 브라우저 측에서 쿠키가 생성된 경우 기본적으로 브라우저를 닫은 후 만료됩니다
삭제하지 않으면 영구적으로 저장됩니다
현재 세션에서만 유효합니다. 페이지나 브라우저를 닫습니다. 삭제된 후
4K
대략
은 일반적으로
5MB
입니다.
소통하기 서버 측
은 매번
HTTP
헤더에 담겨 있습니다. cookie를 사용하여 너무 많은 데이터를 저장하면 성능 문제가 발생합니다만 저장됩니다. 클라이언트(예: 브라우저)에서 서버와의 통신에 참여하지 않습니다
사용 용이성
프로그래머가 직접 캡슐화해야 하며 원본
Cookie
인터페이스는 다음과 같습니다. 친숙하지 않음source 원시 인터페이스는 허용할 수 있으며
Object
및 Array에 대한 더 나은 지원을 위해 다시 캡슐화할 수도 있습니다.
10.ES6의 새로운 기능
const 및 let, 템플릿 문자열, 화살표 함수, 함수 매개변수 기본값, 객체 및 배열 구조 분해, for...of 및 for...in, ES6의 클래스
11. Let, var 및 const
Var 변수의 차이점은 선언된 변수가 window에 마운트되는 반면, let 및 const에 의해 선언된 변수는 마운트되지 않습니다. 변수 승격이 있습니다.
Var에 의해 선언된 변수의 경우 let 및 const
에 대한 변수 승격이 없습니다. 동일하게 선언 이름 변수 let 및 const는 Let 및
const 선언이 블록 수준 범위 Let을 형성할 수 없습니다. 일시 데드존
Const한번 선언된 값은 반드시 할당되어야 합니다.
null은 선언 후에는 수정할 수 없습니다. 12. 배열 메소드에 대해 간략히 설명해주세요
push()뒤에서 요소를 추가하면 반환 값은 추가된 배열의 길이입니다
arr.pop()뒤에서 요소를 삭제하세요. 1이면 반환값은 삭제된 요소
arr.shift()앞에서 요소를 삭제하며, 1개의 요소만 삭제할 수 있습니다. 반환값은 삭제된 요소
arr.unshift()입니다. 앞부터 요소를 추가하면 반환값은 추가 후 배열의 길이가 됩니다
arr.splice(i,n)i(인덱스 값)부터 시작하는 요소를 삭제합니다. 반환값은 삭제된 요소
arr.concat()두 배열을 연결하고 반환값은 연결 후의 새 배열
str.split() 문자열을 배열로 변환
arr.sort() 배열을 정렬합니다. 반환 값은 정렬된 배열입니다. 기본값은 숫자의 크기가 아닌 가장 왼쪽 숫자에 따라 정렬하는 것입니다
arr.reverse( )배열을 뒤집으면 반환값은 역배열이 된다
arr.slice(start,end)인덱스 값 시작부터 인덱스 값 끝까지 배열을 잘라내고, 끝 인덱스 값을 제외하고, 반환 value는 잘라낸 배열입니다
arr.forEach(callback)배열을 탐색하고 반환하지 않습니다. 반환이 있어도 값이 반환되지 않으며 원래 배열에 영향을 미칩니다
arr. map(callback)Map 배열(트래버스 배열), 반환과 함께 새 배열을 반환합니다.
arr.filter(callback)배열을 필터링하고 요구 사항을 충족하는 배열을 반환합니다.
13. Json에서 키-값 쌍을 추가/삭제하는 방법
14. 객체 지향적입니다
객체 지향은 프로세스 지향을 기반으로 하는 아이디어입니다. 즉, 객체 지향은 객체를 통해 기능을 구현하고 객체에 기능을 캡슐화하여 객체가 특정 세부 사항을 구현하도록 하는 것입니다. 최우선 과제는 데이터의 최적화이므로 작업을 보다 편리하게 만들고 프로세스를 단순화합니다.
Js 자체에는 class 유형이 없지만 각 함수에는 prototype 속성이 있고, prototype은 객체를 가리키며, 함수가 생성자 역할을 할 때, 프로토타입은 class
과 유사한 역할을 합니다. 객체 지향에는 세 가지 특성이 있습니다. 캡슐화(객체의 속성 및 구현 세부 정보를 숨기고 외부 세계에 대한 공개 액세스 제공),
상속(코드 재사용성 향상, 상속은 다형성의 전제), 다형성(상위 클래스 또는 인터페이스에 의해 정의된 참조 변수는 하위 클래스 또는 특정 구현 클래스의 인스턴스 객체를 가리킬 수 있음)
15. and constructors
생성자도 일반 함수와 동일하게 생성되지만 new
호출 시 생성자의 첫 글자를 대문자로 표기하는 것이 관례입니다. , 생성자 내부에 새 개체가 생성됩니다. 이는 인스턴스입니다. 일반 함수는 새 개체를 생성하지 않습니다. 일반 함수는 호출 함수의 객체를 가리킵니다(객체가 호출되지 않으면 기본값은 window
)
생성자의 기본 반환 값은 생성된 객체(즉, 인스턴스)입니다. , 일반 함수의 반환 값은
return 문에 의해 결정됩니다. 생성자의 함수 이름은 클래스 이름*****16과 동일합니다. 프로토타입/프로토타입 체인 / (프로토타입) 상속에 대해 간략하게 설명해주세요***
프로토타입이란 무엇입니까? 모든 객체 인스턴스에는 프로토타입 객체라고도 불리는 프로토타입이 있습니다. 이 프로토타입 객체는 생성자를 가리킵니다. 객체의 내장 속성인 _proto_에서 프로토타입이 가리키는 객체, 즉 모든 객체는 생성자에 의해 생성되지만 모든 객체에 프로토타입이 있는 것은 아니며 메소드에만 프로토타입이 있습니다. 프로토타입 체인이 무엇인가요?
프로토타입 체인의 기본 아이디어는 프로토타입을 사용하여 한 참조 유형이 다른 참조 유형의 속성과 메서드를 상속하도록 하는 것입니다. 각 생성자에는 프로토타입 개체가 있고, 각 프로토타입 개체에는 생성자에 대한 포인터가 있으며, 인스턴스에는 프로토타입 개체에 대한 내부 포인터가 포함되어 있다는 것을 알고 있습니다.
프로토타입 체인의 핵심은 종속 개체의
_proto_에 대한 포인터입니다. 속성 자체가 존재하지 않는 경우 개체를 생성하는 생성자는
Object에 도달할 때까지 레이어별로 추출됩니다. .지정된
_proto_
이 없습니다.
_proto_
은 기본적으로 prototype을 찾고 있으므로 이 체인에서 생성자의 prototype만 찾으면 됩니다. Object.prototype에는 _proto_ 속성이 없으며 == null입니다.
각 생성자에는 프로토타입 객체가 있습니다. 프로토타입 객체에는 생성자에 대한 포인터가 포함되어 있으며, 인스턴스에는 프로토타입 객체 내부에 대한 포인터가 포함되어 있습니다. 프로토타입 객체(1)를 다른 프로토타입 객체(2)의 인스턴스와 동일하게 만듭니다.
이때 프로토타입 객체(2)는 프로토타입 객체(1)에 대한 포인터를 포함합니다.
프로토타입 객체의 인스턴스를 프로토타입 객체(2)는 프로토타입 객체(3)와 동일합니다. 이러한 계층별 진행은 인스턴스와 프로토타입의 체인을 형성합니다. 이것이 프로토타입 체인의 개념입니다.
각 생성자는 프로토타입 객체를 가지며, 프로토타입 객체에는 생성자(생성자)에 대한 포인터가 포함되어 있고, 인스턴스 객체에는 프로토타입 객체(__proto__)에 대한 내부 포인터가 포함되어 있습니다. 프로토타입 객체가 다른 프로토타입 객체의 인스턴스와 동일한 경우 프로토타입 객체에는 다른 프로토타입(__proto__)에 대한 포인터가 포함되고, 다른 프로토타입에도 다른 생성자(생성자)에 대한 포인터가 포함됩니다. 다른 프로토타입이 다른 유형의 인스턴스라면...이것은 인스턴스와 프로토타입의 체인을 형성합니다. 프로토타입 체인이라고도 합니다
프로토타입 상속은 js의 상속 방식입니다. 프로토타입 체인은 상속을 구현하는 주요 방법입니다,기본 아이디어는 프로토타입을 사용하여 하나의 참조 유형이 다른 참조 유형의 속성을 상속하도록 하는 것입니다. 참조 유형 및 방법 ,
프로토타입 상속: 프로토타입의 멤버를 관련 개체에서 공유할 수 있는 기능을 사용하여, 상속을 구현하는 방식을 프로토타입 상속이라고 합니다.
17. Promise의 이해
1. Promise란 무엇인가요? Promise를 사용하여 어떤 문제를 해결하나요? Promise는 약속, 일정 기간 후에 결과를 제공하겠다는 약속을 의미한다는 것을 우리 모두 알고 있습니다.
Promise
는 콜백 함수 및 event보다 더 합리적이고 강력한 비동기 프로그래밍 솔루션입니다. 구문적으로 말하면,
promise
는 비동기 작업의 메시지를 얻을 수 있는 개체입니다. 2.
promise
에는 세 가지 상태가 있습니다: 보류 중 초기 상태는 대기 상태라고도 합니다. 성공 상태, 거부됨실패 상태; 한번 변경된 상태는 다시 변경되지 않습니다. promise 인스턴스를 생성한 후 즉시 실행됩니다. 3. Promise
1.
Promise
의 상태는 외부 세계의 영향을 받지 않습니다. 2.
Promise
의 상태는 다시 변경되지 않습니다. 언제든지 얻을 수 있습니다. 결과적으로 상태는 되돌릴 수 없습니다,네. Promise의 세 가지 단점
1)
취소할 수 없습니다
Promise,한 번 생성되면 즉시 실행됩니다. 중도 취소 불가2)
콜백 기능을 설정하지 않으면
Promise 내부에서 발생한 오류는 외부에 반영되지 않습니다.3)
pending(대기) 상태일 때 상태, 현재 진행 상황이 어느 단계인지 알 수 없습니다. 예 방금 시작했거나 곧 완료될 예정입니다 promise 는 두 가지 문제를 해결하는 데 사용됩니다.1
.
콜백 지옥, 코드 유지 관리가 어렵고 첫 번째 함수의 출력이 두 번째 함수인 경우가 많습니다. 이러한 입력 현상은 2
.promise
여러 동시 요청을 지원하고 동시 요청에서 데이터를 얻을 수 있습니다이 약속은 비동기 문제를 해결할 수 있습니다. Promise 자체가 비동기적이라고 말할 수는 없습니다
19 async
Async의 사용법을 간략하게 설명해주세요. 발전기 's*를 async로 바꾸고, yiled를 await으로 바꾸고, 함수 앞에 async을 추가해야 합니다. 기다려 비동기 작업 방법 앞에 키워드가 있습니다. 즉, 잠시 기다렸다가 실행 후 계속하세요. 참고:
await
는 async 함수에서만 실행할 수 있습니다. 그렇지 않으면 오류가 보고됩니다. 잘못된 결과가 반환되면 그렇지 않으면 예외 처리를 하면 오류가 보고되므로 try..catch를 사용하여 예외를 catch할 수 있습니다
20.. URL 입력부터 페이지 로딩 완료, 페이지 표시까지의 과정은 어떻게 되나요?
은 4단계로 나뉩니다: 1. URL 요청을 보낼 때, URL이 웹 페이지의 URL이든 웹 페이지의 각 리소스 URL이든 상관없이 브라우저는 이 요청을 처리하는 동시에 원격 DNS 서버에서 DNS 쿼리
를 시작합니다. 이를 통해 브라우저는 요청에 해당하는 IP 주소를 얻을 수 있습니다.
2.
브라우저와 원격 웹 서버는 TCP 3방향 핸드셰이크
를 통해 협상하여 TCP/IP 연결을 설정합니다. 핸드셰이크에는 동기화 메시지, 동기화-응답 메시지 및 응답 메시지가 포함됩니다. 이 세 가지 메시지는 브라우저와 서버 간에 전달됩니다. 이 핸드셰이크에서 클라이언트는 먼저 통신 설정을 시도한 다음 서버가 클라이언트의 요청에 응답하고 수락하고 마지막으로 클라이언트가 요청이 수락되었다는 메시지를 보냅니다.
3. TCP/IP 연결이 설정되면 브라우저는 연결을 통해 원격 서버에 HTTP GET 요청을 보냅니다. 원격 서버는 리소스를 찾아 HTTP 응답으로 반환합니다 4. 이 시점에서 웹 서버는 리소스 서비스를 제공하고 클라이언트는 리소스 다운로드를 시작합니다.
jQuery관련 지식
Css 전처리 Sass Less란 무엇인가요? 왜 사용하는가
Sass 및
less
는 둘 다 css
전처리기이며, 이는 결국
css의 추상화 계층인 특수 구문으로 로 컴파일됩니다. css, less는 변수, 상속, 중첩 등 동적 언어의 기능을 css에 제공하는 동적 스타일 언어입니다. Less는 클라이언트나 서버에서 실행할 수 있습니다(node의 도움 필요)Js에서 .call()과 .apply()의 차이점apply : 현재 개체를 다른 개체로 바꾸려면 개체의 메서드를 호출합니다.
call
: 개체의 메서드를 호출하여 현재 개체를 다른 개체로 바꿉니다.
정의에서 알 수 있듯이 호출과 적용은 모두 객체를 호출하고 현재 객체를 다른 객체로 바꾸는 방법입니다. 차이점은 전달된 매개변수에 있습니다. Apply에는 최대 두 개의 매개변수(새 this 개체와 배열 argArray)만 있을 수 있습니다. arg가 배열이 아닌 경우 오류가 보고됩니다. 두 가지 방법으로 효과는 정확히 동일합니다. 호출 및 적용 기능은 자신의 호출 방법과 마찬가지로 다른 사람의 호출 방법을 빌려오는 것입니다.
차이점: 메서드에 전달되는 매개변수가 다릅니다
왜 도메인 간 문제가 발생합니까? /동일 오리진 전략에 대해 간략하게 설명해주세요 크로스 도메인 문제 원인 :
프론트엔드와 백엔드 분리 모드에서 프론트엔드와 백엔드의 도메인 이름이 일치하지 않고, 크로스 도메인이 발생하는 경우 도메인 액세스 문제가 발생합니다. 요청 프로세스 중에 데이터를 반환하려는 경우 일반적으로 게시/가져오기 요청이므로... 교차 도메인 문제가 발생합니다
교차 도메인 문제는 JavaScript의 동일 출처 정책에서 발생합니다. 프로토콜 + 호스트 이름 + 포트 번호(존재하는 경우)만 동일하면 상호 접속이 허용됩니다. 즉, 자바스크립트는 자신의 도메인에 있는 리소스에만 접근하고 운영할 수 있고, 다른 도메인에 있는 리소스에는 접근하고 운영할 수 없습니다.
동일 출처 정책은 NetScape에서 제안한 잘 알려진 보안 정책입니다. 소위 동일한 출처는 동일한 프로토콜, 도메인 이름 및 포트를 나타냅니다. 보안상의 이유로 브라우저는 이 도메인 이름에서만 인터페이스 상호 작용을 허용합니다. 다른 소스의 클라이언트 스크립트는 명시적인 승인 없이는 상대방의 리소스를 읽거나 쓸 수 없습니다.
페이지 로딩 시간을 줄이기 위해 3가지 방법으로 출력해주세요
1.
이미지 최적화
2. 이미지 형식 선택(GIF: 더 적은 색상 제공, 일부 색상 조합 가능 덜 까다로움 장소)
3.
CSS 최적화(예: margin-top, margin-left...)
4. URL 뒤에 슬래시 추가(예: www. campr.com/ 디렉토리는 이 디렉토리가 어떤 파일 유형이나 디렉토리인지 결정합니다.) cdn 호스팅
5. 높이와 너비를 표시합니다(브라우저가 이 두 매개변수를 찾지 못하면 다음에서 이미지를 다운로드해야 합니다). 동시에 크기를 계산하는 동안 이미지가 많으면 브라우저가 페이지를 지속적으로 조정해야 합니다. 이는 속도에 영향을 미칠 뿐만 아니라 탐색 경험에도 영향을 미칩니다.
브라우저가 높이 및 너비 매개변수를 알고 나면. , 이미지가 일시적으로 표시되지 않더라도 페이지가 표시되지 않습니다. 그러면 이미지 공간이 확보되고 다음 콘텐츠가 계속 로드되므로 로딩 시간이 더 빨라지고 탐색 환경이 더 좋아집니다.)
6.
http 요청 줄이기(파일 병합, 이미지 병합)
이것은
을 가리킵니다. JavaScript에서 이는 일반적으로 우리가 실행 중인 함수 자체 또는 함수가 속한 개체를 가리킵니다.
global this → Window
객체에서 this를 가리킴 → 이벤트에서 자신을 가리킴
this → 이벤트 객체를 가리킴
jsonp는 무엇이고 어떻게 작동하나요? 왜 진짜가 아닌가? ajax
Jsonp
는 실제로 크로스 도메인 솔루션입니다.
Js
도메인 간 데이터 요청은 허용되지 않지만 js 스크립트에 대한 js 도메인 간 요청은 가능합니다.
따라서 요청할 데이터를 js 문으로 캡슐화하고 메서드 호출을 수행할 수 있습니다. 이 스크립트는 도메인 전체에 걸쳐 js 스크립트를 요청하여 얻을 수 있습니다. js 스크립트는 가져온 후 즉시 실행됩니다.
데이터를 메서드에 매개변수로 전달할 수 있습니다. 데이터를 얻을 수 있습니다. 이는 도메인 간 문제를 해결합니다.
jsonp원칙: (스크립트 태그의 동적 생성, 콜백 함수)
js 요청에서 브라우저는 스크립트 태그를 통해 src 도메인 간 요청을 허용하며, 이는 다음에서 요청할 수 있습니다. 결과에 콜백 메소드 이름을 추가하고 요청 페이지에서 메소드를 정의하여 크로스 도메인 요청의 데이터를 가져옵니다.
왜 실제 ajax가 아닌가?
1, ajax와 jsonp, 이 두 기술은 호출 방법이 매우 유사해 보이고 목적도 동일합니다. 둘 다 URL을 요청한 다음 서버를 반환합니다. 데이터가 처리되므로 jquery와 ext 및 기타 프레임워크는 jsonp를 ajax 형식으로 캡슐화합니다.
2, 그러나 ajax와 jsonp는 본질적으로 다릅니다. ajax의 핵심은 XmlHttpRequest를 통해 이 페이지의 콘텐츠를 얻는 것이고, jsonp의 핵심은 서버에서 제공하는 js 스크립트를 호출하기 위해 <script> 태그를 동적으로 추가하는 것입니다. </script>
3그래서 사실 ajax와 jsonp의 차이점은 크로스 도메인인지 여부가 아닙니다. Ajax도 서버 측 프록시를 통해 크로스 도메인을 구현할 수 있으며 jsonp 자체는 데이터 획득을 배제하지 않습니다. 같은 도메인에 있습니다.
4 또한 jsonp는 ajax와 마찬가지로 메소드 또는 비필수 프로토콜이므로 데이터를 전송하기 위해 반드시 json 형식일 필요는 없지만 원하는 경우 문자를 변경할 수 있습니다. 이는 jsonp가 공공 서비스를 제공하는 데 도움이 되지 않습니다.
배열에서 중복 항목을 제거하는 2가지 이상의 방법을 익혀주세요
indexof() 메서드를 사용하세요.
lastindexof을 사용하세요. () 메서드 및 indexof 방법은 동일합니다 indexof는 머리에서 일치하고 lastindexof는 꼬리에서 일치
ES6의 set 구조 세트 중복 데이터를 허용하지 마세요
정렬 방법을 사용하여 원래 배열을 먼저 정렬한 다음 인접한 배열과 비교하면 새 배열에 저장됩니다.
filiter 및 indexof 메소드
ES6 의 set 및 스프레드 연산자
를 사용하세요.
set 및 Array를 사용하세요. .from() 메서드 array.from은 set 구조를
splice
를 사용하여 배열
으로 변환할 수 있습니다. 루프
includes 메소드
를 사용하여 깊고 얕은 카피란 무엇이며 어떻게 달성하나요?
깊은 복사: 포인터 할당 및 내용 복사,
얕은 복사: 단순한 포인터 할당
배열의 얕은 복사본:배열인 경우 배열의 일부 메서드를 사용하여 구현할 수 있습니다. 슬라이스(), concat()는 새 배열의 특성을 반환하여 복사를 구현합니다.
array deep copy를 구현하려면 스프레드 연산자 스프레드를 사용하세요. JSON.parse(JSON.stringify())배열뿐만 아니라 객체에도 적용됩니다. 함수, 정의되지 않음 및 기호는 복사할 수 없습니다.
js가 약한 유형의 언어인 이유
강한 유형의 언어에 비해 약한 유형의 언어 구현에는 int char float Boolean 다른 유형과 같은 많은 유형의 변수가 있습니다. 상호 변환에는 때때로 강제 변환이 필요합니다. 그리고 jacascript에는 var이라는 한 가지 유형만 있습니다. 변수에 값을 할당하면 유형이 자동으로 결정되고 변환되므로 약한 유형의 언어입니다.
less를 CSS로 변환하는 방법
node을 사용하여 less 파일을 css 파일
으로 생성 webstorm으로 자동 생성됨
echarts 가장 많이 사용되는 것은 무엇입니까
차트 및 차트 조합
For 루프와 맵 루프의 차이점은 무엇입니까
For 객체 자체를 탐색하고 열거 가능한 속성을 상속합니다. 즉, 프로토타입 체인의 어떤 속성이 포함되나요?
Map 메서드는 빈 배열을 감지하지 않으며 새 배열을 반환하며 원본 배열에는 영향을 주지 않습니다. write 상속을 사용하여 간단한 클래스를 만드는 세 가지 방법이 있습니다: function 및
this
keywords
prototype method
Use
을 사용하여 프로토타입 및
this
키워드
object.create() 메소드를 사용하여
을 생성합니다. 상속에는 6가지 유형이 있습니다.
프로토타입 상속
빌린 생성자 상속
결합 상속
프로토타입 상속
기생 상속
기생 결합 상속
동기화 비동기식과 비동기식의 차이점 차단/차단과 비차단의 차이점
동기식(차단)
비동기식(비차단)
예: 동기화, 저녁 시간까지 함께 일합니다. , 같이 저녁 먹으러 전화할 거예요. 당신은 매우 바쁘기 때문에 우리가 함께 식사하러 가기 전에 당신이 일이 끝날 때까지 앉아서 기다릴 것입니다. , 그러니까 먼저는 혼자 먹고, 그다음엔 다 먹고 나서 먹을게요
동기식(차단) 비동기식(비차단) 이 두 가지는 호출 결과를 기다리는 동안 프로그램 상태에 중점을 두고
다시 그리기 및 리플로우란 무엇입니까
리플로우: when렌더 트리요소의 크기, 레이아웃, 숨기기 등의 변경으로 인해 일부 또는 전체를 다시 작성해야 하는 것을 리플로우라고 합니다. 렌더 트리를 구축해야 하기 때문에 한 번 로드하면 이때 반드시 리플로우가 발생합니다. 리플로우 중에 브라우저는 영향을 받는 부분을 무효화합니다. 렌더링 트리를 다시 작성하고 렌더링 트리의 이 부분을 재구성하면 브라우저는 영향을 받은 부분을 화면에 다시 그립니다. 이것을 레이아웃에 영향을 주지 않고 요소의 모양에 영향을 주는 것을 다시 그리기라고 합니다. http는?
http
의 특징은 무엇입니까? 하이퍼텍스트 전송 프로토콜(Hypertext Transfer Protocol)은 인터넷에서 가장 널리 사용되는 네트워크 프로토콜입니다. 특징: 요청 기반 - 응답 모드상태 비저장 저장 HTTP 프로토콜과 https
http
의 차이는 하이퍼 텍스트 전송 프로토콜이며 정보는 명확한 텍스트로 전송됩니다. 전송 프로토콜
http과 https은 연결 방법과 포트가 완전히 다릅니다. http은
80,
https
443 http 의 연결은 매우 간단하고 상태가 없습니다. https
프로토콜은 암호화된 전송 및 신원 인증을 수행할 수 있는
ssl+http 프로토콜로 구축된 네트워크 프로토콜입니다. http 프로토콜프로토타입과 상속의 차이점, 프로토타입, 상속 호출 및 적용(첫 번째 매개변수는 동일, 두 번째 매개변수의 차이점은 무엇입니까)apply( )은 두 개의 매개변수를 받습니다. 하나는 함수가 실행되는 범위(this)이고, 다른 하나는 매개변수 배열입니다. call()
메소드의 첫 번째 매개변수는 apply() 메소드와 동일하지만, 함수에 전달된 매개변수가 나열되어야 합니다.
화살표 함수와 일반 함수의 차이점화살표 함수는 익명 함수이므로 생성자로 사용할 수 없습니다.new화살표 함수는 사용할 수 없습니다.
arguments
, 문제를 해결하려면 rest
매개변수를 사용하세요.
화살표 함수에는 프로토타입 속성이 없습니다
의 this
화살표 기능은 항상 컨텍스트의
this, 을 가리킵니다.
화살표 함수는 this에 바인딩될 수 없으며 해당 함수가 위치한 컨텍스트의 this 값을 자체 this 값
으로 캡처합니다. JS 메모리 누수란 무엇인가요?
메모리 누수는 브라우저 프로세스가 종료될 때까지 할당된 메모리 조각을 사용하거나 재활용할 수 없음을 의미합니다.
메모리 해제 방법: null
에 값을 할당합니다. 최적화할 웹사이트의 파일과 파일은 무엇입니까?
1, 파일 병합(http 요청을 줄이는 목적)
2, 파일 압축(파일 다운로드 크기를 직접 줄이는 목적)
3, CDN 호스팅 리소스 사용
4, 캐시 사용
5, gizp는 js 및 css 파일 압축
6, 메타 태그 최적화(제목, 설명, 키워드), 최적화 제목 태그, alt 최적화 7. 역방향 링크, 웹 사이트의 외부 링크 최적화
AJAX의 실행 프로세스와 일반적인 HTTP 상태 코드를 간략하게 설명하십시오.
100: 이 상태 코드는 클라이언트에게 다음을 지시합니다. 요청을 계속 보내십시오. 이 임시 임시 임시 임시 응답은 요청의 일부가 서버에 의해 승인되었음을 클라이언트에 알리는 데 사용되지만, 요청이 완료된 경우 클라이언트는 요청의 나머지 부분을 계속 보내야 합니다. , 응답은 무시되고 서버는 요청이 완료된 후 클라이언트에 최종 응답을 보냅니다. Result
200: 이는 서버가 요청을 성공적으로 수락했음을 나타내는 가장 일반적인 http 상태 코드입니다.
202: 서버가 요청을 수락했음을 나타냅니다. 그러나 아직 처리되지 않았으며 이 요청이 최종적으로 처리될지는 확실하지 않습니다
204: 서버가 요청을 성공적으로 처리했지만 엔터티 콘텐츠를 반환하지 않았으며 새 헤더 메타 정보를 반환할 수 있습니다.
301: 클라이언트가 요청한 웹페이지가 새 위치로 영구적으로 이동되었습니다. .링크가 변경되면 클라이언트에게 링크 변경을 알리는 301 코드가 반환됩니다. 클라이언트는 새 링크를 요청하고 요청 결과
404 : 요청이 실패했습니다. 클라이언트가 요청한 리소스가 없거나 존재하지 않습니다.
500: 서버에 알 수 없는 오류가 발생하여 클라이언트의 현재 요청을 완료할 수 없습니다.
503: 일시적인 서버 과부하 또는 유지 관리로 인해 서버가 현재 요청을 처리할 수 없습니다
사전 로드와 지연 로드의 차이점, 페이지가 로드되기 전에 필요한 사전 로드 시간은 언제입니까? 리소스는 미리 다운로드되어 나중에 사용할 때 캐시에서 호출됩니다. 지연 로딩은 특정 조건이나 필요에 따라 조건이 충족될 때까지 기다렸다가 해당 리소스를 로드합니다.
둘 다 주요 차이점은 하나가 로드된다는 것입니다. 초기에 로드되고 다른 하나는 느리게 로드되거나 전혀 로드되지 않습니다. 지연 로딩은 서버 프런트엔드의 부담을 어느 정도 완화할 수 있는 반면, 사전 로딩은 서버 프런트엔드의 부담을 증가시킵니다
.
Jquery
선택기란 무엇인가요?1. 기본 선택기
기본 선택기는 jQuery에서 가장 일반적으로 사용되는 간단한 선택기이며 요소의 ID, 클래스 및 태그 이름을 통해 DOM 요소를 찾습니다.
1, ID 선택기 #id 설명: 주어진 ID를 기반으로 요소를 일치시키고 단일 요소를 반환합니다. (참고: 웹 페이지에서 ID 이름은 반복될 수 없습니다.) 예: $(" #test") ID가
2인 요소 선택, 클래스 선택기 .class 설명: 지정된 클래스 이름을 기준으로 요소를 일치시키고 요소 세트를 반환 예: $(" .test ") 클래스 test
3, 요소 선택기 요소 설명: 지정된 요소 이름에 따라 요소를 일치시키고 요소 세트를 반환 예: $("p") 모든
요소 선택
4, * 설명: 모든 요소를 일치시키고 요소 집합을 반환합니다. 예: $("*")는 모든 요소를 선택합니다.
5 , selector1, selector2,..., selectorN 설명: 각 선택기와 일치하는 요소를 병합하여 함께 반환하고, 병합된 요소 집합을 반환합니다 예: $("p,span,p.myClass ") myClass 클래스를 사용하여
, 및
태그의 모든 요소를 선택합니다.
1, 하위 선택기
예: $("pspan")는
요소의 모든 요소를 선택합니다(참고: 하위 선택기는 상위 요소의 지정된 모든 선택 항목을 선택합니다). 요소(자식인지 손자인지 여부)
2, 하위 선택자 $("parent>child") 예: $("p>span")는
모든 요소를 선택합니다. ; 아래의 요소(참고: 하위 선택자는 상위 요소에 직접 속한 하위 요소만 선택합니다)
3
, 형제 선택자 $("prev+next")설명: 바로 다음 요소를 선택합니다. prev 요소는 요소 집합을 반환합니다. 예: $(".one+p")는 클래스 1이 하나로 설정된 다음
피어 요소를 선택합니다. 4, 피어 선택자 $("prev~siblings ") 설명: 이전 요소 뒤의 모든 형제 요소를 선택하고 요소 세트를 반환합니다 예: $("#two~p") ID가 2인 요소 뒤의 모든
선택 피어 요소 컬렉션 3. 필터 선택기
1>기본 필터 선택기 1, :first 설명: 첫 번째 요소를 선택하고 단일 요소를 반환 예: $("p:first") 모두 선택 요소의
요소
2, :last 설명: 마지막 요소를 선택하고 단일 요소를 반환합니다. 예: $("p:last")는 모든< ;p>를 선택합니다. ; 요소의 마지막
요소
3, :not(selector) 설명: 지정된 선택기와 일치하는 모든 요소를 제거하고 요소 세트를 반환합니다. 예: $( "input: not(.myClass)") 클래스가 myClass가 아닌 요소를 선택합니다. 4, :even 설명: 인덱스가 짝수인 모든 요소를 선택하고 인덱스는 0부터 시작하며 다음을 반환합니다. 요소 집합 5, :odd 설명: 인덱스가 홀수인 모든 요소를 선택하고, 인덱스는 0부터 시작하고, 요소 집합 6, :eq(index)을 반환합니다. 설명: 인덱스 요소와 동일한 인덱스를 선택합니다. 인덱스는 0부터 시작하며 단일 요소를 반환합니다. 7, :gt(index) 설명: 인덱스가 인덱스보다 큰 요소를 선택합니다. , 인덱스는 0부터 시작하고 요소 집합을 반환합니다 8 , :lt(index) 설명: 인덱스가 index보다 작은 요소를 선택하고 인덱스는 0부터 시작하며 요소 집합을 반환합니다 9, :focus 설명: 현재 포커스를 받고 있는 요소를 선택하세요
2>콘텐츠 필터 선택기 1、:contains(text) 설명: 요소 선택 포함하는 텍스트 콘텐츠를 텍스트로 반환하고 요소 모음을 반환합니다. 예: $("p:contains( 'I')") 텍스트 "I"가 포함된 요소를 선택하세요. 2, :empty 설명: 하위 요소 또는 텍스트 요소를 포함하지 않는 빈 요소를 선택하고 요소 세트를 반환합니다. 예: $( "p:empty") 하위 요소 또는 텍스트 요소를 포함하지 않는 빈
;p>
) 3, :has(selector) 설명: Select 선택기와 일치하는 요소를 포함하는 요소는 요소 컬렉션을 반환합니다. 예: $("p: has(p)")는
요소를 포함하는
요소를 선택합니다(
) 4, :parent 설명 : 하위 요소 또는 텍스트가 포함된 요소를 선택하고 요소 컬렉션을 반환합니다. 예: $("p:parent")는 가시성 필터링 선택기
1, :hidden 을 포함하는 요소를 선택합니다. 설명: 모두 선택 보이지 않는 요소를 선택하고 요소 집합을 반환합니다2 , :visible 설명: 보이는 요소를 모두 선택하고 요소 집합을 반환합니다
4>속성 필터 선택기(요소 컬렉션 반환) 1, [속성] 예: $("p[id]")는 id 속성이 있는 p 요소를 선택합니다 2 、[속성=값] 예: $("input[name=text]") 이름 속성이 text 3、[속성!=값] 과 같은 입력 요소를 선택하세요. 예 :$("input[name!=text]") text 4, [attribute^=value] 예: $("input[name ^=text ]") text 5, [attribute$=value] 예: $("input[name$=text]")로 시작하는 이름 속성이 있는 입력 요소를 선택하세요. 텍스트로 끝나는 이름 속성 입력 요소 6, [속성*=값] 예: $("input[name*=text]")는 텍스트 를 포함하는 이름 속성이 있는 입력 요소를 선택합니다. 7, [ attribute~=value] 예: $("input[class~=text]") 공백으로 구분된 값에 text 8, [ attribute1][attribute2] [attributeN] 설명: 여러 속성 필터 선택기 결합
5>양식 객체 속성 필터 선택기(요소 모음 반환) 1, :enabled 설명: 사용 가능한 요소 모두 선택 2, :disabled 설명: 사용할 수 없는 요소 모두 선택 3, :checked 설명: 선택한 모든 요소 선택(라디오 상자, 확인란) 예: $("input:checked") 선택한 모든 요소를 선택합니다 4, :selected 설명: 선택한 모든 옵션 요소를 선택합니다(드롭다운 목록) 예: $("select option:selected")는 선택된 모든 옵션 요소를 선택합니다
Jquery 노드 삽입 방법
append() 일치하는 각 요소에 콘텐츠 추가
appendTo() 일치하는 모든 요소 추가 실제로 이 메서드를 사용하면 A를 B
prepend( )에 추가하는 일반 $(A).append(B) 작업이 반전됩니다. 일치하는 각 요소 안에 콘텐츠를 추가합니다
prependTo () 일치하는 모든 요소를 지정된 요소 앞에 추가합니다. 실제로 이 방법을 사용하면 일반 $(A).prepend(B) 작업이 반전됩니다. 즉, B를 A 앞에 추가하는 대신 A가 B 앞에 추가됩니다
after() 일치하는 각 요소 뒤에 콘텐츠를 삽입합니다.
insertAfter() 지정된 요소 뒤에 일치하는 모든 요소를 삽입합니다. 실제로 이 방법을 사용하면 기존의 $(A).after(B) 작업이 반전됩니다. 즉, A 뒤에 B를 삽입하는 대신 A가 B 뒤에 삽입됩니다
before() 일치하는 각 요소 앞에 콘텐츠를 삽입합니다.
insertBefore() 지정된 요소 앞에 일치하는 모든 요소를 삽입합니다. 실제로 이 방법을 사용하면 기존의 $(A).before(B) 작업이 반전됩니다. 즉, A 앞에 B를 삽입하는 대신 A가 B
J 함수 앞에 삽입되는 것과 차이점이 있습니다. 손떨림 방지 기능
기능 제한은 js 메서드가 특정 기간 내에 한 번만 실행된다는 의미입니다.
흔들림 방지 기능은 자주 실행될 때 여유 시간이 충분한 경우 코드가 한 번만 실행된다는 것을 의미합니다.
기능 조절은 변수를 현재 코드가 실행되고 있는지 기록하는 플래그로 선언하는 것을 의미합니다. . 그렇다면 이 메소드 실행을 직접 취소하고 return, 유휴 상태이면 정상적으로 메소드 실행을 트리거합니다.
기능 흔들림 방지는 구현을 지원하기 위한 지연 장치가 필요하며 필요한 코드의 실행을 지연시킵니다. 메서드가 여러 번 트리거되면 cleartimeout을 사용하여 지난번에 기록된 지연 실행 코드를 지우고 다시 시작합니다. 타이머가 종료되어 트리거에 액세스할 수 없는 경우 실행 코드
post post
getge는 서버에서 데이터를 가져옵니다.
post는 클라이언트의 서버로 데이터를 전송하는 것입니다. url, 데이터는 url
,
post 메소드에서 볼 수 있으며, 데이터는 html 헤더에 배치되어 보안 문제Get를 제출합니다. 제출된 데이터 최대 1024바이트,
post
제한 없음
CSRF 공격이란 무엇입니까Csrf(교차 사이트 요청 위조)이후 사용자가 로그인했습니다 공격자는 대상 웹 사이트에서 사용자가 공격 페이지를 방문하도록 유도하고 대상 웹 사이트를 사용하여 사용자를 공격하고 사용자의 신원을 사용하여 페이지를 공격하고 대상 웹 사이트에 위조된 사용자 작업 요청을 시작합니다. 공격 목적 달성
Js
딥 카피를 직접 작성
딥 카피/얕은 카피를 사용하는 경우깊이와 얕은 카피가 모두 필요한 경우입니다. 일반적으로 집계 관계가 있음을 나타냅니다. 얕은 복사가 발생하면 일반적으로 친분 관계가 있음을 나타냅니다. 간단한 예: 조합 패턴을 구현할 때
복합 패턴
일 때는 일반적으로 깊은 복사가 구현됩니다.
관찰자 패턴
Observer Pattern
을 구현할 때 얕은 복사
Vue 관련
을 구현해야 합니다.
Vue는 사용자 인터페이스 구축을 위한 점진적인 상향식 증분 개발 세트
MVVM
framework
,
vue핵심은 뷰 레이어에만 집중합니다. 핵심 아이디어: 데이터 기반(데이터가 변경되면 뷰의 내용도 변경됨)
컴포넌트화(코드 재사용성, 유지 관리성, 테스트 가능성 증가, 개발 효율성 향상, 재사용 용이성, 높은 응집력 및 낮은 결합도 반영 가능)
2. vue에 대한 이해를 간략하게 설명해주세요.
Vue는 사용자 인터페이스 MVVM 프레임워크 구축을 위한 점진적인 상향식 증분 개발 세트입니다. 핵심은 뷰 레이어인 vue에 집중하는 것입니다. 데이터 바인딩 문제를 해결하고 대규모 단일 페이지 애플리케이션 및 구성 요소화를 개발하기 위해 그래서 vue의 핵심 아이디어는 데이터 기반 및 구성 요소화입니다. 여기서는 MVVM에 대해서도 이야기하겠습니다. 아이디어, MVVM의 아이디어는 modelview vm은 v과 m을 연결하는 브리지입니다. 수정되었으며, VM레이어는 뷰 레이어에 감지되고 해당 수정이 이루어지도록 뷰 레이어에 알립니다.
3. vue
부모의 업데이트에 대해 간략하게 설명해주세요.
prop는 하위 구성 요소로 아래로 흐릅니다. 업데이트가 발생할 때마다 상위 구성 요소는 하위 구성 요소의 모든 prop이 최신 값으로 새로 고쳐집니다. 데이터는 상위 구성 요소는 하위 구성 요소에 한 가지 방식으로만 바인딩될 수 있습니다. (
data 및 computed를 사용하여 해결 가능) 4. Vue에서 일반적으로 사용되는 수정자는 무엇입니까?
변경 후 트리거되고, 커서가
input
입력 상자를 벗어나면 값이 변경됩니다.
자동으로 시작과 끝을 필터링합니다. 사용자 입력 공간 이벤트 수정자: .stop
클릭 이벤트가 버블링되는 것을 방지합니다. 네이티브
js의 event.stopPropagation().prevent와 동일합니다.
미리 설정된 동작의 실행을 방지하는 것은 네이티브 js
의
event.preventDefault()
.capture와 동일합니다. 이벤트 리스너, 즉 이벤트 수정자를 추가할 때 이벤트 캡처 모드를 사용하세요. , 누구나
.self를 트리거합니다. 는 하위 요소를 제외하고 자체 범위 내에서만 이벤트를 트리거합니다. .once
한 번만 실행됩니다.
키보드 수정자:
.enter Enter 키 .tab Tab 키 .escReturn 키 .space Space 키
.up위쪽 키 . 아래쪽 화살표 . leftBuild left .rightright key
시스템 수정자: .ctrl .alt .shift .meta
5.v-text와 {
의 차이점 { }} 및 v-html
{
{}} 데이터를 일반 텍스트로 구문 분석하고 출력을 표시할 수 없습니다html
v-html
출력을 렌더링할 수 있습니다 html
v-text
데이터를 일반 텍스트로 구문 분석하고 실제 html을 출력할 수 없습니다. 중괄호와의 차이점은 페이지가 로드될 때 이중 중괄호가 표시되지 않는다는 것입니다
v-text
명령:
기능: 웹 페이지 요소의 일반 텍스트 콘텐츠를 조작합니다.
{{}}는 그를 쓰는 또 다른 방법입니다.
v-text
및 {{}}차이:
v-text
{ {}}은 동일하고, {{}}은 템플릿 보간이라고 하며, v-text은 명령이라고 합니다.
한 가지 차이점은 많은 데이터를 렌더링할 때 중괄호가 표시될 수 있다는 것입니다. 이는 일반적으로 화면 깜박임이라고 합니다.
6. v-on이 여러 메서드를 바인딩할 수 있나요
예
여러 이벤트를 결합하면 키-값 쌍을 사용할 수 있습니다이벤트 유형: 이벤트 이름 루프의 주요 기능
Key
값의 존재가 고유성을 보장합니다,
Vue 실행되면 노드를 검사하고 key 값이 없으면 vue는 여기에 dom 노드가 있는지 확인하면 지워집니다. key 값이 있으면 새 노드와 이전 노드가 처리됩니다. 비교하고 두 key을 비교하여 동일한지 확인합니다. 위치를 바꾸거나 삭제하세요 8. 계산된 속성이란 무엇인가요
계산된 속성은 값이 다른 값에 따라 달라짐을 선언적으로 설명하는 데 사용됩니다. 값이 변경되면 업데이트됩니다.DOM
템플릿의 계산된 속성에 데이터를 바인딩할 때 켜져 있으면 vue는 계산된 속성이 DOM
변경되는 원인에 따라 업데이트됩니다. 각 계산된 속성에는 getter 및 setter이 포함되어 있습니다. getter일 때 트리거됨을 읽어보세요. VUE 단일 PageSingle PageSpa
advantages의 장점과 단점 :
gud 사용자 경험 word
빠름
콘텐츠 변경 시 전체 페이지를 다시 로드할 필요가 없습니다
단점:
seo에 도움이 되지 않음, 긴 초기 로딩 시간(브라우저는 처음에 로드해야 함html css js , 모든 페이지 콘텐츠가 메인 페이지에 포함됩니다)
, 페이지가 복잡해졌고 탐색이 불가능해졌습니다
10. 사용하는 방법? 해당 시나리오에 사용되는 Vuex는 vue.js 애플리케이션을 위해 특별히 개발된 상태 관리 패턴입니다. 예를 들어, 중앙 집중식 데이터 저장소를 생성하면 프로그램의 모든 구성 요소에 쉽게 액세스할 수 있습니다.
vuex
는
vue
Vuex의 상태 관리 도구입니다. 5가지 속성이 있습니다. 상태 게터 돌연변이 작업 모듈 State
데이터 소스가 저장되는 곳입니다. . 일반
vue 개체에 해당하는 data
는
state에 저장된 데이터가 반응합니다. state데이터가 변경되면 이 데이터에 해당하는 구성 요소도 변경됩니다 this.$store.state.xxx를 사용하여 Getters 를 호출합니다. 이는 store의 계산된 속성과 동일하며, 주로 state의 데이터를 필터링합니다. ,
this .$store.getters.xxx
호출 Mutations 을 사용하세요. 데이터 로직을 처리하는 모든 방법은 mutations에 있습니다. statedata
mutations
를 변경하려면 this.$store.commit로 호출하고 이 메소드에 매개변수를 추가하세요. 이는 mutation의 페이로드입니다(페이로드)
Actions 데이터를 비동기적으로 작동하지만 mutation을 통해 this.$store.dispatch를 사용하여 트리거하고 actions도 페이로드를 지원합니다
사용 시나리오: 상태 구성 요소 간, 로그인 상태, 장바구니에 추가, 음악 재생
Vuex
사용 프로세스:
download
vuex
Create
store under src 그리고 index.js
vue 및 vuex을 소개합니다. 인스턴스 객체를 내보내려면 vuex 을 사용하세요
In
main.js 소개, 사용 .vue
파일
11. Vue의 경로 점프 방법(선언적/프로그래밍 방식)
Vue
에는 선언적 및 프로그래밍 방식의 두 가지 유형의 경로 점프가 있습니다
js를 사용하여 점프하는 것을 프로그래밍 방식 탐색이라고 합니다. this.$router.push
()
을 사용하여 점프합니다. 선언적 router-view 경로 종료 , 라우팅 템플릿이 표시되는 위치
경로에서
name 속성의 역할은 무엇인가요?
해당 경로를 탐색하려면
router-link에서 name을 사용하세요.
하위 경로에 매개변수를 전달하면서 탐색하려면
name을 사용하세요.
12. Vue 크로스 도메인 솔루션
1.
백엔드 변경header
2.
을 사용하여 jq을 제공합니다. 3.사용
http-proxy-middleware (프록시 서버 구성을 위한 미들웨어)13 Vue
vue의 라이프사이클을 간략하게 설명해주세요.
인스턴스 생성부터 인스턴스 소멸까지. 이 기간 동안
8 후크 기능이 호출됩니다. beforeCreate(인스턴스 생성)
created
(생성 완료),
beforeMount
(템플릿 생성 시작)
mounted(생성 완료),
beforeUpdate(업데이트 시작)
updated(업데이트 완료),
beforeDestroy ( 파괴 시작됨)
destroyed(파괴 완료)
14. Vue 라이프 사이클의 역할
은 사용자에게 다양한 단계에서 자신의 코드를 추가할 수 있는 기회를 제공합니다.
15 DOM 렌더링은 해당 라이프 사이클 단계에서 완료됩니다.
DOM
렌더링이 mounted 사이클
16에서 완료되었습니다. Vue 라우팅
프런트 엔드 라우팅은 뷰를 업데이트하지만 페이지를 요청하지 않습니다.
페이지가 새로 고쳐지지 않습니다
공식 웹사이트에서는
vue-router.js을 사용하여 라우팅 모듈을 소개
라우팅 구성 요소를 정의
할 것을 권장합니다.
라우팅을 정의하려면
comComponent를 사용하고 Route 구성 요소를 매핑하고 name을 사용하여 해당 경로
로 이동하여
router 인스턴스를 생성하고 경로를 전달합니다. 구성
루트 인스턴스 생성 및 마운트
라우트 점프
17을 설정하려면
router-link
를 사용하세요. 그리고 역사, 간략하게 이야기하다
Hash
모드 주소 표시줄에 #이 있습니다. history가 존재하지 않습니다. history 모드를 새로 고치면 404 배경이 필요한 상황 구성
JavaScript
를 사용하여 loaction.hash 할당을 수정하고 URL 의 해시 값을 변경할 수 있습니다. hashchange
이벤트 모니터링
해시 값HT ML5 의 변경은
기록 API
를 제공하여 URL 의 변경을 실현합니다. 가장 중요한 API 는 다음 두 가지입니다: history.pushState() 및 history.repalceState(). 이 두 가지 API 는 새로 고침 없이 브라우저 기록을 작동할 수 있습니다. 유일한 차이점은 전자는 새로운 역사적 기록을 추가하는 반면, 후자는 현재의 역사적 기록을 직접 대체한다는 것입니다. 18 Vue 라우팅, 매개변수 및 쿼리 방법에서 매개변수를 전달하는 두 가지 방법과 차이점
동적 라우팅은 경로 매개변수 전달이라고도 합니다. 은 다양한 선택에 따라 동일한 구성 요소의 다양한 콘텐츠를 렌더링하는 것입니다.
사용법: query 소개하려면 path를 사용하세요. params는 name으로 도입되었으며 에서 수신한 매개변수는 유사합니다. 즉, this.$route.query.name 및 this.$route.params.name
url Display :params은 post과 유사하고, query는 get과 유사합니다. 이는 보안 문제이며, params값 전달 상대적이다 더 안전합니다. query는 url을 통해 매개변수를 전달하고, 새로 고침 페이지는 여전히 존재하며, params새로 고침 페이지는 사라졌습니다
19. 여러 가지 Vue 데이터 바인딩 방법. 단방향 바인딩
이중 중괄호 {{}} html내부 문자열 바인딩2.v-bindbind
html속성 바인딩3. 양방향 바인딩 m V-Model
4. 폐기 바인딩 v-ONCE 은
v-Model20.vue에 따라 글로벌 구성 요소가 등록되었습니다 Vue.componnet ("컴포넌트 이름"
{
object
템플릿 content of the complex
})21.Vue 라우팅 후크는 무엇입니까 함수/경로 가드? 전역 가드: beforeEach
(to
, from, next) 및 afterEach (to , from)경로 전용 가드: beforeEnter구성 요소 내 가드: 라우터가 떠나기 전에
/update/
에 들어갑니다. Enter/ 업데이트/떠나기 22. Vue에서 동적 라우팅을 설정하는 방법은 무엇입니까? 방법은 무엇입니까? 전달된 데이터를 얻는 방법은 무엇입니까? 동적 라우팅은 경로 매개변수 전달이라고도 합니다. 동적 라우팅에는 매개변수를 전달하는 두 가지 방법이 있습니다
Data함수인 경우 각 구성 요소 인스턴스는 자체 범위를 가지며 각 인스턴스는 서로 독립적이며 서로 영향을 미치지 않습니다. other
참조형(객체)인 경우 여러 컴포넌트가 데이터 소스를 공유할 때 하나의 데이터가 변경되면 모든 컴포넌트 데이터가 변경되므로 함수를 사용하여 return을 통해 객체의 복사본을 반환합니다. , (새 데이터 반환) 각 인스턴스가 자체 범위를 갖고 서로 영향을 미치지 않도록 합니다.
32. Vue 양방향 바인딩
Vue양방향 바인딩의 원칙은 데이터 변경이 뷰를 업데이트하고, 뷰 변경이 데이터를 업데이트한다는 것입니다.
Vue데이터 양방향 바인딩은 데이터 하이재킹을 통해 이루어집니다. Observer 패턴,
데이터 하이재킹, object.defineproperty의 목적은 속성에 값을 할당할 때 프로그램이 이를 인식하고 변경을 제어할 수 있다는 것입니다. 속성 값
Observer 패턴속성이 변경되면 데이터가 사용되는 위치도 변경됩니다
33. Vue의 구성 요소에서 값을 전달하는 방법
앞으로: parent to child상위 구성 요소는 데이터를 속성에 바인딩하여 전송합니다. 하위 구성 요소는 props
Reverse: 아들에서 아버지로 데이터)을 통해 상위 구성 요소 세트를 받습니다. 이벤트를 수신한 후 데이터를 가져옵니다 Brothers: eventbus
Central eventbus through Vuex
34. 구현 원칙 그리드 시스템의 방법은 컨테이너의 크기를 정의하고 이를
12 부분(
24 부분 또는 32 부분)으로 균등하게 나눈 다음 내부 및 외부 여백을 조정하고 미디어 쿼리를 통해 강력한 반응형 그리드 시스템이 됩니다. 예를 들어 행 col-xs-4
36. 하나의 컴포넌트가 여러 프로젝트에서 사용되는 경우37. 슬롯을 간략하게 설명해주세요
. 이 점들에 우선, 노치(슬롯)에는 어떤 내용을 넣을 수 있을까? 어디에 놓을까요? 그것은 무엇을 합니까? 콘텐츠를 넣고 하위 구성요소에 사용하여 상위 구성요소에 하위 구성요소 템플릿 데이터를 정상적으로 표시할 수 있습니다.
명명된 슬롯과 익명 슬롯, 범위 슬롯은 직설적으로 말하면 구성 요소의 속성이며 구성 요소 요소 내에서 사용할 수 있습니다.
상위 구성 요소에서 사용할 수 있습니다
slot-scope 가져오기 data from child Components
38. WatchWatch
에 대해 간단히 설명해주세요.
39. 설명 Vant Ui 다운로드 가벼우면서 안정적인 모바일 단말기
Vue 컴포넌트 라이브러리
40 계산된 속성과 시계의 차이.
계산된 시계 차이를 계산하는 캐싱 기능입니다. 관련 없는 데이터가 변경되면 다시 계산하지 않고 캐시에 있는 값을 그대로 사용합니다. 계산된 속성은 값이 다른 값에 따라 달라지는 것을 선언적으로 설명하는 데 사용됩니다.
Watch는 데이터에 정의된 변수를 모니터링합니다. 변경되면 watch의 메서드가 트리거됩니다
41.mvvm 프레임워크가 무엇인가요? 다른 프레임워크(jquery)와 차이점은 무엇인가요? 어떤 시나리오가 적합합니까?
Mvvm
과 다른 프레임워크의 차이점은 vuedata-driven노드 작업 대신 데이터를 통해 뷰를 표시
데이터 작업이 많은 시나리오에 적합하다는 점입니다
42. Vue의 첫 화면이 느리게 로드되는 이유, 해결 방법, 흰색 화면 시간을 감지하는 방법, 흰색 화면 문제 해결 방법
첫 번째 화면이 느리게 로드되는 이유:
페이지가 처음 로드되면 렌더링해야 할 구성 요소 데이터가 많습니다
해결 방법:
1.
Lazy loading of Route 구성 요소: ()=> ;import("라우팅 주소")
2.ui
요청 시 프레임 로드
3.gzip
압축
화이트 스크린 시간 감지:
? ? ? ?
흰색 화면 문제에 대한 해결 방법:
1데이터를 렌더링하려면
v-text를 사용하세요.
②데이터를 렌더링하려면
{{}} 구문을 사용하세요. v - cloak 지시문(관련 인스턴스가 컴파일될 때까지 요소에 남아 있음), v-cloak을 어디에 배치해야 합니까? v-cloak을 추가할 필요가 없습니다. 모든 태그를 el
43.Vue 이중 데이터 바인딩 과정에서 한쪽의 데이터가 변경되면 다른쪽에 변경 사항을 어떻게 알릴 수 있습니까?
데이터 하이재킹 및 관찰자 모드
Vue
데이터 양방향 바인딩은 데이터 하이재킹 및 Observer 패턴, 데이터 하이재킹,
object.defineproperty를 통해 구현됩니다. 그 목적은 : 속성에 값을 할당할 때 프로그램이 이를 감지할 수 있게 되면 속성 값의 유효 범위를 제어하고 다른 속성의 값을 변경할 수 있습니다옵저버 모드의 목적은 속성이 변경될 때 , 데이터가 사용되는 장소도 변경됩니다
44.Vuex process
vue 구성 요소에서 actions를 트리거하여 dispatch를 통해 데이터 수정 작업을 제출한 다음 actionscommit을 통해 를 트리거합니다. 돌연변이어서 데이터를 수정하면 mutations는 commit에서 요청을 받고 mutate을 통해 state를 자동으로 수정하고 마지막으로 store에서 이를 호출하는 각 구성 요소를 트리거합니다.
45를 업데이트합니다. Vuex는 어떻게 비동기 데이터를 요청하나요?
1.
먼저 state
2.
에서 변수를 생성합니다. 에 추가하고 캡슐화했습니다. axios 요청, 비동기식 데이터 수신, commit이 mutationsMutations에 제출되어
state에서 상태를 변경하면 action에서 변경됩니다. 에서 획득함 값은 state46에 할당됩니다. Vuex의 작업은 어떻게 변형에 적용되나요?
Action 함수는
context 객체를 store와 동일한 방식으로 받습니다. 인스턴스, context.commit을 호출하여 mutation을 제출하거나 context.state 및 을 통해 state 및 getters를 가져올 수 있습니다. context.getters 47 Route와 라우터의 차이점
1. Router는
VueRouter의 객체이며, Vue.use(VueRouter)를 통해 rou를 얻을 수 있습니다. 및 VueRouter 생성자 ter 인스턴스 개체인 이 개체는 모든 경로와 많은 주요 개체 및 속성을 포함하는 전역 개체입니다. 2.route는 점프 라우팅 개체입니다. 각 경로에는 로컬 개체인
route 개체가 있으며 해당 이름, 경로, 매개변수, 쿼리Wait를 얻을 수 있습니다. 49. vuex의 State 기능은 무엇인가요?
State는 데이터 소스가 저장되는 곳입니다
State의 데이터는 반응합니다.
state의 데이터가 변경되면 이 데이터에 해당하는 구성 요소도 변경됩니다
State vuex의 Getter 기능은 무엇입니까? Getter는 state에서 계산 작업을 수행할 수 있습니다. 이는 store
Getter
의 계산된 속성입니다 주만 있는 경우 하나의 구성요소 내에서 사용하면 getters51을 사용할 필요가 없습니다. vuex의 Mutation 기능은 무엇인가요?
vuex store
에서 상태를 변경하는 유일한 방법은
mutation을(를) 콜백 함수
52에 제출하는 것입니다. vuex의 기능은 무엇입니까?
Action은 mutation과 유사하지만 차이점은 action이 mutation
을 제출한다는 점입니다. 이는 상태의 직접적인 변경이 아니며 모든 비동기 작업을 포함할 수 있습니다
54.vuex 장점
장점: 상위-하위 구성 요소가 아닌 구성 요소의 통신 해결, ajax 요청 수 감소, 일부는 state단점: 새로 고침 브라우저
vuex
의
state
가 초기 상태로 돌아갑니다. 해결책은 vuex-along이며, sessionstorage을 달성하려면 계산된 속성과 결합해야 합니다.
55. Vue 라우팅 지연 로딩(누르기 라우팅이 로드되어야 함)
56.v-for 및 v-if 우선순위 우선 v-if 및 를 사용하지 마세요. v-for가 동일한 요소에 적용됩니다. 이유: v-for
가
v-if
보다 우선합니다. 매번 전체 배열을 순회해야 하는 경우 특히 다음과 같은 경우 속도에 영향을 미칩니다. 작은 부분을 렌더링해야 합니다.
v-for
는 v-if Ele.me팝업 창 el의 5가지 구성 요소를 적어주세요. -alert>대화캘린더진행 상황 기사switch
React 관련fetch VS ajax VS axios
Traditional Ajax 는 XMLHttpRequest(XHR)을 의미합니다. 핵심에서 사용되는 원본 js에 속하는 백엔드 요청을 보내는 최초의 기술 XMLHttpRequest Object, 여러 요청 사이에 순서 관계가 있으면 콜백 지옥이 발생합니다. JQuery ajax 는 기본 XHR
axios 는 기본적으로 기본 X의 캡슐화인 Promise 를 기반으로 합니다. HR 캡슐화, 그 외에는 Promise의 구현 버전은 최신 ES 사양을 준수합니다.
fetch는 ajax을 추가로 캡슐화한 것이 아니라 기본 js입니다. , 를 사용하지 않고 XMLHttpRequest객체.
React 이벤트 처리 ---
방식을 가리키도록 수정 1: bind 메서드를 통해 제자리에 바인딩하여 이거는
방향 2을 가리킵니다.
방향 3을 생성합니다. construct 또는 에서 묶기 이벤트 사전 정의됨
method4: 이벤트 호출 작성을 화살표 함수 형식으로 변경
react
React에 대해 간략하게 설명해주세요. Origin Yu facebook, react은 사용자 인터페이스 구축을 위한 js 라이브러리
기능:
선언적 디자인: react 채택됨 패러다임 선언문, 개발자는 표시 내용만 선언하면 react이 자동으로 완료됩니다.
efficient: React시뮬레이션을 통해 dom 이다 , virtual dom), dom
Flexible과의 상호작용을 최소화하세요. React는 알려진 라이브러리 또는 프레임워크와 잘 작동할 수 있습니다
Components: 코드를 더 쉽게 재사용할 수 있도록 react를 통해 구성 요소를 빌드하고 페이지 기능을 작은 모듈로 분할하는 데 적합합니다. 각 작은 모듈
단방향 데이터 흐름 : React은 단방향 데이터 흐름입니다. 데이터는 props를 통해 상위 노드에서 하위 노드로 전달됩니다. 각 props가 변경되면 react는 모든 하위 노드를 다시 렌더링합니다.
반응 구성 요소 간 데이터 전송
props을 사용하여 전달 값 전송
역방향 값 전송은 함수를 사용하여 값을 전송합니다 이벤트 호출 함수를 통해 전달
피어 값 전송은 pubsub-js를 사용
은 pubsub.publish(이벤트 이름, 데이터)을 사용하여 발생 데이터
구성요소 간에 전달된 데이터를 수신하려면 pubsub.subscribe(청취된 이벤트, ()=)
{}
)을 사용하세요사용 컨텍스트 context를 사용하려면 구성 요소 간에 값을 전송하려면 createContext() 메서드를 사용해야 합니다. 이 메서드에는 공급자 생산자 소비자 소비자
라는 두 가지 개체가 있습니다. Vue와 React의 차이점
같은 점:
둘 다 서버 렌더링을 지원합니다.
둘 다 가상 dom을 통해 구성 요소 기반 개발을 지원합니다. 소품상위 및 하위 구성 요소 데이터에 대한 매개 변수 전달, 모두 구현 webcomComponent 사양
은 모두 데이터 기반 보기입니다.
에는 모두 상태 관리가 있으며,
react에는 이 있습니다. 리덕스 , vue예 vuex
모든 지원
native' 솔루션 React에 react Native Vue가 있습니다. has weex
차이점:
react
엄격히 mvc의 view 레이어에만 해당되며, vue은 입니다. mvvm 모드
virtualdom은 다르며, vue은 각 구성 요소의 종속성을 추적하므로 전체 dom 구성 요소 트리를 다시 렌더링할 필요가 없으며 react은 상태가 변경되면 모든 구성 요소가 다시 렌더링되므로 shouldcomComponentupdate의 라이프 사이클 후크 기능을 react에서 사용하여
구성 요소 작성이 다릅니다. , react은 jsx이고 인라인 스타일 , 즉 html 및 css은 모두 다음으로 작성됩니다. js, vue은 html , css , js입니다.
데이터 바인딩이 다릅니다. vue는 양방향을 실현합니다. 데이터 바인딩, react데이터 흐름은 단방향입니다.
react
의
, state 개체는 setstate 메서드로 상태를 업데이트해야 합니다. vue, state state 객체는 필요하지 않습니다. 데이터는 vue 객체의 data 속성에 의해 관리됩니다. 가상 dom 및 diff 알고리즘을 간략하게 설명하십시오. DOM, 흔히 가상 노드라고도 합니다.
js
의 object
객체를 통해 DOM에 있는 노드를 시뮬레이션한 후 실제 로 렌더링하는 것입니다. 특정 렌더링 방법을 통한 DOM 노드. 빈번한 작업DOM 또는 많은 수의 페이지 다시 그리기 및 리플로우Diff알고리즘: 트리 구조를 계층적으로 분해하고, 동일한 수준의 요소만 비교하고, 목록 구조 쉬운 비교를 위해 각 유닛에 고유한
key 값을 추가하세요구성 요소에 대한 이해
결합 가능, 재사용 가능, 유지 관리 가능, 테스트 가능setState를 호출한 후 무슨 일이 일어났나요?
React
setstate를 호출한 후
react는 들어오는
매개변수 개체
와 구성 요소 의 현재 상태 를 병합하여 조정 프로세스 를 시작합니다.
조정 프로세스 중에 react는 react 요소 트리를 구축하고 새 상태를 기반으로 전체 UI 인터페이스를 다시 렌더링합니다. 요소 트리를 얻은 후 react. 는 이전 노드 간의 새로운 차이점을 자동으로 계산하고 차이점을 기반으로 인터페이스를 최소화하고 다시 렌더링합니다. 안
첫 번째 렌더링 후
comComponentWillReceiveProps를 호출하고 Call
shouldComponentUpdate는 구성 요소가 새 props
를 수신하면 entWillupdate
comComponent가 곧 업데이트됩니다html
일 때 호출됩니다. componentDidupdate 구성 요소 업데이트가 완료된 후 즉시 호출됨
comComponentWillUnmount
구성 요소가 제거되기 전에 호출됨******
왜 virtual dom 성능이 향상됩니까 ?(Required
)
Virtual
dom 은 를 사용하여
js 과 실제 dom 사이에 캐시를 추가하는 것과 같습니다. dom diff 알고리즘은 불필요한 것을 방지합니다. ㅋㅋㅋ 사이에 State와 props의 차이점 Props
는 외부에서 컴포넌트에 전달되는 매개변수입니다. 주요 기능은 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 것이지만, props는 이를 사용하는 데 매우 유용합니다. 구성요소에 대해서는 읽기 전용입니다. 일단 할당되면 수정할 수 없습니다. 새로운 props는 하위 구성요소를 다시 렌더링하기 위해 외부 구성요소를 통해서만 적극적으로 전달할 수 있습니다.
State 컴포넌트의 표시 형식은 데이터 상태와 외부 매개변수에 의해 결정될 수 있으며, 외부 매개변수는 props이고, 데이터 상태는 state입니다. this.state구성 요소에 초기 state를 설정합니다. 이 데이터는 state가 props와 다릅니다. 약간, state는 this.setState() 메소드를 통해 수정할 수 있습니다. 이 react 라이프 사이클 후크 기능은 이 문제를 해결하는 것입니다:
데이터를 업데이트할 때 setState를 사용하여 전체 데이터를 수정하세요. 데이터가 변경된 후에는 순회 중에 모든 콘텐츠가 다시 렌더링됩니다. 성능에 심각한 영향을 미칩니다
해결책:1.shouldcomComponentupdate
렌더링 전에 구성 요소가 업데이트되었는지 확인하고 업데이트 후에 렌더링합니다. 가상 dom클래스 구성 요소에 사용됨
3.react.memo()
순수 구성 요소와 유사상태 비저장 구성 요소에 사용됨
react diff 원칙 세 가지 전략을 기반으로 합니다.
tree diff 웹 UIdom
에 있는 노드의 레벨 간 이동 작업은 특히 작으므로 무시할 수 있습니다.
구성 요소 diff
동일한 클래스를 가진 두 구성 요소는 유사한 트리 구조를 생성하고, 서로 다른 클래스를 가진 두 구성 요소는 서로 다른 트리 구조를 생성합니다
element diff
동일한 수준에 있는 하위 노드 그룹의 경우 다음과 같을 수 있습니다. 고유한 id
제어된 구성 요소란 무엇인가요?
React
양식 렌더링을 담당하는 구성 요소로, 값은
state에서 가져옵니다. 요소를 제어되는 구성 요소라고 합니다
부모 클래스의 생성자를 호출하기 위해 super(props)
Super()을 호출하는 목적은 super에서만 구성 요소가 자체적인 을 가질 수 있습니다. this , 전역 구성 요소 this에서 사용할 수 있습니다. super을 실행하지 않고 단지 constructor인 경우 this은 잘못됩니다. super 상위 컴포넌트 상속 this
React
커스텀 컴포넌트: 함수 컴포넌트 또는 Stateless 컴포넌트컴포넌트의 첫 글자는 대문자입니다
클래스 컴포넌트 : 클래스 구성 요소는 A render 메서드를 구현해야 하며, 이 메서드는 jsx 요소를 반환해야 하며 외부 요소를 사용하여 모든 콘텐츠를 래핑해야 합니다.
미니 프로그램과 관련됨
장점 의 미니 프로그램
다운로드 및 설치가 필요 없으며, 직접 사용하고, 빠르게 실행하고, 프로젝트를 빠르고 짧고 간결하게 구축할 수 있으며, 각 앱소스 코드는 2mb
을 초과하지 않습니다. 애플릿의 페이지 구성(4개 파일)
Index.js index.json index.wxml index.wxss
애플릿의 수명 주기
Onload onready onshow onhide onunload
Onpulldown 새로 고침 onreachbottom onshareappmessage
애플릿이 데이터를 요청하는 방법
요청 사용
미니 프로그램의 첫 화면 로딩 시간을 개선하는 방법
사전 요청: 비동기 데이터 데이터 요청은 페이지 렌더링 완료
캐시 활용: 비동기 요청에 storage API 사용 데이터가 캐시됩니다. 두 번째 시작 시 캐시된 데이터가 먼저 페이지를 렌더링한 다음 배경이 업데이트됩니다. 흰색 화면 방지: 페이지 뼈대와 기본 콘텐츠를 먼저 표시합니다. 시기적절한 피드백: 사용자가 기다려야 하는 대화형 작업에 대해 시기적절한 피드백을 제공합니다. 사용자가 미니 프로그램이 응답하지 않는다고 생각하지 않도록 피드백을 제공합니다.
성능 최적화: 부적절한 것을 방지합니다.
setdata
와
onpagescroll
자주 사용하는 미니프로그램의 구성요소를 간략하게 설명해 주세요아이콘 텍스트 이미지 스와이퍼 네비게이터 입력 버튼 맵 보기
차이점을 간략하게 설명해 주세요. Wxss와 css 사이
Wxss
새로운 크기 단위
rpx
는 글로벌 스타일과 로컬 스타일을 제공합니다. Wxss
는 일부
css
만 지원합니다. 또는
id' 클래스 요소 등
미니 프로그램에서 응답성을 구현하는 방법
Rpx
미니 프로그램을 최적화하는 방법
페이지 로딩 속도 향상
사용자 행동 예측
기본 데이터 크기 줄이기
컴포넌트 솔루션
자율 지식 자신의 서버
미니 프로그램에서 사용자 아바타와 사용자 이름을 표시하는 방법
기존 인터페이스wx.getuserinfo 현재 사용 가능하며 사용 시 공식 프롬프트가 표시됩니다. 업그레이드 필요
최신 방법: open-data 태그, 이 태그를 사용하면 사용자 인증 없이 아바타와 사용자 이름을 직접 얻을 수 있습니다.
opendata로 쓸 수 있습니다. button에 속성을 추가하고 클릭이벤트를 작성해서 직접 받았습니다
미니 프로그램의 양방향 바인딩과 vue의 유사점과 차이점에 대해 이야기해 주세요.
Vue 양방향 바인딩은 데이터 차단 및 관찰자 모드를 통해 이루어지며, 값은 this.value를 통해 가져옵니다. 애플릿은 this를 사용하여 양식 요소 바인딩 방법을 트리거합니다. 값 을 얻기 위한 .setData(
{key:value}
) 메소드
및 vue유추 소개
님의 이야기 미니 프로그램의 WeChat 적응 문제에 대해
미니 프로그램 페이지 간에 데이터를 전송하는 방법은 무엇입니까?
WeChat 애플릿의 데이터 요청을 어떻게 캡슐화합니까?
WeChat 애플릿의 적응 문제에 대해 알려주세요
애플릿이 페이지로 이동하는 방법
WeChat 애플릿은 어떻게 됩니까? 점프? 다른 미니 프로그램으로
미니 프로그램 로딩이 느린 문제 해결 방법
기타
타입스크립트란 무엇인가요?
Typescript와 javascript의 장점은 무엇인가요?
Webpack과 gulp의 차이점
Gulp는 프런트 엔드 개발 프로세스를 최적화할 수 있는 도구이고, webpack은 모듈식 솔루션 (grunt)
webpack의 로더와 플러그인의 차이점을 간략하게 설명해주세요
loaders란 무엇인가요, loaders는 컴파일, 압축 등 리소스 파일을 로드하고 처리할 수 있는 파일 로더입니다. , 마지막으로 지정된 파일로 함께 패키지됩니다.
plugin이란 무엇인가요? webpack이 실행되는 동안 많은 이벤트가 발생하며, plugin에서는 이러한 이벤트를 들을 수 있습니다
차이점: 로더는 파일을 로드하는 데 사용됩니다. webpack 자체는 js 파일(built-in babel-loader)만 로드할 수 있습니다. 다른 파일을 설치해야합니다. CSS-Loader File-Loaderplugin
과 같은
loader. , 웹 팩을 달성할 수 있습니다 로더는 복잡한 기능을 완료할 수 없습니다페이지 성능을 향상시키는 방법은 무엇입니까? 성능 최적화란 무엇입니까? Node는 어떤 용도로 사용되나요? 서버 측에서 실행할 수 있나요?
Webpack은 기본 파일을 제공하여
webpack
에서 모든 것을 찾는 것입니다. 이 기본 파일부터 시작하는 프로젝트의 종속 파일을 만들고
loaders 클래스를 사용하여 처리합니다. 마지막으로 브라우저에서 인식할 수 있는 하나 이상의
js
파일
Commonjs ES6
모듈로 패키징됩니다. 차이점?
common
모듈은 복사본이므로 값을 수정할 수 있습니다. es6모듈은 참조이며 읽기 전용 상태이므로 값을 수정할 수 없습니다commonjs모듈은 런타임에 로드됩니다. es6
모듈은 컴파일 타임 출력 인터페이스입니다.
Git 사용 방법/공통 명령은 무엇입니까?
백엔드에서는 어떤 기술을 사용합니까
아직도 프로젝트에 Vue Family Bucket을 사용하는 이유는 무엇인가요?간략하게 자기소개 부탁드립니다. 프로젝트에 사용된 UI 프레임워크프론트엔드 성능을 최적화하는 방법이 많을수록 좋습니다cors란 무엇인가요
에 대해 이야기해 보겠습니다.
websocked
Websocked에 대한 이해는 연결이 설정된 후
websocked
서버와 브라우저가 서로 적극적으로 데이터를 보내거나 받을 수 있다는 것입니다.
websocked는 핸드셰이크를 통해 연결하려면 tcp와 유사한 클라이언트와 서버가 필요합니다. 연결이 성공한 후에만 연결이 성공할 수 있습니다.
백그라운드에서 전달되는 데이터는
기업에서 Ajax,
fetch
, axios 프로젝트 프로세스의 차이점에 대해 이야기해 보세요1 .WEB 프론트 엔드 프로젝트 개발 과정
프로젝트 수요 분석
이 링크는 프로젝트 관리자가 먼저 고객과 소통하여 고객의 요구 사항을 파악한 후 프로젝트의 타당성을 분석하고 프로젝트 관리자가 작성합니다. 프로젝트 요구 사항을 문서화하고 이를 디자이너에게 제공하여 후속 개발을 완료합니다. 페이지 디자인/프로젝트 선택
이 링크에는 주로 UI 디자이너가 참여합니다. UI 디자이너는 제품 요구 사항을 기반으로 문서를 분석하고 제품의 전반적인 아트 스타일, 인터랙션 디자인, 인터페이스 구조, 작동 프로세스 등을 디자인합니다. 프로젝트의 다양한 인터랙티브 인터페이스, 아이콘, 로고, 버튼 및 기타 관련 요소의 디자인 및 제작을 담당합니다. 그리고 기술을 꼭 활용하세요
coding
이 부분은 프로그래머가 구현한 부분입니다. (프로그래머는 WEB 프론트엔드 개발엔지니어와 백엔드 개발엔지니어로 나누어진다. 프론트엔드 개발자는 우리가 웹페이지에서 볼 수 있는 페이지 작업을 주로 하는 반면, 백엔드는 우리가 할 수 없는 일부 관리 시스템과 기능 구현을 담당한다. 참조.) 프로그래머는 UI에 따라 작업합니다. 디자이너의 디자인은 코딩을 사용하여 전체 프로젝트의 다양한 기능을 완성합니다.
Testing
이 부분은 프로그램 테스터가 수행합니다. 프로그램 테스터는 주로 프로그램에 여전히 존재하는 버그를 찾기 위해 테스트를 합니다. 일반적으로, 방금 코딩한 프로그램에는 문제가 있습니다. 테스터는 반복적으로 테스트하고 문제가 있는 테스트 결과를 코더에게 넘겨 버그를 수정해야 합니다. 거의 모든 버그 수정이 완료되면 프로젝트를 온라인으로 전환할 준비가 거의 완료된 것입니다.
유지관리
프로그램 유지관리는 전체 프로젝트의 마지막 단계이지만 가장 많은 시간과 비용이 소요되는 단계이기도 합니다. 프로그램 유지 관리에는 프로그램 출시 후 후속 버그 수정 및 프로그램 버전 업데이트가 포함됩니다.
2. 인터페이스 도메인 이름 변경
즉, 개발 중에 호출되는 백그라운드 인터페이스는 프로젝트가 온라인 상태가 된 후 요청된 인터페이스를 온라인 도메인 이름으로 바꿔야 합니다
3. 도구
코드 관리 플랫폼: github code cloud
요구 사항 릴리스 플랫폼: DingTalk, ZenTao
UI 상호 작용 플랫폼: Blue Lake
제품 프로토타입 도구: axure
기업 이메일: Alibaba Tencent 기업 이메일
백엔드 언어: java php python (Xi'an not Many)
4. 대기업과 중소기업의 개발 차이
대형 아웃소싱 회사는 프로세스 지향적이며 인력이 많고 의사 소통이 적으며 납품 후 프로젝트를 자체적으로 유지할 필요가 없습니다. , 워터폴 개발 모델 채택(주로 문서)
소규모 회사: 사람이 적고 변경이 잦으며 의사소통이 쉽고 민첩한 개발(v1 버전을 빠르게 출시한 후 반복)
5. 프론트엔드와 백엔드?
이상한 질문
백엔드 개발에 무엇을 사용하시나요?
모바일에서 페이지를 새로 고치는 방법은 무엇인가요?
프로젝트 초기화 및 구축 과정
프로젝트에서 자랑스러운 점은 무엇인가요?
단점에 대해 이야기해 보세요
핫 배포란 무엇인가요?
사용자 수는 몇 명인가요
인터페이스 호출 방법(백엔드와 통신 방법)
셀 테스트 방법
개발 환경, 테스트 환경, 테스트 환경의 환경변수는 무엇인가요? 개발 중 온라인 환경은 어떻게 처리하나요?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
