-1

Javascript のデザイン パターンの初心者として、モジュール パターンに出くわしましたが、名前空間で何かが得られません。

Addy Osmani の JS Design Patterns に関するオンライン ブックの名前空間の部分で、Addyは変数/名前空間の存在を確認する 5 つの方法を説明しています。

// This doesn't check for existence of "myApplication" in
// the global namespace. Bad practice as we can easily
// clobber an existing variable/namespace with the same name
var myApplication = {};

// The following options *do* check for variable/namespace existence. 
// If already defined, we use that instance, otherwise we assign a new 
// object literal to myApplication.
// 
// Option 1: var myApplication = myApplication || {};
// Option 2  if( !MyApplication ){ MyApplication = {} };
// Option 3: window.myApplication || ( window.myApplication = {} );
// Option 4: var myApplication = $.fn.myApplication = function() {};
// Option 5: var myApplication = myApplication === undefined ? {} : myApplication;

私が本当に得られないのは、ネーミングの問題をどのように解決するかです。

私のコードが myApplication を使用しようとする前に myApplication が設定されているとしましょう。たとえば、オプション 1 (または実際にはすべてのオプション) を使用すると、myApplication が既に使用されている場合は何も変更されないように見えますが、myApplication の以前の値が上書きされるだけです。

// Higher in some script, where I don't know about it
var myApplication = 'whatever string or object used by the script';

// A bit of code later, where I come with my little Module Pattern
var myApplication = myApplication || {}; // Using Option 1

myApplication = (function($) {
   var myAppVariable = 'blabla';

   var myAppFunction = function() {
       // Doing a few things here
   };

   return myAppFunction;
}) (jQuery);

// Using the module
myApplication.myAppFunction();

私には、それが他の人の足を踏むのをどのように妨げているのかがわからないので、非常に混乱しています.

4

1 に答える 1

0

JavaScript でモジュールをロードするとき、おそらく (私が推測するコードに応じて) モジュールの名前空間に既にある変数を上書きする必要があります。ロード前にモジュール名を保持していた可能性のあるものを保持するための一般的なパターンは、noConflict()パターンです。このパターンの背後にある考え方は、名前空間の元の値を変数に保持し、noConflictが呼び出された場合、名前空間を元の値に置き換えてライブラリを返すというものです。パターンは次のように多かれ少なかれエレガントに書くことができます:

myModule = "some stuff ya";

(function(namespace, undefined) {
    var _module = "myModule";
    var __originalModule = namespace[_module];//holds the original value in case you wish to restore it

    /****** Code your module here following whichever module pattern you wish to follow ****/
    var module = {
        log: function() {
            if(console.log) {
                console.log(arguments);
            }
        }
    }
    /****** End of your module ****/

    //calling this method will remove your module from the namespace and replace it with whatever
    // originally held your module name.
    //This function returns your module
    module.noConflict = function() {
        namespace[_module] = __originalModule;
        return module;
    }

    namespace[_module] = module; //add your module to the namespace

})(window);

console.log(window.myModule); // => {log: function...}
var myMod = window.myModule.noConflict();
console.log(window.myModule); // => "some stuff ya"
于 2013-10-25T14:39:34.247 に答える