Как стать автором
Обновить

Фреймворк для простых проектов на jQuery

Время на прочтение3 мин
Количество просмотров11K
Привет Хабр! Хочу поделится своей наработкой. Сразу скажу для каких проектов может быть применима моя библиотека — для статичных страниц, где есть работа с данными из БД через выгрузки/загрузки через AJAX. Допустим, у вас есть простой сайт на какой-нибудь CMS и вам нужно сделать калькулятор исходя из продуктов в БД, затем посчитать стоимость и подкорректировать. Вот это прямо идеальная задача для этой библиотеки.
image


Преамбула


Я не силен в разработке на javascript, но по работе приходится разбираться и писать хотелки разного рода. Интерфейсы усложняются, код дублируется, дополняется и в итоге получается довольно-таки сумбурная каша без документации и структуры. Нет, нет вы не подумайте. Все начинается безобидно:

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

И так далее. Более 2 лет это копилось, копилось и копилось. Переводить на какой то фреймворк проект не дают, по той простой причине — придется изучать его всей команде. А ни я, ни они не уверены в том, что мы потратим на его изучение время, а потом он нигде не пригодится.

Фабула


Я начал писать прослойку для облечения работы с объектами из базы данных. Создание новых элементов для вставки, удаление, фильтрация.

Пример модели пользователя
new Model( 'User' ,{
  'name' : {
    type : 'string',
    def : 'noname',
    iskey : true
  },
  'lastname' : {
    type : 'string'
  }
})
new User({name:'Вася' , 'lastname' : 'Пупкин'})

Первым аргументом передается название модели, которое впоследствии станет глобальной переменной.
Вторым — объект с набором свойств модели и описанием этих свойств.

Связь моделей
new Model( 'User' ,{
  'name' : {
    type : 'string',
    def : 'noname',
    iskey : true
  },
  'lastname' : {
    type : 'string'
  }
})

new Model( 'Group' ,{
  'name' : {
    type : 'string',
    def : 'noname',
    iskey : true
  }
})


new Model( 'UserInGroup' ,{
  'user' : {
    type : function(_name){
     return new User({name:_name})
    },
  'group' : {
    type : function(_name){
     return new Group({name:_name})
    },
  }
  }
})
new User({name:'Вася' , 'lastname' : 'Пупкин'})
new Group({name:'usergroup'})
var a = new UserInGroup({ user : 'Вася' , group : 'usergroup' })

console.log( a )
/*
 user : Object
   name
   lastname
 group : Object
    name
*/

Связи объектов с объектами — это ссылки на кеш TObject._cache.

Из описаний свойств могу отметить пока 3 — iskey, type, isfrooze.

iskey — используется для создания уникального ключа у объекта в кеше. Если он один, то к объекту можно обратится через метод id, заранее зная его ключ.

Пример
new Model( 'User' ,{
  'name' : {
    type : 'string',
    def : 'noname',
    iskey : true
  },
  'lastname' : {
    type : 'string'
  }
})
new User({name:'Вася' , 'lastname' : 'Пупкин'})
User.id('Вася')

type — типы значений. Пока их несколько — bool, int, string, function. Последнее используется для связывания объектов. Планируется создание собственных.

isfrooze — свойство, которое при заполнении больше не меняется. Это сделано на случай, если вы боитесь нечаянно поменять свойство.

Есть несколько свойств моделей. all — выгрузка всех объектов:

User.all() // return [ Object , Object]

find({ property: value }) — выгрузка всех оюъектов подходящих по правило:

User.find({name:'Vasya'}) // return [ Object ]

id( ident ) — выгрузка одного объекта по заданному ключу:

User.id(10) // return Object

Для двусторонней связи DOM и объектов создан метод jQuery jsdata, аналогичный data, но он связывает объект с DOM. Получить связь можно через метод модели getDOM:

$('<div/>').addClass('test').jsdata('model' , User.id(10))
User.id(10).getDOM('model') // return DOM
$('<div/>').jsata('model') // return Object

» Ссылка на проект

Буду рад конструктивной критике.
Теги:
Хабы:
+7
Комментарии28

Публикации

Изменить настройки темы

Истории

Работа

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн