1.jquery 能访问
2.引用第三方cdn
3.js访问不了,加载备用js
4.访问自定义函数
5.异步加载写法
6.加载非AMD规范的JS文件
7.不同文件引用不同版本的js
8.引用css文件
html代码:
<html> <head> <script src="js/require.js" data-main="js/main.js"></script> </head> <body> <div>123</div> </body> </html>
main.js代码
requirejs.config({ paths: { "jquery" : ["jquery-3.6.1/jquery-3.6.1.min"], }, }); requirejs(['jquery'], function($) { $('div').css({'color':'blue'}); });
main.js代码
requirejs.config({ paths: { "jquery" : ["https://code.jquery.com/jquery-3.6.1.min"], }, }); requirejs(['jquery'], function($) { $('div').css({'color':'blue'}); });
requirejs.config({ paths: { "jquery" : ["qqq","jquery-3.6.1/jquery-3.6.1.min"], }, }); requirejs(['jquery'], function($) { $('div').css({'color':'blue'}); });
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, }; });
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); });
html代码:
<html> <head> <script src="js/require.js" defer async="true" data-main="js/main.js"></script> </head> <body> <div>123</div> </body> </html>
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
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
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(); }, }; });
在此之前用到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(); });