`
仁生之狼
  • 浏览: 44755 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

requireJS定义与加载模块

 
阅读更多

requireJS中定义模块和加载模块的标准方式: 

// 加载模块的标准方式  
require(['foo','jquery'], function (foo,$) {  
    //foo is now loaded.  
});  
  
// 定义模块的标准方式  
define(['module1', 'module2'], function(m1, m2) {  
  
    return {  
        method: function() {  
            m1.methodA();  
            m2.methodB();  
        }  
    };  
  
});  

 如果我们需要加载的或者定义的模块比较少,这种标准的写法是很清晰的。

但是如果我们需要加载的模块很多,那么这种一一对应的写法很繁琐。

define(  
    ['dep1', 'dep2', 'dep3', 'dep4', 'dep5', 'dep6', 'dep7', 'dep8'],  
    function(dep1, dep2, dep3, dep4, dep5, dep6, dep7, dep8){  
        ...  
    }  
);  

 为了解决这个问题,我们可以使用以下2种方式来定义模块:

方式1If you are using the simplified define wrapper, make sure you have require as the first argument to the definition function 

define(  
    function (require) {  
        var dep1 = require('dep1'),  
            dep2 = require('dep2'),  
            dep3 = require('dep3'),  
            dep4 = require('dep4'),  
            dep5 = require('dep5'),  
            dep6 = require('dep6'),  
            dep7 = require('dep7'),  
            dep8 = require('dep8');  
    }  
}); 

 方式2If you are listing dependencies in the dependency array, make sure that require and name are in the dependency array

define(['require', 'dep1', 'dep2', 'dep3', 'dep4', 'dep5'], function (require) {  
    var dep1 = require('dep1');  
    var dep2 = require('dep2');  
});

 但是下面的这种写法就不行,会报错HAS NOT BEEN LOADED YET FOR CONTEXT

//THIS WILL FAIL  
define(['require'], function (require) {  
    var namedModule = require('name');  
}); 

 官网上的解释是:

This fails because requirejs needs to be sure to load and execute all dependencies before calling the factory function above. If a dependency array is given to define(), then requirejs assumes that all dependencies are listed in that array, and it will not scan the factory function for other dependencies. So, either do not pass in the dependency array, or if using the dependency array, list all the dependencies in it.

最后官网上特别强调:require('name')这种写法,只应该出现在define()或者require()的回调函数中。

Be sure that require('name') only occurs inside a define() definition function or a require() callback function, never in the global space by its own. 

可以看到使用define()定义模块的时候,如果依赖的模块比较少,那么可以使用标准方式;如果依赖的模块很多,那么可以使用方式1或者方式2来解决。很显然,使用require()加载模块的时候,也存在和define()一样的问题。经过我的试验:使用方式2也是可以的。 

方式3:使用require加载多个模块的时候

//异步加载module1模块,加载完成后调用回调函数  
require(["module3","module1","module2"], function() {        
    var m1 = require("module1");  
    alert(m1.name);  
}); 

 总结:使用define()定义模块,使用require()加载模块,可以使用标准方式,或者是方式1,方式2,方式3,这样就能够实现requireJS中模块的正确加载和定义。

分享到:
评论

相关推荐

    requirejs实现的简单的类定义

    RequireJS是一个流行的AMD(Asynchronous Module Definition)规范的实现,它允许我们在浏览器环境中实现异步加载和组织JavaScript模块。本篇文章将深入探讨如何使用RequireJS实现简单的类定义。 首先,了解...

    Requirejs异步加载Dojo1.6

    通过Requirejs,开发者可以按需加载模块,提高页面加载速度,同时使得代码组织更加清晰和模块化。 ### Dojo:全面的JavaScript框架 Dojo是一个强大的JavaScript工具包,提供了一整套用于构建富互联网应用(RIA)的...

    AngularJS+RequireJs实现动态加载JS和页面的方案研究.pdf

    AngularJS是一个强大的前端框架,用于构建单页应用程序(SPA),而RequireJS则是一个模块化加载器,它有助于管理应用程序的依赖关系和按需加载资源。 首先,入口页面是`workflow.jsp`,它定义了HTML结构并引入了...

    requirejs定义类(添加注释)

    RequireJS 是一个 JavaScript 模块加载器,它使得在浏览器环境中可以实现模块化开发,有效管理依赖关系,提高...结合 `require` 函数,我们可以按需加载模块,降低页面初始化时的负担,同时提高代码的组织和复用能力。

    RequireJS一个JavaScript文件和模块加载器

    此外,通过 `require` 函数,我们可以在运行时动态加载模块: ```javascript require(['dependency'], function(dependency) { // 使用dependency模块 }); ``` RequireJS 还允许我们进行配置,例如设置基础路径、...

    requirejs模块配置及定义

    ### RequireJS 模块配置及定义详解 #### 一、RequireJS简介 RequireJS是一个JavaScript模块加载器,它遵循AMD(Asynchronous Module Definition)规范,主要用于实现JavaScript代码的模块化管理,通过异步加载的...

    requirejs demo

    3. **异步加载**:RequireJS 使用异步方式加载模块,不会阻塞浏览器,提高用户体验。通过`require`函数加载模块并执行回调函数: ```javascript require(['module1', 'module2'], function(module1, module2) { /...

    RequireJS API

    最后,RequireJS的API文档和示例代码对于开发者来说是一个很好的参考,它不仅展示了如何定义和加载模块,还提供了配置和使用RequireJS的指导。开发者可以根据自己的需要选择合适的方式使用RequireJS,从而构建出更...

    requireJS初学者完整例子

    `define`函数用于定义模块,其参数是一个数组,表示该模块的依赖,接着是回调函数,函数的参数与依赖数组一一对应,这样就实现了依赖注入。 在实际项目中,你可能会有多个模块,比如视图(views)、模型(models)...

    requirejs简单与Demo

    - **异步加载**:AMD规范支持动态、异步加载模块,提升页面性能。 - **按需加载**:只有在实际使用时才会加载相应的模块,减少初始加载时间。 - **可复用性**:模块化的设计使得代码更易于复用,降低重复开发。 **4...

    ionic项目应用requireJs前端模块化 示例

    在 Ionic 中,通常我们会将 AngularJS 的模块与 Ionic 的模块一起使用。Ionic 提供了一些内置的模块,如 `ionic.Platform` 和 `ionic.modal`,我们可以像上面一样,将它们定义为模块,然后在需要的地方加载和使用。 ...

    SeaJS与RequireJS区别

    2. **模块定义**:与 SeaJS 类似,RequireJS 也使用 `define` 函数定义模块,但其语法略有不同,支持函数和对象字面量两种形式。 3. **依赖注入**:RequireJS 会自动处理模块间的依赖关系,确保模块按需加载和正确...

    JavaScript模块化之使用requireJS按需加载

    RequireJS支持异步模块定义(AMD)规范,它允许我们定义模块并指定依赖项,模块加载器会负责按需加载这些依赖。例如,当需要加载jQuery及jQuery插件时,可以有多种方法实现。在使用新版本的jQuery时,可以直接利用其...

    使用RequireJS库加载JavaScript模块的实例教程

    RequireJS 提出了Asynchronous Module Definition (AMD) 规范,它允许我们定义和加载模块,并支持异步加载,从而提高了网页性能。 **AMD规范**: AMD规范允许模块和它们的依赖关系并行加载。在RequireJS中,模块...

    快速理解RequireJs

    RequireJS的一大优点是异步加载模块,这样可以提高页面加载速度,用户无需等待所有脚本都加载完毕才能使用页面。 5. **插件支持**: RequireJS支持许多插件,如text、i18n等,可以方便地加载文本资源或实现国际化...

    RequireJS入门(一)

    RequireJS 提出了一种基于 CommonJS 规范的 AMD(Asynchronous Module Definition)模式,允许异步加载模块,提高页面加载速度,并且使得代码结构更清晰、易于维护。 ### 2. RequireJS 基本使用 #### 2.1 安装与...

    requirejs_Demo演示

    3. **加载模块**:使用`require`函数来加载和执行模块。在主入口文件中,我们通常会定义一个配置对象和需要加载的模块列表。 ```javascript require.config({ paths: { 'jquery': 'path/to/jquery.min', 'myLib'...

    RequireJS版 页码切换demo

    RequireJS遵循AMD(Asynchronous Module Definition)规范,允许异步加载模块,避免了传统脚本阻塞页面渲染的问题。它提供了一种声明式的方式来组织和加载代码,使得开发者可以清晰地定义依赖关系,并在需要时按需...

Global site tag (gtag.js) - Google Analytics