Шаблон библиотеки JavaScript

Question

Я пытаюсь выяснить базовый шаблон для создания библиотеки JavaScript (класса).Я хочу сделать это таким образом, чтобы он не загрязнял глобальное пространство имен кучей мусора, но позволял классу иметь переменные экземпляра и публичные методы, которые изменяют эти переменные экземпляра.

Рассмотримследующий игрушечный пример.Я хочу сделать класс Foo.Он должен содержать экземпляр экземпляра bar, который является числом.Должен существовать конструктор для Foo, который принимает число и инициализирует свой экземпляр bar этим числом.Должен быть экземплярный метод, который я могу вызвать для объекта Foo, чтобы изменить bar.Может быть, код, который использует библиотеку, выглядит следующим образом:

var foo1 = new Foo(1);
var foo2 = new Foo(2);
console.log(foo1.bar); // should print "1"
console.log(foo2.bar); // should print "2"
foo2.changeBar(42);
console.log(foo1.bar); // should print "1"
console.log(foo2.bar); // should print "42"

Результирующий foo.js будет использоваться веб-приложением и, следовательно, включен через тег script в HTML.

IЯ провел небольшой поиск в Google, но мне еще не удалось найти единого краткого общего описания того, как разрабатывать класс JavaScript (используемый в качестве библиотеки).

Answer 1

(function () {
    Foo = function (num) {
         this.changeBar(num);
    };

    var privateMethod = function (x) {
        if (this.bar === 999) {
            this.bar = x;
        }
    };

    Foo.prototype.changeBar = function (num) {
        this.bar = num;
        privateMethod.call(this, 1);
    };

}());

Это самый простой способ сделать это. Вам не нужно включать определение в замыкание, это скорее стиль.

Answer 2

Опираясь на ответ Эвана, чтобы продемонстрировать еще несколько возможностей.Однако в большинстве нормальных случаев используются только некоторые из них.

(function() {
    //When we create variables inside a function they can only be seen by other
    // inner functions. Wraping all our code here makes sure noone gets to see
    // the private stuff.

    //The first opening parenthesis is required for Javascript to parse it
    //correctly though


    //this is the constructor function
    //Note how we set a global variable (Foo) to make it available outside.
    Foo = function(num, another_num) {

        this.changeBar(num);

        //sometimes you will want to make a method that modifies a variable
        //that can't be acessed via this.xxx. You can use a closure here for that
        //(there are some performance considerations though)

        this.baz = function(){
            console.log(another_num);
        }

        //Setting methods "by hand" like this is also useful if you want to
        //do multiple inheritance, since you can just set all methods of the
        //second class by hand here if you want.
    }

    //Things on Foo.prototype will be available for all Foo objects,
    // via prototypal inheritance magic.
    Foo.prototype.changeBar = function(num) {
        this.bar = num;
    }

    var a_secret_variable = 42;

    function my_private_function(){
        console.log(a_secret_variable);
    }

    //All private variables can be normaly used (by functions that can see them).
    Foo.prototype.use_magic = function(){
        my_private_function();
    }

}());
 //The "fake" function is imediatelly called,
 //so in the end all it does is create a inner scope.

Answer 3

Шаблон модуля , вероятно, самый популярный шаблон, используемый сегодня.

var Foo = (function() {
    var _thisIsAPrivateVar;

    function thisIsAPrivateMethod() {
    }

    return {
        thisIsAPublicMethod : function() {
            // can still access the "private" variable and method
        }
    };

})();