RequireJS按需加载教程：jQuery插件、CSS及数据源依赖处理详解

RequireJS模块化加载基础

对于前端开发者而言，模块加载器已不再陌生。借助模块加载器，可以有效应对以下核心挑战：

明确并处理JavaScript文件间的依赖关系。
通过异步加载机制，优化因传统script标签同步加载导致的页面阻塞问题。
以文件为基本单位实现功能的模块化封装，从而提升代码的复用性。

当前主流的JavaScript模块加载器包括RequireJS和SeaJS等。由于它们遵循的规范存在细微差异，导致使用方式略有不同。从纯粹的用户体验角度出发，选择RequireJS而非SeaJS主要基于以下考量：

在功能实现层面，两者表现相当，并未出现显著的性能差异或重大缺陷。

在文档丰富度方面，RequireJS具有明显优势。以加载jQuery及其插件为例，尽管两者的实现逻辑相似，但RequireJS提供了可直接复用的示例代码，而SeaJS则需要开发者查阅文档自行摸索。此外，以RequireJS为关键词搜索问题解决方案时，更容易找到相关答案。

jQuery及插件的动态加载策略

使用RequireJS加载jQuery及jQuery插件

在大多数Web应用开发中，引入jQuery及相关插件是最常见的需求。RequireJS为此提供了相应的解决方案，包括动态加载jQuery及插件的文档与实例代码。

在最新的jQuery 1.9.X版本中，jQuery已直接将自己注册为AMD模块，这意味着它可以被RequireJS直接作为模块加载。若需加载旧版jQuery，可采用以下两种方法：

1. 确保jQuery在RequireJS之前加载。

2. 对jQuery代码进行少量修改，在jQuery代码外层包裹一句：


define(["jquery"], function($) { 
  // $ is guaranteed to be jQuery now */ 
});

RequireJS的示例中，直接将RequireJS与jQuery合并为一个文件。若以jQuery为核心库，推荐采用这种做法。

对于jQuery插件的加载，同样存在两种方法：

1. 在插件代码外部包裹特定代码。


define(["jquery"], function($){ 
   // Put here the plugin code. 
});

2. 在使用RequireJS加载代码前注册插件（例如在main.js中）。


requirejs.config({ 
  "shim": { 
    "jquery-cookie" : ["jquery"] 
  } 
});

第三方类库的兼容处理

RequireJS加载第三方类库

在示例应用中，除了jQuery外还使用了其他第三方类库。如果这些类库不符合标准AMD模块规范，且不希望修改其源代码，则需提前进行定义：


require.config({ 
   paths: { 
      'underscore': 'vendor/underscore' 
   }, 
   shim: { 
     underscore: { 
       exports: '_' 
     } 
   } 
});

CSS文件的模块化整合方案

CSS文件的模块化处理

在RequireJS中，模块概念主要限于JavaScript文件。若需加载图片、JSON等非JS文件，RequireJS提供了一系列加载插件。

遗憾的是，RequireJS官方未对CSS进行模块化支持。然而在实际项目中，常遇到此类场景，如轮播图片展示栏或高级编辑器等。几乎所有富UI组件均由JS与CSS两部分构成，且CSS之间也存在模块概念及依赖关系。

为了更好地与RequireJS整合，此处采用require-css插件来解决CSS的模块化与依赖问题。

require-css是一个RequireJS插件，下载后将css.js与normalize.js放置于main.js同级目录即可默认加载。例如，在项目中需加载jQuery Mobile的CSS文件，可直接调用：


require(['jquery', 'css!../css/jquery.mobile-1.3.0.min.css'], function($) { 
});

不过，由于该CSS本质上是jQuery Mobile模块的一部分，更优的做法是将此CSS文件的定义置于jQuery Mobile的依赖关系中。最终，我们的RequireJS定义部分如下：


require.config({ 
   paths: { 
      'jquerymobile': 'vendor/jquery.mobile-1.3.0', 
      'jstorage' : 'vendor/jstorage', 
      'underscore': 'vendor/underscore' 
   }, 
   shim: { 
     jquerymobile : { 
      deps: [ 
        'css!../css/jquery.mobile-1.3.0.min.css' 
      ] 
     }, 
     underscore: { 
       exports: '_' 
     } 
   } 
});

在使用模块时，只需执行：


require(['jquery', 'underscore', 'jquerymobile', 'jstorage'], function($, _) { 
});

jQuery Mobile的CSS文件将被自动加载，从而实现CSS与JS的整合为一个模块。同理，其他具有复杂依赖关系的模块也可采用类似处理方式，RequireJS将自动解决依赖关系的逻辑。

多数据源异步加载与事件机制

数据源的加载与等待

Web应用通常会动态加载后端数据，数据格式可以是JSON、JSONP或直接是一个JavaScript变量。此处以JS变量为例：


var restaurants = [ 
  { 
    "name": "KFC" 
  }, 
  { 
    "name": "7-11" 
  }, 
  { 
    "name": "成都小吃" 
  } 
]

载入这段数据：


$.getScript('data/restaurants.json', function(e){ 
  var data = window.restaurants; 
  alert(data[0].name); //KFC 
});

单一数据源的加载确实简单，但在实际应用中，往往涉及多个数据源。例如，在该示例App中，UI需载入用户信息、餐厅信息、订餐信息三种数据后才能正常工作。若仅依赖多层嵌套回调函数，代码耦合度将非常高。

为解决多个数据加载的问题，我习惯采用的方法是构造一个dataReady事件响应机制。


var foodOrder = { 
 
  //数据载入后要执行的函数暂存在这里 
  dataReadyFunc : [] 
 
  //数据源URL及载入状态 
  , dataSource : [ 
    { url : 'data/restaurants.json', ready : false, data : null }, 
    { url : 'data/users.json', ready : false, data : null }, 
    { url : 'data/foods.json', ready : false, data : null } 
  ] 
 
  //检查数据源是否全部载入完毕 
  , isReady : function(){ 
    var isReady = true; 
    for(var key in this.dataSource){ 
      if(this.dataSource[key].ready !== true){ 
        isReady = false; 
      } 
    } 
    return isReady; 
  } 
 
  //数据源全部加载完毕，则逐一运行dataReadyFunc中存放的函数 
  , callReady : function(){ 
    if(true === this.isReady()){ 
      for(var key in this.dataReadyFunc){ 
        this.dataReadyFunc[key](); 
      } 
    } 
  } 
 
  //供外部调用，会将外部输入的函数暂存在dataReadyFunc中 
  , dataReady : function(func){ 
    if (typeof func !== 'function') { 
      return false; 
    } 
    this.dataReadyFunc.push(func); 
  } 
 
  , init : function(){ 
    var self = this; 
    var _initElement = function(key, url){ 
      $.getScript(url, function(e){ 
        //每次载入数据后，将数据存放于dataSource中，将ready状态置为true，并调用callReady 
        self.dataSource[key].data = window[key]; 
        self.dataSource[key].ready = true; 
        self.callReady(); 
      }); 
    } 
    for(var key in this.dataSource){ 
      _initElement(key, this.dataSource[key].url); 
    } 
  } 
}

用法如下：


foodOrder.dataReady(function(){ 
  alert(1);   
}); 
foodOrder.init();

dataReady内的alert将在所有数据载入完毕后开始执行。

该处理逻辑并不复杂：将所有待执行方法通过dataReady暂存，待数据全部加载完毕后再统一执行。对于更复杂的场景，此方法同样适用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

JavaScript模块化实战：基于RequireJS的按需加载与依赖管理

RequireJS模块化加载基础

jQuery及插件的动态加载策略

第三方类库的兼容处理

CSS文件的模块化整合方案

多数据源异步加载与事件机制

实用工具推荐