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

Привет Хабр! Хочу поделится своей наработкой. Сразу скажу для каких проектов может быть применима моя библиотека — для статичных страниц, где есть работа с данными из БД через выгрузки/загрузки через 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

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

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

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 27

    +17
    Переводить на какой то фреймворк проект не дают, по той простой причине — придется изучать его всей команде.

    Поэтому давайте напишем свой, который тоже всем надо изучать, но который только мы и поддерживаем.

      0
      Ну это не фреймворк и его внедрение и поддержка гораздо проще, чем то что я успел посмотреть. Он не такой монструозный, чтобы его учить.
        +5

        Типичная аргументация от NIH.

          +1
          Прошу прощения за мой вопрос — что или кто это?
    +3
    почему не взять модели бекбона? он простой как палка, документации на пол часа неспешного чтения.
      0

      Тогда уж VUE.JS.
      Он максимально похож на то что пытается изобразить автор. И с jQuery хорошо дружит.

        –1
        Ну мне необходимо было работа только с моделями, так как все остальное в нем — «стрельба по воробьям из пушки». Привлекать целый фреймворк и взять из него только 30% возможностей было бы разумно при постепенной миграции на бэкбоне. Боюсь мы никогда себе этого не сможем позволить. Но да, из всех просмотренных я бы остановился на нем.
          +3

          Ну, 30% — это нормально.

            +1
            Аргументируйте тем, что Backbone — не фреймворк, а библиотека. Возьмите из него то, что вам нужно, отальное можно со спокойной душой оставить за бортом. Между компонентами бэкбона очень слабые связи — это делает его превосходным инструментом в случаях, похожих на ваш.
          –1
          >для статичных страниц, где есть работа с данными из БД через выгрузки/загрузки через AJAX

          взаимопротиворечивые тексты по разные стороны от запятой :)

          >Переводить на какой то фреймворк проект не дают, по той простой причине — придется изучать его всей команде.

          Та при чем тут, блеать, фреймворк.
          Если код не рефакторить, то каша будет и на нем.

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

          Если это глобальная переменная, то смысл создавать через new?

          П.С.
          Только это вряд ли фреймворк, а датабиндинг. :)
            +1
            взаимопротиворечивые тексты по разные стороны от запятой :)

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

              +1
              Ага, это типа динамическая статическая страница.
              Шикардос.

              Из серии:
              Вровень выступать.
              7 параллельных взаимоперпендикулярных прямых.
            +1

            А можете в виде резюме написать, какие конкретно задачи решает фреймворк?

              +2
              frooze

              Это что за неизвестное слово?
              Freeze + boose?

                0
                Наверное имелось ввиду, что freeze-froze-frozen, но не получилось… :) А так как, видимо, проект уже написан и используется в проде, то так и останется :)
                  0

                  Придется им дальше жить с "напиться и замерзнуть". =)

                  0
                  Спасибо, что указали на ошибку.
                  0
                  2016г на дворе, если хочется неизменяемое свойство — Object.freeze вам в помощь
                    +1
                    Ну это не совсем то что нужно было. Это свойство «замораживает» весь объект, а не выбранную его часть.
                      +1
                      ок
                      let model = {};
                      Object.defineProperty(model, "myProp", {
                          configurable: false,
                          writable: false,
                          value: "my frozen value"
                      });
                      

                      +1
                      Несмотря на 2016 год, Object.freeze по-прежнему замедляет работу с объектом в несколько раз. А вот defineProperty — да, вполне нормально.
                      0
                      промахнулся ответом
                        +2

                        А почему исходники в таком интересном месте, а не на Github?

                          0

                          Крайний раз когда в одном из скриптовых файлов в рельсовом проекте мне пришлось передергивать около 5 компонентов на странице через jquery я просто плюнул и разобрался с reactjs

                            –1
                            Ты просто ниасилил :)
                              0

                              js.erb в рельсах — тот еще костыль, на самом деле для ленивых. и дергать из него обновление dom в нескольких местах — это пованивает.
                              ReactJS в этом плане оказался приятен, прост даже чайнику вроде меня в этих всех js

                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                          Самое читаемое