중합체 1.0으로 업그레이드하는 안내서

코어 포인트

폴리머 1.0은보다 효율적인 성능, 더 작은 크기, 사용자 지정 요소에 대한 더 나은 지원, 개선 된 데이터 바인딩 시스템을 갖춘 이전 버전의 철저한 리팩토링으로 사용하기 쉽고 직관적 인 데이터 바인딩 시스템입니다.

폴리머 0.5에서 폴리머 1.0으로 업그레이드하려면 바우어 종속성 업데이트, HTML 가져 오기 업데이트, 새로운 구문에 맞는 요소 정의 및 데이터 바인딩 조정 및 모든 것이 예상대로 작동하도록 철저한 테스트를 포함하여 여러 단계가 필요합니다.

Polymer 1.0은 웹 구성 요소 표준의 핵심 부분 인 Shadow Dom을 소개하고 사용자 정의 요소의 구현 세부 사항을 캡슐화하여 내부 구조와 스타일을 나머지 페이지 외부에 숨 깁니다. Shadow Dom의 스타일 요소에 CSS 사용자 정의 속성 및 및
• 선택기를 사용할 수 있습니다.
• 최근에 체결 된 Google I/O 2015 컨퍼런스에서 Google은 오랫동안 기다려온 폴리머 1.0 버전을 발표하여 생산에 들어갈 준비가되었다고 발표했습니다. 폴리머 라이브러리가 개발자 미리보기 단계에있는 동안 중합체 라이브러리를 사용한 사람들을 위해이 기사는 기존 응용 프로그램을 최신 버전의 폴리머로 마이그레이션하는 가이드 역할을합니다.
버전 1.0에 대한 몇 가지 중요한 메모 :
• 는 이전 버전 0.5 (지금까지 가장 긴 버전)와 호환되지 않습니다. ::shadow 새 버전은 성능과 효율성에 중점을 두면서 라이브러리의 전체 크기를 크게 줄입니다. /deep/ 는 처음부터 완전히 재건되어 개발자가 표준 DOM 요소와 더 쉽고 빠른 사용자 정의 요소를 설계 할 수있었습니다.
내부 벤치 마크에 따르면 이전 버전과 비교하여 버전 1.0은 Chrome에서 약 3 배 빠르고 Safari에서 약 4 배 빠릅니다.

최신 버전의 폴리머를 설치하는 단계는이 기사에서 설명한 것과 정확히 동일합니다. 기존 폴리머 설치를 업데이트하려면 응용 프로그램 디렉토리로 이동하여 터미널에서 다음 명령을 실행하십시오.

앞에서 언급했듯이 기존 애플리케이션이 반드시 파괴 될 것이라는 점에 유의해야합니다. 두 버전은 호환되지 않습니다. 따라서 대신 별도의 폴더에 새 사본을 설치하는 것이 좋습니다. 버전 0.5 이후의 변경 사항을 설명하기 위해 Sitepoint의 이전 게시물의 신용 카드 사용자 정의 요소를 참조하여 두 버전의 차이점을 비교합니다.

지원되지 않은 브라우저에 폴리 필드 제공 새로운 버전의 폴리머는 더 이상

라이브러리에 포함 된 그림자 dom polyfill을 필요로하지 않습니다. 대신, 더 작은 라이브러리를 사용하여 구형 브라우저에 폴리 필드를 제공하십시오.

<: :> 버전 0.5 :

<: :> 버전 1.0 :

"라이트 버전"은 전임자보다 약 80KB가 적으므로 성능이 핵심 요소 일 때 매우 중요 할 수 있습니다.

사용자 정의 요소 정의

태그는 사용자 정의 요소 정의가 포함 된 <polymer-element></polymer-element> 태그로 대체되었습니다. 사용자 정의 요소는 이제 태그의 <dom-module></dom-module> 속성으로 식별됩니다. 사용자 정의 요소의 이름 지정 규칙은 여전히 ​​동일합니다. <dom-module></dom-module> <: :> 버전 0.5 : id <: :> 버전 1.0 :

등록 사용자 정의 요소 이전에, 우리는 단순히

$ bower update

생성자를 호출하여 사용자 정의 요소를 등록 할 수 있습니다. 태그가 <🎜 🎜> 태그 내에있는 경우 사용자 정의 요소 이름을 지정하는 것은 선택 사항입니다. 이 버전에서는 이제 프로토 타입에서

속성을 ​​사용하여 사용자 정의 요소가 등록됩니다.

<: :> 버전 0.5 : <🎜 🎜>

<🎜>

<: :> 버전 1.0 : <🎜 🎜>

속성의 값은 사용자 지정 요소의 <🎜 태그의 속성과 일치해야하며 이전 버전과는 다른 옵션이 아닙니다.

<🎜 🎜> 태그는 <🎜 🎜> 요소 내부 또는 외부에있을 수 있지만

생성자가 호출되기 전에 요소의 템플릿을 구문 분석해야합니다. Polymer() <🎜 🎜> <<> 사용자 정의 요소 속성 <polymer-element> <🎜 🎜> is <🎜 🎜> 태그에 포함 된 모든 속성은 이제 데이터 유형과 함께

객체에 선언되어야합니다.

<: :> 버전 0.5 : <🎜 🎜>

<: :> 버전 1.0 : <🎜 🎜>

<🎜>

<🎜 🎜> <<> 사용자 정의 요소 스타일

<🎜 🎜> <🎜 🎜> 요소 스타일은 이제 <🎜 🎜> 태그 외부에서 정의됩니다.

<: :> 버전 0.5 : <🎜 🎜>

<polymer-element name="credit-card"></polymer-element>
  ...

<: :> 버전 1.0 :

외부 스타일 시트를 지원하기 위해 HTML 가져 오기를 사용하십시오. is <dom-module></dom-module> 데이터 바인딩 id 중합체 1.0은 두 가지 유형의 데이터 바인딩을 제공합니다 :

정사각형 브래킷

일원 바인딩을 만듭니다. 데이터 흐름은 호스트에서 하위 요소로 하향식이며 바인딩은 호스트 특성을 수정하지 않습니다. <dom-module></dom-module> 브레이퍼 Polymer 자동 바인딩을 만듭니다. 데이터 흐름은 대상 속성이 양방향 바인딩으로 구성되어 있는지 여부에 따라 일방 방향 또는 양방향입니다.

이 버전에서 바인딩은 노드의 전체 텍스트 내용 또는 속성의 전체 값을 대체해야합니다. 따라서 문자열 연결은 지원되지 않습니다. 속성 값의 경우 문자열 연결 대신 계산 된 바인딩을 사용하는 것이 좋습니다. <: :> 버전 0.5 : <: :> 버전 1.0 :

이것은 노드가 바운드 주석 주위에 공백을 포함 할 수 없음을 의미합니다. <polymer-element></polymer-element> 새로운 그늘진 dom properties Polymer 0.5 Shadow DOM을 사용하여 개발자에게 더 간단한 요소 인터페이스를 제공하고 Shadow Roots 뒤에 서브 트리를 숨겨서 모든 복잡성을 추상화합니다. 이것은 캡슐화의 기초를 형성하고 Shadow Dom을 지원하는 브라우저에서 잘 작동합니다.

아직 Shadow Dom을 지원하지 않는 브라우저의 경우, 기본 Shadow Dom과 동일한 폴리 필을 구현하는 것은 매우 어렵습니다. 일반적으로 기본 구현보다 느리고 많은 코드가 필요합니다. 이러한 이유로, 중합체 팀은 Shadow Dom Polyfill을 취소하기로 결정하고 대신 Shadow Dom과 유사한 포장을 제공하는 기본 DOM의 가벼운 버전을 만들었습니다.

Shady Dom과 Shadow Dom은 서로 호환됩니다. 즉, Shady Dom API는 브라우저를 사용할 수있을 때 네이티브 Shadow Dom을 사용하고 지원되지 않는 브라우저에서 Shady Dom으로 돌아갑니다.

결론

응용 프로그램의 복잡성에서 응용 프로그램을 중합체 1.0으로 업그레이드하는 것은 매우 느린 프로세스가 될 수 있지만로드 시간 속도를 높이고 페이로드를 크게 줄이는 데 큰 이점이 있습니다. 폴리머 프로젝트 웹 사이트에서 이용할 수있는 공식 마이그레이션 안내서는 내부 API에 대한 다른 변경 사항을보다 심도있게 볼 수 있으므로 확인하십시오.

또한 Chuck Horton은 Road to Polymer 1.0이라는 Github 저장소를 만들었습니다.이 코드는 버전 0.5에서 버전 1.0으로 코드를 업데이트 할 수있는 코드 변환 도구를 제공합니다. 수동으로 외관을 변경하고 싶지 않다면 마이그레이션의 출발점이 될 수 있습니다. 폴리머 1.0 로 업그레이드하는 것에 대한 FAQS

중합체 0.5와 중합체 1.0의 주요 차이점은 무엇입니까?

중합체 1.0은 이전 버전의 폴리머 0.5를 완전히 다시 쓰는 것입니다. 새 버전은 더 효율적이며 공간이 적고 성능이 빠릅니다. 또한 이해하고 사용하기 쉬운 새로운 단순화 된 구문을 소개합니다. 데이터 바인딩 시스템은 성능을 향상시키고 동작을보다 직관적으로 만들기 위해 개선되었습니다. 또한 Polymer 1.0은 웹 구성 요소 표준의 핵심 부분 인 사용자 정의 요소를 만드는 데 더 나은 지원을 지원합니다.

프로젝트를 폴리머 0.5에서 폴리머 1.0으로 업그레이드하는 방법은 무엇입니까?

중합체 0.5에서 중합체 1.0으로의 업그레이드에는 여러 단계가 포함됩니다. 먼저, 새로운 폴리머 1.0 요소를 가리려면 바우어 종속성을 업데이트해야합니다. 그런 다음 새 요소를로드하려면 HTML 가져 오기를 업데이트해야합니다. 또한 새로운 폴리머 1.0 구문을 사용하려면 요소 정의 및 데이터 바인딩을 업데이트해야합니다. 마지막으로 모든 것이 예상대로 작동하는지 확인하려면 프로젝트를 철저히 테스트해야합니다.

Shadow Dom은 무엇입니까? 폴리머 1.0에서 어떻게 작동합니까?

Shadow Dom은 웹 구성 요소 표준의 핵심 부분입니다. 내부 구조와 나머지 페이지 외부에 내부 구조와 스타일을 숨기고 사용자 정의 요소 구현의 세부 사항을 캡슐화하는 방법을 제공합니다. Polymer 1.0에서는 Shadow Dom을 사용하여 완전히 캡슐화되고 재사용 가능한 사용자 지정 요소를 만들 수 있습니다.

Shadow Dom에서 요소를 스타일링하는 방법은 무엇입니까? Shadow Dom의 스타일링 요소는 나머지 페이지에서 캡슐화되고 분리되어 있기 때문에 약간 까다로울 수 있습니다. 그러나, 중합체 1.0은 섀도우 돔 요소를 스타일링하는 몇 가지 방법을 제공합니다. CSS 사용자 정의 속성을 사용하여 Shadow Dom 내부에 적용 할 수있는 스타일을 정의 할 수 있습니다. 또한 및 선택기를 사용하여 그림자 돔을 관통하고 내부 요소를 스타일링 할 수 있습니다.

... (나머지 FAQ 답변은 컨텐츠를 일관성있게 유지하기 위해 같은 방식으로 다시 작성할 수 있지만 단어와 문장은 변경 될 수 있습니다)

위 내용은 중합체 1.0으로 업그레이드하는 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!