Пишем модули на javascript и загружаем их при помощи requirejs

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

Создадим файл MyClass.js и напишем в нем модуль MyClass

var MyClass = (function($, ParentClass) {
    /**
     * Конструктор является прокси для метода init
     * @constructor
     */
    function MyClass() {
        this.init.apply(this, arguments);
    }
    /**
     * В прототипе содержатся все необходимые методы и объект defaults, содержащий все свойства по умолчанию.
     * Создаем протитип из родительского конструктора или берем прототип по умолчанию.
     * Расширяем прототип с помощью jQuery.extend
     */
    $.extend(MyClass.prototype = new ParentClass(), {
        /**
         * Все свойства defaults являются переопределяемые через объект options.
         */
        defaults: {
            someProperty: "someProperty"
        }
        /**
         * Метод вызывается при создании экземпляра класса
         * @param {Object} options
         */
        , init: function (options) {
        $.extend(true, this, ParenClass.defaults, this.defaults, options);

            ParenClass.init.apply(this, arguments);
        }
        , someMethod: function() {
            console.log("someMethod");
        }
    });
    return MyClass;
}(jQuery, ParentClass));

Создадим файл ParentClass.js и напишем в нем модуль ParentClass

var ParentClass = (function($) {
    /**
     * Конструктор является прокси для метода init
     * @constructor
     */
    function ParentClass() {
        this.init.apply(this, arguments);
    }
    /**
     * В прототипе содержатся все необходимые методы и объект defaults, содержащий все свойства по умолчанию.
     * Создаем протитип из родительского конструктора или берем прототип по умолчанию.
     * Расширяем прототип с помощью jQuery.extend
     */
    $.extend(ParentClass.prototype, {
        /**
         * Все свойства defaults являются переопределяемые через объект options.
         */
        defaults: {
            someProperty: "someProperty"
        }
        /**
         * Метод вызывается при создании экземпляра класса
         * @param {Object} options
         */
        , init: function (options) {
            $.extend(true, this, this.defaults, options);
        }
        , someMethod: function() {
            console.log("someMethod");
        }
    });
    return ParentClass;
}(jQuery));

Для того чтобы загружать модули асинхронно пишем модули по принципу AMD (Asynchronous module definition):

define("MyClass", ["jquery", "ParentClass"], function($, ParentClass) {
    /**
     * Конструктор является прокси для метода init
     * @constructor
     */
    function MyClass() {
        this.init.apply(this, arguments);
    }
    /**
     * В прототипе содержатся все необходимые методы и объект defaults, содержащий все свойства по умолчанию.
     * Создаем протитип из родительского конструктора или берем прототип по умолчанию.
     * Расширяем прототип с помощью jQuery.extend
     */
    $.extend(MyClass.prototype = new ParentClass(), {
        /**</pre>
<pre>         * Все свойства defaults являются переопределяемые через объект options.
         */
        defaults: {
            , someProperty: "someProperty"
        }
        /**
         * Метод вызывается при создании экземпляра класса
         * @param {Object} options
         */
        , init: function (options) {
           $.extend(true, this, ParenClass.defaults, this.defaults, options);

           ParenClass.init.apply(this, arguments);
        }
        , someMethod: function() {
            console.log("someMethod");
        }
    });
    return MyClass;
});

И родительский класс

define("ParentClass", ["jquery"], function($) {
    /**
     * Конструктор является прокси для метода init
     * @constructor
     */
    function ParentClass() {
        this.init.apply(this, arguments);
    }
    /**
     * В прототипе содержатся все необходимые методы и объект defaults, содержащий все свойства по умолчанию.
     * Создаем протитип из родительского конструктора или берем прототип по умолчанию.
     * Расширяем прототип с помощью jQuery.extend
     */
    $.extend(ParentClass.prototype = new ParentClass(), {
        /**
         * Все свойства defaults являются переопределяемые через объект options.
         */
        defaults: {
            someProperty: "someProperty"
        }
        /**
         * Метод вызывается при создании экземпляра класса
         * @param {Object} options
         */
        , init: function (options) {
            $.extend(true, this, ParenClass.defaults, this.defaults, options);
         }
         , someMethod: function() {
             console.log("someMethod");
         }
    });
    return ParentClass;
});

То есть просто обернули в вызов функции define. Функция define определена в requirejs. Поэтому подключаем requirejs.

<script src="/Javascripts/require.js"></script>

<script src="/Javascripts/main.config.js"></script>

Файл main.config.js содержит настройки requirejs

require.config({
    baseUrl: "/"
    , paths: {
        jquery: "Javascripts/jquery-2.1.1.min"
        , ParenClass: "Javascripts/Modules/ParenClass"
        , MyClass: "Javascripts/Modules/MyClass"
    }
    // Определим зависимости вендорских модулей и экспортируемые переменные от этих модулей
    , shim: {
        jquery: {
            exports: '$'
        }
    }
});

Используем модуль так

require(["MyClass"], function(MyClass) {
    var myObj = new MyClass();
    myObj.someMethod();
});
По теме:
Внедряем js модуль в query plugin

Например написан модуль SelectControl по принципу amd : define("SelectControl", ["jquery"/* TODO uncomment: , "addJqueryPlugin" */], function($) { function SelectControl() { this.init.apply(this, Read more

Soap вызов, используя jquery.ajax

Иногда не хочется делать запрос с клиента на свой сервер, который в свою очередь, используя soap клиент, делает запрос еще на Read more

Реализуем менеджер картинок в редакторе tinymce

На официальном сайте tinymce предлагают подключить файловый менеджер MoxieManager. Но этот менеджер вовсе не бесплатный. Реализуем свой менеджер для картинок. Покажем кнопку Read more

Работаем с JQuery Deferred

В JQuery есть такой удобный объект — Deferred, который позволяет выполнять отложенные действия в зависимости от состояния, которое нужно установить Read more

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *