0

私は、Chris ImrieによるExpressionEngineのRequireJSの反復を使用して、すべてのフィールドタイプに互換性を持たせています。私が理解していないことの1つは、RequireJSで定義されている関数を呼び出す方法です。

https://github.com/ckimrie/RequireJS-for-EE

これが私がやろうとしていることの基本的な例です...

var loadImage = function() {
    console.log('loaded');
}

define(function () {
    return loadImage;
});

実際にloadImage関数にアクセスするにはどうすればよいですか？私のコードは100％動作しましたが、RequireJSを使い始めたとき、ライブラリの動作は異なります。以下は、私が使用しているライブラリのスニペットです。RequireJS用に完全にフォークされています。フォークを削除して標準のjQuery呼び出しを使用すると、問題なく機能します（RequireJSがすべてのスクリプトをロードしている場合でも）。

動作しません：

if (typeof define === 'function' && define.amd) {
    define(function () {
        return loadImage;
    });
} else {
    $.loadImage = loadImage;
}

動作しますか

$.loadImage = loadImage;

なぜjQueryライブラリはこのようなコードをフォークするのでしょうか？単純なものを見落としているのではないかと心配していますが、このコードはすべてExpressionEngineフィールドタイプを使用しているというコンテキストを考えると、ライブラリを変更するのに問題はありません。

4

2 に答える 2

6

試すべきいくつかのこと：

このモジュールのモジュール依存関係を指定する場所であるため、define関数には最初の引数として配列が必要です。モジュールが動作するために他のスクリプトやモジュールを必要としない場合、この配列は次のように空のままになります。

define([], function(){
    //Your code here
});

RequireJSが機能する方法は、モジュール名としてモジュールパスを使用することであるため、これは少し紛らわしい部分です。これは、モジュールの移植性を高めるだけでなく、必要なモジュールとその配置場所を同じように指定するという動作を可能にするため、非常に強力です。

したがって、上記で定義されたモジュールが「mymodule / js / component.js」にある場合は、それをロードして、次のような別のスクリプトで非同期的に使用できます。

//some existing script that then needs a JS module that has not been loaded yet
require(['mymodule/js/component'], function(component){
   //All loaded modules are provided as arguments in the 
   //order they are specified in the require array
   var a = component();
});

したがって、例は次のようになります。

//This script located at mymodule/js/loadImage.js
if (typeof define === 'function' && define.amd) {
    define([], function () {
        return loadImage;
    });
} else {
    $.loadImage = loadImage;
}

//Script located in another file that needs the loadImage module
require(['mymodule/js/loadImage'], function(loadImage){
    loadImage();
});

最後に、define呼び出しの最初の引数として名前を指定することで、必要に応じてモジュールに短い名前を付けることができます。RequireJSは短い名前からファイルがどこにあるかわからないため、最初にファイルが必要になったときにファイルへのパスを指定する必要があるため、これはお勧めしません。これが適切な場所は、必要なときにすべてのスクリプトをロードするのではなく、事前にすべてのスクリプトをロードする場合です（すべてがオンデマンドでロードされるため、これをお勧めします）。ただし、モジュールの「短い」名前を指定する方法は次のとおりです。

//This script located at mymodule/js/loadImage.js
if (typeof define === 'function' && define.amd) {
    define("loadImage", [], function () {
        return loadImage;
    });
} else {
    $.loadImage = loadImage;
}

loadImageモジュールがロードされていることがわかっている場合は、上記の手法で次のことができます。

//Even if loadImage has been already fetched, this is good practice since you can
//add more modules to be the dependency array if you need
require(['loadImage'], function(loadImage){
    loadImage();
});
//or sometimes this can be convenient:
var loadImage = require("loadImage")
loadImage();

アップデート

loadImageモジュールが機能する必要があるモジュールを作成したい場合は、次のようにすることを忘れてください。

//By providing the module dependencies in the first argument, RequireJS will
//fetch it and load it if needed
define(['mymodule/js/loadImage'], function(loadImage){
    loadImage();
})
于 2012-11-09T13:05:23.893 に答える
5

上記の回答をお詫び申し上げます。あなたが何をしようとしているのか理解できたと思います。基本的に、参照しているライブラリ（Javascript-Load-Image）は、AMDサポート（参照しているdefine関数）をライブラリに実装しており、独自のスクリプトで使用したいと考えていますか？

RequireJSは、通常のスクリプトだけでなくAMD​​ JSモジュールもロードできるため、混乱する場合があります。コードの他の部分で使用するモジュールとして使用できるようにするJSコンストラクターまたは関数を含むJSファイルがある場合は、上記のdefine（）呼び出しを追加するだけです。重要なのは、それがRequireJSによってAMDモジュールとして要求されていることを確認する必要があるということです。そうしないと、モジュール名がありません。これは、「。js」を省略するのと同じくらい簡単です。

したがって、上記の例のように：

//In your script that needs the loadimage library you would load it by 
//specifying the path to the JS file and omitting the ".js" extension
require(["path/to/loadimage"], function(loadimage){
    loadimage();
});


//If you KNOW that the library has already been loaded by RequireJS
//you can fetch it synchronously from RequireJS' memory by specifying 
//its path without the .js
var loadimage = require("path/to/loadimage");
loadimage()
于 2012-11-09T16:45:33.253 に答える