Require.js 사용법 요약

1. require.js를 사용하는 이유 둘째, js 파일 간에 종속성이 있으므로 로드 순서가 엄격하게 보장되어야 합니다. 종속성이 복잡하면 코드 작성 및 유지 관리가 어려워집니다.

Require.js는 다음 두 가지 문제를 해결합니다.

　

JS 파일의 비동기 로딩을 실현하여 웹 페이지의 응답 손실을 방지합니다.

1. 　

   It 간의 관리 모듈 종속성 그것을 만든다 코드 작성 및 유지 관리가 더 쉽습니다.

2. 2. require.js 로드

첫 번째 단계는 공식 웹사이트에서 최신 버전을 다운로드하고 페이지에 직접 올려 로드하는 것입니다

 <script src="js/require.js"></script>

이 파일을 로드하면 웹페이지가 응답하지 않는 경우 페이지 하단에 배치하여 로드하거나 다음과 같이 작성할 수 있습니다.

 <script src="js/require.js" defer async="true" ></script>

async 속성은 이 파일을 로드해야 함을 나타냅니다. 웹페이지가 응답하지 않는 것을 방지하기 위해 비동기적으로 로드됩니다. IE는 이 속성을 지원하지 않고 defer만 지원하므로 defer도 작성합니다.

require.js를 로드한 후 다음 단계는 입구인 자체 코드를 로드하는 것입니다. 파일 이름이 main.js인 경우 다음과 같이 작성할 수 있습니다.

<script src="js/require.js" data-main="js/main"></script>    .js后缀可以省略

3. 메인 모듈 작성 방법

메인 모듈이 jQuery에 의존하는 경우 이렇게 작성하시면 됩니다

 require(['jquery'], function ($){
　　　alert($);
});

4. require.config( ) 메소드

require.config({
　　paths: {
　　　　"jquery": "jquery.min",
　　　　"underscore": "underscore.min",
　　　　"backbone": "backbone.min"
　　}
});

위의 코드는 세 모듈의 파일 이름을 제공하며 경로는 기본적으로 main.js와 동일한 디렉터리(js 하위 디렉터리)에 있습니다. 이러한 모듈이 js/lib 디렉토리와 같은 다른 디렉토리에 있는 경우 이를 작성하는 방법에는 두 가지가 있습니다.

하나는 경로를 하나씩 지정하는 것이고

require.config({
　　paths: {
　　　　"jquery": "lib/jquery.min",
　　　　"underscore": "lib/underscore.min",
　　　　"backbone": "lib/backbone.min"
　　}
});

• 　다른 하나는 기본 디렉터리(baseUrl)를 직접 변경하는 것입니다.

require.config({
　　baseUrl: "js/lib",
　　paths: {
　　　　"jquery": "jquery.min",
　　　　"underscor: "underscore.min",
　　　　"backbone": "backbone.min"
　　}
});

• 모듈이 다른 호스트에 있는 경우

require.config({
　　paths: {
　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　}
});

• 과 같이 해당 URL을 직접 지정할 수도 있습니다. 5. AMD 모듈 작성 방법

모듈 require.js에 의해 로드되어 AMD 사양을 채택합니다. 즉, 모듈은 AMD 규정에 따라 작성되어야 합니다.

구체적으로는 특정 Define() 함수를 사용하여 모듈을 정의해야 합니다. 모듈이 다른 모듈에 종속되지 않는 경우에는 Define() 함수에서 직접 정의할 수 있습니다.

// math.js
define(function (){
　　var add = function (x,y){
　　　　return x+y;
　　};
　　return {
　　　　add: add
　　};
});

　로드 방법은 다음과 같습니다.

 // main.js
require(['math'], function (math){
　　alert(math.add(1,1));
});

　이 모듈도 다른 모듈에 종속되는 경우, 정의() 함수의 첫 번째 매개변수는 모듈의 종속성을 나타내는 배열이어야 합니다.

 define(['myLib'], function(myLib){
　　function foo(){
　　　　myLib.doSomething();
　　}
　　return {     //返回模块中的函数
　　　　foo : foo
　　};
});

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

六、加载非规范的模块（shim的使用方式）

 //  app.js
 function sayHello(name){
 　alert('Hi '+name);
}

 //  main.js
require.config({
　　shim: {
　　　　'app': { //这个键名为要载入的目标文件的文件名，不能随便命名。
　　　　　　exports: 'sayHello' //exports的值为my.js提供的 对外接口的名称
　　　　}
　　}
});

require(['app'], function(sayHello) {
    alert(sayHello())  
})

导出一个函数,意味着我们得到了一个javaScript类

但是如果在my.js中写了很多function，整合成一个function有点麻烦，想直接导出？方法如下：

 //　app.js
function sayHi(name){
    alert('Hi '+name);
}
function sayHello(name){
    alert('Hiello  '+name);
}

// main.js  
　　require.config({
　　　　shim: {
　　　　　　app: {
　　　　　　　　init: function() { //这里使用init将2个接口返回
　　　　　　　　　　return {
　　　　　　　　　　　　sayHi: sayHi,
　　　　　　　　　　　　sayHello: sayHello
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}
　　});

　　require(['app'], function(a) {
　　　　a.sayHi('zhangsan');
　　　　a.sayHello('lisi');
　　});

shim的有序导入

   require.config({  

    shim: {  
  　　  'jquery.ui.core': ['jquery'],  //表示在jquery导入之后导入
   　　 'jquery.ui.widget': ['jquery'],  
 　　   'jquery.ui.mouse': ['jquery'],  
   　　 'jquery.ui.slider':['jquery']
  　  },  
    paths : {    
       jquery : 'jquery-2.1.1/jquery',    
       domReady : 'require-2.1.11/domReady',    
       'jquery.ui.core' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core',    
       'jquery.ui.widget' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget',    
       'jquery.ui.mouse' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse',    
       'jquery.ui.slider' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider' 
        }
　　});    
 
　　require(['jquery', 'domReady','jquery.ui.core','jquery.ui.widget','jquery.ui.mouse','jquery.ui.slider'],    function($) {            
    　　$("#slider" ).slider({              
    　　 value:0,           
    　　 min: 0,           
     　　max: 4,           
     　　step: 1,           
     　　slide: function( event, ui ) {}     
     　　 });    
　　 }

위 내용은 Require.js 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!