如何在 JavaScript 中创建命名空间,以便我的对象和函数不会被其他同名对象和函数覆盖?我使用了以下内容:
if (Foo == null || typeof(Foo) != "object") { var Foo = new Object();}
有没有更优雅或更简洁的方式来做到这一点?
如何在 JavaScript 中创建命名空间,以便我的对象和函数不会被其他同名对象和函数覆盖?我使用了以下内容:
if (Foo == null || typeof(Foo) != "object") { var Foo = new Object();}
有没有更优雅或更简洁的方式来做到这一点?
我使用Enterprise jQuery site 上的方法:
这是他们的示例,展示了如何声明私有和公共属性和函数。一切都是作为一个自动执行的匿名函数完成的。
(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
argument 是 value 变量的来源undefined
。我不确定它今天是否仍然相关,但是在使用旧浏览器/JavaScript 标准(ecmascript 5,javascript < 1.8.5 ~ firefox 4)时,全局范围变量undefined
是可写的,因此任何人都可以重写它的值。第三个参数(当未传递值时)创建一个名为的变量,该变量undefined
的作用域为命名空间/函数。因为在创建命名空间时没有传递任何值,所以它默认为 valueundefined
。
我喜欢这个:
var yourNamespace = {
foo: function() {
},
bar: function() {
}
};
...
yourNamespace.foo();
有没有更优雅或更简洁的方式来做到这一点?
是的。例如:
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(){}
这两个文件可以同时存在或分开而不会发生冲突。
以下是 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('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
likeself
和 assign 。local.onTimeout
模块模式最初被定义为一种为传统软件工程中的类提供私有和公共封装的方法。
在使用模块模式时,我们可能会发现定义一个简单的模板来开始使用它很有用。这是一个涵盖名称间距、公共和私有变量的内容。
在 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 的角度来看是这样。
其次,它支持私有数据——因此,在模块模式中,我们代码的公共部分可以接触到私有部分,而外界无法接触到类的私有部分。
缺点
模块模式的缺点是,当我们以不同的方式访问公共和私有成员时,当我们希望更改可见性时,我们实际上必须对使用该成员的每个地方进行更改。
我们也不能在稍后添加到对象的方法中访问私有成员。也就是说,在许多情况下,模块模式仍然非常有用,如果使用得当,肯定有可能改进我们应用程序的结构。
显示模块模式
现在我们对模块模式稍微熟悉了一点,让我们来看一个稍微改进的版本——Christian Heilmann 的 Revealing Module 模式。
显示模块模式的出现是因为 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" );
好处
这种模式允许我们脚本的语法更加一致。它还在模块的末尾更清楚地说明了我们的哪些函数和变量可以公开访问,从而简化了可读性。
缺点
这种模式的一个缺点是,如果一个私有函数引用一个公共函数,那么如果需要补丁,这个公共函数就不能被覆盖。这是因为私有函数将继续引用私有实现,并且该模式不适用于公共成员,仅适用于函数。
引用私有变量的公共对象成员也受上述无补丁规则注释的约束。
如果您需要私有范围:
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();
您可以声明一个简单的函数来提供命名空间。
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!";
我创建了受 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
})();
我迟到了 7 年,但 8 年前为此做了很多工作:
重要的是能够轻松有效地创建多个嵌套命名空间以保持复杂的 Web 应用程序的组织和可管理性,同时尊重 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);
在更大的应用程序中,这只需要在页面加载开始时定义一次(对于基于客户端的 Web 应用程序)。如果保留其他文件,则可以重用命名空间功能(在上面作为“可选”包含)。在最坏的情况下,如果这个函数被重新声明了几次——它只有几行代码,如果缩小的话,代码会更少。
我对命名空间使用以下语法。
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/
我认为你们都为这样一个简单的问题使用了太多的代码。无需为此进行回购。这是一个单行函数。
namespace => namespace.split(".").reduce((last, next) => (last[next] = (last[next] || {})), window);
尝试一下 :
// --- definition ---
const namespace = name => name.split(".").reduce((last, next) => (last[next] = (last[next] || {})), window);
// --- Use ----
const c = namespace("a.b.c");
c.MyClass = class MyClass {};
// --- see ----
console.log("a : ", a);
我最喜欢的模式最近变成了这样:
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() {
// ...
}
})();
当然,return 可以放在最后,但如果后面只有函数声明,那么更容易看到命名空间是什么,以及暴露了哪些 API。
在这种情况下使用函数表达式的模式会导致不查看整个代码就无法知道公开了哪些方法。
// circle.js
export { name, draw, reportArea, reportPerimeter };
// main.js
import * as Circle from './modules/circle.js';
// draw a circle
let circle1 = Circle.draw(myCanvas.ctx, 75, 200, 100, 'green');
Circle.reportArea(circle1.radius, reportList);
Circle.reportPerimeter(circle1.radius, reportList);
这会抓取 circle.js 中所有可用的导出,并将它们作为 object 的成员使用Circle
,从而有效地赋予它自己的命名空间。
我喜欢 Jaco Pretorius 的解决方案,但我想通过将“this”关键字指向模块/命名空间对象来使其更有用。我的煎锅版本:
(function ($, undefined) {
console.log(this);
}).call(window.myNamespace = window.myNamespace || {}, jQuery);
我编写了另一个命名空间库,它的工作方式更像其他语言中的包/单元。它允许您创建一个 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)将自动加载,从这些依赖项导出的对象将用于填充回调函数的参数。
您可以在Packages 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();
一旦达到大约 1000 行,我还是更喜欢使用 Makefile,因为我可以通过删除 makefile 中的一行来有效地注释掉大量代码。它使摆弄东西变得容易。此外,使用这种技术,名称空间只在前奏中出现一次,因此很容易更改,您不必在库代码中不断重复它。
使用 makefile 时在浏览器中进行实时开发的 shell 脚本:
while (true); do make; sleep 1; done
将此添加为“开始”任务,您可以“开始”以在编写代码时保持构建更新。
Ionuț G. Stan 的回答的相当后续,但通过 using 展示了整洁代码的好处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 () {
//..
}
在 JavaScript 中,没有预定义的方法来使用命名空间。在 JavaScript 中,我们必须创建自己的方法来定义 NameSpaces。这是我们在 Oodles 技术中遵循的程序。
注册名称空间 下面是注册名称空间的函数
//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]];
}
}
'.'
要注册一个命名空间,只需调用上面的函数,参数为用(点)分隔的命名空间。例如让您的应用程序名称为 oodles。您可以通过以下方法创建命名空间
registerNS("oodles.HomeUtilities");
registerNS("oodles.GlobalUtilities");
var $OHU = oodles.HomeUtilities;
var $OGU = oodles.GlobalUtilities;
基本上它将在后端创建如下所示的 NameSpaces 结构:
var oodles = {
"HomeUtilities": {},
"GlobalUtilities": {}
};
在上面的函数中,您注册了一个名为"oodles.HomeUtilities"
and的命名空间"oodles.GlobalUtilities"
。为了调用这些命名空间,我们创建了一个变量,即 var$OHU
和 var $OGU
。
这些变量只不过是初始化命名空间的别名。现在,每当你声明一个属于HomeUtilities
你的函数时,都会像下面这样声明它:
$OHU.initialization = function(){
//Your Code Here
};
上面是函数名初始化,它被放入一个命名空间$OHU
。并在脚本文件中的任何位置调用此函数。只需使用以下代码。
$OHU.initialization();
同样,与另一个 NameSpaces。
希望能帮助到你。
我的习惯是使用函数 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 默认不支持命名空间。因此,如果您创建任何元素(函数、方法、对象、变量),那么它就会变成全局并污染全局命名空间。让我们以定义两个没有任何命名空间的函数为例,
function func1() {
console.log("This is a first definition");
}
function func1() {
console.log("This is a second definition");
}
func1(); // This is a second definition
它总是调用第二个函数定义。在这种情况下,命名空间将解决名称冲突问题。
JavaScript 还没有命名空间的本地表示,但 TypeScript 有。
例如,您可以使用以下 TS 代码 ( playground )
namespace Stack {
export const hello = () => console.log('hi')
}
Stack.hello()
如果您无法将代码更新为 TS,您至少可以使用 TS 在为命名空间生成 JS 输出时使用的模式,如下所示:
var Stack;
(function (Stack) {
Stack.hello = () => console.log('hi');
})(Stack || (Stack = {}));
Stack.hello();