Как создать пространство имен в 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является источником переменной valueundefined. Я не уверен, что это все еще актуально сегодня, но при работе со старыми браузерами/стандартами 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 и реализацию легче понять. Представьте, что оператор return является публичным интерфейсом для реализации.
Поскольку вы можете писать разные файлы 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(){}
Эти два файла могут взаимодействовать друг с другом без столкновения.
Здесь, как Стоян Стефанов делает это в своей JavaScript Patterns, которую я считаю очень хорошим (он также показывает, как он комментирует, что позволяет для автоматической генерации документации 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 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('my.awesome.package');
my.awesome.package.WildClass = {};
Другой вариант - объявить пространство имен и его содержимое сразу:
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, если вы хотите, чтобы она была закрытой.
Вы можете объявить простую функцию для предоставления пространств имен.
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!";
Я создал namespace, который вдохновлен модулями Erlang. Это очень функциональный подход, но вот как я пишу свой JavaScript-код в наши дни.
Он дает замыкание глобального пространства имен и предоставляет определенные функции набора внутри этого закрытия.
(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
})();
Я использую следующий синтаксис для пространства имен.
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/
После переноса нескольких моих библиотек в разные проекты и необходимости постоянно менять пространство имен верхнего уровня (статически называемое), я переключился на использование этой вспомогательной вспомогательной функции (open source) для определения пространств имен.
global_namespace.Define('startpad.base', function(ns) {
var Other = ns.Import('startpad.other');
....
});
Описание преимуществ находится в моем сообщении . Здесь вы можете получить исходный код .
Одним из преимуществ, которые мне очень нравятся, является изоляция между модулями относительно порядка загрузки. Вы можете обратиться к внешнему модулю перед его загрузкой. И ссылка на объект, которую вы получите, будет заполнена, когда код будет доступен.
Первоначально шаблон модуля был определен как способ обеспечить как частную, так и общедоступную инкапсуляцию для классов в обычной разработке программного обеспечения.
При работе с шаблоном модуля нам может быть полезно определить простой шаблон, который мы используем для начала работы с ним. Здесь один, который охватывает имена-пробелы, общедоступные и частные переменные.
В JavaScript шаблон модуля используется для дальнейшего эмуляции концепции классов таким образом, что мы можем включать как общедоступные/частные методы, так и переменные внутри одного объекта, тем самым защищая отдельные части от глобальной области. Это приводит к уменьшению вероятности того, что имена наших функций конфликтуют с другими функциями, определенными в дополнительных сценариях на странице.
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.
Во-вторых, он поддерживает частные данные - поэтому в шаблоне модуля общедоступные части нашего кода могут касаться частных частей, однако внешний мир не может коснуться частных частей класса.
Недостатки
Недостатки шаблона модуля заключаются в том, что по мере того как мы обращаемся к публичным и частным членам по-разному, когда мы хотим изменить видимость, нам действительно нужно внести изменения в каждое место, в котором был использован элемент.
Мы также не можем получить доступ к закрытым членам в методах, добавленных к объекту в более поздней точке. Тем не менее, во многих случаях шаблон модуля по-прежнему очень полезен и при правильном использовании, безусловно, имеет потенциал для улучшения структуры нашего приложения.
Шаблон раскрывающего модуля
Теперь, когда мы немного знакомы с шаблоном модуля, давайте взглянем на немного улучшенную версию - образец христианского Heilmanns Revealing Module.
Модель раскрывающегося модуля возникла, когда Хейлманн был расстроен тем фактом, что ему пришлось повторить имя основного объекта, когда мы хотели вызвать один общедоступный метод из другого или получить доступ к общедоступным переменным. Он также не любил требования к шаблону модуля для чтобы переключиться на объектную литературу для того, что он хотел обнародовать.
Результатом его усилий стал обновленный шаблон, в котором мы просто определяли бы все наши функции и переменные в частной области и возвращали анонимный объект с указателями на частную функциональность, которую мы хотели раскрыть как общедоступную.
Пример использования шаблона раскрывающегося модуля можно найти ниже
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" );
<сильные > Преимущества
Этот шаблон позволяет синтаксису наших скриптов быть более последовательными. Это также делает более понятным в конце модуля, доступ к которому из наших функций и переменных можно публично публиковать, что облегчает читаемость.
Недостатки
Недостатком этого шаблона является то, что если частная функция относится к публичной функции, эта публичная функция не может быть переопределена, если требуется патч. Это связано с тем, что частная функция будет продолжать ссылаться на частную реализацию, и шаблон не применяется к публичным членам, а только к функциям.
Элементы общедоступных объектов, которые ссылаются на частные переменные, также подчиняются заметкам о правилах без исправлений выше.
Вам нужно проверить Namespace.js out!
Я опаздываю на вечеринку на 7 лет, но уже восемь лет назад я работал над этим:
Важно иметь возможность легко и эффективно создавать несколько вложенных пространств имен, чтобы организовывать и управлять сложным веб-приложением, соблюдая глобальное пространство имен 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);Если вам нужна личная область действия:
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();
else, если вы никогда не будете использовать закрытую область:
var yourNamespace = {};
yourNamespace.publicMethod = function() {
// Do something...
};
yourNamespace.publicMethod2 = function() {
// Do something...
};
yourNamespace.publicMethod();
В последнее время мне нравится мой любимый шаблон:
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() {
// ...
}
})();Мне нравится решение Jaco Pretorius, но я хотел сделать ключевое слово "this" более полезным, указав его на объект module/namespace. Моя версия skillet:
(function ($, undefined) {
console.log(this);
}).call(window.myNamespace = window.myNamespace || {}, jQuery);
Достаточно ответить на вопрос Ionuţ G. Stan, но показывая преимущества незагроможденного кода, используя var ClassFirst = this.ClassFirst = function() {...}, который использует преимущество закрытия 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
Мы можем использовать его самостоятельно таким образом:
var A = A|| {};
A.B = {};
A.B = {
itemOne: null,
itemTwo: null,
};
A.B.itemOne = function () {
//..
}
A.B.itemTwo = function () {
//..
}
Я написал еще одну библиотеку namespacing, которая немного больше похожа на пакеты/юниты на других языках. Он позволяет вам создать пакет кода JavaScript и ссылку на этот пакет из другого кода:
Package("hello", [], function() {
function greeting() {
alert("Hello World!");
}
// Expose function greeting to other packages
Export("greeting", greeting);
});
Package("example", ["hello"], function(greeting) {
// Greeting is available here
greeting(); // Alerts: "Hello World!"
});
На страницу должен быть включен только второй файл. Его зависимости (файл hello.js в этом примере) будут автоматически загружены, а объекты, экспортированные из этих зависимостей, будут использоваться для заполнения аргументов функции обратного вызова.
Вы можете найти соответствующий проект в Пакеты JS.
Если вы используете 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 в любом случае, когда я получаю около 1000 строк, потому что могу эффективно комментировать большие фрагменты кода, удаляя одну строку в make файле. Это позволяет легко возиться с вещами. Кроме того, с помощью этой технологии пространство имен появляется только один раз в прелюдии, поэтому его легко изменить, и вам не нужно повторять его внутри кода библиотеки.
Оболочка script для живой разработки в браузере при использовании make файла:
while (true); do make; sleep 1; done
Добавьте это как задачу make "go", и вы можете "уйти", чтобы обновить вашу сборку по мере вашего кода.
Моя привычка заключается в использовании функции 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 мы должны создать собственные методы для определения имен. Вот процедура, которой мы следуем в технологиях Oodles.
Зарегистрировать имяSpace Ниже приведена функция регистрации пространства имен
//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]];
}
}
Чтобы зарегистрировать пространство имен, просто вызовите указанную выше функцию с аргументом в качестве пространства имен, разделенного точкой (точка). Например Пусть ваше имя приложения - это куча. Вы можете создать пространство имен следующим методом
т
egisterNS("oodles.HomeUtilities");
registerNS("oodles.GlobalUtilities");
var $OHU = oodles.HomeUtilities;
var $OGU = oodles.GlobalUtilities;
В основном это создаст структуру NameSpaces, как показано ниже:
var oodles = {
"HomeUtilities": {},
"GlobalUtilities": {}
};
В приведенной выше функции вы регистрируете вызовы пространства имен "oodles.HomeUtilities" и "oodles.GlobalUtilities". Чтобы вызвать эти пространства имен, мы создаем переменную, то есть var $OHU и var $OGU.
Эти переменные являются ничем иным, как псевдонимом для Intializing пространства имен. Теперь, когда вы объявляете функцию, принадлежащую HomeUtilities, вы объявляете ее следующим образом:
$OHU.initialization = function(){
//Your Code Here
};
Выше инициализация имени функции и помещается в пространство имен $OHU. и вызвать эту функцию в любом месте в файлах script. Просто используйте следующий код.
$OHU.initialization();
Аналогично, с другими NameSpaces.
Надеюсь, что это поможет.