requirejs shimの使い方について

3261 ワード

ずっとモバイル開発をやっています.久しぶりにjavaScriptに関する文章を書きました.最近会社は分散式ウェブフレームを開発しました.
requirejsは以下の非同期ローディングを持っています.もちろん再ローディングはしません.これは非常に良い最適化です.もちろん、私達はシムの役割を見に来ました.
  • は、非AMDモジュール化関数(モジュール化)
  • を導出する.
    app.js
    function sayHello(name)
    {
      alert('Hi '+name);
    }
    requirejs.config({
      baseUrl: '/public/js',
      paths: {
        hello: 'hello'
      },
      shim: {
        hello: { exports: 'sayHello' } //       ,  export  
      }
    });
    
    requirejs(['hello'], function(hello) { //function          ,   sayHello  
      hello();
    });
    関数をエクスポートすると何を意味しますか?私たちはJavaScriptクラスを獲得しましたので、ほとんどの需要を満たしました.
    しかし一つの問題があります.ap.jsにFnctionをたくさん書いて、一つの機能に統合するのはちょっと大変です.直接にエクスポートしたいですが、どうすればいいですか?
    方法は以下の通りです
    app.js
    function sayHi(name)
    {
      alert('Hi '+name);
    }
    function sayHello(name)
    {
      alert('Hiello  '+name);
    }
    requirejs.config({
      baseUrl: '/public/js',
      paths: {
        hello: 'hello'
      },
      shim: {
        hello: {
          init: function() {        //    init 2 
           return {
              sayHi: sayHi,
              sayHello: sayHello
            }
          }
        }
      }
    });
    
    requirejs(['hello'], function(hello) {
      hello.sayHi('zhangsan');
      hello.sayHello('lisi');
    });
    もちろん、jQueryもエクスポートできます.
    requirejs.config({
      baseUrl: '/public/js',
      paths: {
        myjquery: 'lib/jquery/jquery'// jQuery    AMD,  ,        jquery:
      },
      shim: {
        myjquery: { exports: 'jQuery' }
      }
    });
    
    requirejs(['myjquery'], function(jq) {
      alert(jq);
    });
    jQuery操作子の衝突問題を解決します.
    requirejs.config({
      baseUrl: '/public/js',
      paths: {
        myjquery: 'lib/jquery/jquery' //  
      },
      shim: {
        myjquery: {
          init: function() {        
              return jQuery.noConflict(true);
              }
          }
        }
      }
    });
    requirejs(['myjquery'], function(jq) {
      alert($);
    });
    2.順序良く導入する
    requirejs.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' 
            }
    });    
    
    requirejs(['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 ) {}	   
          });		
     });
    ここを思い付いて、問題があったら後で補充します.