13

例:

mysite.com/page1のスクリプトに依存module1.js

mysite.com/page2のスクリプトに依存module2.js

mysite.com/page3のスクリプトに依存module3.js

その特定のページに必要な Javascript のみを実行するためのベスト プラクティスはありますか。RequireJS を使い始める前は、Javascript ファイルを 1 つだけ使用し、そのページに必要なモジュールのみを初期化していました。このような


ページ内 <head>:

var page = "pageTitle";


メイン JS ファイル:

var myModules = {};

myModules.pageTitle = (function(){

    return {
          init: function(){
             alert('this module has been initiated');
          }
    }
})();


myModules[page].init();


このような手法が RequireJS でどのように機能するかはよくわかりません。他の人がこれをどのように行っているかについて、フィードバックやアドバイスをいただければ幸いです。

4

3 に答える 3

6

すべてのページに 1 つの main.js ファイルがあると思いますか?

とにかく、通常は、API ドキュメントで説明されているように、script タグのdata-main属性を使用します。これは、ページごとに 1 つのメイン js ファイルがあることを意味します。このようにして、ページ内の文字通りの JavaScript コードを取り除き、RequireJS 最適化ステップを最大限に活用できます。

例:

main.js ファイルを RequireJS モジュールとして開発します。

define([<dependencies go here>], function(){

    return function(pageTitle){
        //do you page dependent logic here
    }
}

あなたのhtmlには、次のようなものがあります:

<html>
<head>
<script src="require.js"></script>
<script>
    require(["main.js"], function(init){
        init("pageTitle");
    });
</script>
于 2011-11-07T10:53:33.700 に答える
2

1) バックエンドで使用する言語は何ですか?

スクリプト構成をデータベースまたは構成ファイルに保持できます。(例: ページには、 、、およびなどのpage1モジュールがあります)。module1module2module4

<script>ページにタグを生成するための php テンプレート ファイルがあります。

<script src="http://requirejs.org/docs/release/1.0.1/minified/require.js"></script>
<script>
    require([
        <?php echo "'". implode("',\n\t'", $this->scripts) . "'\n"; ?>
    ], function(a){

        function run(page) {
            if ( window.hasOwnProperty(page) ) {
                window[page].start();
            }
        }

        var page = '<?php echo $this->page; ?>';

        run('all'); // activating scripts needed for every page
        run(page); // and for current page
    });
</script>

PS スクリプトは window[page] 変数を要求しています。つまり、ページ用のすべての .js スクリプト (たとえばindex.jsindexページ用) がwindow.index変数を作成しているということです。(私は知っています、それはあまり良くありません-PPSを読んでください;))

PPS私はrequireJSの初心者です(今日だけ知っていました)、それは私の最初のドラフトであり、別の方法で作成すると思います:

2)今のところ概念として:)スクリプトをAMDモジュールとして保持します(通常のスクリプトではなく、requireJSのモジュールとして)。.jsonファイルに保持できるモジュール マップ:

{
    'index' : [ 'news', 'banners' ],
    'contacts' : [ 'maps', 'banners', 'donate' ],
    'otherpage' : [ 'module1', 'module2' ]
}

ページ名またはページ ID を に渡す必要がありますmain.js(この値は DOM 要素、サイトのテンプレート、またはテンプレート変数で渡すことができます)。main.jsページ名を知っているので、modules.jsonファイルをロードします。特定のモジュールとrequiresそれらを取得します。

main.jsまた、すべてのページで必要な依存関係を保持することもできます (たとえば、jquery、一部の jquery プラグインなど) (jquery プラグインはモジュールとしてラップすることをお勧めします)

PS私の英語でごめんなさい

于 2011-11-19T23:50:51.630 に答える