如何建立JavaScript的命名空间和类是否正确？(How to set up JavaScrip

-->

如何建立JavaScript的命名空间和类是否正确？(How to set up JavaScrip

2019-06-26 13:23发布

站内文章 / 前沿技术

28 0

我欲成王，谁敢阻挡

女 | 书童

私信

这似乎有这么多的方法来建立一个JavaScript应用所以它是混乱的，以哪一个是正确的还是最好的。在那里以下技术的任何差异或这样做的更好的办法？

MyNamespace.MyClass = {
    someProperty: 5,
    anotherProperty: false,

    init: function () {
        //do initialization
    },

    someFunction: function () {
        //do something
    }
};

$(function () {
    MyNamespace.MyClass.init();
});

其他方式：

MyNamespace.MyClass = (function () {
    var someProperty = 5;
    var anotherProperty = false;

    var init = function () {
        //do something
    };

    var someFunction = function () {
        //do something
    };

    return {
        someProperty: someProperty
        anotherProperty: anotherProperty
        init: init
        someFunction: someFunction
    };
}());

MyNamespace.MyClass.init();

第一种技术给人的感觉更像一个类。我从服务器端背景的人，如果这有差别。第二种方法似乎更多余的，有点尴尬，但我看到这个用了很多了。是否有人可以帮助提供一些线索，并建议继续前进的最好方式？我想创建大量的类互相交谈一个应用程序。

Answer 1:

如果你不想做的那些事。

做一个javascript“类”：

var MyClass = function () {

    var privateVar; //private
    var privateFn = function(){}; //private 

    this.someProperty = 5;  //public
    this.anotherProperty = false;  //public
    this.someFunction = function () {  //public
        //do something
    };

};

MyNamespace.MyClass = new MyClass();

一个静态瓦尔：

var MyClass = (function(){

    var static_var; //static private var

    var MyClass = function () {

        var privateVar; //private
        var privateFn = function(){}; //private 

        this.someProperty = 5;  //public
        this.anotherProperty = false;  //public
        this.someFunction = function () {  //public
            //do something
        };
    };

    return MyClass;

})();

MyNamespace.MyClass = new MyClass();

着有“构造”（所有的例子有“构造”，这一个只是有参数一起工作）：

var MyClass = function (a, b c) {

    //DO SOMETHING WITH a, b, c <--

    var privateVar; //private
    var privateFn = function(){}; //private 

    this.someProperty = 5;  //public
    this.anotherProperty = false;  //public
    this.someFunction = function () {  //public
        //do something
    };

};

MyNamespace.MyClass = new MyClass(1, 3, 4);

所有你可以做上面的：

MyNamespace.MyClass.someFunction();

但是你不能（从外面）做：

MyNamespace.MyClass.privateFn(); //ERROR!

Answer 2:

第一个例子是一个简单的文本对象 -它不能被实例化，没有私有成员。第二个例子有一些不正确的语法（ var someProperty: 5应该是var someProperty = 5 ），但使用的封闭到自调用匿名函数内封装内部私有状态。

第二种方法查找封装私有成员更好，但可以变得更加“面向对象”通过成为一个实例化类：

MyNamespace.MyClass = function() { ... };
MyNamespace.MyClass.prototype.someProperty = 'foo';

然后，你可以用“新”关键字实例吧：

var aClass = new MyNamespace.MyClass();
aClass.init(...);

Answer 3:

我使用以下语法实例化类命名空间

 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/

Answer 4:

为什么你不应该使用

 return { methodName : methodDelegate}

像在第二实施例：

MyNamespace.MyClass = (function () {
    var someProperty = 5;

    var init = function () {
        //do something
    };

    return {
        someProperty: someProperty
        someFunction: someFunction
    };
}());

MyNamespace.MyClass.init();

当您使用命名空间，你必须考虑一下为约宣言，而不是实例。

MyNamespace = {};
MyNamespace.sub = {};
MyNamespace.anotherSub = {};
MyNamespace.sub.MyClass = (function () {

    var static_var; //static private var

    var MyClass2 = function () {

        var privateVar; //private
        var privateFn = function () { }; //private 

        this.someProperty = 5;  //public
        this.anotherProperty = false;  //public
        this.someFunction = function () {  //public
            //do something
        };
    };

    return MyClass2;

})();
debugger;

var c1 = new MyNamespace.sub.MyClass();
c1.someProperty = 1; // creates 5->1.

var c2 = new MyNamespace.sub.MyClass();
c2.someProperty = 2;  // creates 5->2. c1 is still 1



debugger;
var myClass = function () {
    var someProperty = 5;
    var anotherProperty = false;

    var init = function () {
        //do something
    };

    var someFunction = function () {
        //do something
    };

    return {
        someProperty: someProperty,
        anotherProperty: anotherProperty,
        init: init,
        someFunction: someFunction
    };
};


MyNamespace.MyClass = myClass();
var c2 = MyNamespace.MyClass;
// how  are planning to create one more object, while it's a reference? copy      //the whole one?

c2.someProperty = 2; // changes 5 -> 2
var c3 = MyNamespace.MyClass.init(); // create 2 instead of 5

c3.someProperty = 3;    // changes c3 and c3 from 2 to 3.
console.log(c2.someProperty + c3.someProperty);

而且没有梅特多少模块抗图案很受欢迎。宣言使您能够使用不同的情况下，同样的代码在其他开发商的预期方式的能力。的代码的其读数增加的质量和简单性。任何开发人员的目标是编写一个简单的代码来阅读，而不是更短的或干的 - 但简单的阅读和其他开发人员可以通情达理的。首先降低了错误的号码。（c）中S.麦康奈尔

Answer 5:

如何结合命名空间和类的声明：

var ns = { // your namespace
    my_value: 1, // a value inside the namespace to avoid polluting
    MyClass: function() { // a class inside the namespace
        this.class_property: 12,
        this.class_method: function() {
            console.log("My property: " + this.class_property);
        }
    },
    myFunction: function() { // a function inside a namespace
        console.log("I can access namepsace value if you don't use 'new': " + this.my_value);
    }
};

访问你的价值：