requirejs を使用して 1 つのエントリを複数のページにモジュール化するにはどうすればよいですか?

説明

requirejs を知っている人なら誰でも、モジュール開発を必要とするすべてのページにはモジュール構成用のエントリ js ファイルが必要であることを知っています。しかし、ここで非常に厄介な問題が発生します。ページ数が多いと、データ メインに対応するエントリ ファイルが多数存在します。理論的にはこれで問題ありませんが、後で grunt を使用してマージして圧縮すると、多くのエントリ js が存在します。このエントリ js は設定されたすべてのモジュールの内容を圧縮しますが、実際には、それぞれのマージおよび圧縮ファイルに多くのエントリが存在します。コードが重複しているので、それを考慮して、すべてのエントリファイルを統合して、必要なときに grunt を使用してマージして圧縮すると、そのエントリファイルだけになるので、これも非常に便利です。

実装原理

1. ページはrequirejsを導入し、IDと現在のページ情報の属性を設定します

<script src="/res/js/require.js?1.1.11" data-main="/res/js/require.config" id="current-page" current-page ="news" target-module="/res/js/module/newsCtrl"  defer async="true" ></script>

2. 異なるページに応じて異なるページ情報を初期化するrequire.config.jsを記述します

/**
 * 1、所有页面使用公共的require配置
 * 2、根据current-page去加载相应地模块，不需要的模块不要去加载
 * 3、每个模块都要按约定去对外暴露一个init的初始化方法，用于页面信息加载时间监听
 * 
 */require.config({　
    urlArgs: "ver=1.0_" + (new Date).getTime(),　　　
    paths: {　　　　　　"jquery": "/res/js/base/jquery-1.11.3.min","vue":'/res/js/base/vue.min',"common": "/res/js/widgets/common"},
    shim: {'scroll': {　　　　　　
            deps: ['jquery'],
            exports: 'jQuery.fn.scroll'　　　　
        },'vue':{
            exports:'vue'},'common':['jquery']
    }
});


require(["jquery"], function ($) {
    require(["common"], function (common) {var currentPage = $("#current-page").attr("current-page");var targetModule = $("#current-page").attr("target-module");if (targetModule) {// 页面加载完毕后再执行相关业务代码比较稳妥$(function () {
                require([targetModule], function (targetModule) {// 不要在这里写业务代码//全部统一调用init方法//也就是每个模块都暴露一个init方法用于事件监听，页面内容加载等                    targetModule.init(currentPage);
                });
            });return;
        }
    });
});

3 . モジュールを定義し、イベント監視とページ情報初期化のための初期化initメソッドを実装します

define(['jquery', "common"], function ($, common) {　　　　var newCtrl = {};
    newCtrl.init = function (page) {
        common.info("开始初始化页面信息");
    };
    newCtrl.login = function () {};return newCtrl;
});

以上がrequirejs を使用して 1 つのエントリを複数のページにモジュール化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。