Мы развиваем и поддерживаем свой 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',
];
}
Popular
Релиз SkeekS CMS 5.5.11 работает с yii2 2.0.24
- Aug 13, 2019
Как отправить форму в yii2 и skeeks cms через ajax?
- Apr 18, 2019