ฉันจะสร้างเนมสเปซใน JavaScript เพื่อให้วัตถุและฟังก์ชั่นของฉันไม่ได้ถูกเขียนทับโดยวัตถุและฟังก์ชั่นที่มีชื่อเดียวกันอื่น ๆ ได้อย่างไร ฉันใช้สิ่งต่อไปนี้:

if (Foo == null || typeof(Foo) != "object") { var Foo = new Object();}

มีวิธีที่สง่างามหรือกระชับกว่านี้หรือไม่?

ฉันชอบสิ่งนี้:

var yourNamespace = {

    foo: function() {
    },

    bar: function() {
    }
};

...

yourNamespace.foo();

ฉันใช้วิธีการที่พบในไซต์ Enterprise jQuery :

นี่คือตัวอย่างของพวกเขาที่แสดงวิธีประกาศคุณสมบัติและฟังก์ชั่นส่วนตัว & สาธารณะ ทุกสิ่งทุกอย่างเสร็จสิ้นเป็นฟังก์ชั่นที่ไม่เปิดเผยตัว

(function( skillet, $, undefined ) {
    //Private Property
    var isHot = true;

    //Public Property
    skillet.ingredient = "Bacon Strips";

    //Public Method
    skillet.fry = function() {
        var oliveOil;

        addItem( "\t\n Butter \n\t" );
        addItem( oliveOil );
        console.log( "Frying " + skillet.ingredient );
    };

    //Private Method
    function addItem( item ) {
        if ( item !== undefined ) {
            console.log( "Adding " + $.trim(item) );
        }
    }
}( window.skillet = window.skillet || {}, jQuery ));

ดังนั้นหากคุณต้องการให้เป็นหนึ่งในการเข้าถึงของสมาชิกที่สาธารณะคุณก็จะไปหรือskillet.fry()skillet.ingredients

สิ่งที่เจ๋งจริงๆคือตอนนี้คุณสามารถขยายเนมสเปซได้โดยใช้ไวยากรณ์เดียวกัน

//Adding new Functionality to the skillet
(function( skillet, $, undefined ) {
    //Private Property
    var amountOfGrease = "1 Cup";

    //Public Method
    skillet.toString = function() {
        console.log( skillet.quantity + " " +
                     skillet.ingredient + " & " +
                     amountOfGrease + " of Grease" );
        console.log( isHot ? "Hot" : "Cold" );
    };
}( window.skillet = window.skillet || {}, jQuery ));

undefinedอาร์กิวเมนต์ที่สาม

ที่สามอาร์กิวเมนต์เป็นแหล่งที่มาของตัวแปรของค่าundefined undefinedฉันไม่แน่ใจว่ามันยังคงมีความเกี่ยวข้องอยู่หรือไม่ แต่ในขณะที่ทำงานกับเบราว์เซอร์เก่า / มาตรฐาน JavaScript (ecmascript 5, javascript <1.8.5 ~ firefox 4) ตัวแปรขอบเขตทั่วโลกundefinedสามารถเขียนได้ดังนั้นทุกคนสามารถเขียนค่าใหม่ได้ อาร์กิวเมนต์ที่สาม (เมื่อไม่ผ่านค่า) จะสร้างตัวแปรundefinedที่กำหนดขอบเขตไว้ที่เนมสเปซ / ฟังก์ชัน undefinedเพราะไม่มีค่าก็ผ่านไปได้เมื่อคุณสร้างพื้นที่ชื่อเป็นค่าเริ่มต้นค่า

อีกวิธีที่จะทำซึ่งฉันคิดว่ามันเป็นข้อ จำกัด น้อยกว่ารูปแบบตัวอักษรของวัตถุคือ:

var ns = new function() {

    var internalFunction = function() {

    };

    this.publicFunction = function() {

    };
};

ด้านบนนั้นคล้ายกับรูปแบบโมดูลมากและไม่ว่าคุณจะชอบหรือไม่ก็ตามมันอนุญาตให้คุณเปิดเผยฟังก์ชั่นทั้งหมดของคุณในฐานะสาธารณะในขณะที่หลีกเลี่ยงโครงสร้างที่แข็งของวัตถุตามตัวอักษร

มีวิธีที่สง่างามหรือกระชับกว่านี้หรือไม่?

ใช่. ตัวอย่างเช่น:

var your_namespace = your_namespace || {};

จากนั้นคุณสามารถมี

var your_namespace = your_namespace || {};
your_namespace.Foo = {toAlert:'test'};
your_namespace.Bar = function(arg) 
{
    alert(arg);
};
with(your_namespace)
{
   Bar(Foo.toAlert);
}

ปกติฉันจะสร้างมันในการปิด:

var MYNS = MYNS || {};

MYNS.subns = (function() {

    function privateMethod() {
        // Do private stuff, or build internal.
        return "Message";
    }

    return {
        someProperty: 'prop value',
        publicMethod: function() {
            return privateMethod() + " stuff";
        }
    };
})();

สไตล์ของฉันในช่วงหลายปีที่ผ่านมามีการเปลี่ยนแปลงเล็กน้อยตั้งแต่เขียนสิ่งนี้และตอนนี้ฉันพบว่าตัวเองกำลังเขียนการปิดเช่นนี้

var MYNS = MYNS || {};

MYNS.subns = (function() {
    var internalState = "Message";

    var privateMethod = function() {
        // Do private stuff, or build internal.
        return internalState;
    };
    var publicMethod = function() {
        return privateMethod() + " stuff";
    };

    return {
        someProperty: 'prop value',
        publicMethod: publicMethod
    };
})();

ด้วยวิธีนี้ฉันค้นหา API สาธารณะและการใช้งานที่เข้าใจง่ายขึ้น คิดว่าข้อความสั่งคืนเป็นอินเทอร์เฟซสาธารณะสำหรับการนำไปใช้

เนื่องจากคุณอาจเขียนไฟล์ต่าง ๆ ของ JavaScript และรวมเข้าด้วยกันหรือไม่รวมในแอปพลิเคชันแต่ละคนจึงจำเป็นต้องสามารถกู้คืนหรือสร้างวัตถุเนมสเปซโดยไม่ทำลายงานของไฟล์อื่น ...

หนึ่งไฟล์อาจต้องการใช้เนมสเปซnamespace.namespace1:

namespace = window.namespace || {};
namespace.namespace1 = namespace.namespace1 || {};

namespace.namespace1.doSomeThing = function(){}

ไฟล์อื่นอาจต้องการใช้เนมสเปซnamespace.namespace2:

namespace = window.namespace || {};
namespace.namespace2 = namespace.namespace2 || {};

namespace.namespace2.doSomeThing = function(){}

ไฟล์สองไฟล์นี้สามารถอยู่ด้วยกันหรือแยกกันโดยไม่เกิดการชนกัน

นี่คือวิธีที่ Stoyan Stefanov ทำไว้ในหนังสือรูปแบบ JavaScriptซึ่งฉันพบว่าเป็นสิ่งที่ดีมาก (มันแสดงให้เห็นว่าเขาแสดงความคิดเห็นที่อนุญาตสำหรับเอกสาร API ที่สร้างขึ้นโดยอัตโนมัติได้อย่างไรและวิธีเพิ่มวิธีลงในต้นแบบต้นแบบของวัตถุที่กำหนดเอง):

/**
* My JavaScript application
*
* @module myapp
*/

/** @namespace Namespace for MYAPP classes and functions. */
var MYAPP = MYAPP || {};

/**
* A maths utility
* @namespace MYAPP
* @class math_stuff
*/
MYAPP.math_stuff = {

    /**
    * Sums two numbers
    *
    * @method sum
    * @param {Number} a First number
    * @param {Number} b Second number
    * @return {Number} Sum of the inputs
    */
    sum: function (a, b) {
        return a + b;
    },

    /**
    * Multiplies two numbers
    *
    * @method multi
    * @param {Number} a First number
    * @param {Number} b Second number
    * @return {Number} The inputs multiplied
    */
    multi: function (a, b) {
        return a * b;
    }
};

/**
* Constructs Person objects
* @class Person
* @constructor
* @namespace MYAPP
* @param {String} First name
* @param {String} Last name
*/
MYAPP.Person = function (first, last) {

    /**
    * First name of the Person
    * @property first_name
    * @type String
    */
    this.first_name = first;

    /**
    * Last name of the Person
    * @property last_name
    * @type String
    */
    this.last_name = last;
};

/**
* Return Person's full name
*
* @method getName
* @return {String} First name + last name
*/
MYAPP.Person.prototype.getName = function () {
    return this.first_name + ' ' + this.last_name;
};

ฉันใช้วิธีนี้:

var myNamespace = {}
myNamespace._construct = function()
{
    var staticVariable = "This is available to all functions created here"

    function MyClass()
    {
       // Depending on the class, we may build all the classes here
       this.publicMethod = function()
       {
          //Do stuff
       }
    }

    // Alternatively, we may use a prototype.
    MyClass.prototype.altPublicMethod = function()
    {
        //Do stuff
    }

    function privateStuff()
    {
    }

    function publicStuff()
    {
       // Code that may call other public and private functions
    }

    // List of things to place publically
    this.publicStuff = publicStuff
    this.MyClass = MyClass
}
myNamespace._construct()

// The following may or may not be in another file
myNamespace.subName = {}
myNamespace.subName._construct = function()
{
   // Build namespace
}
myNamespace.subName._construct()

รหัสภายนอกสามารถเป็น:

var myClass = new myNamespace.MyClass();
var myOtherClass = new myNamepace.subName.SomeOtherClass();
myNamespace.subName.publicOtherStuff(someParameter);

นี่คือการติดตามลิงก์ของ user106826 ไปยัง Namespace.js ดูเหมือนว่าโครงการย้ายไปGitHub ตอนนี้มันเป็นsmith / namespacedotjs

ฉันใช้ JavaScript ตัวช่วยนี้ง่าย ๆ สำหรับโครงการเล็ก ๆ ของฉันและจนถึงตอนนี้ดูเหมือนว่าจะเบา แต่ก็อเนกประสงค์พอที่จะรองรับการกำหนดเนมสเปซและโหลดโมดูล / คลาส มันจะดีมากถ้ามันจะอนุญาตให้ฉันนำเข้าแพ็คเกจไปยัง namespace ที่ฉันเลือกไม่ใช่แค่ namespace ทั่วโลก ... ถอนหายใจ แต่นั่นเป็นประเด็น

อนุญาตให้คุณประกาศเนมสเปซจากนั้นกำหนดออบเจ็กต์ / โมดูลในเนมสเปซนั้น:

Namespace('my.awesome.package');
my.awesome.package.WildClass = {};

ตัวเลือกอื่นคือการประกาศ namespace และเนื้อหาในครั้งเดียว:

Namespace('my.awesome.package', {
    SuperDuperClass: {
        saveTheDay: function() {
            alert('You are welcome.');
        }
    }
});

สำหรับตัวอย่างการใช้งานมากขึ้นดูที่ example.js แฟ้มในแหล่งที่มา

ตัวอย่าง:

var namespace = {};
namespace.module1 = (function(){

    var self = {};
    self.initialized = false;

    self.init = function(){
        setTimeout(self.onTimeout, 1000)
    };

    self.onTimeout = function(){
        alert('onTimeout')
        self.initialized = true;
    };

    self.init(); /* If it needs to auto-initialize, */
    /* You can also call 'namespace.module1.init();' from outside the module. */
    return self;
})()

คุณสามารถประกาศlocalตัวแปรsameเช่นเลือกselfและกำหนดlocal.onTimeoutถ้าคุณต้องการให้เป็นส่วนตัว

คุณสามารถประกาศฟังก์ชั่นที่เรียบง่ายเพื่อให้ namespaces

function namespace(namespace) {
    var object = this, tokens = namespace.split("."), token;

    while (tokens.length > 0) {
        token = tokens.shift();

        if (typeof object[token] === "undefined") {
            object[token] = {};
        }

        object = object[token];
    }

    return object;
}

// Usage example
namespace("foo.bar").baz = "I'm a value!";

หากคุณต้องการขอบเขตส่วนตัว:

var yourNamespace = (function() {

  //Private property
  var publicScope = {};

  //Private property
  var privateProperty = "aaa"; 

  //Public property
  publicScope.publicProperty = "bbb";

  //Public method
  publicScope.publicMethod = function() {
    this.privateMethod();
  };

  //Private method
  function privateMethod() {
    console.log(this.privateProperty);
  }

  //Return only the public parts
  return publicScope;
}());

yourNamespace.publicMethod();

อื่นถ้าคุณจะไม่ใช้ขอบเขตส่วนตัว:

var yourNamespace = {};

yourNamespace.publicMethod = function() {
    // Do something...
};

yourNamespace.publicMethod2 = function() {
    // Do something...
};

yourNamespace.publicMethod();

รูปแบบของโมดูลเดิมถูกกำหนดให้เป็นวิธีการจัดให้มีการห่อหุ้มส่วนตัวและสาธารณะสำหรับคลาสในวิศวกรรมซอฟต์แวร์ทั่วไป

เมื่อทำงานกับรูปแบบโมดูลเราอาจพบว่ามีประโยชน์ในการกำหนดแม่แบบง่าย ๆ ที่เราใช้สำหรับเริ่มต้นใช้งาน นี่คือสิ่งที่ครอบคลุมการเว้นวรรคชื่อตัวแปรสาธารณะและส่วนตัว

ในจาวาสคริปต์รูปแบบโมดูลถูกใช้เพื่อเลียนแบบแนวคิดของคลาสเพิ่มเติมในลักษณะที่เราสามารถรวมทั้งวิธีสาธารณะ / ส่วนตัวและตัวแปรภายในวัตถุเดียวดังนั้นจึงป้องกันบางส่วนจากขอบเขตส่วนกลาง สิ่งนี้ส่งผลในการลดโอกาสของชื่อฟังก์ชั่นของเราที่ขัดแย้งกับฟังก์ชั่นอื่น ๆ ที่กำหนดไว้ในสคริปต์เพิ่มเติมในหน้า

var myNamespace = (function () {

  var myPrivateVar, myPrivateMethod;

  // A private counter variable
  myPrivateVar = 0;

  // A private function which logs any arguments
  myPrivateMethod = function( foo ) {
      console.log( foo );
  };

  return {

    // A public variable
    myPublicVar: "foo",

    // A public function utilizing privates
    myPublicFunction: function( bar ) {

      // Increment our private counter
      myPrivateVar++;

      // Call our private method using bar
      myPrivateMethod( bar );

    }
  };

})();

ข้อดี

ทำไมรูปแบบของโมดูลจึงเป็นตัวเลือกที่ดี? สำหรับผู้เริ่มต้นมันสะอาดกว่าสำหรับนักพัฒนาที่มาจากพื้นหลังเชิงวัตถุมากกว่าแนวคิดของการห่อหุ้มที่แท้จริงอย่างน้อยจากมุมมอง JavaScript

ประการที่สองมันรองรับข้อมูลส่วนตัวดังนั้นในรูปแบบของโมดูลส่วนสาธารณะของรหัสของเราสามารถสัมผัสกับส่วนส่วนตัวได้อย่างไรก็ตามโลกภายนอกไม่สามารถสัมผัสชิ้นส่วนส่วนตัวของชั้นเรียนได้

ข้อเสีย

ข้อเสียของรูปแบบโมดูลคือเมื่อเราเข้าถึงสมาชิกของรัฐและเอกชนต่างกันเมื่อเราต้องการเปลี่ยนการมองเห็นจริง ๆ แล้วเราต้องทำการเปลี่ยนแปลงในแต่ละสถานที่ที่สมาชิกใช้

นอกจากนี้เรายังไม่สามารถเข้าถึงสมาชิกเอกชนในวิธีการที่จะถูกเพิ่มไปยังวัตถุที่จุดภายหลัง ที่กล่าวว่าในหลายกรณีรูปแบบโมดูลยังคงมีประโยชน์มากและเมื่อใช้อย่างถูกต้องแน่นอนมีศักยภาพในการปรับปรุงโครงสร้างของแอปพลิเคชันของเรา

รูปแบบโมดูลการเปิดเผย

ตอนนี้เรามีความคุ้นเคยกับรูปแบบของโมดูลเพิ่มขึ้นเล็กน้อยมาดูรุ่นที่ได้รับการปรับปรุงเล็กน้อย - รูปแบบของ Revealing Module ของ Christian Heilmann

รูปแบบของโมดูลการเปิดเผยเกิดขึ้นเมื่อ Heilmann รู้สึกผิดหวังกับความจริงที่ว่าเขาต้องทำซ้ำชื่อของวัตถุหลักเมื่อเราต้องการเรียกวิธีสาธารณะหนึ่งวิธีจากอีกวิธีหนึ่งหรือเข้าถึงตัวแปรสาธารณะนอกจากนี้เขายังไม่ชอบข้อกำหนดรูปแบบของโมดูล เพื่อคัดค้านสัญกรณ์ตามตัวอักษรสำหรับสิ่งที่เขาต้องการให้เป็นสาธารณะ

ผลลัพธ์ของความพยายามของเขาคือรูปแบบที่ทันสมัยซึ่งเราเพียงแค่กำหนดฟังก์ชันและตัวแปรทั้งหมดของเราในขอบเขตส่วนตัวและส่งคืนวัตถุที่ไม่ระบุชื่อพร้อมตัวชี้ไปยังฟังก์ชันส่วนตัวที่เราต้องการเปิดเผยในที่สาธารณะ

ตัวอย่างของวิธีการใช้รูปแบบการเปิดเผยโมดูลสามารถพบได้ที่ด้านล่าง

var myRevealingModule = (function () {

        var privateVar = "Ben Cherry",
            publicVar = "Hey there!";

        function privateFunction() {
            console.log( "Name:" + privateVar );
        }

        function publicSetName( strName ) {
            privateVar = strName;
        }

        function publicGetName() {
            privateFunction();
        }


        // Reveal public pointers to
        // private functions and properties

        return {
            setName: publicSetName,
            greeting: publicVar,
            getName: publicGetName
        };

    })();

myRevealingModule.setName( "Paul Kinlan" );

ข้อดี

รูปแบบนี้ช่วยให้ไวยากรณ์ของสคริปต์ของเราสอดคล้องกันมากขึ้น นอกจากนี้ยังทำให้ชัดเจนยิ่งขึ้นในตอนท้ายของโมดูลซึ่งฟังก์ชั่นและตัวแปรของเราสามารถเข้าถึงได้แบบสาธารณะซึ่งช่วยให้อ่านง่ายขึ้น

ข้อเสีย

ข้อเสียของรูปแบบนี้คือถ้าฟังก์ชั่นส่วนตัวหมายถึงฟังก์ชั่นสาธารณะฟังก์ชั่นสาธารณะนั้นไม่สามารถถูกแทนที่ได้หากจำเป็นต้องมีการแก้ไข นี่เป็นเพราะฟังก์ชั่นส่วนตัวจะยังคงอ้างถึงการใช้งานส่วนตัวและรูปแบบที่ไม่ได้ใช้กับสมาชิกสาธารณะเฉพาะกับฟังก์ชั่น

สมาชิกออบเจกต์สาธารณะที่อ้างถึงตัวแปรส่วนบุคคลจะต้องอยู่ภายใต้กฎการแก้ไขที่ไม่มีการแก้ไขข้างต้น

ฉันสร้างเนมสเปซซึ่งได้รับแรงบันดาลใจจากโมดูลของ Erlang มันเป็นวิธีการทำงานที่ดีมาก แต่นั่นเป็นวิธีที่ฉันเขียนโค้ด JavaScript ของฉันในวันนี้

มันให้ปิด namespace ทั่วโลกและแสดงฟังก์ชั่นชุดที่กำหนดไว้ในการปิดที่

(function(){

  namespace("images", previous, next);
  // ^^ This creates or finds a root object, images, and binds the two functions to it.
  // It works even though those functions are not yet defined.

  function previous(){ ... }

  function next(){ ... }

  function find(){ ... } // A private function

})();

หลังจากย้ายห้องสมุดหลายแห่งของฉันไปยังโครงการต่างๆและต้องเปลี่ยนเนมสเปซระดับบนสุด (ชื่อคงที่) ฉันได้เปลี่ยนไปใช้ฟังก์ชั่นตัวช่วยเล็ก ๆ (โอเพ่นซอร์ส) เพื่อกำหนดเนมสเปซ

global_namespace.Define('startpad.base', function(ns) {
    var Other = ns.Import('startpad.other');
    ....
});

คำอธิบายของผลประโยชน์อยู่ที่ฉันโพสต์บล็อก คุณสามารถคว้ารหัสที่มาที่นี่

ประโยชน์อย่างหนึ่งที่ฉันชอบคือการแยกระหว่างโมดูลที่เกี่ยวกับการสั่งโหลด คุณสามารถอ้างถึงโมดูลภายนอกได้ก่อนที่จะโหลด และการอ้างอิงวัตถุที่คุณได้รับจะถูกกรอกเมื่อมีรหัส

ฉันใช้ไวยากรณ์ต่อไปนี้สำหรับเนมสเปซ

var MYNamespace = MYNamespace|| {};

 MYNamespace.MyFirstClass = function (val) {
        this.value = val;
        this.getValue = function(){
                          return this.value;
                       };
    }

var myFirstInstance = new MYNamespace.MyFirstClass(46);
alert(myFirstInstance.getValue());

jsfiddle: http://jsfiddle.net/rpaul/4dngxwb3/1/

ฉันไปงานเลี้ยงมา 7 ปีแล้ว แต่ก็ทำงานประมาณ 8 ปีที่ผ่านมา:

• http://blogger.ziesemer.com/2008/05/javascript-namespace-function.html
• http://blogger.ziesemer.com/2007/10/respecting-javascript-global-namespace.html

เป็นสิ่งสำคัญที่จะสามารถสร้างเนมสเปซที่ซ้อนกันหลายรายการได้อย่างง่ายดายและมีประสิทธิภาพเพื่อให้เว็บแอปพลิเคชันที่ซับซ้อนมีการจัดการและจัดการในขณะที่เคารพเนมสเปซทั่วโลกของ JavaScript .

จากข้างบนนี่เป็นโซลูชันของฉันประมาณปี 2008:

var namespace = function(name, separator, container){
  var ns = name.split(separator || '.'),
    o = container || window,
    i,
    len;
  for(i = 0, len = ns.length; i < len; i++){
    o = o[ns[i]] = o[ns[i]] || {};
  }
  return o;
};

นี่ไม่ใช่การสร้างเนมสเปซ แต่มีฟังก์ชันสำหรับสร้างเนมสเปซ

นี่สามารถย่อให้ย่อขนาดหนึ่งซับ:

var namespace=function(c,f,b){var e=c.split(f||"."),g=b||window,d,a;for(d=0,a=e.length;d<a;d++){g=g[e[d]]=g[e[d]]||{}}return g};

ตัวอย่างการใช้งาน:

namespace("com.example.namespace");
com.example.namespace.test = function(){
  alert("In namespaced function.");
};

หรือเป็นคำสั่งเดียว:

namespace("com.example.namespace").test = function(){
  alert("In namespaced function.");
};

จะถูกดำเนินการอย่างใดอย่างหนึ่งเป็น:

com.example.namespace.test();

หากคุณไม่ต้องการการสนับสนุนเบราว์เซอร์รุ่นเก่ารุ่นที่อัปเดตแล้ว:

const namespace = function(name, separator, container){
    var o = container || window;
    name.split(separator || '.').forEach(function(x){
        o = o[x] = o[x] || {};
    });
    return o;
};

ตอนนี้ฉันน่าจะเปิดเผยnamespaceเนมสเปซทั่วโลกด้วยตัวเอง (น่าเสียดายที่ภาษาฐานไม่ได้ให้สิ่งนี้สำหรับเรา!) ดังนั้นโดยทั่วไปฉันจะใช้ตัวเองในการปิดเช่น:

(function(){
	const namespace = function(name, separator, container){
		var o = container || window;
		name.split(separator || '.').forEach(function(x){
			o = o[x] = o[x] || {};
		});
		return o;
	};
	const ns = namespace("com.ziesemer.myApp");
	
	// Optional:
	ns.namespace = ns;
	
	// Further extend, work with ns from here...
}());

console.log("\"com\":", com);

ในแอปพลิเคชันที่มีขนาดใหญ่ขึ้นจะต้องกำหนดเพียงครั้งเดียวที่จุดเริ่มต้นของการโหลดหน้าเว็บ (สำหรับแอปพลิเคชันเว็บที่ใช้ไคลเอ็นต์) ไฟล์เพิ่มเติมสามารถนำฟังก์ชั่นเนมสเปซกลับมาใช้ใหม่หากถูกเก็บไว้ (รวมอยู่ใน "ทางเลือก" ด้านบน) ที่แย่ที่สุดถ้าฟังก์ชั่นนี้ถูกประกาศอีกครั้งสองสามครั้ง - มันเป็นเพียงโค้ดไม่กี่บรรทัดและน้อยกว่าหากมีการลดขนาด

ฉันชอบวิธีการแก้ปัญหาของ Jaco Pretorius แต่ฉันต้องการทำให้คำหลัก "นี่" มีประโยชน์มากขึ้นโดยการชี้ไปที่วัตถุโมดูล / เนมสเปซ รุ่น skillet ของฉัน:

(function ($, undefined) {

    console.log(this);

}).call(window.myNamespace = window.myNamespace || {}, jQuery);

รูปแบบที่ฉันโปรดปรานกลายเป็นเมื่อเร็ว ๆ นี้:

var namespace = (function() {
  
  // expose to public
  return {
    a: internalA,
    c: internalC
  }

  // all private
  
  /**
   * Full JSDoc
   */
  function internalA() {
    // ...
  }
  
  /**
   * Full JSDoc
   */
  function internalB() {
    // ...
  }
  
  /**
   * Full JSDoc
   */
  function internalC() {
    // ...
  }
  
  /**
   * Full JSDoc
   */
  function internalD() {
    // ...
  }
  
})();

แน่นอนว่าการกลับมาอาจเป็นไปได้ในตอนท้าย แต่ถ้ามีเพียงการประกาศฟังก์ชั่นตามมาเท่านั้นมันง่ายกว่ามากที่จะเห็นว่าเนมสเปซทั้งหมดเกี่ยวกับอะไรและ API ใดที่เปิดเผย

รูปแบบของการใช้การแสดงออกของฟังก์ชั่นในกรณีเช่นนี้ส่งผลให้ไม่สามารถรู้ว่าวิธีการใดที่ถูกเปิดเผยโดยไม่ต้องใช้รหัสทั้งหมด

ฉันคิดว่าคุณทุกคนใช้รหัสมากเกินไปสำหรับปัญหาง่ายๆ ไม่จำเป็นต้องทำธุรกรรมซื้อคืนสำหรับสิ่งนั้น นี่คือฟังก์ชั่นบรรทัดเดียว

namespace => namespace.split(".").reduce((last, next) => (last[next] = (last[next] || {})), window);

ลองมัน :

// --- definition ---
const namespace = namespace => namespace.split(".").reduce((last, next) => (last[next] = (last[next] || {})), window);

// --- Use ----
let myNamespace = namespace("a.b.c");
myNamespace.MyClass = class MyClass {};

// --- see ----
console.log("a : ", a);

หากใช้ Makefile คุณสามารถทำได้

// prelude.hjs
billy = new (
    function moduleWrapper () {
    const exports = this;

// postlude.hjs
return exports;
})();

// someinternalfile.js
function bob () { console.log('hi'); }
exports.bob = bob;

// clientfile.js
billy.bob();

ฉันชอบที่จะใช้ Makefile ต่อไปเมื่อฉันไปถึง 1,000 บรรทัดเพราะฉันสามารถคอมเม้นต์โค้ดขนาดใหญ่ได้อย่างมีประสิทธิภาพโดยการลบบรรทัดเดียวใน makefile ทำให้ง่ายต่อการเล่นกับสิ่งของ ด้วยเทคนิคนี้เนมสเปซจะปรากฏเพียงครั้งเดียวในโหมโรงเพื่อให้ง่ายต่อการเปลี่ยนแปลงและคุณไม่จำเป็นต้องทำซ้ำในรหัสห้องสมุด

เชลล์สคริปต์สำหรับการพัฒนาสดในเบราว์เซอร์เมื่อใช้ makefile:

while (true); do make; sleep 1; done

เพิ่มสิ่งนี้เป็นงานสร้าง 'ไป' และคุณสามารถ 'ทำไป' เพื่อให้งานสร้างของคุณอัปเดตตามรหัสของคุณ

ค่อนข้างติดตามผลของ Ionu Ion G. คำตอบของ Stan แต่แสดงประโยชน์ของโค้ดที่กระจายตัวโดยใช้var ClassFirst = this.ClassFirst = function() {...}ซึ่งใช้ประโยชน์จากขอบเขตการปิด JavaScript ของ JavaScript สำหรับเนมสเปซที่น้อยลงสำหรับคลาสในเนมสเปซเดียวกัน

var Namespace = new function() {
    var ClassFirst = this.ClassFirst = function() {
        this.abc = 123;
    }

    var ClassSecond = this.ClassSecond = function() {
        console.log("Cluttered way to access another class in namespace: ", new Namespace.ClassFirst().abc);
        console.log("Nicer way to access a class in same namespace: ", new ClassFirst().abc);
    }
}

var Namespace2 = new function() {
    var ClassFirst = this.ClassFirst = function() {
        this.abc = 666;
    }

    var ClassSecond = this.ClassSecond = function() {
        console.log("Cluttered way to access another class in namespace: ", new Namespace2.ClassFirst().abc);
        console.log("Nicer way to access a class in same namespace: ", new ClassFirst().abc);
    }
}

new Namespace.ClassSecond()
new Namespace2.ClassSecond()

เอาท์พุท:

Cluttered way to access another class in namespace: 123
Nicer way to access a class in same namespace: 123
Cluttered way to access another class in namespace: 666
Nicer way to access a class in same namespace: 666

ฉันได้เขียนไลบรารี namespacing อื่นที่ใช้งานได้มากกว่าเช่นแพ็คเกจ / หน่วยทำในภาษาอื่น อนุญาตให้คุณสร้างแพ็คเกจของรหัส JavaScript และการอ้างอิงแพ็คเกจนั้นจากรหัสอื่น:

ไฟล์ hello.js

Package("hello", [], function() {
  function greeting() {
    alert("Hello World!");
  }
  // Expose function greeting to other packages
  Export("greeting", greeting);
});

ไฟล์ Example.js

Package("example", ["hello"], function(greeting) {
  // Greeting is available here
  greeting();  // Alerts: "Hello World!"
});

ต้องรวมเฉพาะไฟล์ที่สองในหน้า การอ้างอิง (ไฟล์hello.jsในตัวอย่างนี้) จะถูกโหลดโดยอัตโนมัติและวัตถุที่ส่งออกจากการอ้างอิงเหล่านั้นจะถูกใช้เพื่อเติมอาร์กิวเมนต์ของฟังก์ชันการเรียกกลับ

คุณสามารถค้นหาโครงการที่เกี่ยวข้องในแพคเกจ JS

เราสามารถใช้มันอย่างอิสระด้วยวิธีนี้:

var A = A|| {};
A.B = {};

A.B = {
    itemOne: null,
    itemTwo: null,
};

A.B.itemOne = function () {
    //..
}

A.B.itemTwo = function () {
    //..
}

นิสัยของฉันคือการใช้ฟังก์ชั่น myName ()เป็นที่เก็บข้อมูลแล้วvar myNameเป็นตัวยึด "เมธอด" ...

ไม่ว่าจะถูกต้องตามกฎหมายเพียงพอหรือไม่เอาชนะฉัน! ฉันใช้ตรรกะ PHP ของฉันตลอดเวลาและทำงานได้ดี : D

function myObj() {
    this.prop1 = 1;
    this.prop2 = 2;
    this.prop3 = 'string';
}

var myObj = (
 (myObj instanceof Function !== false)
 ? Object.create({

     $props: new myObj(),
     fName1: function() { /* code..  */ },
     fName2: function() { /* code ...*/ }
 })
 : console.log('Object creation failed!')
);

if (this !== that) myObj.fName1(); else myObj.fName2();

นอกจากนี้คุณยังสามารถทำได้ในทางกลับกันเพื่อตรวจสอบก่อนการสร้างวัตถุที่ดีกว่ามาก :

function myObj() {
    this.prop1 = 1;
    this.prop2 = 2;
    this.prop3 = 'string';
}

var myObj = (
    (typeof(myObj) !== "function" || myObj instanceof Function === false)
    ? new Boolean()
    : Object.create({
        $props: new myObj(),
        init: function () { return; },
        fName1: function() { /* code..  */ },
        fName2: function() { /* code ...*/ }
    })
);

if (myObj instanceof Boolean) {
    Object.freeze(myObj);
    console.log('myObj failed!');
    debugger;
}
else
    myObj.init();

อ้างอิงถึงสิ่งนี้: JavaScript: การสร้างวัตถุด้วย Object.create ()

ใน JavaScript ไม่มีวิธีที่กำหนดไว้ล่วงหน้าเพื่อใช้เนมสเปซ ใน JavaScript เราต้องสร้างวิธีการของเราเองเพื่อกำหนด NameSpaces นี่คือขั้นตอนที่เราปฏิบัติตามในเทคโนโลยี Oodles

การลงทะเบียน NameSpace Following ต่อไปนี้เป็นฟังก์ชั่นในการลงทะเบียนชื่อพื้นที่

//Register NameSpaces Function
function registerNS(args){
 var nameSpaceParts = args.split(".");
 var root = window;

 for(var i=0; i < nameSpaceParts.length; i++)
 {
  if(typeof root[nameSpaceParts[i]] == "undefined")
   root[nameSpaceParts[i]] = new Object();

  root = root[nameSpaceParts[i]];
 }
}

ในการลงทะเบียน Namespace เพียงแค่เรียกใช้ฟังก์ชันด้านบนโดยมีอาร์กิวเมนต์เป็นชื่อพื้นที่คั่นด้วย'.'(dot) ตัวอย่างเช่นให้ชื่อแอปพลิเคชันของคุณคือ oodles คุณสามารถสร้างเนมสเปซได้โดยวิธีการต่อไปนี้

registerNS("oodles.HomeUtilities");
registerNS("oodles.GlobalUtilities");
var $OHU = oodles.HomeUtilities;
var $OGU = oodles.GlobalUtilities;

โดยทั่วไปมันจะสร้างโครงสร้าง NameSpaces ของคุณเหมือนด้านล่างในแบ็กเอนด์:

var oodles = {
    "HomeUtilities": {},
    "GlobalUtilities": {}
};

ในฟังก์ชั่นดังกล่าวข้างต้นที่คุณต้องลงทะเบียน namespace ที่เรียกว่าและ"oodles.HomeUtilities" "oodles.GlobalUtilities"ที่จะเรียก namespaces เหล่านี้เราจะทำให้ตัวแปร var เช่น$OHUและ $OGUvar

ตัวแปรเหล่านี้ไม่มีอะไรนอกจากนามแฝงในการทำให้เนมสเปซเป็นจำนวนมาก ตอนนี้เมื่อใดก็ตามที่คุณประกาศฟังก์ชั่นที่เป็นของHomeUtilitiesคุณจะประกาศมันดังต่อไปนี้:

$OHU.initialization = function(){
    //Your Code Here
};

ข้างต้นคือการเริ่มต้นชื่อฟังก์ชั่นและมันจะใส่ลงใน $OHUnamespace และเรียกใช้ฟังก์ชันนี้ได้ทุกที่ในไฟล์สคริปต์ เพียงใช้รหัสต่อไปนี้

$OHU.initialization();

ในทำนองเดียวกันกับ NameSpaces อื่น

หวังว่ามันจะช่วย

JavaScript ไม่สนับสนุนเนมสเปซตามค่าเริ่มต้น ดังนั้นหากคุณสร้างองค์ประกอบใด ๆ (ฟังก์ชั่นวิธีการวัตถุตัวแปร) มันจะกลายเป็นโลกและทำให้เนมสเปซส่วนกลาง ลองมาเป็นตัวอย่างของการกำหนดสองฟังก์ชันโดยไม่มี namespace ใด ๆ

function func1() {
    console.log("This is a first definition");

}
function func1() {
    console.log("This is a second definition");
}
func1(); // This is a second definition

มันมักจะเรียกความหมายฟังก์ชั่นที่สอง ในกรณีนี้เนมสเปซจะแก้ปัญหาการชนกันของชื่อ