requireJS 사용 가이드_기타-JS 튜토리얼-php.cn

requireJS 사용 가이드_기타

WBOY

풀어 주다： 2016-05-16 15:03:36

원래의

1330명이 탐색했습니다.

대부분의 프로젝트는 모듈식 개발을 사용합니다. requireJS는 AMD 모듈 개발의 모델이므로 학습이 필요합니다. requireJS를 사용하여 단계별로 데모를 작성하면 requireJS의 전반적인 개발 과정과 requireJS 사용에 대한 자신의 느낌을 배울 수 있습니다.

AMD: JavaScript 코드를 비동기적으로 로드하기 위한 모듈 기반 메커니즘입니다. 개발자는 전역 개체에 대한 종속성을 모듈로 캡슐화할 것을 권장합니다. 전역 변수를 많이 선언할 필요가 없습니다. 지연 및 주문형 로딩을 통해 개별 모듈 종속성을 해결합니다. 모듈화된 JavaScript 코드의 이점은 명백합니다. 각 기능 구성 요소의 느슨한 결합은 코드의 재사용성과 유지 관리성을 크게 향상시킬 수 있습니다. 이러한 JavaScript 코드의 비차단 동시 빠른 로드를 통해 이미지, CSS 및 기타 DOM 노드와 같이 JavaScript 코드에 의존하지 않는 웹 페이지의 다른 UI 요소가 먼저 로드되고 사용자는 더 나은 결과를 얻을 수 있습니다. .좋은 경험이었습니다.

1. requireJS를 다운로드하세요

requireJS를 사용한 모듈식 개발에 앞서 몇 가지 준비가 필요합니다. 그러면 require.js 파일을 다운받아야 합니다. 하하하, 이를 기반으로 개발되었기 때문입니다.

2. HTML 파일을 생성합니다

HTML 파일을 생성한 후 requireJS를 가져올 때 <script> 태그를 사용해야 합니다. 그런 다음 이 태그에는 입구 및 출구 역할을 하는 data-main 속성이 있습니다. 즉, requireJS를 로드한 후 data-main 속성에서 들어갑니다. </p> <p>예: </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <!DOCTYPE html> <head> <title>require</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <body>  <script data-main="js/main" src="js/require.js"></script> </body> </html> </pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p>js/require.js를 로드하면 js/main의 js 파일을 실행합니다. main도 js 파일입니다. .js 접미사를 생략하면 requireJS가 이를 추가합니다. </p> <p><strong>3. 데이터메인</strong></p> <p>프로그램이 <script data-main='js/main' src='js/require.js'></script>를 실행하면 data-main을 통해 main.js를 입력하고 main.js를 실행합니다. 그렇다면 main.js에는 무엇이 있나요?

코드를 확인하세요:

/*
  require.config执行baseUrl为'js'，
  baseUrl指的模块文件的根目录，可以是绝对路径或相对路径
*/
require.config({
  baseUrl: 'js',
  paths: {
    jquery: 'jquery-1.8.2.min'
  }
});
/*
  这里通过require，来引入monkey.js，
  然后通过后面的匿名函数给他们分配参数，如这里的
  monkey-->mk
*/
require(['monkey'],function(mk) {
  mk.init();  
});

로그인 후 복사

위 코드에서 main.js에는 require.config와 require라는 두 개의 모듈이 포함되어 있음을 알 수 있습니다.

require.config의 기능은 requireJS의 일부 매개변수를 구성한 다음 이를 공개적으로 참조하는 것입니다.

예를 들어 위의 baseUrl의 기능은 이를 기본 경로로 사용하고 이 경로에서 파일을 검색하는 것입니다. 모든 .js 파일을 js 폴더에 넣었습니다. 따라서 이 속성을 구성한 후 향후 파일은 js 경로 아래의 콘텐츠를 검색합니다.

다음과 같습니다.

require(['monkey'], function(monkey){
  monkey.init();
});

로그인 후 복사

monkey를 지칭할 때는 js/monkey가 아닌 Monkey를 지칭합니다.

길의 역할은 무엇인가요? 일반적으로 사용되는 일부 js 파일을 일반적인 이름으로 바꾸십시오. 예를 들어 jquery-1.8.2.min.js는 호출할 때마다 이것을 작성할 수 없으므로 편의상 jquery-1.8.2.min.js를 jquery로 대체하여 사용하시면 됩니다. jquery를 직접 사용하면 빠르고 편리합니다.

알겠습니다. require.config는 한마디로 requireJS를 구성하는 기능입니다.

require는 어떻습니까?

require의 기능은 실행입니다. 예를 들어, 여기에서는 실행하려면 Monkey.js만 필요하므로 Monkey를 가져온 다음 mk 매개 변수를 사용하여 Monkey 실행 후 반환 값을 얻었습니다. 반환 값이 있으면 그에 따라 mk를 처리할 수 있습니다.

야, 원숭이 안에는 무엇이 들어있니?

보자:

/*
  define的参数为匿名函数，该匿名函数返回一个对象
*/
define(['jquery'],function($){
  var init = function(){
    console.log($.browser);
  };
  return {
    init: init
  };
});

로그인 후 복사

정의하세요! 그 기능은 다른 모듈에서 사용하거나 요구하기 위해 js 모듈을 정의하는 것입니다. 다른 js 모듈을 참조하는 방법은 필수 js 파일을 가져온 다음 매개변수를 일대일로 대응시키는 방법과 유사합니다. 모두가 주의해야 할 점은 정의에 정의된 메소드나 변수는 다른 모듈에서 액세스할 수 없다는 것입니다. 따라서 다른 모듈이 액세스할 수 있도록 하려면 해당 메소드를 객체나 함수에서 버리면 됩니다. 여기서 내가 반환하는 것은 다른 모듈이 호출할 수 있는 init를 제공하는 객체입니다.