RequireJS

最新推荐文章于 2023-12-01 07:30:00 发布

周皮皮皮皮皮皮

最新推荐文章于 2023-12-01 07:30:00 发布

阅读量357

点赞数

本文链接：https://blog.csdn.net/qq_32439381/article/details/79986983

版权

一、介绍

RequireJS是一个非常小巧的Javascript模块载入框架，使用AMD规范（全称Asynchronous Module Definition，即异步模块加载机制。异步强调的是，在加载模块以及模块所依赖的其他模块时，都采用异步加载的方式，避免模块加载阻塞了网页的渲染进度），压缩后只有14k，非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。

有以下优点：

1. 防止js加载阻塞页面渲染

2. 使用程序调用的方式加载js，防止出现多次加载js文件

//view/require1.html

<html>

<head>

//通过异步加载的方式来加载js文件，这样可以避免js文件对html渲染的阻塞

require(['../static/js/require1'])

</script>

</head>

<body>

</body>

</html>

//../static/js/require1

define(function(){

function fun1(){

alert('it works');

}

fun1();

});

这样写就不会造成JS阻塞浏览器渲染，如果按照下面写法，会导致alert执行的时候，html是空白的

//view/require1.html

<html>

<head>

</head>

<body>

</body>

</html>

//../static/js/require1

function fun1(){

alert('it works'); //在body为空白的时候已执行

}

fun1();

二、基本API

三个变量： define, require, requirejs，其中 require === requirejs

1. define 用来定义一个模块

define(function(){

//代码

});

2. require 用来加载依赖模块，并执行加载完后的回调函数。

require([url], function(){

//回调函数代码

})

三、加载文件

require.config 用来配置模块加载位置，就是给模块起一个更短更好记的名字。

//配置模块加载位置

require.config({

paths: {

'jquery': ['http://code.jquery.com/jquery-2.2.4'],

'require1' : ['../static/js/require1']

}

})

//加载依赖模块

require(['jquery','require1'], function($){

$(function(){

alert('load finish');

})

遇到点小问题，将加载依赖模块的jquery和require1互换，会报错，显示$没有定义因此要注意顺序

四、全局配置

如果每个页面都加入配置，必然显得十分不雅，requirejs提供了一种叫做“主数据”的功能，首先创建一个main.js

//配置模块加载位置

require.config({

paths: {

'jquery': ['http://code.jquery.com/jquery-2.2.4', 'jquery-3.3.1.min'],

'require1' : ['require1']

}

})

require(['jquery', 'require1'], function($) {

$(function(){

alert('finish');

})

在其他文件中调用，当requireJS自身加载执行后，就会再次异步加载data-main属性指向的main.js

require.config({
    baseUrl : "js"   //在没有使用data-main和config的情况下，baseUrl默认为当前页面的目录
})

四、第三方模块

通过require加载的模块一般都需要符合AMD规范即使用define来申明模块，但是部分时候需要加载非AMD规范的js，这时候就需要用到另外一个功能：shim

五、补充

1. 存在依赖的函数式定义

//moduleA.js
define(['moduleB'], function(b) {
    var num = 10;
    return b.add(num);
    }
);
//moduleB.js
define({
    add: function(n){
        return n+1;
    }
});
// moudule1.html

require(['../static/js/moduleA'], function(b){

console.log(b); //11

})

周皮皮皮皮皮皮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
RequireJS

一、介绍 RequireJS是一个非常小巧的Javascript模块载入框架，使用AMD规范（全称Asynchronous Module Definition，即异步模块加载机制。异步强调的是，在加载模块以及模块所依赖的其他模块时，都采用异步加载的方式，避免模块加载阻塞了网页的渲染进度），压缩后只有14k，非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质...
复制链接

扫一扫