requirejs 关于shim的使用方式

一直在搞移动开发,很久没写过有关javaScript的文章了,最近公司开发了分布式web框架,用到了requirejs,之前用过,借此复习一下,特别是依赖问题。


requirejs具有以下是异步加载,当然已经加载的不会再次加载,这是非常好的一种优化。当然,我们这里来看看shim的作用。


  1. 导出非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类,所以已经满足了绝大多数需求。

但是有一个问题,在app.js中写了很多function,整合成一个function有点费劲,想直接导出如何做?

办法如下:

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 ) {}	   
      });		
 });


想到这里,有问题以后再补充。

你可能感兴趣的:(requirejs 关于shim的使用方式)