Vue 파일의 기본 논리를 구문 분석하는 방법-JS 튜토리얼-php.cn

Vue 파일의 기본 논리를 구문 분석하는 방법

php中世界最好的语言

풀어 주다： 2018-06-06 14:05:45

원래의

2163명이 탐색했습니다.

이번에는 vue 파일의 기본 로직을 분석하는 방법과 vue 파일의 기본 로직에 대한 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

우리가 일반적으로 작성하는 .vue 파일을 SFC(Single File Components)라고 합니다. 이 글에서는 SFC를 설명자로 구문 분석하는 프로세스가 vue에서 수행되는 방법을 소개합니다.

vue는 .vue 파일을 설명자로 구문 분석하는compiler.parseComponent(file, [options]) 메서드를 제공합니다.

// an object format describing a single-file component.
declare type SFCDescriptor = {
  template: ?SFCBlock;
  script: ?SFCBlock;
  styles: Array<SFCBlock>;
  customBlocks: Array<SFCBlock>;
};

로그인 후 복사

파일 항목

sfc 파일 구문 분석을 위한 항목은 src/sfc/parser.js에 있습니다. , 이 파일은 단일 파일 구성 요소를 컴파일하는 데 사용되는 parsComponent 메서드를 내보냅니다.

다음으로 parsComponent 메소드가 수행하는 작업을 살펴보겠습니다.

parseComponent 메서드

function start(tag, attrs, unary, start, end,){
}
function end(tag, start, end){
}
parseHTML(content, {
  start,
  end
})

로그인 후 복사

parseComponent 메서드는 start와 end라는 두 가지 함수를 정의한 다음,parseHTML 메서드를 호출하여 .vue 파일의 내용을 컴파일합니다.

그렇다면 이 ParseHTML 메소드는 무엇을 합니까?

parseHTML 메소드

이름에서 이 메소드가 html 파서임을 알 수 있습니다. 각 시작 태그를 구문 분석할 때 각 태그가 끝날 때 옵션에서 시작을 호출한다는 것을 간단히 이해하면 됩니다. 결국.

여기에 해당하는 것은 각각 parComponent 메소드에 정의된 시작 및 종료 함수를 호출하는 것입니다.

parseComponent에서 깊이 변수를 유지하고 시작 및 깊이에 깊이++를 설정합니다. 그런 다음 깊이 === 0인 각 태그는 템플릿, 스크립트, 스타일 및 일부 사용자 정의 태그를 포함하여 우리가 얻어야 하는 정보입니다.

start

시작 태그를 만날 때마다 시작 기능이 실행됩니다.

1. 현재 블록을 기록합니다.

각 currentBlock에는 다음 내용이 포함됩니다.

declare type SFCBlock = {
  type: string;
  content: string;
  start?: number;
  end?: number;
  lang?: string;
  src?: string;
  scoped?: boolean;
  module?: string | boolean;
};

로그인 후 복사

2. 태그 이름에 따라 반환된 결과 개체에 currentBlock 개체를 넣습니다.

반환된 결과 개체는 sfc로 정의됩니다. 태그가 스크립트, 스타일, 템플릿 중 하나라도 아닌 경우 sfc.customBlocks에 배치됩니다. 스타일이라면 sfc.styles에 넣어주세요. 스크립트와 템플릿은 sfc 바로 아래에 배치됩니다.

if (isSpecialTag(tag)) {
  checkAttrs(currentBlock, attrs)
  if (tag === 'style') {
    sfc.styles.push(currentBlock)
  } else {
    sfc[tag] = currentBlock
  }
} else { // custom blocks
  sfc.customBlocks.push(currentBlock)
}

로그인 후 복사

end

종료 태그를 만날 때마다 종료 기능이 실행됩니다.

1. 현재 라벨이 첫 번째 레이어(깊이 === 1)이고 currentBlock 변수가 존재하는 경우 텍스트에서 이 부분을 꺼내서 currentBlock.content에 넣습니다.

if (depth === 1 && currentBlock) {
 currentBlock.end = start
 let text = deindent(content.slice(currentBlock.start, currentBlock.end))
 // pad content so that linters and pre-processors can output correct
 // line numbers in errors and warnings
 if (currentBlock.type !== 'template' && options.pad) {
  text = padContent(currentBlock, options.pad) + text
 }
 currentBlock.content = text
 currentBlock = null
}

로그인 후 복사

2, 깊이-- .

Get descriptor

전체 .vue를 탐색한 후 얻은 sfc 객체가 우리에게 필요한 결과입니다.

.js를 생성하시겠습니까?

compiler.parseComponent(file, [options])는 구성 요소의 SFCDescriptor만 가져옵니다. .js 파일로의 최종 컴파일은 vue-loader와 같은 라이브러리에 의해 수행됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!