Writerim Sep 30 2016 at 11:30

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

3 min

11K

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

Преамбула

Я не силен в разработке на 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

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

Буду рад конструктивной критике.

Tags:

Hubs: