4

私はrequire.jsで迷っています。define は常に require.js サンプル ページで何かを返すようです。

以下をrequire.jsスタイルのコーディングに変換するにはどうすればよいですか?

$("button_1").click(function(event) {
    alert("button 1 has been clicked");
});

それはreturns何もありません。

4

4 に答える 4

7

必要な部分が欠けていると思います。AMD を使用している場合は、em を使用する前に他のモジュールを「インポート」する必要があります。次の例を見てください。requrejs+jquery ダウンロードを使用して:

index.html

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="path/to/requirejs_jquery" data-main="path/to/main.js" ></script>
</head>
<body>
  <button id="button_1">sup</button>
</body>
</html>

Main.js

require(["jquery"],function($){ //import the jquery script 
  $(function(){
    $("#button_1").click(function(){
      alert("#button_1 got a click")
    })
  })
})

後でプロジェクトに「インポート」できる新しいモジュールを宣言したいときです。abit を展開して「my」というフォルダを作成し、メイン スクリプトの横に配置します。

私の/モジュール.js

define(function(){
  return {
    foo: function(){alert("bar")},
    barz: function(){return "hey from barz"}
  }
})

これで、次のようにメイン ファイル (またはその他のモジュール) に単純に含めることができます。

main.js

require(["jquery", "my/module"],function($, module){ //import the jquery script 
  $(function(){
    $("#button_1").click(function(){
      alert("#button_1 got a click")
      console.log(module,"sup")
    })
  })
})
于 2013-02-08T17:13:32.347 に答える
3

$("button_1").click(function(event) {});id要素のまたはが必要かどうかを指定していないため、何も返しませんclass。

要素の が必要な場合id:

例： <input id="button_1" type="button" />

$("#button_1").click(function(event) {
    alert("button 1 has been clicked");
});

要素の が必要な場合class:

例： <input class="button_1" type="button" />

$(".button_1").click(function(event) {
    alert("button 1 has been clicked");
});
于 2013-02-08T17:01:19.367 に答える
1

あなたの質問に対する私の解釈は次のとおりです。あなたは、require.js と AMD について理解を深めたいと考えており、最小限にまで削ぎ落としたサンプルから始めたいと考えています。

button_1 の例を示すこの jsfiddleを作成し、コンソールとインスペクターのネットワーク タブを見て、require.js の動作をいじることができます。

require.js の中心には、負荷の依存関係を定義する main.js ファイルがあります。依存関係を定義するために単純化された shim 構造を選択しました。

requirejs.config({
    shim: {                // the shim structure controls your load dependencies
        'jquery': [],
        'sample1.amd': ['jquery'],    // the key denotes the module name, the value array lists the dependenc(y|ies)
        'sample2.amd': ['jquery']    // the key denotes the module name, the value array lists the dependenc(y|ies)
    },
    waitSeconds: 30            // maximum time to wait for the modules to load
});

require(
    [
        'jquery',
        'sample1.amd',
        'sample2.amd'
    ],
    function(
        $    // $ is the local instance of the defined module 'jquery' (see 1st plugin in dependency array above)
    ) {
        console.log("jQuery, sample1.amd.js and sample2.amd.js loaded through AMD");
    }
);

次のように指定して、main.js ファイル (およびその結果、main.js 内で定義されたすべてのファイル) をロードします。

<script src="/path-to/require-jquery.js" data-main="/path-to/main.js" ></script>

ボタン クリックの定義は、sample1.amd.js にラップされています。デモの目的で、同じボタン クリックの定義を sample2.amd.js にもラップしました。そのため、デモでは、ボタンをクリックするとコンソールに 2 つのログ メッセージが表示されます。

[ネットワーク] タブで読み込みの動作を調べると、 require.js で得られる可能性があるパフォーマンスへのプラスの影響にも注目できます。 js は常にモジュールをできるだけ早くロードし、実行のみが依存関係に従ってキューに入れられます。

ここに私の jsfiddleへのリンクがあります。これで require.js を始められることを願っています

于 2013-02-13T11:46:21.760 に答える
1

RequireJS と jQuery をセットアップする方法については、RequireJS サイト にかなり適切な説明があります。jQuery と RequireJS を組み合わせたファイルをダウンロードするのが最も簡単です。通常どおりjQueryをインクルードし、AMDを使用して他のすべてをロードできるはずなので、厳密には必要ありませんが、自分で完全にテストしていません. jQuery + RequireJS ファイルを組み合わせたものを使用します。コツをつかめば非常に簡単です。

やりたいことの最も単純なケース (たとえば、jQuery の依存関係として実行したいメイン スクリプトが 1 つある場合) では、次のように HTML ファイルに含めるだけでrequire.js済みます。

<script data-main="path/to/yourScript.js" src="path/to/require.js"></script>

script タグの data-main 属性にスクリプトを必ず含めてください。次に、 でyourScript.js、次のようにコードをラップします。

/* yourScript.js */
require(['jquery'], function($) {
    // Use jQuery normally.
    $("#button_1").click(function(event) {
        alert("button 1 has been clicked");
    });        
});

さて、これは最も単純で命令的な例であり、実際には AMD パラダイムや動的依存関係をまったく使用していません。しかし、これは大まかな実用的な例として機能します。$("button_1").clickここで、AMD モジュールで関数をラップしたい場合は、button1.jsファイルを作成してdefine()呼び出しでラップすることができます。

/* button1.js */
define(['jquery'], function($) {
    // The following code will be run when this module is loaded.
    $("#button_1").click(function(event) {
         alert("button 1 has been clicked");
    });
    return {name: "button1 module!"}; 
    // Above, I'm just illustrating that AMD modules usually 
    // return an object or a function to pass to the anonymous 
    // function that's called when they're loaded by a dependency.
});

/* yourScript.js */
require(['jquery', 'button1'], function($, button1) {
    alert(button1.name); // This will alert with "button1 module"
});

重要なポイントは、 と の両方define()がrequire()依存関係の配列 (単なる .js ファイル名であり、オプションで .js なし) と関数をパラメーターとして受け取ることです。次に、これらのファイルで見つかったコードを実行し、戻り値を引数として関数パラメーターに渡します。これは、読み込みと依存関係のスキームを少し単純化しすぎていますが、始めるには十分なはずです。

ここに実際の動作例を書きました: https://c9.io/aphazel/requirejs-simple-example

$('#button_1')PS、おそらくまたは$('.button_1'):)を使用したかった

于 2013-02-14T16:29:27.120 に答える