当前位置: 代码迷 >> JavaScript >> 正确使用requirejs
  详细解决方案

正确使用requirejs

热度:99   发布时间:2023-06-05 16:02:37.0

我正在尝试在我的网站上设置requirejs,我有HTML模块,并且只想在使用特定的HTML模块时加载JS。

我有这些文件和代码,我只想确保自己正确执行即可。 下面的示例用于使用slick插件实现滑块。 我包含在index.php中的php拥有滑块的相关HTML。

脚本/模块/Sliderbanner.js

define(function(require) {
    var $ = require('jquery');
    var domReady = require('domready');

require('plugins/slick.min');
    domReady(function() {                  

            ///SLIDER BANNER
           $('.slider-banner').slick(});

        });
});

脚本/页面/sliderbanner.js

  require(['main'], function() {
        require(['jquery', 'modules/Sliderbanner'], function($) {

        });
    });

脚本/ main.js

require.config({
    baseUrl: '../scripts',
    paths: {
        jquery:            'components/jquery/jquery',
        domready:          'components/requirejs-domready/domReady'
    },
    shim: {
        'slick.min': ['jquery']
    },
    urlArgs: "bust=" +  (new Date()).getTime()
});
define(function(require) {
    var $        = require('jquery');
    var domReady = require('domready');

    domReady(function() {

    });
});

index.php

 <?php include("../organisms/slider-banner.php");?>
      <script>require(['page/sliderbanner']);</script>

这看起来或多或少正确吗? 我确实有一个疑问,如果我没有真正从模块中传递任何内容到scripts / page / sliderbanner.js,我真的需要吗? 谢谢!

如果将所有内容与捆绑在一起,则您的示例将起作用。

如果要异步加载JS文件,则需要这样做:

// module.js

define(['/path/to/module1.js', 'path/to/module2.js', function (module1, module2) {
  // ...
});

// some-other-module.js

define(['/path/to/module.js'], function (module) {
  // ...
});