여러 페이지에 대해 하나의 항목을 모듈화하기 위해 requirejs를 사용하는 방법은 무엇입니까?

Description

requirejs를 아는 사람이라면 모듈 개발이 필요한 모든 페이지에는 모듈 구성을 위한 항목 js 파일이 있어야 한다는 것을 알고 있습니다. 그러나 이제 매우 당황스러운 문제가 있습니다. 페이지가 많으면 데이터 메인에 해당하는 항목 파일이 많아지게 됩니다. 이론적으로는 상관없지만 나중에 grunt를 사용하여 병합하고 압축하면 항목 js가 많이 발생하게 됩니다. 이 항목 js는 구성된 모듈 내용을 모두 압축하지만 실제로는 병합 및 압축된 항목에 많은 항목이 있습니다. 코드가 겹치기 때문에 이를 고려하여 모든 항목 파일을 통합하여 하나를 사용하려고 생각했습니다. 때가 되면 그런트를 사용하여 병합하고 압축하면 이러한 단일 항목 파일만 남게 되므로 매우 편리합니다.

구현 원리

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를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!