A framework for simple jQuery projects

Writerim September 30, 2016 at 11:30

A framework for simple jQuery projects

From the sandbox

Hi Habr! I want to share my best practices. I must say right away for which projects my library may be applicable - for static pages, where there is work with data from the database through uploads / downloads via AJAX. Suppose you have a simple website on some CMS and you need to make a calculator based on the products in the database, then calculate the cost and adjust it. This is just an ideal task for this library.

Preamble

I am not good at javascript development, but I have to understand and write different types of Wishlist for work. Interfaces are complicated, the code is duplicated, supplemented, and as a result, a rather messy mess without documentation and structure. No, no you don’t think. Everything begins harmlessly:

- It is necessary to make this table collapse.
Week later.
- It is necessary that this data is highlighted in columns or rows.
Week later.
- It is necessary that graphs are drawn from the columns, and from the rows the user can then configure the data for export to the table.
Week later.
- We need to do what we have done, copy it to the rights assignment page and change the data for users and groups and slightly change the logic of work.

Etc. For more than 2 years this has been accumulating, accumulating and accumulating. They don’t allow the project to be translated into any framework, for the simple reason that the whole team will have to study it. And neither I nor they are sure that we will spend time studying it, and then it will not be useful anywhere.

Plot

I began to write a layer for investment work with objects from the database. Create new items to insert, delete, filter.

User Model Example

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

The first argument is the name of the model, which will subsequently become a global variable.
The second is an object with a set of model properties and a description of these properties.

Model Link

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
*/

Associations of objects with objects are links to the TObject._cache cache.

Of the property descriptions, I can mention 3 so far - iskey , type , isfrooze .

iskey - used to create a unique key for an object in the cache. If it is one, then the object can be accessed through the id method, knowing its key in advance.

Example

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

type - value types. While there are several of them - bool, int, string, function. The latter is used to link objects. It is planned to create your own.

isfrooze is a property that does not change anymore when populated. This is done in case you are afraid of accidentally changing a property.

There are several properties of models. all - unload all objects:

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

find ({property: value}) - unload all objects matching the rule:

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

id (ident) - unloading one object by a given key:

User.id(10) // return Object

For two-way communication between the DOM and objects, a jQuery jsdata method is created, similar to data, but it associates the object with the DOM. You can get the connection through the getDOM model method:

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

» Link to the project

I will be glad to constructive criticism.

Tags:

A framework for simple jQuery projects