테스트 코드를 작성하고 요구 사항을 사용하여 플러그인 Text.js와 협력하여 가장 간단한 단일 페이지 응용 프로그램을 구현했습니다. 쉽게 기록하고 향후 검토를 용이하게 할 수 있습니다.
git 주소 : https://github.com/lily1010/requirespa
아래 디렉토리를 살펴 보겠습니다
위의 프로젝트에서 알 수 있듯이 CSS를 개별적으로 추출하고 주문형 로딩을 구현했습니다. 즉, Test1.html이로드 될 때 Test1.css가로드되고 test2.html이로드되면 test2.css가로드됩니다.
Entry Index.html 코드를 먼저 살펴 보겠습니다
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> </title> <meta name = "viewport"content = "width = device-width, 초기-스케일 = 1, 최소-스케일 = 1, maximum-scale = 1, 사용자-스케일 가능 = no"/> <style type = "text/css"> </sty>> <script data-main = "js/main"src = "js/require.js"> </script> <div> </div> </body> </html>
위는 매우 간단합니다. 먼저 요구 사항 입력 데이터 메인을 정의하십시오. 또한, 주문시 CSS를로드하기 위해 클래스 CSS-Attribute를 정의했습니다.
2. 경로를 구성하고 main.js에서 논리적 처리를 수행합니다.
require.config ({paths : { "jQuery": "lib/jquery-111.0", "text": "lib/text", "text1": "../ template/test1.html", // "text2": "../ template/test2.html", "css1": "../ test1.cs" "css2": "../ style/test2.css"})) require ([ 'jquery', 'text! text1', 'text! text2', 'text! css1', 'text! css2'], function ($, css1, css2) {// 페이지를 입력하고 페이지를 입력하십시오. $ ( ". css-attribute"). html ( ". page"). $ ( ". page"). html (template2)});위의 내용은 가장 기본적인 구성이 필요하며 Text.js의 사용에주의를 기울이십시오. 매우 간단합니다.
셋째, 두 페이지 구조와 스타일을 살펴 보겠습니다.
test1.html 코드는 다음과 같습니다.
<div> <button> 스파의 두 번째 페이지로 점프하려면 나를 클릭하십시오 </button> </div>
test1.html의 CSS, 즉 test1.css 코드의 CSS는 다음과 같습니다.
.Test1 {위치 : 절대; 상단 : 0; 하단 : 0; 왼쪽 : 0; 오른쪽 : 0; 배경색 : 빨간색;}. 건너 뛰기 {위치 : 절대; 상단 : 50%; 왼쪽 : 50%; -webkit 변환 : 번역 (-50%, -50%); 변환 : 번역 (-50%, -50%);}효과는 다음과 같습니다.
test2.html 코드는 다음과 같습니다.
<div> <button> 나는 두 번째 페이지입니다. 첫 페이지로 돌아 가려면 나를 클릭하십시오 </button> </div>
test2.html의 CSS, 즉 test2.css 코드는 다음과 같습니다.
.Test2 {위치 : 절대; 상단 : 0; 하단 : 0; 왼쪽 : 0; 오른쪽 : 0; 배경색 : Pink;}. Skip2 {위치 : 절대; 상단 : 50%; 왼쪽 : 50%; -webkit 변환 : 번역 (-50%, -50%); 변환 : 번역 (-50%, -50%);}효과는 다음과 같습니다.
위의 기사는 단일 페이지 응용 프로그램 (SPA)의 간단한 구현이 필요합니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.