文档章节

RequireJS require 介绍

learn_more
 learn_more
发布于 2015/09/23 14:44
字数 680
阅读 677
收藏 1

1、加载机制

require(['sample'],function(sample){

    // some codes

});

首先是解析依赖模块,deps.shift(); 为每一个依赖模块创建script标签

其次是异步加载script文件,加载过程中首先运行script define外脚本,然后执行define的流程机制

接着 var data = getScriptData(evt);返回的 data.id 其实就是依赖模块的 name

然后 执行contex.completeLoad(node.id),把define中注册的name和这里得到的name进行比较如果相等就执行

直到所有的依赖模块加载完成(如果超时也算执行完成),然后执行回调函数,并且把依赖模块的返回值作为参数传入回调函数


2、注意是异步加载

require(['sample2','sample3','sample4'],function(sample){

    // some codes

});

虽然创建script标签是按照数组的顺序,但是由于script是异步加载的,所以到底谁先运行是不确定的!

所以,如果你在sample4的define里面通过require('sample3')是不一定有效的!同理,在sample3的define中require('sample4')也是不一定有效的!想要这样调用必须在define的定义模块中显示声明依赖的模块!

另外,如果在require回调方法内部当然是可以如上调用,因为回调函数是保证所有依赖加载都完成时才会被调用!那么只要保证模块已经被加载在系统当中,就可以在require回调函数内部使用require('module');这样可以方便调试!


3、函数源代码

// 新的版本中,通过 require = req
req = requirejs = function (deps, callback, errback, optional) {

    //Find the right context, use default
    var context, config,
        contextName = defContextName;

    // Determine if have config object in the call.
    if (!isArray(deps) && typeof deps !== 'string') {
        // deps is a config object
        config = deps;
        if (isArray(callback)) {
            // Adjust args if there are dependencies
            deps = callback;
            callback = errback;
            errback = optional;
        } else {
            deps = [];
        }
    }

    if (config && config.context) {
        contextName = config.context;
    }

    context = getOwn(contexts, contextName);
    if (!context) {
        context = contexts[contextName] = req.s.newContext(contextName);
    }

    if (config) {
        context.configure(config);
    }

    return context.require(deps, callback, errback);
};
// 老版本中是这样定义的
require: function (deps, callback, relModuleMap) { 
    var moduleName, fullName, moduleMap; 
    if (typeof deps === "string") { 
        if (isFunction(callback)) { 
            //Invalid call 
            return req.onError(makeError("requireargs", "Invalid require call")); 
        } 

        //Synchronous access to one module. If require.get is 
        //available (as in the Node adapter), prefer that. 
        //In this case deps is the moduleName and callback is 
        //the relModuleMap 
        if (req.get) { 
            return req.get(context, deps, callback); 
        } 

        //Just return the module wanted. In this scenario, the 
        //second arg (if passed) is just the relModuleMap. 
        moduleName = deps; 
        relModuleMap = callback; 

        //Normalize module name, if it contains . or .. 
        moduleMap = makeModuleMap(moduleName, relModuleMap); 
        fullName = moduleMap.fullName; 

        if (!(fullName in defined)) { 
            return req.onError(makeError("notloaded", "Module name '" + 
                        moduleMap.fullName + 
                        "' has not been loaded yet for context: " + 
                        contextName)); 
        } 
        return defined[fullName]; 
    }     
    //Call main but only if there are dependencies or 
    //a callback to call. 
    if (deps && deps.length || callback) { 
        main(null, deps, callback, relModuleMap); 
    } 
    //If the require call does not trigger anything new to load, 
    //then resume the dependency processing. 
    if (!context.requireWait) { 
        while (!context.scriptCount && context.paused.length) { 
            resume(); 
        } 
    } 
    return context.require; 
},


© 著作权归作者所有

learn_more
粉丝 93
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
使用 RequireJS 来优化你的 JavaScript 代码

RequireJS是一个提高你的javascript代码速度和质量的有效方法,同时它还让你的代码更容易阅读和维护。 在本文中,我会为你介绍RequireJS和应该如何使用它。我们讨论引入文件和定义模块,甚至...

oschina
2013/02/12
5K
11
RequireJS 入门指南

简介 如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS。在这篇文章中,我将描述RequireJS是什么,以及它的一些基础...

oschina
2013/08/15
71.6K
37
使用 RequireJS 优化 Web 应用前端

基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery、Dojo、MooTools、EmbedJS 等纷纷在其最新版本中加入了对 AMD 的支持。本文...

IBMdW
2012/09/11
8.6K
16
RequireJS与SeaJS模块化加载示例

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目...

nosand
2014/05/04
4.2K
10
优化 RequireJS 项目(合并与压缩)

本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具,这其中就包括Node.js。 因此,如果你手头上还没有Node.js可以点击此处下载一个。 动机 关于RequireJS已经有很多...

jinker
2013/05/01
33.2K
12

没有更多内容

加载失败,请刷新页面

加载更多

shangcheng-my

1.数据库主键、外键类型为bigint,那么在后台应该用什么类型的变量定义? 后台用string接收,因为前段传过来的一般都是json字符串,后台直接接收,mysql是可以吧数字类型的字符串转换为对应的...

榴莲黑芝麻糊
昨天
2
0
微服务架构依赖图

基于spring-cloud-alibaba + dubbo

龙影
昨天
5
0
Centos7 安装zabbix-agent

rpm -i https://repo.zabbix.com/zabbix/4.2/rhel/6/x86_64/zabbix-release-4.2-2.el6.noarch.rpm 可以到https://repo.zabbix.com/zabbix找到对应的版本 yum install zabbix-agent -y 出现E......

abowu
昨天
8
0
文本编辑器GNU nano 4.4 发布

GNU nano 4.4 "Hagelslag" 更新日志: 启动时,光标可以放在第一个或最后一个出现位置 字符串前面带有+/string 或 +?string的字符串。 发生自动硬包装时((--breaklonglines),任何前导引号...

linuxCool
昨天
7
0
你知道字节序吗

字节序 最近在调一个自定义报文的接口时,本来以为挺简单的,发现踩了好几个坑,其中一个比较“刻骨铭心”的问题就是数据的字节序问题。 背景 自定义报文,调用接口,服务端报文解析失败 iO...

杭城小刘
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部