1

Yahoo YUI ブログで提案されている Module Pattern について、できる限り勉強してきました。

YUI には、同じ名前の既存の名前空間オブジェクトを次のように上書きすることなく、新しい空の名前空間オブジェクトを作成する機能があることに気付きました。

YAHOO.namespace("myProject");

次に、これを呼び出して使用できますYAHOO.myProject

(注意:YAHOO.myProject既に存在する場合は上書きされません)

プレーンな JavaScript を使用して、YUI を使用せずに同様の効果を得るにはどうすればよいですか?

できるだけ詳しく説明してください。

これが行われている完全な YUI ブログ記事は、ここにあります。

JavaScript の知識とスキルを学び、強化しているので、私自身の個人的な JavaScript ライブラリを作成しようとしています (使用する必要がない場合でも)。

4

3 に答える 3

2

あなたの例では、次のように機能します。

if (!YAHOO.myProject) {
    YAHOO.myProject = {};
}
YAHOO.myProject.whatever = true;

または独自の親モジュール名を使用します。

var myModule = myModule || {};  // make sure parent is defined without overwriting
if (!myModule.myProject) {
    myModule.myProject = {};
}
myModule.myProject.whatever = true;

または、独自の名前空間関数を定義します。

function myNamespace(item) {
    if (!myModule[item]) {
        myModule[item] = {};
    }
}

myNamespace("myProject");
myNamespace.myProject.whatever = true;
于 2012-02-24T05:41:45.810 に答える
1

Q.同じ名前の別のオブジェクトを上書きせずに、空の名前空間オブジェクトを作成するにはどうすればよいですか？

できません。定義上、同じ名前で新しい空のオブジェクトと既存のオブジェクトの両方を参照することはできません。

「空の名前空間オブジェクトがまだ存在しない場合にのみ作成することを確認するにはどうすればよいですか。そうでない場合は、既存のオブジェクトに追加します」という意味の場合は、次のようにします。

if (!YAHOO.myProject)
   YAHOO.myProject = {};

// or you may see this variation:
YAHOO.myProject = YAHOO.myProject || {};

後者は好きではありませんが、プレーンなifステートメントと同じ効果を達成するために頻繁に使用されます。

この一般原則をさらに理解するには、次の記事を参照してください：http ://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

更新：のYUI APIドキュメントにYAHOO.namespace()よると、メソッド「指定された名前空間を返し、存在しない場合はそれを作成します」-これは、読んでいたブログの文言よりもはるかに曖昧さが少なく、ほとんどわかりません。私がすでに言ったことをバックアップします...

于 2012-02-24T05:46:41.930 に答える
1

編集私はあなたの質問に直接答えていないことに気づきました。ごめん！ただし、これがいくつかの代替手法を理解するのに役立つことを願っています。

これは、プロパティや関数を一度追加して、後で上書きできないようにする場合など、私が時々使用する手法です。

    var module = new function(){

        var modules = {}; //internal module cache

        return function(name, module){
            //return all modules
            if( !name ) return modules;

            //return specific module
            if( modules[name] ) return modules[name];

            //return the module and store it
            return modules[name] = module;
        }

    }

したがって、次のように使用できます。

//will store this since it doesn't exist
module('test', 'foo'); //Since 'test' doesn't exist on the internal 'modules' variable, it sets this property with the value of 'foo'

module('test'); // Since we aren't passing a 2nd parameter, it returns the value of 'test' on the internal 'modules' variable

module('test', 'bar'); //We are attempting to change the value of 'test' to 'bar', but since 'test' already equals 'foo', it returns 'foo' instead.

module(); // { 'test': 'foo' } //Here we aren't passing any parameters, so it just returns the entire internal 'modules' variable.

注目すべき重要なことは、「new function()」を使用していることです。これは割り当て時に行われます。これは、'module' を外部関数ではなく内部関数にしたいためです。しかし、内部の 'var modules' 変数のクロージャを作成するには、外側の関数を割り当て時に実行する必要があります。

また、外部関数も自己実行するように記述できることに注意してください。

var module = function(){
    var modules = {};
    //other stuff
}();
于 2012-02-24T05:52:01.223 に答える