requirejs(必看篇) 原文链接 https://www.jb51.net/article/119496.htm

最新推荐文章于 2022-07-30 12:10:17 发布

转载最新推荐文章于 2022-07-30 12:10:17 发布 · 1.3k 阅读

本文介绍了RequireJS的基本原理及其如何解决JavaScript依赖问题。通过使用RequireJS，开发者可以轻松地管理项目的依赖关系，无需担心加载顺序问题。文章还展示了如何利用define和require函数来定义和加载模块。

requirejs是干啥的啊？

曾经，我们将一些js组件放到不同的文件，然后通过script标签引入，如果几个组件有依赖，那么要小心了，你必须将被依赖的放到前面，否则的话会出现啥啥啥is undefined或者啥啥啥is not a function之类的错误。比如一个jquery的插件显然是依赖jquery核心库的，所以jquery核心库文件必须先引入。项目小组件少依赖简单还好，要是项目大组件多依赖复杂就糟糕了。咋办？用requirejs啊

只要按照requirejs规范写，他会从一个根开始检查依赖，根据这些依赖关系自动的帮助我们插入script标签，很棒，对不对？这样依赖我们不就再也不用纠结哪个标签应该放在前，哪个该放在后了吗？

define('sample3' ,['sample','sample1'],function (sample,sample1) {
  var sample4 = require('sample4');
  return function(){
    alert(sample.name+':'+sample.sayhell());
  } 
});

这就是完整定义，有名称，有依赖，有回调，内部还有common的形式引入依赖对象！

关于define函数的name和require函数的依赖名称之间的关系

define(name，[] , callback); 这个name可以省掉，默认是文件名称；当然也可以自定义，一旦我们定义了name，根据源代码我们可以发现define函数内部其实就是把这个name以及依赖模块、回调函数作为一个对象存储在全局的数组当中，也就是 defQueue.push([name,deps,callback])；那么这个name就是这个组件注册的的ID！
require（[name , name2],callback）; 系统首先会在全文检索path中是否对应的路径，如果没有自然把他作为路径拼接在baseUrl上去异步加载这个js文件，加载时从源代码中可以看到 ,var data = getScriptData(evt)；返回的 data.id 其实就是name，然后执行contex.completeLoad(node.id)，其内部就很清楚了，把define中注册的name和这里得到的name进行比较如果相等就执行。所以道理就是：require 和 define 的 name 必须保证一致！