Html에서 Requirejs를 활용한 모듈 개발 분석-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

Html에서 Requirejs를 활용한 모듈 개발 분석

不言

Jun 09, 2018 pm 04:51 PM

이 글은 주로 HTML에서 Requirejs를 사용한 모듈 개발 분석을 소개합니다. 이제 이를 여러분과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

프런트 엔드 모듈화에 관해서는 단순히 js에는 모듈식 관리가 필요하고 html에도 때로는 모듈식 관리가 필요합니다. requirejs를 통해 HTML 코드의 모듈식 개발을 달성하는 방법에 대한 소개입니다

프론트 엔드가 모듈화되면 js에도 모듈식 관리가 필요할 뿐만 아니라 때로는 html에도 모듈식 관리가 필요합니다. 여기서는 requirejs를 통해 HTML 코드의 모듈식 개발을 구현하는 방법을 소개하겠습니다.

reuqirejs에는 지정된 파일의 내용을 읽을 수 있는 텍스트 플러그인이 있으며, 읽은 내용은 텍스트입니다.

텍스트 플러그인 다운로드 방법

첫 번째 방법은 npm을 통해 다운로드할 수 있습니다. npm install requirejs/text

두 번째 방법은 공식 github에서 직접 다운로드할 수도 있습니다.

콘텐츠를 text.js에 직접 복사하세요.

텍스트 플러그인 설치 방법

requirejs의 main.js에서 텍스트 플러그인의 종속성을 구성합니다. 일반 로딩을 통해 로드할 수 있는지 확인하세요. 방법.

requirejs.config({
baseUrl: &#39;./&#39;,
paths: {
&#39;text&#39;:path+&#39;/require/text&#39;,
...
},
shim: {
...
}
});

는 baseUrl에 직접 배치할 수도 있습니다.

텍스트 사용 방법

대상 모듈에서 다음 구문을 따르세요:

define(function(require){
var html = require("text!html/test.html");
console.log(html);
});

또는

define(["text!html/test.html"],function(html){
console.log(html);
});

html의 모듈식 개발을 수행하는 방법은 무엇입니까?

위 내용을 읽고 나면 텍스트 사용법은 이미 아셨지만, 프런트엔드 코드 구성 방법은 여전히 모르실 겁니다.
예:

Blog Park의 웹사이트 페이지는 위 탐색에 따라 다른 페이지로 이동합니다. 단일 페이지에 있는 경우 원래의 접근 방식은 탐색 버튼이 다른 ps에 해당한다고 생각하기 쉽습니다. 해당 버튼을 클릭하면 해당 ps가 숨겨집니다.

그러면 프런트 엔드 코드는 다음과 같을 수 있습니다.

<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>
<p style="display:block">按钮1对应的页面</p>
<p style="display:none">按钮2对应的页面</p>
<p style="display:none">按钮3对应的页面</p>
</body>
</html>

이러한 코드는 매우 지저분해질 것이며 프런트 엔드 HTML도 매우 길어질 것입니다... 이는 도움이 되지 않습니다. 유지.

그런 다음 reuqirejs의 텍스트 플러그인을 사용하여 다음을 수행할 수 있습니다:

<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>
<p id="target"></p>
</body>
</html>

그런 다음 해당 모듈에서:

$(&#39;#target&#39;).html(require("text!目标按钮对应的页面.html"));

이것은 더 캐주얼할 것입니다! 프론트엔드 코드도 모듈과 함께 효과적으로 관리할 수 있습니다!

그러나 이 메서드를 사용하면 Jquery에 바인딩된 이벤트가 무효화되므로 html() 메서드 다음에 이벤트를 다시 바인딩해야 합니다.

Html의 모듈식 개발을 위한 Requirejs 사용에 대한 모든 관련 지식이 도움이 되기를 바랍니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 기사

HTML 문서의 루트 태그는 무엇입니까?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itservesasthetop-levellement thatenCapsulateslotherContent, 프로퍼 디코 언어 구조에있는 BrowserParsing을 보장합니다.

HTML 태그와 요소가 같은 것입니까?Apr 28, 2025 pm 05:44 PM

이 기사는 HTML 태그가 요소를 정의하는 데 사용되는 구문 마커이고 요소는 태그 및 내용을 포함한 완전한 단위라고 설명합니다. 그들은 웹 페이지를 구조화하기 위해 협력합니다. character count : 159

& lt; head & gt의 중요성은 무엇입니까? & lt; Body & Gt; html에서 태그?Apr 28, 2025 pm 05:43 PM

이 기사는 & lt; Head & gt의 역할에 대해 설명합니다. & lt; Body & Gt; HTML의 태그, 사용자 경험에 미치는 영향 및 SEO 영향. 적절한 구조화는 웹 사이트 기능 및 검색 엔진 최적화를 향상시킵니다.

& lt; strong & gt;, & lt; b & gt; 태그 및 & lt; em & gt;, & lt; i & gt; 태그?Apr 28, 2025 pm 05:42 PM

이 기사는 HTML 태그, 등의 차이점과 시맨틱 대 프리젠 테이션 사용 및 SEO 및 접근성에 미치는 영향에 중점을 둡니다.

HTML의 문서에서 사용중인 문자 세트를 표시하는 방법을 설명해 주시겠습니까?Apr 28, 2025 pm 05:41 PM

기사는 UTF-8에 중점을 둔 HTML에서 문자 인코딩 지정에 대해 논의합니다. 주요 이슈 : 올바른 텍스트 표시 보장, 멍청한 문자 방지 및 SEO 및 접근성 향상.

HTML의 다양한 형식 태그는 무엇입니까?Apr 28, 2025 pm 05:39 PM

이 기사는 웹 컨텐츠를 구조화하고 스타일링하는 데 사용되는 다양한 HTML 서식 태그에 대해 논의하여 텍스트 모양에 미치는 영향과 접근성 및 SEO에 대한 시맨틱 태그의 중요성을 강조합니다.

'ID'속성과 HTML 요소의 '클래스'속성의 차이점은 무엇입니까?Apr 28, 2025 pm 05:39 PM

이 기사는 고유성, 목적, CSS 구문 및 특이성에 중점을 둔 HTML의 'ID'와 '클래스'속성의 차이점에 대해 설명합니다. 웹 페이지 스타일링 및 기능에 어떤 영향을 미치는지 설명하고 모범 사례를 제공합니다.

HTML의 '클래스'속성은 무엇입니까?Apr 28, 2025 pm 05:37 PM

이 기사는 스타일링 및 JavaScript 조작을위한 요소 그룹에서 HTML '클래스'속성의 역할을 고유 한 'ID'속성과 대조합니다.

See all articles

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.