专栏首页smh的技术文章Require.js配置全局和配置非amd规范JS

Require.js配置全局和配置非amd规范JS

我们来说全局配置,我们知道导入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规范的流程就是这样的,只要大家多去用了几次,就熟悉了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Require.js实现模块化开发

    在javascript中,我们把比较复杂的都是用模块化,今天我们就来了解一下require.js来实现模块化开发

    小明爱学习
  • 优化程序之case when语句配合存储过程

    这段代码是完全ok的。是没什么问题。但是我们来进行一下优化,但是我们并不是从代码进行优化。我们从sql语句开始。

    小明爱学习
  • Javascript中普通函数和箭头函数的区别

    2.箭头函数没有this对象,他会找到上层调用者作为this对象,直至window。还有,由于箭头函数没有自己的this,所以call,apply,bing等方...

    小明爱学习
  • FIS应用实例-require.js+CMD模块

    前面文章讲了FIS的源码实现细节,这篇文章偏实战一些,给出FIS跟require.js结合的简单例子。

    IMWeb前端团队
  • FIS应用实例-require.js+CMD模块

    前面文章讲了FIS的源码实现细节,这篇文章偏实战一些,给出FIS跟require.js结合的简单例子。 FIS编译流程 如果已熟悉了FIS的编译设计,可以跳过这...

    IMWeb前端团队
  • Webpack 4教程 - 第四部分,使用SplitChunksPlugin分离代码

    Webpack 4 给我们带来了一些变化。其中包括更快地打包,引入了SplitChunksPlugin,并淘汰掉之前的CommomsChunksPlugin。在...

    葡萄城控件
  • Win7下VS2008安装cocos2d-2.0-x-2.0.4模板时, 运行InstallWizardForVS2008.js文件执行失败的解决办法

      今天在Win7环境下的VS2008中安装cocos2d-x模板的过程中,当点击InstallWizardForVS2008.js时,弹出“ 没有文件扩...

    ccf19881030
  • 让你的「微信小程序」运行在Chrome浏览器上,让我们使用WebStorm

    「微信小程序」的开发框架体验起来,还不错——自带了UI框架。但是问题是他的IDE,表现起来相当的糟糕——其实主要是因为,我当时买WebStorm License...

    Phodal
  • RequireJS实例分析

      随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用。恰逢Node的流行,JS在web开发中占有越来越重要的地位。由...

    用户1154259
  • YAMLException: incomplete explicit mapping pair; a key node is missed; or followed by a non-tabulate

    使用hexo g出现如下错误,一顿排查,发现,是文章的文件名和文章的title有非法字符,原title为:ssh: connect to host github...

    IT云清

扫码关注云+社区

领取腾讯云代金券