zoukankan      html  css  js  c++  java
  • requirejs代码结构分析

    一。函数入口函数。

    req = requirejs = function (deps, callback, errback, optional) {
    
            //Find the right context, use default
            var context, config,
                contextName = defContextName;  //“_”
    
            //deps 是对象的话,则可能是config。
            // 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;
            }
            //获取自己的属性。
            //contexts:运行环境。默认 “-”
            context = getOwn(contexts, contextName);
            if (!context) {
    //返回的核心函数,context.require = context.makeRequire();即确定了require函数。 context
    = contexts[contextName] = req.s.newContext(contextName); } if (config) { context.configure(config); }      //这个函数的运行得到makeRequire,会去对依赖项 从define内存中找出来,并实例化模块, return context.require(deps, callback, errback); };

    //Create default context.

    req({});    //创建一个默认环境,contexts["_"], 并且返回 一个require(deps,callback,errback);供外部使用。

    cfg:一开始会去确定好baseurl,或者依赖 data-main的值会放入依赖 deps这个属性。cfg.deps会调用require函数,去检查并下载。

    req(cfg); //Set up with config info.,将cfg baseurl, data-main的配置引入 依赖cfg.deps。

    newContext 返回的核心函数: context.require = context.makeRequire();

     makeRequire:是函数入口核心函数: req({}),会确定好环境。

    makeRequire的核心代码:

    context.nextTick(function () {
                            //Some defines could have been added since the
                            //require call, collect them.
                            console.log( this,deps );
    
                            //从define函数注册中的 对象中拿出 并实例化并init
                            intakeDefines();
                            //从register里拿或者创建 实例化模块module
                            requireMod = getModule(makeModuleMap(null, relMap));
    
                            //Store if map config should be applied to this require
                            //call for dependencies.
                            requireMod.skipMap = options.skipMap;
                    //标记依赖,并下载。
                            requireMod.init(deps, callback, errback, {
                                enabled: true
                            });
                            // 确定是否下载了,或者超时报错,或者未超时去循环下载确定。
                            checkLoaded();
                        });

    Module函数的解析:

    作用:确定依赖项,和依赖项定义并执行,监听onScriptLoad,并下载。最后执行暴露函数。

    主要函数以下:

    enable函数:标记依赖函数,标记个数depCount,并且将依赖项makeModuleMap(统一处理路径,ID,插件头,URL,是否定义的。这种形式。),然后再次检查 是否可执行(check())。

    enable():整理 依赖项的标志(个数等),->check()-第一次是下载(下载完成会自动循环检测是否下载完成。),二次是 减少依赖项,并执行暴露函数。

     check:函数://check之前要确保已经 enable(处理依赖项,实例依赖项模块),检查是否没有依赖了,并运行exports。

    fetch:函数:( 监听:onScriptLoad )- 》 completeLoad --》checkLoaded

    completeLoad:函数:

    //completeLoad从define定义的模块中 拿到对应的实例化模块,如果没有,则从shim中重新给她define并实例化模块否则报错。并检查下载。

    checkLoaded:函数:

    //checkLoaded: 确定是否下载了,或者超时报错,或者未超时去循环下载确定。

    define函数:作用:只是将定义的模块,加入内存中。 等到require触发会从相应的内存中拿出来。

    待续:

  • 相关阅读:
    关于XML文档
    Why sql is called structured query language?1
    UML学习---交互
    C#为什么不采用多继承:
    url中
    array
    hard
    构造函数返回值
    布局容器layout Container
    k8s的概念
  • 原文地址:https://www.cnblogs.com/rainbow661314/p/5689628.html
Copyright © 2011-2022 走看看