프론트 엔드 모듈화시 JS에는 모듈 식 관리가 필요할뿐만 아니라 HTML에도 모듈 식 관리가 필요합니다. 여기서 우리는 요구 사항을 통해 HTML 코드의 모듈 식 개발을 구현하는 방법을 소개합니다.
요구 사항을 사용하여 HTML을로드하는 방법
reuqirejs에는 지정된 파일의 내용을 읽을 수있는 텍스트 플러그인이 있으며 컨텐츠는 텍스트입니다.
텍스트 플러그인을 다운로드하는 방법
첫 번째 방법은 NPM을 통해 다운로드 할 수 있습니다.
NPM 설치 요구 사항/텍스트
두 번째 방법은 공식 Github에서 직접 다운로드 할 수도 있습니다.
컨텐츠를 text.js에 직접 복사하기 만하면됩니다.
텍스트 플러그인을 설치하는 방법
jQuery와 유사한 requeSjs의 main.js에서 텍스트 플러그인의 종속성을 구성 할 수 있습니다. 정상화를 통해로드 할 수 있는지 확인하십시오.
requirejs.config ({baseurl : './', paths : {'text ': path+'/requept/text ', ...}, shim : {...}});또한 Baseurl에 직접 배치 할 수도 있습니다.
텍스트를 사용하는 방법
대상 모듈에서 다음 구문을 따르십시오.
define (function (require) {var html = require ( "text! html/test.html"); console.log (html);});또는
정의 ([ "text! html/test.html"], function (html) {console.log (html);});HTML의 모듈 식 개발 방법은 무엇입니까?
위의 내용을 읽은 후에는 이미 텍스트를 사용할 수 있지만 여전히 프론트 엔드 코드를 구성하는 방법을 모릅니다.
밤나무를 가져 가십시오 :
블로그 가든의 웹 사이트 페이지는 위의 내비게이션에 따라 다른 페이지로 이동합니다. 단일 페이지에있는 경우 원래 메소드를 쉽게 생각할 수 있습니다. 탐색 버튼은 다른 div에 해당합니다. 해당 버튼을 클릭하면 해당 DIV가 표시됩니다. 다른 div는 숨겨 질 것입니다.
그런 다음 프론트 엔드 코드는 다음과 같습니다.
<html> <body> <av> avigation button 1, 내비게이션 버튼 2, 탐색 버튼 3 </nav> <div style = "display : block"> 페이지 버튼 1 </div> <div style = "display : none"> 버튼에 해당하는 페이지 </div "> 버튼에 해당하는 페이지 </div> </html>
이러한 코드는 매우 지저분해질 것입니다 ... 프론트 엔드 HTML은 유지 보수에 도움이되지 않습니다.
그런 다음 reuqirejs의 텍스트 플러그인을 사용하면 다음을 수행 할 수 있습니다.
<html> <bod> <av> 탐색 버튼 1, 탐색 버튼 2, 탐색 버튼 3 </nav> <div id = "target"> </div> </body> </html>
그런 다음 해당 모듈에서 :
$ ( '#target'). html (require ( "텍스트! 대상 버튼 페이지 .html"));
이것은 당신을 더 캐주얼하게 만들 것입니다! 모듈로 프론트 엔드 코드를 효과적으로 관리 할 수도 있습니다!
그러나이 방법으로 인해 이벤트가 유효하지 않으므로 html () 메소드 후에 이벤트를 다시 반드해야합니다.
HTML에서 Modular Development를 사용하는 데 필요한 것에 대해 많은 것을 소개하겠습니다. 도움이되기를 바랍니다.