두 번째로 JS require.js 모듈러 도구_javascript 기술에 대한 기본 지식에 대해 이야기해 보겠습니다.

이전 기사: JS 모듈러 도구 우리는 매우 간단한 방법으로 requirejs를 소개했습니다: http://www.jb51.net/article/82527.htm, 이 기사에서는 requirejs에 대해 설명합니다. 몇 가지 기본 지식, API 사용법 등

기본 API

require는 세 가지 변수 정의, require, requirejs를 정의합니다. 여기서 require === requirejs는 일반적으로 require를 사용하는 것이 더 짧습니다.

define 이름에서 알 수 있듯이 이 API는 모듈을 정의하는 데 사용됩니다
require 종속 모듈을 로드하고 로드 후 콜백 함수 실행
이전 기사의 a.js:

define(function(){
  function fun1(){
   alert("it works");
  }
  fun1();
})

정의 함수를 통해 모듈을 정의한 후 페이지에서 사용하세요.

require(["js/a"]);
모듈을 로드하려면(require의 종속성은 배열이므로 종속성이 하나만 있어도 이를 정의하려면 배열을 사용해야 합니다.) require API의 두 번째 매개변수는 처리하는 데 사용되는 함수인 콜백입니다. 로드 후 논리:

require(["js/a"],function(){
  alert("load finished");
})

파일 로드

이전 예시에서는 로드된 모듈이 모두 로컬 js였지만, 대부분의 경우 웹페이지에서 로드해야 하는 JS는 로컬 서버나 다른 웹사이트, CDN에서 올 수 있으므로 여기서는 로드할 수 없습니다. 예를 들어 jquery 라이브러리를 로드할 수 있습니다.

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"] 
  }
})
require(["jquery","js/a"],function($){
  $(function(){
    alert("load finished"); 
  })
})

require.config가 포함됩니다. require.config는 모듈 로딩 위치를 구성하는 데 사용됩니다. 간단히 말하면 모듈에 더 짧고 기억하기 쉬운 이름을 부여하는 것입니다. 예를 들어 Baidu의 jquery 라이브러리 주소를 jquery로 표시합니다. , 따라서 필요할 때 js를 로드하기 위해 ["jquery"]만 작성하면 다음과 같이 로컬 js를 구성할 수도 있습니다.

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
    "a" : "js/a" 
  }
})
require(["jquery","a"],function($){
  $(function(){
    alert("load finished"); 
  })
})

경로를 구성하면 모듈 이름이 더 구체화됩니다. 경로에는 여러 경로를 구성하는 중요한 기능도 있습니다. 원격 CDN 라이브러리가 성공적으로 로드되지 않으면 다음과 같은 로컬 라이브러리를 로드할 수 있습니다.

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
    "a" : "js/a" 
  }
})
require(["jquery","a"],function($){
  $(function(){
    alert("load finished"); 
  })
})

이 구성 후 Baidu의 jquery가 성공적으로 로드되지 않으면 로컬 js 디렉터리에 있는 jquery가 로드됩니다.

requirejs를 사용하면 모듈을 로딩할 때 .js 접미사를 쓸 필요가 없고 당연히 접미사도 쓸 수 없습니다

$ 매개변수는 위 예제의 콜백 함수에 있습니다. 이는 종속 jquery 모듈의 출력 변수입니다. 여러 모듈에 의존하는 경우 여러 매개변수를 순차적으로 작성하여 사용할 수 있습니다.

require(["jquery","underscore"],function($, _){
  $(function(){
    _.each([1,2,3],alert);
  })
})

모듈이 변수값을 출력하지 않는다면 아무것도 없는 것이므로 출력모듈을 앞에 적어서 잘못된 위치로 인한 오해를 방지하도록 하세요

전역 구성

위의 예에서 require.config 구성이 반복적으로 나타납니다. 각 페이지에 구성을 추가하면 확실히 매우 멋져 보이지 않을 것입니다. requirejs는 먼저 main.js라는 기능을 제공합니다. 🎜>

그런 다음 다음 방법을 사용하여 페이지에서 requirejs를 사용하세요.

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
    "a" : "js/a" 
  }
})

설명하자면, requirejs 스크립트를 로드하는 스크립트 태그는 data-main 속성을 추가합니다. 이 속성으로 지정된 js는 reuqire.js가 로드된 후에 처리됩니다. 각각의 모든 페이지는 이 구성을 사용하며, require를 페이지에서 직접 사용하여 모든 짧은 모듈 이름을 로드할 수 있습니다

data-main에도 중요한 기능이 있습니다. script 태그가 data-main 속성을 지정하면 require는 루트 경로로 data-main에 지정된 js를 기본값으로 사용하게 됩니다. 예를 들어 위에서 data-main="js/main"을 설정한 후 require(['jquery'])(jquery 경로를 구성하지 않고)를 사용한 후 require는 jquery 대신 js/jquery.js 파일을 자동으로 로드합니다. Node.js, 기본 구성과 동일:

require.config({
  baseUrl : "js"
})

타사 모듈

require를 통해 로드된 모듈은 일반적으로 AMD 사양을 준수해야 합니다. 즉, 정의를 사용하여 모듈을 선언해야 합니다. 그러나 이때 비AMD 표준 js를 로드해야 하는 경우도 있습니다. 심도 설명하기 어렵네요. 심은 '패드'로 직접 번역되는데, 실제로는 이런 의미를 갖고 있습니다. 1. 비AMD 모듈 출력, 비표준 AMD 모듈을 사용 가능한 모듈에 "패드"합니다. 예를 들어 이전 버전의 jquery에서는 AMD 사양을 상속하지 않으므로 ["jquery"]를 직접 요구할 수 없습니다. 이번에는 shim이 필요합니다. 예를 들어 밑줄 클래스 라이브러리를 사용하지만 AMD 사양을 구현하지 않으면 다음과 같이 구성할 수 있습니다.

이런 방식으로 구성한 후 다른 모듈에서 밑줄 모듈을 참조할 수 있습니다.

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    }
  }
})

플러그인 형태의 AMD 이외의 모듈에는 jquery 플러그인을 사용하는 경우가 많으며, 이러한 플러그인은 현재 jquery.form 플러그인과 같은 기본적으로 AMD 사양을 준수하지 않습니다. , 양식 플러그인을 jquery에 "패딩"해야 합니다.

require(["underscore"], function(_){
  _.each([1,2,3], alert);
})

은 다음과 같이 축약할 수도 있습니다.

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    },
    "jquery.form" : {
      deps : ["jquery"]
    }
  }
})

这样配置之后我们就可以使用加载插件后的jquery了

require.config(["jquery", "jquery.form"], function($){
  $(function(){
    $("#form").ajaxSubmit({...});
  })
})

好了，requirejs的基本配置大致就是这么多，还有一些扩展的功能会在之后的篇幅中提到，大家不要错过呀！