Require.js配置全局和配置非amd规范JS
Require.js配置全局和配置非amd规范JS
小明爱学习
发布于 2020-02-19 10:06:05
发布于 2020-02-19 10:06:05
我们来说全局配置，我们知道导入require.js之后会设置data-main属性来执行入口文件，然后再入口文件中进行require的配置。
但是比如我们有五个页面，data-main="main.js"，那五个页面都要导入这个main.js，因为main.js中有配置信息，但是我们五个页面的页面js都必须要写在main.js中了，这样反而不好，那有什么办法呢？
全局配置方案：
我们把配置信息单独写一个js文件，然后再main.js中通过require函数配置依赖项来解决，代码如下。
config.js:配置文件
require.config({
baseUrl: 'js',
paths: {
jquery: 'lib/jquery-3.4.1.min',
module1: 'script/module1',
module2: 'script/module2',
module3: 'script/module3',
normal:'script/normal'
},
});然后再main.js文件中，导入此文件即可，代码如下：
main.js:入口文件
require(['/js/lib/config.js'], function () {
require(['jquery', 'module1', 'module2', 'module3'], function ($, module1, module2, module3) {
$("#module1").click(function () {
module1.fun("module-1");
});
$("#module2").click(function () {
module2.fun("module-2");
});
$("#module3").click(function () {
module3.fun("module-3");
});
})
})这样就实现配置就是单独的js文件了，我们要使用的时候用require添加config.js的依赖，就可以了。
可以根据上篇的代码来对比一下有什么不同。
配置非AMD规范JS：
我们知道要配置模块，js文件必须要使用AMD规范来编写，就是加上define函数，主动返回函数等操作。
但是我们以前编写的js，肯定没有这些功能，修改起来又比较麻烦，所以需要配置非AMD规范的JS。
需要配置shim属性，代码如下：
config.js代码：
require.config({
baseUrl: 'js',
paths: {
jquery: 'lib/jquery-3.4.1.min',
module1: 'script/module1',
module2: 'script/module2',
module3: 'script/module3',
normal:'script/normal'
},
shim: {
normal: {
deps: ['jquery'],//依赖项
init: function () {
return { render: render, initial: initial }//normal里的函数
}
}
}
});normal.js代码：
function render(name) {
console.log(name);
}
function initial(name) {
console.log(name);
}这里面的normal就是非AMD规范的js，我们先在paths中把路径，名称配置好，然后再shim中配置对外返回的函数和变量等，比如上面就返回normal.js中的render和initial两个函数。
然后调用还是按照以前的方法一样，代码如下：
main.js代码：
require(['/js/lib/config.js'], function () {
require(['jquery', 'normal'], function ($, normal) {
normal.render("render");
normal.initial("initial");
})
})配置全局属性和配置非AMD规范的流程就是这样的，只要大家多去用了几次，就熟悉了。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020年02月18日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读