使用requireJS按需加载

最新推荐文章于 2022-04-02 14:18:21 发布

原创最新推荐文章于 2022-04-02 14:18:21 发布 · 842 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #异步 #requirejs

requirejs 专栏收录该内容

2 篇文章

订阅专栏

RequireJS 是一个 JavaScript 模块加载器，它解决了传统 JS 文件加载导致的页面渲染暂停和依赖顺序问题。通过 define() 函数定义模块，支持 AMD 规范，能按需加载模块，并通过 shim 配置处理不兼容的模块，实现异步加载和管理依赖。

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

一、requirejs与常规加载js的区别

常用加载js文件的弊端

1：加载js文件，浏览器停止页面渲染。文件过长，浏览器响应失效

2：由于js文件之间存在依赖关系，因此必须严格保证加载顺序

3：RequireJS是一个Javascript的模块加载器

 通过模块加载器可以有效的解决这些问题：

      1.JS文件的依赖关系。

      2.通过异步加载优化script标签引起的阻塞问题

      3.可以简单的以文件为单位将功能模块化并实现复用

使用方法：

<!--引入require.js（实际上除了require.js，其它文件模块都不再使用script标签引入）--->

<script data-main="main" src="require.js"></script>
        data-main属性的作用是，指定网页程序的主模块

mian.js

require.config({ 
    paths: { 
        jquery: 'jquery-1.7.2' 
    } 
}); 
require(['jquery'], function($) { 
    alert($().jquery); 
});

二、模块的加载

require.config({
　　　　baseUrl: "js/lib",
　　　　// 直接指定加载某一个目录下的脚本
　　　　paths: {
　　　　　　"jquery": "jquery.min",
 　　　　　　"underscore": "underscore.min",
 　　　　　　"backbone": "backbone.min"
　　　　}
　　});

如果某个模块在另一台主机上

require.config({

　　　　paths: {

　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"

　　　　}

　　});

三、AMD模块的写法

模块必须采用特定的define()函数来定义
math.js

define(function (){

　　　　var add = function (x,y){

　　　　　　return x+y;

　　　　};

　　　　return {

　　　　　　add: add
 　　　　};

　　});

加载方法如下：
main.js

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

　　　　alert(math.add(1,1));

　　});

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['myLib'], function(myLib){

　　　　function foo(){

　　　　　　myLib.doSomething();

　　　　}

　　　　return {

　　　　　　foo : foo

　　　　};

　　});

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

四、加载非规范的模块

require.config({

　　　　shim: {

 　　　　　　'underscore':{
 　　　　　　　　exports: '_'
 　　　　　　},

　　　　　　'backbone': {
 　　　　　　　　deps: ['underscore', 'jquery'],
 　　　　　　　　exports: 'Backbone'
 　　　　　　}

　　　　}

　　});