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

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

不言

풀어 주다： 2018-06-09 16:51:50

원래의

3026명이 탐색했습니다.

이 글은 주로 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 중국어 홈페이지를 주목해주세요!