이전 기사 : JS 모듈 식 도구에 매우 간단한 방법으로 요구 사항을 소개했습니다. 이 기사는 API 사용 방법을 포함하여 요구 사항에 대한 몇 가지 기본 지식을 알려줍니다.
기본 API
요구 사항은 세 가지 변수를 정의합니다. Defin, Ireding, 요구 사항 === 요구 사항이 필요합니다. 일반적으로 요구 사항이 필요합니다.
이름에서 정의하면 이 API가 모듈을 정의하는 데 사용되는 것을 알 수 있습니다.
로드 필요 종속 모듈을로드하고로드 된 콜백 함수를 실행합니다.
이전 기사에서 A.JS :
define (function () {function fun1 () {alert ( "it Works");} fun1 ();})모듈은 정의 함수를 통해 정의 된 다음 페이지에서 사용됩니다.
요구 ([ "js/a"]);
모듈을로드하려면 (요구의 종속성은 배열입니다. 종속성이 하나만 있더라도 배열을 사용하여 정의해야합니다). 요구 사항 API의 두 번째 매개 변수는 콜백, 함수이며, 로딩 후 로직을 처리하는 데 사용됩니다.
require ([ "js/a"], function () {alert ( "load miniday");})파일을로드하십시오
이전의 예에서, 로딩 모듈은 모두 로컬 JS 였지만 대부분의 경우 웹 페이지로드 해야하는 JS는 로컬 서버, 다른 웹 사이트 또는 CDN에서 나올 수 있으므로이 방법을로드 할 수 없습니다. 예를 들어 jQuery 라이브러리를로드합시다.
require.config ({paths : { "jquery": [ "http://libs.baidu.com/jquery/2.0.3/jquery/2.0.3/jquery"}) requess ([ "jquery", "js/a"], function ($) {$ (function) {alert ( "load atway}))})여기에는 요구 사항이 포함됩니다. Config는 모듈의 로딩 위치를 구성하는 데 사용됩니다. 간단히 말해서, 모듈에 더 짧고 더 잘 기억 된 이름을 제공하는 것입니다. 예를 들어, Baidu의 jQuery 라이브러리 주소를 jQuery로 표시하여 JS를로드해야 할 때만 [ "jQuery"]를 작성하면됩니다. 다음과 같은 로컬 J를 구성 할 수도 있습니다.
require.config ({경로 : { "jQuery": [ "http://libs.baidu.com/jquery/2.0.3/jquery"], "a": "js/a"}) 요구 사항 ([ "jquery", "a"], function ($) {function ()))경로 구성으로 인해 모듈 이름이 더 세련됩니다. 경로에는 중요한 기능이 있으며 이는 여러 경로를 구성하는 것입니다. 원격 CDN 라이브러리가 성공적으로로드되지 않으면 로컬 라이브러리를 다음과 같이로드 할 수 있습니다.
require.config ({paths : { "jquery": [ "http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], "a": "js/a"}}) requeS ([ "jquery", "a"], function (intureats ()))이 구성 후 Baidu의 jQuery가 성공적으로로드되지 않으면 로컬 JS 디렉토리의 jQuery가로드됩니다.
요구 사항을 사용하는 경우 모듈을로드 할 때 .js 접미사를 작성할 필요가 없으며 물론 접미사를 쓸 수 없습니다.
위의 예에서 콜백 함수에는 $ 매개 변수가 있습니다. 이것은 종속성 jQuery 모듈의 출력 변수입니다. 여러 모듈에 의존하는 경우 다음에 여러 매개 변수를 작성할 수 있습니다.
require ([ "jQuery", "alderscore"], function ($, _) {$ (function () {_.Each ([1,2,3], Alert);})}).모듈이 변수 값을 출력하지 않으면 아무도 없습니다. 따라서 직책이 혼란 스러울 때의 오해로 인한 오해로 인한 오해로 인한 오해로 인한 오해를 방지하기 위해 출력 모듈을 앞쪽으로 작성하십시오.
글로벌 구성
위의 예제에서 require.config 구성이 반복됩니다. 각 페이지에 구성이 추가되면 필연적으로 매우 무례하게 나타납니다. 요구 사항은 "기본 데이터"라는 함수를 제공합니다. 먼저 main.js를 만듭니다.
require.config ({paths : { "jQuery": [ "http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], "a": "js/a"}})그런 다음 페이지의 다음 방법을 사용하여 요구 사항을 사용하십시오.
<script data-main = "js/main"src = "js/require.js"> </script>
요구 사항 스크립트로드의 스크립트 태그가 데이터 메인 속성을 추가한다고 설명하십시오. 이 속성에 지정된 JS는 reuqire.js를로드 한 후 처리됩니다. Config 구성을 데이터 메인에 추가 한 후에는 각 페이지 가이 구성을 사용하도록 할 수 있으며 페이지를 직접 사용할 수 있습니다. 모든 짧은 모듈 이름을로드합니다.
데이터 메인에는 중요한 기능도 있습니다. 스크립트 태그가 데이터 메인 속성을 지정하는 경우 data-main으로 지정된 JS를 루트 경로로 선택하려면 요구합니다. 무슨 뜻입니까? 예를 들어, Data-Main = "JS/Main"설정 후에, 우리가 요구 ([ 'jQuery']) (jQuery 경로가 구성되지 않음)을 사용한 후에는 jquery.js 대신 js/jquery.js 파일을 자동으로로드합니다.
require.config ({baseurl : "js"})타사 모듈
로드 된 모듈은 일반적으로 AMD 사양을 준수해야합니다. 즉, 정의를 사용하여 선언 모듈을 사용해야하지만 경우에 따라 AMD 비 사양 JS를로드해야합니다. 현재 다른 기능인 Shim을 사용해야합니다. 심은 설명하기가 어렵습니다. 심은 "패드"로 직접 번역되며 실제로는이 의미가 있습니다. 현재 저는 주로 두 곳에서 사용합니다
1. 비 AMD 모듈 출력, "PAD"비표준 AMD 모듈로 사용 가능한 모듈로의 모듈. 예를 들어 : 이전 버전의 jQuery에서 AMD 사양은 상속되지 않으므로 [ "jQuery"] 직접 요구할 수 없습니다. 현재 Shim이 필요합니다. 예를 들어, 밑줄 클래스 라이브러리를 사용하지만 AMD 사양을 구현하지 않으면 이와 같이 구성 할 수 있습니다.
require.config ({shim : { "밑줄": {내보내기 : "_";}}})이 구성 후에는 다른 모듈에서 밑줄 모듈을 참조 할 수 있습니다.
요구 ([ "밑줄"], 함수 (_) {_.Each ([1,2,3], Alert);})플러그인 형식의 비 AMD 모듈의 경우 종종 jQuery 플러그인을 사용 하며이 플러그인은 기본적으로 jQuery.form 플러그인과 같은 AMD 사양을 준수하지 않습니다. 현재 jQuery로 플러그인을 "패드"해야합니다.
request.config ({shim : { "밑줄": {내보내기 : "_";}, "jquery.form": {deps : [ "jQuery"]}}})또한 다음과 같이 축약 할 수 있습니다.
require.config ({shim : { "밑줄": {내보내기 : "_";}, "jquery.form": [ "jQuery"]}})이 구성 후 플러그인을로드 한 후 jQuery를 사용할 수 있습니다.
require.config ([ "jquery", "jquery.form"], function ($) {$ (function () {$ ( "#form"). AjaxSubmit ({...});})}).좋아, 요구 사항에 대한 기본 구성이 너무 많으며 향후 일부 확장 된 기능이 언급 될 것입니다. 그들을 놓치지 마세요!