requirejs 用法

李修缘999

已于 2022-10-23 09:45:35 修改

阅读量806

点赞数

分类专栏： requirejs 文章标签： javascript jquery

于 2022-10-22 14:28:07 首次发布

本文链接：https://blog.csdn.net/m0_47165403/article/details/127461240

版权

requirejs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.实现功能

1.jquery 能访问

2.引用第三方cdn

3.js访问不了，加载备用js

4.访问自定义函数

5.异步加载写法

6.加载非AMD规范的JS文件

7.不同文件引用不同版本的js

8.引用css文件

二.知识点

1.map属性是require.js中一个映射的概念，它的主要作用是解决同名依赖的冲突

2.shim中的JSON对象有两个属性: deps,exports ; deps 为数组,表示其依赖的库, exports 表示输出的对象名/函数名

html代码：

<html>
<head>
    <script src="js/require.js" data-main="js/main.js"></script>
</head>
<body>
<div>123</div>
</body>
</html>

1.jquery 能访问

main.js代码

requirejs.config({
    paths: {
        "jquery" : ["jquery-3.6.1/jquery-3.6.1.min"],
    },
});

requirejs(['jquery'], function($) {
    $('div').css({'color':'blue'});
});

2.引用第三方cdn

main.js代码

requirejs.config({
    paths: {
        "jquery" : ["https://code.jquery.com/jquery-3.6.1.min"],
    },
});

requirejs(['jquery'], function($) {
    $('div').css({'color':'blue'});
});

3.js访问不了，加载备用js

requirejs.config({
    paths: {
        "jquery" : ["qqq","jquery-3.6.1/jquery-3.6.1.min"],
    },
});
requirejs(['jquery'], function($) {
    $('div').css({'color':'blue'});
});

4.访问自定义函数（情况1）

main.js代码

requirejs.config({
    paths: {
        "jquery" : ["jquery-3.6.1/jquery-3.6.1.min"],
        'test': 'test',
    },
});

requirejs(['jquery','test'], function($,test) {
    test.func();
    test.func2();
});

test.js代码：

define(function () {
    var func=function func() {
        $('body').append('<div>test.func1</div>');
    }
    var func2=function func2() {
       $('body').append('<div>test.func2</div>');
    }
    return {
        func: func,
        func2: func2,
    };

});

5.访问自定义函数（情况2）

test.js代码：

define(['jquery'],function ($) {
    return {
        func: function func(a,b) {
            $('div').hide();
        },
    };
});

main.js代码：

requirejs.config({
    paths: {
        "jquery" : ["jquery-3.6.1/jquery-3.6.1.min"],
    },
    shim: {
        test: {
            deps: ['jquery'],
        }
    },
});

requirejs(['test'], function(test) {
    test.func(100,200);
});

6.异步加载写法

html代码：

<html>
<head>
    <script src="js/require.js" defer async="true" data-main="js/main.js"></script>
</head>
<body>
<div>123</div>
</body>
</html>

7.加载非AMD规范的JS文件(情况1)

test2.js 不规范的非AMD js文件

var Calculation = {
    plus:function(a,b){
        return a+b;
    },
    reduce:function (a,b) {
        return a-b;
    }
}

test.js 文件代码

define(function () {
    var func=function func(a,b) {
        console.log(Calculation.plus(a,b));//引用Calculation方法
    }
    return {
        func: func,
    };
});

main.js文件代码：

requirejs.config({
    paths: {
        "Calculation" : ["test2"],
    },
    shim: {
        Calculation: {
            exports: 'Calculation'
        },
        test: {
            deps: ['Calculation'],
        }
    }
});

requirejs(['jquery','test'], function($,test) {
    test.func(100,200);
});

exports 暴露变量 Calculation

8.加载非AMD规范的JS文件(情况2)

test2.js 不规范的非AMD js文件

function plus(a,b){
    return a+b;
}
function reduce(a,b) {
    return a-b;
}

main.js 代码

requirejs.config({
    paths: {
        "jquery" : ["jquery-3.6.1/jquery-3.6.1.min"],
        "Calculation" : ["test2"],
    },
    shim: {
        Calculation: {
            // exports: 'reduce'
            init: function() {        //这里使用init将2个
                return {
                    plus: plus,
                    reduce: reduce,
                }
            }
        }
    }
});

requirejs(['jquery','test','Calculation'], function($,test,Calculation) {
    console.log(Calculation.plus(200,100));
    console.log(Calculation.reduce(200,100));
});

init 导出函数plus,reduce

9.不同文件引用不同版本的js

main.js代码：

requirejs.config({

    map: {
        '*': {//*表示除了test.js文件外，其它文件引用file1.js，data1.js
            'file': 'file1',
            'data': 'data1',
        },
        'test': {
            'file': 'file2',
            'data': 'data2',
        }
    },

});
//map属性是require.js中一个映射的概念，它的主要作用是解决同名依赖的冲突
requirejs(['test','test3'], function(test,test3) {
    // test.func();
    test3.func(1,200);
});

file1.js代码：

define(function () {
    return {
        print: function print() {
            console.log('file1');
        },
    };
});

file2.js代码：

define(function () {
    return {
        print: function print() {
            console.log('file2');
        },
    };
});

data1.js代码：

define(function () {
    return {
        print: function print() {
            console.log('data1');
        },
    };
});

data2.js 代码：

define(function () {
    return {
        print: function print() {
            console.log('data2');
        },
    };
});

test.js代码：

define(['file','data'],function (file,data) {
    return {
        func: function func() {
            file.print();
            data.print();
        },
    };
});

test3.js代码：

define(['file','data'],function (file,data) {
    return {
        func: function func(a,b) {
            // console.log(a*b);
            file.print();
            data.print();
        },
    };
});

10.引用css文件

在此之前用到require-css的一个js插件css.min.js

下载地址：https://github.com/guybedford/require-css

css.min.js源码：

define(function(){if("undefined"==typeof window)return{load:function(a,b,c){c()}};var a=document.getElementsByTagName("head")[0],b=window.navigator.userAgent.match(/Trident\/([^ ;]*)|AppleWebKit\/([^ ;]*)|Opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)Gecko\/([^ ;]*)|MSIE\s([^ ;]*)|AndroidWebKit\/([^ ;]*)/)||0,c=!1,d=!0;b[1]||b[7]?c=parseInt(b[1])<6||parseInt(b[7])<=9:b[2]||b[8]?d=!1:b[4]&&(c=parseInt(b[4])<18);var e={};e.pluginBuilder="./css-builder";var f,g,h,i=function(){f=document.createElement("style"),a.appendChild(f),g=f.styleSheet||f.sheet},j=0,k=[],l=function(a){g.addImport(a),f.οnlοad=function(){m()},j++,31==j&&(i(),j=0)},m=function(){h();var a=k.shift();return a?(h=a[1],void l(a[0])):void(h=null)},n=function(a,b){if(g&&g.addImport||i(),g&&g.addImport)h?k.push([a,b]):(l(a),h=b);else{f.textContent='@import "'+a+'";';var c=setInterval(function(){try{f.sheet.cssRules,clearInterval(c),b()}catch(a){}},10)}},o=function(b,c){var e=document.createElement("link");if(e.type="text/css",e.rel="stylesheet",d)e.οnlοad=function(){e.οnlοad=function(){},setTimeout(c,7)};else var f=setInterval(function(){for(var a=0;a<document.styleSheets.length;a++){var b=document.styleSheets[a];if(b.href==e.href)return clearInterval(f),c()}},10);e.href=b,a.appendChild(e)};return e.normalize=function(a,b){return".css"==a.substr(a.length-4,4)&&(a=a.substr(0,a.length-4)),b(a)},e.load=function(a,b,d,e){(c?n:o)(b.toUrl(a+".css"),d)},e});

main.js 源码：

requirejs.config({
    shim: {
        test: {
            deps: [
                'css!../css/test'//css.文件
            ]
        }
    },
    map: {
        '*': {
            'css': 'require-css/css.min',
        },
    },

});

requirejs(['test'], function(test) {
    test.func();
});