博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
RequireJS require 介绍
阅读量:5946 次
发布时间:2019-06-19

本文共 3400 字,大约阅读时间需要 11 分钟。

hot3.png

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; },

转载于:https://my.oschina.net/heweipo/blog/510087

你可能感兴趣的文章
springboot中@EnableAsync与@Async注解使用
查看>>
Nginx配置ssl证书
查看>>
为什么你SQL Server的数据库文件的Date modified没有变化呢?
查看>>
spring 源码
查看>>
Vue .Net 前后端分离框架搭建
查看>>
清理sql2012数据库日志
查看>>
.NET Core Entity使用Entity Framework Core链接数据库
查看>>
出体的真实性
查看>>
Mysql忘记数据库密码以及用户授权案例展示
查看>>
chorem浏览器无法下载
查看>>
php 多线程
查看>>
Jvm(8),运行时数据---独占区---程序计数器
查看>>
nginx+tomcat+java部署总结
查看>>
解决ScrollView嵌套RecyclerView出现item显示不全的问题
查看>>
Java中 接口是如何实现多态的特性的
查看>>
HRMS(人力资源管理系统)-SaaS架构设计-概要设计实践
查看>>
SpringMVC没有接受到参数的坑
查看>>
计算世界里的抽象
查看>>
Maven项目中读取src/main/resources目录下的配置文件
查看>>
Windows 下的高 DPI 应用开发(UWP / WPF / Windows Forms / Win32)
查看>>