【requirejs】学习笔记

最新推荐文章于 2018-04-28 11:38:13 发布

normal_z

最新推荐文章于 2018-04-28 11:38:13 发布

阅读量245

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/waitforblack/article/details/79309034

web前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍RequireJS的基本使用方法，包括核心API如define、require和config的功能与配置方式，并讲解如何通过RequireJS解决模块加载及依赖问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html中原来通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。–用require导入js

简介
requirejs下。其主要API主要是下面三个函数:

define–-该函数用户创建模块。每个模块拥有一个唯一的模块ID，它被用于RequireJS的运行时函数，define函数是一个全局函数，不需要使用requirejs命名空间.
require– 该函数用于读取依赖。同样它是一个全局函数，不需要使用requirejs命名空间.
config–该函数用于配置RequireJS.

require.config配置参数选项
- baseUrl——用于加载模块的根路径。
- paths——用于映射不存在根路径下面的模块路径。
- shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。
- deps——加载依赖关系数组

载入框架
requirejs加载不会导致html页面阻塞，在加载其他js的时候页面能同步渲染显示。

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})

require(["jquery","a"],function($){
    $(function(){
        alert("load finished");  
    })
})

这样配置后，当百度的jquery没有加载成功后，会加载本地js目录下的jquery

在使用requirejs时，加载模块时不用写.js后缀的，当然也是不能写后缀上面例子中的callback函数中发现有$参数，这个就是依赖的jquery模块的输出变量，如果你依赖多个模块，可以依次写入多个参数来使用：

require(["jquery","underscore"],function($, _){
    $(function(){
        _.each([1,2,3],alert);
    })
})

如果某个模块不输出变量值，则没有，所以尽量将输出的模块写在前面，防止位置错乱引发误解

全局配置
<script data-main="js/main" src="js/require.js"></script>

加载requirejs脚本的script标签加入了data-main属性，这个属性指定的js将在加载完reuqire.js后处理，我们把require.config的配置加入到data-main后，就可以使每一个页面都使用这个配置，然后页面中就可以直接使用require来加载所有的短模块名

data-main还有一个重要的功能，当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径，是什么意思呢？如上面的data-main=”js/main”设定后，我们在使用require([‘jquery’])后(不配置jquery的paths)，require会自动加载js/jquery.js这个文件，而不是jquery.js，相当于默认配置了：

require.config({
    baseUrl : "js"
})

暴露多个变量：init
如果我要同时暴露多个全局变量呢？比如， hello.js 的定义其实是这样的：

  alert("hello, world~");
}
function hello2() {
  alert("hello, world, again~");
}

它定义了两个函数，而我两个都想要。这时就不能再用exports了，必须换成 init 函数：

requirejs.config({
  baseUrl: '/public/js',
  paths: {
    hello: 'hello'
  },
  shim: {
    hello: {
      init: function() {
        return {
          hello: hello,
          hello2: hello2
        }
      }
    }
  }
});

requirejs(['hello'], function(hello) {
  hello.hello1();
  hello.hello2();
});

当 exports 与 init 同时存在的时候， exports 将被忽略。

不符合AMD规范加载
使用Require中的shim.

require.config({
    paths:{
        jquery:"/js/jquery2.0",
        InStorage:"/js/in/InStorage",
        Product:"/js/product/Product",
        cate:"/js/product/Category",
    },
    shim:{
        cate:{
            deps:[],
            exports:"Category"
        }
    }
});