Wie verwende ich requirejs, um einen Eintrag für mehrere Seiten zu modularisieren?

Beschreibung

Jeder, der requirejs kennt, weiß, dass jede Seite, die modular entwickelt werden muss, eine Eintrags-JS-Datei für die Modulkonfiguration haben muss. Aber jetzt gibt es ein sehr peinliches Problem. Wenn es viele Seiten gibt, gibt es viele Eintragsdateien, die dem Datenhauptteil entsprechen. Theoretisch spielt es keine Rolle, aber wenn Sie es später mit grunt zusammenführen und komprimieren, gibt es viele Eintrags-JS. Obwohl dieser Eintrag js alle konfigurierten Modulinhalte komprimiert, gibt es tatsächlich viele Einträge im zusammengeführten und Komprimierte Dateien. In Anbetracht dessen habe ich darüber nachgedacht, alle Eintragsdateien zu vereinheitlichen und eine zu verwenden. Wenn es an der Zeit ist, Grunzen zum Zusammenführen und Komprimieren zu verwenden, wird es nur eine solche einzelne Eintragsdatei geben, was auch sehr praktisch ist.

Implementierungsprinzip

1. Die Seite führt Anforderungen ein und legt die Attribute der ID und der aktuellen Seiteninformationen fest

<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. config. js zum Initialisieren verschiedener Seiteninformationen entsprechend verschiedenen Seiten

/**
 * 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. Definieren Sie das Modul und implementieren Sie die Initialisierungs-Init-Methode für die Ereignisüberwachung und Seiteninformationsinitialisierung

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

Das obige ist der detaillierte Inhalt vonWie verwende ich requirejs, um einen Eintrag für mehrere Seiten zu modularisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!