ホームページ > ウェブフロントエンド > jsチュートリアル > requirejs を使用して 1 つのエントリを複数のページにモジュール化するにはどうすればよいですか?

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

零下一度
リリース: 2017-06-26 09:51:48
オリジナル
1644 人が閲覧しました

説明

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート