Javascript framework

Мы развиваем и поддерживаем свой js фреймворк.

Он позволяет легко писать собственные js классы и наследовать их друг от друга.

Живет он в своем неймспейсе sx (откройте консоль разработчика и напишите в ней sx)

Базовые классы

sx.classes.Entity
sx.classes.Component
sx.classes.AjaxQuery
sx.classes.Cookie

Это не полный перечень базовых классов, но основной.

Пространство видимости

Как уже было сказано, все что касается фреймворка живет в одном глобальном пространстве sx и это позволяет не мусорить в глобальной области видимости.

Если же нужно создать класс внутри области видимости нужно использовать следующую конструкцию.

sx.createNamespace('test.classes', sx);

Это позволит создавать классы внутри пространства sx.test.classes

Например:

sx.test.classes.Entity = sx.classes.Entity.extend({

})

Наследование

При этом Component наследуюется от Entity и расширяет его возможности.

Пример конструкции наследования:

sx.classes.Product = sx.classes.Entity.extend({
    //Тут код расширяющий возможности класса Entity
    
    getCustomName: function()
    {
        return this.get('name') + " (" + this.get('article') + ")";
    }
});

Использование классов

Для того чтобы использовать класс нужно создать его инстанс так (используется пример выше)

var Product = new sx.classes.Product({
    "name" : "Подушка",
    "article" : "A15226",
});

Product.get('name'); //Подушка
Product.get('article'); //A15226
Product.getCustomName(); //Подушка (A15226)

Product.set('name', 'Новое название');
Product.get('name'); //Новое название

//объект продукт можно положить так же в пространство sx
sx.Product = new sx.classes.Product({
    "name" : "Подушка",
    "article" : "A15226",
});

 

Переопределение родительского конструктора

sx.classes.ProductCustom = sx.classes.Product.extend({
    
    construct: function (name, opts)
    {
        opts = opts || {};
        this.set('name', name);
        this.applyParentMethod(sx.classes.Product, 'construct', [opts]);
    }
    
});

//Тогда продукт нужно создавать так

new sx.classes.ProductCustom("Подушка", {
    "article" : "A15226",
});

Базовый компонент

Базовый sx.classes.Component наследуется от sx.classes.Entity и предоставляет ряд полезных методов

sx.classes.Demo = sx.classes.Component.extend({

    _init: function()
    {
        //Тут код который исполняется сразу же в момент создания класса
    },

    _onDomReady: function()
    {
        //Тут написать код которые выполнится когда сработает событие понятное из названия метода
    },

    _onWindowReady: function()
    {
        //Тут написать код которые выполнится когда сработает событие понятное из названия метода
    }
});

Подключение библиотеки к проекту

в шаблоне:

<?

//Минимум
skeeks\sx\assets\Core::register($this);
//Или более полную библиотеку
skeeks\sx\assets\Custom::register($this);

?>

В других блоках

/**
 * Class AppAsset
 * @package frontend\assets
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/fast.css',

    ];
    public $js = [
        'js/app.js',
    ];
    public $depends = [
        '\skeeks\sx\assets\Custom',
    ];
}